From 0b2a1e59e0400516847bbf194bac6ee5ac02062d Mon Sep 17 00:00:00 2001
From: Brian Hanson <brian@brianhanson.net>
Date: Fri, 25 Sep 2026 16:04:54 -0500
Subject: [PATCH 1/3] Upgrade TanStack Table to v9

Moves @tanstack/vue-table and @tanstack/table-core from 8.21.3 to 9.2.4.

- Register a shared feature set (craftTableFeatures) for every CP table,
  since v9 only exposes a feature's APIs to tables that register it
- useVueTable -> useTable, drop getCoreRowModel, read state via atoms
- Add the feature-set generic to column helpers, types and ColumnMeta
- Make AdminTable/BaseElementIndex/DataTable generic over the row type,
  as v9 tables are invariant in their data type
- Keep the select-all checkbox from showing indeterminate when every row
  is selected (getIsSomeRowsSelected now includes the all-selected case)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 package.json                                  |   4 +-
 pnpm-lock.yaml                                |  34 ++--
 resources/js/common/types/globals.d.ts        |   6 +-
 .../components/AdminTable.stories.ts          |   7 +-
 .../admin-table/components/AdminTable.vue     |   5 +-
 .../composables/useEditableTable.ts           |  96 ++++++----
 .../helpers/createCraftColumnHelper.ts        |  71 ++++---
 .../js/modules/admin-table/tableFeatures.ts   |  29 +++
 .../composables/useAssetFolderActions.ts      |  15 +-
 .../assets/composables/useAssetMoveDrag.ts    |   6 +-
 .../useModalElementIndex.ts                   |  10 +-
 .../components/BaseElementIndex.stories.ts    |   7 +-
 .../elements/components/BaseElementIndex.vue  |  11 +-
 .../elements/components/DataTable.stories.ts  |   7 +-
 .../elements/components/DataTable.test.ts     |   4 +-
 .../modules/elements/components/DataTable.vue |  23 ++-
 .../composables/useElementIndexPage.ts        |  12 +-
 .../useElementIndexSelection.test.ts          |  16 +-
 .../composables/useElementIndexSelection.ts   |  23 ++-
 .../useElementIndexStructure.test.ts          |   7 +-
 .../composables/useElementIndexTable.ts       |   4 +-
 .../js/modules/elements/fixtures/elements.ts  |  42 +++--
 .../plugin-manager/components/PluginsList.vue |   7 +-
 .../TwoStepVerification.vue                   |  10 +-
 .../utilities/components/Migrations.vue       |  44 ++---
 .../deprecation-errors/DeprecationErrors.vue  |  59 +++---
 .../queue-manager/QueueManagerIndex.vue       | 104 ++++++-----
 resources/js/pages/graphql/schemas/Index.vue  |   7 +-
 resources/js/pages/graphql/tokens/Index.vue   |   7 +-
 resources/js/pages/settings/assets/Index.vue  |  10 +-
 .../settings/assets/transformers/Index.vue    | 128 +++++++------
 .../settings/assets/transforms/Index.vue      | 104 ++++++-----
 .../js/pages/settings/entry-types/Index.vue   |  66 ++++---
 resources/js/pages/settings/fields/Index.vue  | 175 +++++++++---------
 .../js/pages/settings/sections/Index.vue      |  43 +++--
 resources/js/pages/settings/sites/Index.vue   | 149 ++++++++-------
 .../js/pages/settings/users/groups/Index.vue  |   7 +-
 .../js/pages/settings/workflows/Index.vue     |  46 +++--
 resources/js/pages/users/Passkeys.vue         |  10 +-
 resources/js/pages/users/SignInProviders.vue  |  10 +-
 40 files changed, 812 insertions(+), 613 deletions(-)
 create mode 100644 resources/js/modules/admin-table/tableFeatures.ts

diff --git a/package.json b/package.json
index 2facf31e94c..f5882c9deeb 100644
--- a/package.json
+++ b/package.json
@@ -94,8 +94,8 @@
     "@inertiajs/vite": "^3.0.3",
     "@inertiajs/vue3": "^3.0.3",
     "@simplewebauthn/browser": "catalog:",
-    "@tanstack/table-core": "^8.21.3",
-    "@tanstack/vue-table": "^8.21.3",
+    "@tanstack/table-core": "^9.2.4",
+    "@tanstack/vue-table": "^9.2.4",
     "@uppy/aws-s3": "^6.1.0",
     "@uppy/core": "^6.0.1",
     "@uppy/drop-target": "^5.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d4f5a7d4a4d..2f24b6f9390 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -353,11 +353,11 @@ importers:
         specifier: 'catalog:'
         version: 13.3.0
       '@tanstack/table-core':
-        specifier: ^8.21.3
-        version: 8.21.3
+        specifier: ^9.2.4
+        version: 9.2.4
       '@tanstack/vue-table':
-        specifier: ^8.21.3
-        version: 8.21.3(vue@3.5.33(typescript@6.0.3))
+        specifier: ^9.2.4
+        version: 9.2.4(vue@3.5.33(typescript@6.0.3))
       '@uppy/aws-s3':
         specifier: ^6.1.0
         version: 6.1.0(@uppy/core@6.0.1)
@@ -3675,9 +3675,12 @@ packages:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
-  '@tanstack/table-core@8.21.3':
-    resolution: {integrity: sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg==}
-    engines: {node: '>=12'}
+  '@tanstack/store@0.11.1':
+    resolution: {integrity: sha512-mzTOBhypOuDJAy/D8n2MfUZ1HFkXnmSETviRyhqEC8LUE7/IZQExOTxMANj3KjTofYTkFNpBY67qaVrT41YccA==}
+
+  '@tanstack/table-core@9.2.4':
+    resolution: {integrity: sha512-GwdDyGGr6UXAtubF14yAwcXvdaogqfsQgIk89Suebjxob/Rjq2xvfmXsjDF1rQmKmhHsJm9TOY7myxv3i6geJw==}
+    engines: {node: '>=20'}
 
   '@tanstack/virtual-core@3.13.12':
     resolution: {integrity: sha512-1YBOJfRHV4sXUmWsFSf5rQor4Ss82G8dQWLRbnk3GA4jeP8hQt1hxXh0tmflpC0dz3VgEv/1+qwPyLeWkQuPFA==}
@@ -3685,9 +3688,9 @@ packages:
   '@tanstack/virtual-core@3.13.18':
     resolution: {integrity: sha512-Mx86Hqu1k39icq2Zusq+Ey2J6dDWTjDvEv43PJtRCoEYTLyfaPnxIQ6iy7YAOK0NV/qOEmZQ/uCufrppZxTgcg==}
 
-  '@tanstack/vue-table@8.21.3':
-    resolution: {integrity: sha512-rusRyd77c5tDPloPskctMyPLFEQUeBzxdQ+2Eow4F7gDPlPOB1UnnhzfpdvqZ8ZyX2rRNGmqNnQWm87OI2OQPw==}
-    engines: {node: '>=12'}
+  '@tanstack/vue-table@9.2.4':
+    resolution: {integrity: sha512-GSD6ZkeQvADs6u9KUyhUuiD+qYgA+Lt6hTBDSEadCBIbC8q2SaoHzseLwgDKVUnRClTIMj9+NwCEF+Gp3P7ChQ==}
+    engines: {node: '>=20'}
     peerDependencies:
       vue: '>=3.2'
 
@@ -12761,15 +12764,20 @@ snapshots:
       react: 19.2.5
       react-dom: 19.2.5(react@19.2.5)
 
-  '@tanstack/table-core@8.21.3': {}
+  '@tanstack/store@0.11.1': {}
+
+  '@tanstack/table-core@9.2.4':
+    dependencies:
+      '@tanstack/store': 0.11.1
 
   '@tanstack/virtual-core@3.13.12': {}
 
   '@tanstack/virtual-core@3.13.18': {}
 
-  '@tanstack/vue-table@8.21.3(vue@3.5.33(typescript@6.0.3))':
+  '@tanstack/vue-table@9.2.4(vue@3.5.33(typescript@6.0.3))':
     dependencies:
-      '@tanstack/table-core': 8.21.3
+      '@tanstack/store': 0.11.1
+      '@tanstack/table-core': 9.2.4
       vue: 3.5.33(typescript@6.0.3)
 
   '@tanstack/vue-virtual@3.13.18(vue@3.5.33(typescript@6.0.3))':
diff --git a/resources/js/common/types/globals.d.ts b/resources/js/common/types/globals.d.ts
index a3d976c7423..b2bcda7969e 100644
--- a/resources/js/common/types/globals.d.ts
+++ b/resources/js/common/types/globals.d.ts
@@ -30,7 +30,11 @@ interface LegacyModalInstance {
 }
 
 declare module '@tanstack/vue-table' {
-  interface ColumnMeta {
+  interface ColumnMeta<
+    TFeatures extends TableFeatures,
+    TData extends RowData,
+    TValue extends CellData = CellData,
+  > {
     wrap?: boolean;
     // Applies classes to the cell
     cellClass?: string | Record<string, boolean>;
diff --git a/resources/js/modules/admin-table/components/AdminTable.stories.ts b/resources/js/modules/admin-table/components/AdminTable.stories.ts
index d838062536b..3fcc68005a7 100644
--- a/resources/js/modules/admin-table/components/AdminTable.stories.ts
+++ b/resources/js/modules/admin-table/components/AdminTable.stories.ts
@@ -7,7 +7,10 @@ import {
 
 const meta = {
   title: 'Elements/AdminTable',
-  component: AdminTable,
+  // The component is generic over its row type, which `Meta<typeof …>` can't
+  // instantiate. Every story drives it through `render`, so the only thing the
+  // cast costs is arg typing that nothing here uses.
+  component: AdminTable as Meta['component'],
   parameters: {
     docs: {
       description: {
@@ -21,7 +24,7 @@ const meta = {
       },
     },
   },
-} satisfies Meta<typeof AdminTable>;
+} satisfies Meta;
 
 export default meta;
 type Story = StoryObj<{title?: string}>;
diff --git a/resources/js/modules/admin-table/components/AdminTable.vue b/resources/js/modules/admin-table/components/AdminTable.vue
index 009584e3640..8e67573736e 100644
--- a/resources/js/modules/admin-table/components/AdminTable.vue
+++ b/resources/js/modules/admin-table/components/AdminTable.vue
@@ -1,6 +1,7 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="TData extends Record<string, any>">
   import {computed} from 'vue';
   import type {Table} from '@tanstack/vue-table';
+  import type {CraftTableFeatures} from '@/modules/admin-table/tableFeatures';
   import BaseElementIndex from '@/modules/elements/components/BaseElementIndex.vue';
   import DataTable from '@/modules/elements/components/DataTable.vue';
   import {TableSpacing, type TableSpacingValue} from '@/common/types';
@@ -8,7 +9,7 @@
 
   const props = withDefaults(
     defineProps<{
-      table: Table<any>;
+      table: Table<CraftTableFeatures, TData>;
       title?: string;
       reorderable?: boolean;
       selectable?: boolean;
diff --git a/resources/js/modules/admin-table/composables/useEditableTable.ts b/resources/js/modules/admin-table/composables/useEditableTable.ts
index 0e2749f1577..4a6b67c4c8e 100644
--- a/resources/js/modules/admin-table/composables/useEditableTable.ts
+++ b/resources/js/modules/admin-table/composables/useEditableTable.ts
@@ -10,10 +10,14 @@ import {
   type ColumnDef,
   type ColumnHelper,
   createColumnHelper,
-  getCoreRowModel,
   type Row,
-  useVueTable,
+  type TableOptions,
+  useTable,
 } from '@tanstack/vue-table';
+import {
+  craftTableFeatures,
+  type CraftTableFeatures,
+} from '@/modules/admin-table/tableFeatures';
 import CraftSwitch from '@craftcms/ui/vue/CraftSwitch.vue';
 import CraftCombobox from '@craftcms/ui/vue/CraftCombobox.vue';
 import type {SelectItem} from '@/common/types';
@@ -26,21 +30,23 @@ function resolve<T>(value: MaybeGetter<T>): T {
 }
 
 interface BaseColumnOptions<T extends object> {
-  header?: ColumnDef<T>['header'];
+  header?: ColumnDef<CraftTableFeatures, T>['header'];
   size?: number;
   class?: HTMLAttributes['class'];
-  meta?: ColumnDef<T>['meta'];
-  disabled?: MaybeGetter<boolean> | ((row: Row<T>) => boolean);
+  meta?: ColumnDef<CraftTableFeatures, T>['meta'];
+  disabled?:
+    | MaybeGetter<boolean>
+    | ((row: Row<CraftTableFeatures, T>) => boolean);
   placeholder?: string;
 }
 
 interface TextColumnOptions<T extends object> extends BaseColumnOptions<T> {
   inputType?: 'text' | 'email' | 'url' | 'number';
   placeholder?: string;
-  name?: (row: Row<T>, columnId: string) => string;
+  name?: (row: Row<CraftTableFeatures, T>, columnId: string) => string;
   onChange?: (
     value: string,
-    ctx: Pick<CellContext<T, unknown>, 'row' | 'column'>
+    ctx: Pick<CellContext<CraftTableFeatures, T, unknown>, 'row' | 'column'>
   ) => void;
   onInput?: (event: Event) => void;
 }
@@ -58,7 +64,7 @@ interface CheckboxColumnOptions<T extends object> extends BaseColumnOptions<T> {
   ariaLabelledBy?: string;
   onChange?: (
     value: boolean,
-    ctx: Pick<CellContext<T, unknown>, 'row' | 'column'>
+    ctx: Pick<CellContext<CraftTableFeatures, T, unknown>, 'row' | 'column'>
   ) => void;
 }
 
@@ -67,44 +73,46 @@ interface AutocompleteColumnOptions<
 > extends BaseColumnOptions<T> {
   options?:
     | MaybeGetter<Array<SelectItem>>
-    | ((row: Row<T>) => Array<SelectItem>);
+    | ((row: Row<CraftTableFeatures, T>) => Array<SelectItem>);
   requireOptionMatch?: boolean;
   label?: string;
   onChange?: (
     value: string,
-    ctx: Pick<CellContext<T, unknown>, 'row' | 'column'>
+    ctx: Pick<CellContext<CraftTableFeatures, T, unknown>, 'row' | 'column'>
   ) => void;
 }
 
 export type AccessorParam<T extends object> = Parameters<
-  ColumnHelper<T>['accessor']
+  ColumnHelper<CraftTableFeatures, T>['accessor']
 >[0];
 
 interface EditableColumnHelper<T extends object> {
-  accessor: ColumnHelper<T>['accessor'];
-  display: ColumnHelper<T>['display'];
-  group: ColumnHelper<T>['group'];
+  accessor: ColumnHelper<CraftTableFeatures, T>['accessor'];
+  display: ColumnHelper<CraftTableFeatures, T>['display'];
+  group: ColumnHelper<CraftTableFeatures, T>['group'];
   text: (
     accessor: AccessorParam<T>,
     options?: TextColumnOptions<T>
-  ) => ColumnDef<T>;
+  ) => ColumnDef<CraftTableFeatures, T>;
   lightswitch: (
     accessor: AccessorParam<T>,
     options?: LightswitchColumnOptions<T>
-  ) => ColumnDef<T>;
+  ) => ColumnDef<CraftTableFeatures, T>;
   checkbox: (
     accessor: AccessorParam<T>,
     options?: CheckboxColumnOptions<T>
-  ) => ColumnDef<T>;
+  ) => ColumnDef<CraftTableFeatures, T>;
   autocomplete: (
     accessor: AccessorParam<T>,
     options?: AutocompleteColumnOptions<T>
-  ) => ColumnDef<T>;
+  ) => ColumnDef<CraftTableFeatures, T>;
 }
 
 interface UseEditableTableOptions<T extends object> {
   data: () => T[] | Record<string, T>;
-  columns: (options: {columnHelper: EditableColumnHelper<T>}) => ColumnDef<T>[];
+  columns: (options: {
+    columnHelper: EditableColumnHelper<T>;
+  }) => ColumnDef<CraftTableFeatures, T>[];
   key?: string;
   name?: string;
   columnVisibility?: () => Record<string, boolean>;
@@ -136,7 +144,7 @@ export function useEditableTable<T extends object>(
   });
 
   function handleChange(
-    row: Row<T>,
+    row: Row<CraftTableFeatures, T>,
     columnId: string,
     value: string | boolean
   ): void {
@@ -165,7 +173,7 @@ export function useEditableTable<T extends object>(
 
   function resolveDisabled<T extends object>(
     disabled: BaseColumnOptions<T>['disabled'],
-    row: Row<T>
+    row: Row<CraftTableFeatures, T>
   ): boolean | undefined {
     let value = disabled;
     if (disabled instanceof Function) {
@@ -181,7 +189,9 @@ export function useEditableTable<T extends object>(
       TextColumnOptions<T>,
       'header' | 'size' | 'meta' | 'inputType'
     >
-  ): (ctx: CellContext<T, unknown>) => ReturnType<typeof h> {
+  ): (
+    ctx: CellContext<CraftTableFeatures, T, unknown>
+  ) => ReturnType<typeof h> {
     return ({row, column}) =>
       h('textarea', {
         rows: 1,
@@ -219,7 +229,9 @@ export function useEditableTable<T extends object>(
 
   function switchCell(
     cellOptions?: Omit<LightswitchColumnOptions<T>, 'header' | 'size' | 'meta'>
-  ): (ctx: CellContext<T, unknown>) => ReturnType<typeof h> {
+  ): (
+    ctx: CellContext<CraftTableFeatures, T, unknown>
+  ) => ReturnType<typeof h> {
     return ({row, column}) =>
       h(CraftSwitch, {
         modelValue: Boolean(
@@ -243,7 +255,9 @@ export function useEditableTable<T extends object>(
 
   function checkboxCell(
     cellOptions?: Omit<CheckboxColumnOptions<T>, 'header' | 'size' | 'meta'>
-  ): (ctx: CellContext<T, unknown>) => ReturnType<typeof h> {
+  ): (
+    ctx: CellContext<CraftTableFeatures, T, unknown>
+  ) => ReturnType<typeof h> {
     return ({row, column}) => {
       return h('input', {
         type: 'checkbox',
@@ -270,7 +284,9 @@ export function useEditableTable<T extends object>(
 
   function autocompleteCell(
     cellOptions?: AutocompleteColumnOptions<T>
-  ): (ctx: CellContext<T, unknown>) => ReturnType<typeof h> {
+  ): (
+    ctx: CellContext<CraftTableFeatures, T, unknown>
+  ) => ReturnType<typeof h> {
     return ({row, column}) => {
       const opts =
         cellOptions?.options instanceof Function
@@ -301,13 +317,15 @@ export function useEditableTable<T extends object>(
     };
   }
 
-  const baseHelper = createColumnHelper<T>();
+  const baseHelper = createColumnHelper<CraftTableFeatures, T>();
 
   function buildColumnDef(
     accessor: AccessorParam<T>,
     base: BaseColumnOptions<T> | undefined
   ) {
-    const columnDef: Parameters<ColumnHelper<T>['accessor']>[1] = {
+    const columnDef: Parameters<
+      ColumnHelper<CraftTableFeatures, T>['accessor']
+    >[1] = {
       id: String(accessor),
     };
     if (base?.header !== undefined) columnDef.header = base.header;
@@ -384,7 +402,10 @@ export function useEditableTable<T extends object>(
 
   const columns = shallowRef(options.columns({columnHelper}));
 
-  const tableOptions: Parameters<typeof useVueTable<T>>[0] = {
+  const columnVisibility = options.columnVisibility;
+
+  const tableOptions: TableOptions<CraftTableFeatures, T> = {
+    features: craftTableFeatures,
     get data() {
       return normalizedData.value;
     },
@@ -392,21 +413,18 @@ export function useEditableTable<T extends object>(
       return columns.value;
     },
     enableSorting: false,
-    getCoreRowModel: getCoreRowModel<T>(),
+    ...(columnVisibility && {
+      state: {
+        get columnVisibility() {
+          return columnVisibility();
+        },
+      },
+    }),
   };
 
   Object.assign(tableOptions, {defaultColumn: {size: 'auto'}});
 
-  if (options.columnVisibility) {
-    const columnVisibility = options.columnVisibility;
-    tableOptions.state = {
-      get columnVisibility() {
-        return columnVisibility();
-      },
-    };
-  }
-
-  const table = useVueTable(tableOptions);
+  const table = useTable(tableOptions);
 
   return {table};
 }
diff --git a/resources/js/modules/admin-table/helpers/createCraftColumnHelper.ts b/resources/js/modules/admin-table/helpers/createCraftColumnHelper.ts
index f7156d6ce47..91d68294fa9 100644
--- a/resources/js/modules/admin-table/helpers/createCraftColumnHelper.ts
+++ b/resources/js/modules/admin-table/helpers/createCraftColumnHelper.ts
@@ -9,6 +9,7 @@ import {
   createColumnHelper,
   type DisplayColumnDef,
 } from '@tanstack/vue-table';
+import type {CraftTableFeatures} from '@/modules/admin-table/tableFeatures';
 import type {AccessorParam} from '@/modules/admin-table/composables/useEditableTable';
 import CpLink from '@/common/components/CpLink.vue';
 import Date from '@/common/components/Date.vue';
@@ -19,60 +20,76 @@ type ComponentProperties = Record<
   string | number | boolean | null | undefined
 >;
 
-type LinkColumnDef<T extends object> = AccessorColumnDef<T> & {
+type LinkColumnDef<T extends object> = AccessorColumnDef<
+  CraftTableFeatures,
+  T
+> & {
   props: (
-    cellContext: CellContext<T, unknown>
+    cellContext: CellContext<CraftTableFeatures, T, unknown>
   ) => ComponentProperties & {href: InertiaLinkProps['href']};
 };
 
-type HtmlColumnDef<T extends object> = AccessorColumnDef<T> & {
-  props: (cellContext: CellContext<T, unknown>) => ComponentProperties;
+type HtmlColumnDef<T extends object> = AccessorColumnDef<
+  CraftTableFeatures,
+  T
+> & {
+  props: (
+    cellContext: CellContext<CraftTableFeatures, T, unknown>
+  ) => ComponentProperties;
 };
 
 type DateColumnDef<T extends object> = {
   format?: string;
-  header?: ColumnDef<T>['header'];
+  header?: ColumnDef<CraftTableFeatures, T>['header'];
   size?: number;
-  meta?: ColumnDef<T>['meta'];
+  meta?: ColumnDef<CraftTableFeatures, T>['meta'];
 };
 
-export type CraftColumnHelper<T extends object> = ColumnHelper<T> & {
+export type CraftColumnHelper<T extends object> = ColumnHelper<
+  CraftTableFeatures,
+  T
+> & {
   handle: (
     accessor: AccessorParam<T>,
-    config?: Partial<AccessorColumnDef<T>>
-  ) => AccessorColumnDef<T, unknown>;
+    config?: Partial<AccessorColumnDef<CraftTableFeatures, T>>
+  ) => AccessorColumnDef<CraftTableFeatures, T, unknown>;
   html: (
     accessor: AccessorParam<T>,
     config?: Partial<HtmlColumnDef<T>>
-  ) => AccessorColumnDef<T, unknown>;
+  ) => AccessorColumnDef<CraftTableFeatures, T, unknown>;
   link: (
     accessor: AccessorParam<T>,
     config?: Partial<LinkColumnDef<T>>
-  ) => AccessorColumnDef<T, unknown>;
+  ) => AccessorColumnDef<CraftTableFeatures, T, unknown>;
   actions: (
-    actions: (cellContext: CellContext<T, unknown>) => VNodeChild[],
-    config?: Partial<DisplayColumnDef<T>>
-  ) => ColumnDef<T, unknown>;
+    actions: (
+      cellContext: CellContext<CraftTableFeatures, T, unknown>
+    ) => VNodeChild[],
+    config?: Partial<DisplayColumnDef<CraftTableFeatures, T>>
+  ) => ColumnDef<CraftTableFeatures, T, unknown>;
   date: (
     accessor: AccessorParam<T>,
     config?: Partial<DateColumnDef<T>>
-  ) => AccessorColumnDef<T, unknown>;
+  ) => AccessorColumnDef<CraftTableFeatures, T, unknown>;
 };
 
 export function createCraftColumnHelper<T extends object>() {
-  const baseHelper = createColumnHelper<T>();
+  const baseHelper = createColumnHelper<CraftTableFeatures, T>();
 
   const columnHelper: CraftColumnHelper<T> = {
     accessor: baseHelper.accessor,
+    columns: baseHelper.columns,
     display: baseHelper.display,
     group: baseHelper.group,
 
     date(accessor, config = {}) {
       // oxlint-disable-next-line @typescript-eslint/no-unused-vars
       const {format, ...rest} = config;
-      const columnDef: Parameters<ColumnHelper<T>['accessor']>[1] = {
+      const columnDef: Parameters<
+        ColumnHelper<CraftTableFeatures, T>['accessor']
+      >[1] = {
         id: String(accessor),
-        cell: (cellContext: CellContext<T, unknown>) => {
+        cell: (cellContext: CellContext<CraftTableFeatures, T, unknown>) => {
           const value = cellContext.getValue();
           if (Object(value).constructor === String) {
             return h(Date, {value: String(value)});
@@ -114,10 +131,12 @@ export function createCraftColumnHelper<T extends object>() {
     link(accessor, config = {}) {
       const {props, ...rest} = config;
 
-      const columnDef: Parameters<ColumnHelper<T>['accessor']>[1] = {
+      const columnDef: Parameters<
+        ColumnHelper<CraftTableFeatures, T>['accessor']
+      >[1] = {
         id: String(accessor),
         // With nothing to link to, the value is shown as it is.
-        cell: (cellContext: CellContext<T, any>) =>
+        cell: (cellContext: CellContext<CraftTableFeatures, T, any>) =>
           h('div', [
             props
               ? h(
@@ -136,10 +155,12 @@ export function createCraftColumnHelper<T extends object>() {
     },
 
     handle(accessor, config = {}) {
-      const columnDef: Parameters<ColumnHelper<T>['accessor']>[1] = {
+      const columnDef: Parameters<
+        ColumnHelper<CraftTableFeatures, T>['accessor']
+      >[1] = {
         id: String(accessor),
         header: t('Handle'),
-        cell: ({getValue}: CellContext<T, any>) =>
+        cell: ({getValue}: CellContext<CraftTableFeatures, T, any>) =>
           h(
             'craft-copy-attribute',
             {
@@ -155,9 +176,11 @@ export function createCraftColumnHelper<T extends object>() {
     html(accessor, config = {}) {
       const {props = () => ({}), ...rest} = config;
 
-      const columnDef: Parameters<ColumnHelper<T>['accessor']>[1] = {
+      const columnDef: Parameters<
+        ColumnHelper<CraftTableFeatures, T>['accessor']
+      >[1] = {
         id: String(accessor),
-        cell: (cellContext: CellContext<T, any>) =>
+        cell: (cellContext: CellContext<CraftTableFeatures, T, any>) =>
           h(DynamicHtmlRenderer, {
             html: cellContext.getValue(),
             ...props(cellContext),
diff --git a/resources/js/modules/admin-table/tableFeatures.ts b/resources/js/modules/admin-table/tableFeatures.ts
new file mode 100644
index 00000000000..aed57784144
--- /dev/null
+++ b/resources/js/modules/admin-table/tableFeatures.ts
@@ -0,0 +1,29 @@
+import {
+  columnOrderingFeature,
+  columnSizingFeature,
+  columnVisibilityFeature,
+  rowPaginationFeature,
+  rowSelectionFeature,
+  rowSortingFeature,
+  tableFeatures,
+} from '@tanstack/vue-table';
+
+/**
+ * The TanStack Table features every CP table is built with.
+ *
+ * Tables all render through the shared `DataTable`/`BaseElementIndex`, which
+ * reach for the selection, sorting, pagination, visibility and ordering APIs
+ * regardless of whether a given table makes use of them — and TanStack only
+ * adds a feature's APIs to a table that registers it. Sorting and pagination
+ * happen on the server, so no client-side row models are registered here.
+ */
+export const craftTableFeatures = tableFeatures({
+  columnOrderingFeature,
+  columnSizingFeature,
+  columnVisibilityFeature,
+  rowPaginationFeature,
+  rowSelectionFeature,
+  rowSortingFeature,
+});
+
+export type CraftTableFeatures = typeof craftTableFeatures;
diff --git a/resources/js/modules/assets/composables/useAssetFolderActions.ts b/resources/js/modules/assets/composables/useAssetFolderActions.ts
index 69a77179109..e957f4ad353 100644
--- a/resources/js/modules/assets/composables/useAssetFolderActions.ts
+++ b/resources/js/modules/assets/composables/useAssetFolderActions.ts
@@ -58,6 +58,12 @@ export function useAssetFolderActions() {
 
   const newFolderOpen = computed(() => newFolderParentId.value !== null);
 
+  function folderName(folderId: number | undefined): string | undefined {
+    if (folderId === undefined) return undefined;
+    const name = table.value?.getRow(`folder:${folderId}`)?.original.folderName;
+    return typeof name === 'string' ? name : undefined;
+  }
+
   function onNewSubfolder(event: Event) {
     const folderId = detail(event)?.folderId;
     if (folderId === undefined) {
@@ -114,10 +120,7 @@ export function useAssetFolderActions() {
     if (!folderId) return;
 
     renameFolderId.value = folderId;
-    renameName.value =
-      action.label ??
-      table.value?.getRow(`folder:${folderId}`)?.original?.folderName ??
-      '';
+    renameName.value = action.label ?? folderName(folderId) ?? '';
     renameError.value = null;
     navigateAfterRename.value = action.navigate ?? false;
   }
@@ -168,9 +171,7 @@ export function useAssetFolderActions() {
     const ids = folderIds(action);
     const label =
       action.label ??
-      (ids.length === 1
-        ? table.value?.getRow(`folder:${ids[0]}`)?.original?.folderName
-        : null) ??
+      (ids.length === 1 ? folderName(ids[0]) : null) ??
       t('Untitled');
     if (
       !ids.length ||
diff --git a/resources/js/modules/assets/composables/useAssetMoveDrag.ts b/resources/js/modules/assets/composables/useAssetMoveDrag.ts
index 3e20d927f1a..87ca2b560b3 100644
--- a/resources/js/modules/assets/composables/useAssetMoveDrag.ts
+++ b/resources/js/modules/assets/composables/useAssetMoveDrag.ts
@@ -48,7 +48,7 @@ export function useAssetMoveDrag() {
   const folderConflictPrompt = ref<FolderMoveConflictPrompt | null>(null);
 
   function selectedMoveIds(): {assetIds: number[]; folderIds: number[]} {
-    const selection = table.value?.getState().rowSelection ?? {};
+    const selection = table.value?.atoms.rowSelection.get() ?? {};
     const assetIds: number[] = [];
     const folderIds: number[] = [];
 
@@ -101,7 +101,7 @@ export function useAssetMoveDrag() {
   }
 
   function selectedElements(): HTMLElement[] {
-    const selection = table.value?.getState().rowSelection ?? {};
+    const selection = table.value?.atoms.rowSelection.get() ?? {};
 
     return Object.entries(selection)
       .filter(([, selected]) => selected)
@@ -252,7 +252,7 @@ export function useAssetMoveDrag() {
       // Snapshot the pre-grab selection first so onDragStop can undo a force
       // select of a row that wasn't already part of a selected group.
       filter: () => {
-        preDragSelection = {...table.value?.getState().rowSelection};
+        preDragSelection = {...table.value?.atoms.rowSelection.get()};
         const grabbed = dragDrop?.$targetItem;
         if (grabbed?.dataset.rowId) {
           const rowId = grabbed.dataset.rowId;
diff --git a/resources/js/modules/element-selector-modal/useModalElementIndex.ts b/resources/js/modules/element-selector-modal/useModalElementIndex.ts
index 2fad1170009..619dc8405aa 100644
--- a/resources/js/modules/element-selector-modal/useModalElementIndex.ts
+++ b/resources/js/modules/element-selector-modal/useModalElementIndex.ts
@@ -1,5 +1,9 @@
 import {actionClient, type ElementInfo} from '@craftcms/ui';
-import {getCoreRowModel, useVueTable} from '@tanstack/vue-table';
+import {useTable} from '@tanstack/vue-table';
+import {
+  craftTableFeatures,
+  type CraftTableFeatures,
+} from '@/modules/admin-table/tableFeatures';
 import type {RowSelectionState} from '@tanstack/table-core';
 import {computed, ref, shallowRef, watch} from 'vue';
 import type {ConditionConfig} from '@/modules/conditions/types';
@@ -141,7 +145,8 @@ export function useModalElementIndex(options: Options) {
     () => new Set(options.disabledElementIds?.() ?? [])
   );
 
-  const table = useVueTable<Row>({
+  const table = useTable<CraftTableFeatures, Row>({
+    features: craftTableFeatures,
     get data() {
       return elementIndex.data ?? [];
     },
@@ -175,7 +180,6 @@ export function useModalElementIndex(options: Options) {
       rowSelection.value =
         typeof updater === 'function' ? updater(rowSelection.value) : updater;
     },
-    getCoreRowModel: getCoreRowModel<Row>(),
     ...sortingConfig,
     ...paginationConfig,
     enableMultiSort: false,
diff --git a/resources/js/modules/elements/components/BaseElementIndex.stories.ts b/resources/js/modules/elements/components/BaseElementIndex.stories.ts
index e48ec0ee574..3c0314e8e24 100644
--- a/resources/js/modules/elements/components/BaseElementIndex.stories.ts
+++ b/resources/js/modules/elements/components/BaseElementIndex.stories.ts
@@ -8,7 +8,10 @@ import {
 
 const meta = {
   title: 'Elements/BaseElementIndex',
-  component: BaseElementIndex,
+  // The component is generic over its row type, which `Meta<typeof …>` can't
+  // instantiate. Every story drives it through `render`, so the only thing the
+  // cast costs is arg typing that nothing here uses.
+  component: BaseElementIndex as Meta['component'],
   parameters: {
     docs: {
       description: {
@@ -21,7 +24,7 @@ const meta = {
       },
     },
   },
-} satisfies Meta<typeof BaseElementIndex>;
+} satisfies Meta;
 
 export default meta;
 type Story = StoryObj<{loading?: boolean}>;
diff --git a/resources/js/modules/elements/components/BaseElementIndex.vue b/resources/js/modules/elements/components/BaseElementIndex.vue
index e7d347c953b..33da053d6e8 100644
--- a/resources/js/modules/elements/components/BaseElementIndex.vue
+++ b/resources/js/modules/elements/components/BaseElementIndex.vue
@@ -1,7 +1,8 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="TData extends Record<string, any>">
   import {computed, ref, watch} from 'vue';
   import {usePage} from '@inertiajs/vue3';
   import type {Table} from '@tanstack/vue-table';
+  import type {CraftTableFeatures} from '@/modules/admin-table/tableFeatures';
   import {ButtonVariant, t} from '@craftcms/ui';
   import Text from '@/common/components/Text.vue';
   import Select from '@/common/form/Select.vue';
@@ -12,7 +13,7 @@
 
   const props = withDefaults(
     defineProps<{
-      table: Table<any>;
+      table: Table<CraftTableFeatures, TData>;
       selectable?: boolean;
       readOnly?: boolean;
       loading?: boolean;
@@ -62,13 +63,13 @@
 
   // --- Pagination footer proxies (moved verbatim from AdminTable) ---
   const pageIndexProxy = computed({
-    get: () => props.table.getState().pagination.pageIndex + 1,
+    get: () => props.table.atoms.pagination.get().pageIndex + 1,
     set: (v) => {
       if (v) props.table.setPageIndex(parseInt(String(v)) - 1);
     },
   });
   const pageSizeProxy = computed({
-    get: () => props.table.getState().pagination.pageSize,
+    get: () => props.table.atoms.pagination.get().pageSize,
     set: (v) => {
       if (v) props.table.setPageSize(parseInt(String(v)));
     },
@@ -78,7 +79,7 @@
       props.table.getPageCount() > 1 &&
       Boolean(
         props.table.options.manualPagination ||
-        props.table.options.getPaginationRowModel
+        'paginatedRowModel' in props.table.options.features
       )
   );
   const showPageSize = computed(() => props.enableAdjustPageSize);
diff --git a/resources/js/modules/elements/components/DataTable.stories.ts b/resources/js/modules/elements/components/DataTable.stories.ts
index 334a645cfc0..e00853aa165 100644
--- a/resources/js/modules/elements/components/DataTable.stories.ts
+++ b/resources/js/modules/elements/components/DataTable.stories.ts
@@ -7,7 +7,10 @@ import {
 
 const meta = {
   title: 'Elements/DataTable',
-  component: DataTable,
+  // The component is generic over its row type, which `Meta<typeof …>` can't
+  // instantiate. Every story drives it through `render`, so the only thing the
+  // cast costs is arg typing that nothing here uses.
+  component: DataTable as Meta['component'],
   args: {
     loading: false,
   },
@@ -27,7 +30,7 @@ const meta = {
       },
     },
   },
-} satisfies Meta<typeof DataTable>;
+} satisfies Meta;
 
 export default meta;
 interface DataTableStoryArgs {
diff --git a/resources/js/modules/elements/components/DataTable.test.ts b/resources/js/modules/elements/components/DataTable.test.ts
index 72ed456a01e..19f2de7ae91 100644
--- a/resources/js/modules/elements/components/DataTable.test.ts
+++ b/resources/js/modules/elements/components/DataTable.test.ts
@@ -184,7 +184,7 @@ describe('DataTable', () => {
     container = document.createElement('div');
     document.body.append(container);
     app = createApp({
-      render: () => h(DataTable, {table, loading: loading.value}),
+      render: () => h(DataTable, {table, loading: loading.value} as never),
     });
     app.mount(container);
     await nextTick();
@@ -226,7 +226,7 @@ describe('DataTable', () => {
     container = document.createElement('div');
     document.body.append(container);
     app = createApp({
-      render: () => h(DataTable, {table, loading: loading.value}),
+      render: () => h(DataTable, {table, loading: loading.value} as never),
     });
     app.mount(container);
     await nextTick();
diff --git a/resources/js/modules/elements/components/DataTable.vue b/resources/js/modules/elements/components/DataTable.vue
index a9d80ed8bac..4bf5a4d7723 100644
--- a/resources/js/modules/elements/components/DataTable.vue
+++ b/resources/js/modules/elements/components/DataTable.vue
@@ -1,10 +1,11 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="TData extends Record<string, any>">
   import {
     type Column,
     FlexRender,
     type Row,
     type Table,
   } from '@tanstack/vue-table';
+  import type {CraftTableFeatures} from '@/modules/admin-table/tableFeatures';
   import {t} from '@craftcms/ui';
   import type CraftSpinner from '@craftcms/ui/components/spinner/spinner';
   import {
@@ -35,7 +36,7 @@
 
   const props = withDefaults(
     defineProps<{
-      table: Table<any>;
+      table: Table<CraftTableFeatures, TData>;
       title?: string;
       reorderable?: boolean;
       selectable?: boolean;
@@ -235,7 +236,7 @@
   );
 
   function getAriaSortAttribute(
-    column: Column<any>
+    column: Column<CraftTableFeatures, TData>
   ): 'ascending' | 'descending' | 'none' | undefined {
     if (column.getCanSort()) {
       if (column.getIsSorted()) {
@@ -247,8 +248,8 @@
 
   const visibleColumnCount = computed(() => {
     const columns = props.table.getAllColumns();
-    const visibleColumns = columns.filter((column: Column<any>) =>
-      column.getIsVisible()
+    const visibleColumns = columns.filter(
+      (column: Column<CraftTableFeatures, TData>) => column.getIsVisible()
     );
     let columnCount = visibleColumns.length;
 
@@ -269,14 +270,14 @@
 
   const tableStyles = computed(() => {
     const columns = props.table.getAllColumns();
-    const visibleColumns = columns.filter((column: Column<any>) =>
-      column.getIsVisible()
+    const visibleColumns = columns.filter(
+      (column: Column<CraftTableFeatures, TData>) => column.getIsVisible()
     );
 
     const columnCount = visibleColumnCount.value;
 
     const gridDef = visibleColumns.reduce(
-      (acc: Array<string>, column: Column<any>) => {
+      (acc: Array<string>, column: Column<CraftTableFeatures, TData>) => {
         acc.push(column.columnDef.meta?.trackSize ?? `minmax(0, 1fr)`);
         return acc;
       },
@@ -303,7 +304,7 @@
     };
   });
 
-  function rowLabel(row: Row<any>): string {
+  function rowLabel(row: Row<CraftTableFeatures, TData>): string {
     return row.original.label ?? String(row.original.id);
   }
 
@@ -418,7 +419,9 @@
           <craft-checkbox
             label-sr-only
             .checked="table.getIsAllRowsSelected()"
-            .indeterminate="table.getIsSomeRowsSelected()"
+            .indeterminate="
+              table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected()
+            "
             .disabled="readOnly"
             @model-value-changed="
               onToggleAllSelected(($event.target as HTMLInputElement).checked)
diff --git a/resources/js/modules/elements/composables/useElementIndexPage.ts b/resources/js/modules/elements/composables/useElementIndexPage.ts
index 7de34812a91..224a29e2ae9 100644
--- a/resources/js/modules/elements/composables/useElementIndexPage.ts
+++ b/resources/js/modules/elements/composables/useElementIndexPage.ts
@@ -2,11 +2,11 @@ import {router} from '@inertiajs/vue3';
 import {actionClient, t} from '@craftcms/ui';
 import {getElementLevelDelta, moveElement} from '@actions/StructuresController';
 import {useFlashMessages} from '@/common/composables/useFlashMessages';
+import {type RowSelectionState, useTable} from '@tanstack/vue-table';
 import {
-  getCoreRowModel,
-  type RowSelectionState,
-  useVueTable,
-} from '@tanstack/vue-table';
+  craftTableFeatures,
+  type CraftTableFeatures,
+} from '@/modules/admin-table/tableFeatures';
 import {computed, onMounted, onScopeDispose, ref, shallowRef, watch} from 'vue';
 import {
   type ElementIndexRow,
@@ -362,7 +362,8 @@ export function useElementIndexPage(options: UseElementIndexPageOptions) {
     }
   }
 
-  const elementTable = useVueTable<ElementIndexRow>({
+  const elementTable = useTable<CraftTableFeatures, ElementIndexRow>({
+    features: craftTableFeatures,
     get data() {
       return tableData.value;
     },
@@ -395,7 +396,6 @@ export function useElementIndexPage(options: UseElementIndexPageOptions) {
         ? cascadeStructureSelection(rowSelection.value, next, tableData.value)
         : next;
     },
-    getCoreRowModel: getCoreRowModel<ElementIndexRow>(),
     ...sortingConfig,
     ...paginationConfig,
     enableMultiSort: false,
diff --git a/resources/js/modules/elements/composables/useElementIndexSelection.test.ts b/resources/js/modules/elements/composables/useElementIndexSelection.test.ts
index 29a588a3fc7..d388196bdca 100644
--- a/resources/js/modules/elements/composables/useElementIndexSelection.test.ts
+++ b/resources/js/modules/elements/composables/useElementIndexSelection.test.ts
@@ -1,6 +1,7 @@
 import {describe, expect, it} from 'vite-plus/test';
 import {ref, type Ref} from 'vue';
 import type {Row, Table} from '@tanstack/vue-table';
+import type {CraftTableFeatures} from '@/modules/admin-table/tableFeatures';
 import type {BulkActionItem} from '@/modules/elements/types/actions';
 import {
   useElementIndexSelection,
@@ -11,7 +12,10 @@ interface TestElement {
   id: number;
 }
 
-function rowAt(rows: Array<Row<TestElement>>, index: number): Row<TestElement> {
+function rowAt(
+  rows: Array<Row<CraftTableFeatures, TestElement>>,
+  index: number
+): Row<CraftTableFeatures, TestElement> {
   const row = rows[index];
   if (!row) throw new Error(`Expected row ${index}.`);
 
@@ -31,7 +35,7 @@ function makeRow(
   id: number,
   selection: Ref<Record<string, boolean>>,
   selected = false
-): Row<TestElement> {
+): Row<CraftTableFeatures, TestElement> {
   const rowId = String(id);
   if (selected) {
     selection.value = {...selection.value, [rowId]: true};
@@ -46,10 +50,12 @@ function makeRow(
       const next = v ?? !selection.value[rowId];
       selection.value = {...selection.value, [rowId]: next};
     },
-  } as Row<TestElement>;
+  } as Row<CraftTableFeatures, TestElement>;
 }
 
-function makeTable(rows: Array<Row<TestElement>>): Table<TestElement> {
+function makeTable(
+  rows: Array<Row<CraftTableFeatures, TestElement>>
+): Table<CraftTableFeatures, TestElement> {
   // SAFETY: This focused Table fixture implements every member read by the selection composable.
   return {
     getRowModel: () => ({rows}),
@@ -59,7 +65,7 @@ function makeTable(rows: Array<Row<TestElement>>): Table<TestElement> {
       rows.forEach((r) => r.toggleSelected(v));
     },
     resetRowSelection: () => rows.forEach((r) => r.toggleSelected(false)),
-  } as Table<TestElement>;
+  } as Table<CraftTableFeatures, TestElement>;
 }
 
 const opts = (
diff --git a/resources/js/modules/elements/composables/useElementIndexSelection.ts b/resources/js/modules/elements/composables/useElementIndexSelection.ts
index ba0943852f1..0645a569bf6 100644
--- a/resources/js/modules/elements/composables/useElementIndexSelection.ts
+++ b/resources/js/modules/elements/composables/useElementIndexSelection.ts
@@ -1,5 +1,6 @@
 import {computed, type MaybeRefOrGetter, toValue} from 'vue';
 import type {Row, Table} from '@tanstack/vue-table';
+import type {CraftTableFeatures} from '@/modules/admin-table/tableFeatures';
 import type {BulkActionItem} from '@/modules/elements/types/actions';
 import {isInteractiveClick} from '@/common/utils/dom';
 import {
@@ -22,15 +23,18 @@ export interface ElementIndexSelectionOptions {
  * table rather than being mirrored here, so the checkboxes, the row model and
  * this composable can never disagree.
  */
-export function useElementIndexSelection(
-  table: MaybeRefOrGetter<Table<any>>,
+export function useElementIndexSelection<TData extends Record<string, any>>(
+  table: MaybeRefOrGetter<Table<CraftTableFeatures, TData>>,
   options: ElementIndexSelectionOptions
 ) {
   const readOnly = computed(() => toValue(options.readOnly));
   const selectable = computed(() => toValue(options.selectable));
 
-  const rows = (): Array<Row<any>> => toValue(table).getRowModel().rows;
-  const rowFor = (id: SelectableId): Row<any> | undefined =>
+  const rows = (): Array<Row<CraftTableFeatures, TData>> =>
+    toValue(table).getRowModel().rows;
+  const rowFor = (
+    id: SelectableId
+  ): Row<CraftTableFeatures, TData> | undefined =>
     rows().find((row) => row.original.id === id);
 
   const selection = useSelectable({
@@ -78,13 +82,13 @@ export function useElementIndexSelection(
   }
 
   function selectRow(
-    row: Row<any>,
+    row: Row<CraftTableFeatures, TData>,
     {checked, shiftKey = false}: {checked: boolean; shiftKey?: boolean}
   ) {
     selection.setChecked(row.original.id, checked, {shiftKey});
   }
 
-  function toggleRow(row: Row<any>) {
+  function toggleRow(row: Row<CraftTableFeatures, TData>) {
     if (readOnly.value) return;
     selection.toggle(row.original.id);
   }
@@ -92,7 +96,10 @@ export function useElementIndexSelection(
   // A click anywhere on a selectable row/card body toggles that row, unless it
   // landed on an interactive control. Reuses selectRow so a shift-click extends
   // the range from the anchor exactly like shift-clicking the checkbox does.
-  function selectRowFromEvent(row: Row<any> | undefined, event: MouseEvent) {
+  function selectRowFromEvent(
+    row: Row<CraftTableFeatures, TData> | undefined,
+    event: MouseEvent
+  ) {
     if (!selectable.value || readOnly.value || !row) return;
     if (!row.getCanSelect()) return;
     if (isInteractiveClick(event)) return;
@@ -109,7 +116,7 @@ export function useElementIndexSelection(
     }
   }
 
-  function extendSelectionTo(row: Row<any>) {
+  function extendSelectionTo(row: Row<CraftTableFeatures, TData>) {
     if (readOnly.value) return;
     selection.extendTo(row.original.id);
   }
diff --git a/resources/js/modules/elements/composables/useElementIndexStructure.test.ts b/resources/js/modules/elements/composables/useElementIndexStructure.test.ts
index 171c473de46..173945bec4f 100644
--- a/resources/js/modules/elements/composables/useElementIndexStructure.test.ts
+++ b/resources/js/modules/elements/composables/useElementIndexStructure.test.ts
@@ -1,5 +1,6 @@
 import {ref} from 'vue';
 import {describe, expect, it, vi} from 'vitest';
+import type {RowSelectionState} from '@tanstack/vue-table';
 import type {ViewState} from '@/modules/elements/types/view-state';
 import {
   cascadeStructureSelection,
@@ -49,7 +50,7 @@ describe('cascadeStructureSelection', () => {
   });
 
   it('releases descendants and ancestors when a row is deselected', () => {
-    const all = {'1': true, '2': true, '3': true, '4': true};
+    const all: RowSelectionState = {'1': true, '2': true, '3': true, '4': true};
 
     expect(
       cascadeStructureSelection(all, {'1': true, '3': true, '4': true}, rows)
@@ -63,7 +64,7 @@ describe('cascadeStructureSelection', () => {
   });
 
   it('returns the incoming state untouched when nothing changed', () => {
-    const next = {'5': true};
+    const next: RowSelectionState = {'5': true};
 
     expect(cascadeStructureSelection({'5': true}, next, rows)).toBe(next);
   });
@@ -78,7 +79,7 @@ describe('selectDescendantsOfSelected', () => {
   });
 
   it('returns the same object when nothing needs adding', () => {
-    const selection = {'5': true};
+    const selection: RowSelectionState = {'5': true};
 
     expect(selectDescendantsOfSelected(selection, rows)).toBe(selection);
   });
diff --git a/resources/js/modules/elements/composables/useElementIndexTable.ts b/resources/js/modules/elements/composables/useElementIndexTable.ts
index f92d977d4b7..b7272d36e99 100644
--- a/resources/js/modules/elements/composables/useElementIndexTable.ts
+++ b/resources/js/modules/elements/composables/useElementIndexTable.ts
@@ -1,9 +1,11 @@
 import {computed, shallowRef} from 'vue';
 import type {Table} from '@tanstack/vue-table';
+import type {CraftTableFeatures} from '@/modules/admin-table/tableFeatures';
+import type {ElementIndexRow} from '@/modules/elements/composables/useContentIndexData';
 
 interface ElementIndexHandle {
   /** The listing's tanstack table (selection, state, …). */
-  table: Table<any>;
+  table: Table<CraftTableFeatures, ElementIndexRow>;
   /** The index's post-action refresh: clears selection + partial reload. */
   onActionPerformed: () => void;
   /** Re-pull just the results, leaving selection and scroll alone. */
diff --git a/resources/js/modules/elements/fixtures/elements.ts b/resources/js/modules/elements/fixtures/elements.ts
index 1fe3b72d7ae..5c2cbdccb54 100644
--- a/resources/js/modules/elements/fixtures/elements.ts
+++ b/resources/js/modules/elements/fixtures/elements.ts
@@ -1,11 +1,18 @@
 import {h} from 'vue';
 import {
   createColumnHelper,
-  getCoreRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  useVueTable,
+  createPaginatedRowModel,
+  createSortedRowModel,
+  sortFn_alphanumeric,
+  sortFn_text,
+  type Table,
+  tableFeatures,
+  useTable,
 } from '@tanstack/vue-table';
+import {
+  craftTableFeatures,
+  type CraftTableFeatures,
+} from '@/modules/admin-table/tableFeatures';
 import ElementStatus from '@/modules/elements/ElementStatus.vue';
 import type {BulkActionItem} from '@/modules/elements/types/actions';
 
@@ -104,9 +111,18 @@ export const sampleEntries: Array<SampleEntry> = [
   },
 ];
 
-const columnHelper = createColumnHelper<SampleEntry>();
+// The CP's own tables sort and paginate on the server; the sample table has no
+// server, so it does both on the client.
+const sampleFeatures = tableFeatures({
+  ...craftTableFeatures,
+  sortedRowModel: createSortedRowModel(),
+  paginatedRowModel: createPaginatedRowModel(),
+  sortFns: {alphanumeric: sortFn_alphanumeric, text: sortFn_text},
+});
+
+const columnHelper = createColumnHelper<typeof sampleFeatures, SampleEntry>();
 
-export const sampleColumns = [
+export const sampleColumns = columnHelper.columns([
   columnHelper.accessor('title', {header: 'Title'}),
   columnHelper.accessor('status', {
     header: 'Status',
@@ -114,7 +130,7 @@ export const sampleColumns = [
   }),
   columnHelper.accessor('section', {header: 'Section'}),
   columnHelper.accessor('postDate', {header: 'Post Date'}),
-];
+]);
 
 /**
  * Builds a client-side TanStack table over the sample entries, with the row-id
@@ -123,19 +139,21 @@ export const sampleColumns = [
  */
 export function createSampleTable(
   options: {data?: Array<SampleEntry>; pageSize?: number} = {}
-) {
-  return useVueTable<SampleEntry>({
+): Table<CraftTableFeatures, SampleEntry> {
+  const table = useTable<typeof sampleFeatures, SampleEntry>({
+    features: sampleFeatures,
     data: options.data ?? sampleEntries,
     columns: sampleColumns,
     getRowId: (row) => String(row.id),
     enableRowSelection: true,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
     initialState: {
       pagination: {pageIndex: 0, pageSize: options.pageSize ?? 50},
     },
   });
+
+  // SAFETY: Row-model and sort-fn slots only change how rows are processed, not
+  // the table's API, so this is the same surface as a plain CP table's.
+  return table as unknown as Table<CraftTableFeatures, SampleEntry>;
 }
 
 /**
diff --git a/resources/js/modules/plugin-manager/components/PluginsList.vue b/resources/js/modules/plugin-manager/components/PluginsList.vue
index 08b24d6f80a..be48580bfdf 100644
--- a/resources/js/modules/plugin-manager/components/PluginsList.vue
+++ b/resources/js/modules/plugin-manager/components/PluginsList.vue
@@ -4,7 +4,8 @@
   import AdminTable from '@/modules/admin-table/components/AdminTable.vue';
   import type {PluginInfo} from '@/modules/plugin-manager/types/plugins';
   import {createCraftColumnHelper} from '@/modules/admin-table/helpers/createCraftColumnHelper';
-  import {getCoreRowModel, useVueTable} from '@tanstack/vue-table';
+  import {useTable} from '@tanstack/vue-table';
+  import {craftTableFeatures} from '@/modules/admin-table/tableFeatures';
   import PluginDetails from '@/modules/plugin-manager/components/PluginDetails.vue';
   import PluginStatus from '@/modules/plugin-manager/components/PluginStatus.vue';
   import PluginActionMenu from '@/modules/plugin-manager/components/PluginActionMenu.vue';
@@ -31,7 +32,8 @@
   });
 
   const columnHelper = createCraftColumnHelper<PluginInfo>();
-  const table = useVueTable({
+  const table = useTable({
+    features: craftTableFeatures,
     state: {
       get columnVisibility() {
         return {
@@ -72,7 +74,6 @@
     get data() {
       return plugins.value;
     },
-    getCoreRowModel: getCoreRowModel<PluginInfo>(),
   });
 
   /**
diff --git a/resources/js/modules/two-step-verification/TwoStepVerification.vue b/resources/js/modules/two-step-verification/TwoStepVerification.vue
index 991c9bd641f..a154a3f78ab 100644
--- a/resources/js/modules/two-step-verification/TwoStepVerification.vue
+++ b/resources/js/modules/two-step-verification/TwoStepVerification.vue
@@ -2,7 +2,11 @@
   import {h, ref} from 'vue';
   import {router, useHttp} from '@inertiajs/vue3';
   import {t} from '@craftcms/ui';
-  import {getCoreRowModel, useVueTable} from '@tanstack/vue-table';
+  import {useTable} from '@tanstack/vue-table';
+  import {
+    craftTableFeatures,
+    type CraftTableFeatures,
+  } from '@/modules/admin-table/tableFeatures';
   import ActionMenu from '@/common/components/ActionMenu.vue';
   import AdminTable from '@/modules/admin-table/components/AdminTable.vue';
   import {createCraftColumnHelper} from '@/modules/admin-table/helpers/createCraftColumnHelper';
@@ -122,7 +126,8 @@
   }
 
   const columnHelper = createCraftColumnHelper<AuthMethod>();
-  const table = useVueTable<AuthMethod>({
+  const table = useTable<CraftTableFeatures, AuthMethod>({
+    features: craftTableFeatures,
     get data() {
       return props.methods;
     },
@@ -194,7 +199,6 @@
         }),
       ];
     },
-    getCoreRowModel: getCoreRowModel<AuthMethod>(),
     enableSorting: false,
   });
 </script>
diff --git a/resources/js/modules/utilities/components/Migrations.vue b/resources/js/modules/utilities/components/Migrations.vue
index a77b1b4bfb4..2a6f014ff78 100644
--- a/resources/js/modules/utilities/components/Migrations.vue
+++ b/resources/js/modules/utilities/components/Migrations.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
   import {t} from '@craftcms/ui';
   import migrationsController from '@actions/Utilities/MigrationsController';
+  import {createColumnHelper, useTable} from '@tanstack/vue-table';
   import {
-    createColumnHelper,
-    getCoreRowModel,
-    useVueTable,
-  } from '@tanstack/vue-table';
+    craftTableFeatures,
+    type CraftTableFeatures,
+  } from '@/modules/admin-table/tableFeatures';
   import {computed, ref} from 'vue';
   import AdminTable from '@/modules/admin-table/components/AdminTable.vue';
   import {Form} from '@inertiajs/vue3';
@@ -38,23 +38,26 @@
     ] satisfies Migration[];
   });
 
-  const columnHelper = createColumnHelper<Migration>();
-  const columns = ref([
-    columnHelper.accessor('name', {
-      header: t('Name'),
-      cell: (info) => info.getValue(),
-    }),
-    columnHelper.accessor('status', {
-      header: t('Status'),
-      cell: (info) => info.getValue(),
-    }),
-    columnHelper.accessor('batch', {
-      header: t('Batch'),
-      cell: (info) => info.getValue(),
-    }),
-  ]);
+  const columnHelper = createColumnHelper<CraftTableFeatures, Migration>();
+  const columns = ref(
+    columnHelper.columns([
+      columnHelper.accessor('name', {
+        header: t('Name'),
+        cell: (info) => info.getValue(),
+      }),
+      columnHelper.accessor('status', {
+        header: t('Status'),
+        cell: (info) => info.getValue(),
+      }),
+      columnHelper.accessor('batch', {
+        header: t('Batch'),
+        cell: (info) => info.getValue(),
+      }),
+    ])
+  );
 
-  const migrationsTable = useVueTable({
+  const migrationsTable = useTable({
+    features: craftTableFeatures,
     get columns() {
       return columns.value;
     },
@@ -62,7 +65,6 @@
     get data() {
       return allMigrations.value;
     },
-    getCoreRowModel: getCoreRowModel<Migration>(),
   });
 </script>
 
diff --git a/resources/js/modules/utilities/components/deprecation-errors/DeprecationErrors.vue b/resources/js/modules/utilities/components/deprecation-errors/DeprecationErrors.vue
index 2e186b51af4..496726d6bd4 100644
--- a/resources/js/modules/utilities/components/deprecation-errors/DeprecationErrors.vue
+++ b/resources/js/modules/utilities/components/deprecation-errors/DeprecationErrors.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
   import {t} from '@craftcms/ui/utilities/translate';
-  import {getCoreRowModel, useVueTable} from '@tanstack/vue-table';
+  import {useTable} from '@tanstack/vue-table';
+  import {craftTableFeatures} from '@/modules/admin-table/tableFeatures';
   import {h, ref} from 'vue';
   import AdminTable from '@/modules/admin-table/components/AdminTable.vue';
   import DeleteLogButton from '@/modules/utilities/components/deprecation-errors/DeleteLogButton.vue';
@@ -20,40 +21,42 @@
   }>();
 
   const columnHelper = createCraftColumnHelper<LogData>();
-  const columns = ref([
-    columnHelper.accessor('message', {
-      header: t('Message'),
-      cell: (info) => h('div', {innerHTML: info.getValue()}),
-      meta: {
-        wrap: true,
-      },
-    }),
-    columnHelper.accessor('origin', {
-      header: t('Origin'),
-      cell: (info) => h('code', {innerHTML: info.getValue()}),
-      meta: {
-        wrap: true,
-      },
-    }),
-    columnHelper.date('lastOccurrence'),
-    columnHelper.display({
-      id: 'stackTrace',
-      header: t('Stack Trace'),
-      cell: ({row}) => h(StackTraceButton, {logId: row.original.id}),
-    }),
-    columnHelper.actions(({row}) => [
-      h(DeleteLogButton, {logId: row.original.id}),
-    ]),
-  ]);
+  const columns = ref(
+    columnHelper.columns([
+      columnHelper.accessor('message', {
+        header: t('Message'),
+        cell: (info) => h('div', {innerHTML: info.getValue()}),
+        meta: {
+          wrap: true,
+        },
+      }),
+      columnHelper.accessor('origin', {
+        header: t('Origin'),
+        cell: (info) => h('code', {innerHTML: info.getValue()}),
+        meta: {
+          wrap: true,
+        },
+      }),
+      columnHelper.date('lastOccurrence'),
+      columnHelper.display({
+        id: 'stackTrace',
+        header: t('Stack Trace'),
+        cell: ({row}) => h(StackTraceButton, {logId: row.original.id}),
+      }),
+      columnHelper.actions(({row}) => [
+        h(DeleteLogButton, {logId: row.original.id}),
+      ]),
+    ])
+  );
 
-  const table = useVueTable({
+  const table = useTable({
+    features: craftTableFeatures,
     get columns() {
       return columns.value;
     },
     get data() {
       return props.logs;
     },
-    getCoreRowModel: getCoreRowModel<LogData>(),
     enableSorting: false,
   });
 </script>
diff --git a/resources/js/modules/utilities/components/queue-manager/QueueManagerIndex.vue b/resources/js/modules/utilities/components/queue-manager/QueueManagerIndex.vue
index a95fc6321a4..545e78b3284 100644
--- a/resources/js/modules/utilities/components/queue-manager/QueueManagerIndex.vue
+++ b/resources/js/modules/utilities/components/queue-manager/QueueManagerIndex.vue
@@ -2,11 +2,11 @@
   import {t} from '@craftcms/ui/utilities/translate';
   import AdminTable from '@/modules/admin-table/components/AdminTable.vue';
   import {h, ref} from 'vue';
+  import {createColumnHelper, useTable} from '@tanstack/vue-table';
   import {
-    createColumnHelper,
-    getCoreRowModel,
-    useVueTable,
-  } from '@tanstack/vue-table';
+    craftTableFeatures,
+    type CraftTableFeatures,
+  } from '@/modules/admin-table/tableFeatures';
   import CpLink from '@/common/components/CpLink.vue';
   import {type JobInfo, JobStatus} from '@/modules/queue/types';
   import RetryJobButton from '@/modules/utilities/components/queue-manager/RetryJobButton.vue';
@@ -22,7 +22,7 @@
     {totalJobs: 0}
   );
 
-  const columnHelper = createColumnHelper<JobInfo>();
+  const columnHelper = createColumnHelper<CraftTableFeatures, JobInfo>();
 
   function getStatusVariant(value: number) {
     if (value === 2 || value === 3) {
@@ -44,59 +44,61 @@
     return job.status.value == JobStatus.Failed;
   }
 
-  const columns = ref([
-    columnHelper.accessor('description', {
-      header: () => t('Name'),
-      cell: ({row, getValue}) =>
-        h(
-          CpLink,
-          {href: show.url({id: 'queue-manager', extra: row.original.uid})},
-          () => getValue()
-        ),
-    }),
-    columnHelper.accessor('status', {
-      header: () => t('Status'),
-      size: 80,
-      cell: (info) =>
-        h(
-          'craft-badge',
-          {
-            fill: getStatusVariant(info.getValue().value),
-          },
-          info.getValue().label
-        ),
-    }),
-    columnHelper.display({
-      id: 'progress',
-      header: () => t('Progress'),
-      cell: ({row}) =>
-        row.original.progress > 0
-          ? `${row.original.progress}% ${row.original.progressLabel ? `(${row.original.progressLabel})` : ''}`
-          : '',
-    }),
-    columnHelper.display({
-      id: 'actions',
-      cell: ({row}) => {
-        return h('div', {class: 'flex justify-end gap-2'}, [
-          isRetryable(row.original)
-            ? h(RetryJobButton, {job: row.original})
-            : null,
-          row.original.status.value !== JobStatus.Done
-            ? h(ReleaseJobButton, {job: row.original})
-            : null,
-        ]);
-      },
-    }),
-  ]);
+  const columns = ref(
+    columnHelper.columns([
+      columnHelper.accessor('description', {
+        header: () => t('Name'),
+        cell: ({row, getValue}) =>
+          h(
+            CpLink,
+            {href: show.url({id: 'queue-manager', extra: row.original.uid})},
+            () => getValue()
+          ),
+      }),
+      columnHelper.accessor('status', {
+        header: () => t('Status'),
+        size: 80,
+        cell: (info) =>
+          h(
+            'craft-badge',
+            {
+              fill: getStatusVariant(info.getValue().value),
+            },
+            info.getValue().label
+          ),
+      }),
+      columnHelper.display({
+        id: 'progress',
+        header: () => t('Progress'),
+        cell: ({row}) =>
+          row.original.progress > 0
+            ? `${row.original.progress}% ${row.original.progressLabel ? `(${row.original.progressLabel})` : ''}`
+            : '',
+      }),
+      columnHelper.display({
+        id: 'actions',
+        cell: ({row}) => {
+          return h('div', {class: 'flex justify-end gap-2'}, [
+            isRetryable(row.original)
+              ? h(RetryJobButton, {job: row.original})
+              : null,
+            row.original.status.value !== JobStatus.Done
+              ? h(ReleaseJobButton, {job: row.original})
+              : null,
+          ]);
+        },
+      }),
+    ])
+  );
 
-  const jobsTable = useVueTable({
+  const jobsTable = useTable({
+    features: craftTableFeatures,
     get data() {
       return props.jobs;
     },
     get columns() {
       return columns.value;
     },
-    getCoreRowModel: getCoreRowModel<JobInfo>(),
   });
 </script>
 
diff --git a/resources/js/pages/graphql/schemas/Index.vue b/resources/js/pages/graphql/schemas/Index.vue
index 18cec647cd2..7a7e3b287b0 100644
--- a/resources/js/pages/graphql/schemas/Index.vue
+++ b/resources/js/pages/graphql/schemas/Index.vue
@@ -3,7 +3,8 @@
   import {h} from 'vue';
   import {t} from '@craftcms/ui';
   import AdminTable from '@/modules/admin-table/components/AdminTable.vue';
-  import {getCoreRowModel, useVueTable} from '@tanstack/vue-table';
+  import {useTable} from '@tanstack/vue-table';
+  import {craftTableFeatures} from '@/modules/admin-table/tableFeatures';
   import {createCraftColumnHelper} from '@/modules/admin-table/helpers/createCraftColumnHelper';
   import {create, destroy, edit} from '@actions/Gql/SchemasController';
   import DeleteButton from '@/modules/admin-table/components/DeleteButton.vue';
@@ -25,7 +26,8 @@
   }>();
 
   const columnHelper = createCraftColumnHelper<SchemaData>();
-  const table = useVueTable({
+  const table = useTable({
+    features: craftTableFeatures,
     get columns() {
       return [
         columnHelper.link('name', {
@@ -80,7 +82,6 @@
       },
     },
     enableSorting: false,
-    getCoreRowModel: getCoreRowModel<SchemaData>(),
   });
 </script>
 
diff --git a/resources/js/pages/graphql/tokens/Index.vue b/resources/js/pages/graphql/tokens/Index.vue
index bb4a2e6bfc4..ca8fb6a4e1b 100644
--- a/resources/js/pages/graphql/tokens/Index.vue
+++ b/resources/js/pages/graphql/tokens/Index.vue
@@ -2,7 +2,8 @@
   import {h} from 'vue';
   import {t} from '@craftcms/ui';
   import AdminTable from '@/modules/admin-table/components/AdminTable.vue';
-  import {getCoreRowModel, useVueTable} from '@tanstack/vue-table';
+  import {useTable} from '@tanstack/vue-table';
+  import {craftTableFeatures} from '@/modules/admin-table/tableFeatures';
   import {createCraftColumnHelper} from '@/modules/admin-table/helpers/createCraftColumnHelper';
   import CpButtonLink from '@/common/components/CpButtonLink.vue';
   import DeleteButton from '@/modules/admin-table/components/DeleteButton.vue';
@@ -38,7 +39,8 @@
   }>();
 
   const columnHelper = createCraftColumnHelper<TokenData>();
-  const table = useVueTable({
+  const table = useTable({
+    features: craftTableFeatures,
     get columns() {
       return [
         columnHelper.link('name', {
@@ -85,7 +87,6 @@
       },
     },
     enableSorting: false,
-    getCoreRowModel: getCoreRowModel<TokenData>(),
   });
 </script>
 
diff --git a/resources/js/pages/settings/assets/Index.vue b/resources/js/pages/settings/assets/Index.vue
index ed8e0cad0b4..5fa5b56f0f5 100644
--- a/resources/js/pages/settings/assets/Index.vue
+++ b/resources/js/pages/settings/assets/Index.vue
@@ -1,7 +1,11 @@
 <script setup lang="ts">
   import {t} from '@craftcms/ui';
   import AdminTable from '@/modules/admin-table/components/AdminTable.vue';
-  import {getCoreRowModel, useVueTable} from '@tanstack/vue-table';
+  import {useTable} from '@tanstack/vue-table';
+  import {
+    craftTableFeatures,
+    type CraftTableFeatures,
+  } from '@/modules/admin-table/tableFeatures';
   import {computed, h, nextTick, ref, watch} from 'vue';
   import {createCraftColumnHelper} from '@/modules/admin-table/helpers/createCraftColumnHelper';
   import DeleteButton from '@/modules/admin-table/components/DeleteButton.vue';
@@ -110,7 +114,8 @@
     ]),
   ]);
 
-  const table = useVueTable<VolumeData>({
+  const table = useTable<CraftTableFeatures, VolumeData>({
+    features: craftTableFeatures,
     get data() {
       return volumes.value;
     },
@@ -123,7 +128,6 @@
       },
     },
     enableSorting: false,
-    getCoreRowModel: getCoreRowModel<VolumeData>(),
   });
 
   useAppLayout({title: props.title});
diff --git a/resources/js/pages/settings/assets/transformers/Index.vue b/resources/js/pages/settings/assets/transformers/Index.vue
index 790030d348f..32e00c00a06 100644
--- a/resources/js/pages/settings/assets/transformers/Index.vue
+++ b/resources/js/pages/settings/assets/transformers/Index.vue
@@ -1,7 +1,11 @@
 <script setup lang="ts">
   import {t} from '@craftcms/ui';
   import {router} from '@inertiajs/vue3';
-  import {getCoreRowModel, useVueTable} from '@tanstack/vue-table';
+  import {useTable} from '@tanstack/vue-table';
+  import {
+    craftTableFeatures,
+    type CraftTableFeatures,
+  } from '@/modules/admin-table/tableFeatures';
   import {computed, h, ref} from 'vue';
   import CpButtonLink from '@/common/components/CpButtonLink.vue';
   import LayoutSlot from '@/common/components/LayoutSlot.vue';
@@ -30,66 +34,73 @@
     driver: true,
     actions: !props.readOnly,
   }));
-  const columns = ref([
-    columnHelper.link(
-      (transformer) =>
-        transformer.isDefault
-          ? `${transformer.name} (${t('Default')})`
-          : transformer.name,
-      {
-        id: 'name',
-        header: t('Name'),
-        props: ({row}) => ({
-          href: edit({handle: row.original.handle}).url,
-        }),
-      }
-    ),
-    columnHelper.handle('handle'),
-    columnHelper.accessor('driver', {
-      header: t('Driver'),
-    }),
-    columnHelper.actions(({row}) => {
-      const transformer = row.original;
-      const deleteButton = h(DeleteButton, {
-        confirm: t(
-          'Are you sure you want to delete the “{name}” Asset Transformer?',
-          {
-            name: transformer.name,
-          }
-        ),
-        disabled: transformer.deleteDisabledReason !== null,
-        onClick: () =>
-          router
-            .optimistic<{transformers: Array<AssetTransformerIndexData>}>(
-              ({transformers}) => ({
-                transformers: transformers.filter(
-                  ({handle}) => handle !== transformer.handle
-                ),
-              })
-            )
-            .delete(destroy({handle: transformer.handle})),
-      });
+  const columns = ref(
+    columnHelper.columns([
+      columnHelper.link(
+        (transformer) =>
+          transformer.isDefault
+            ? `${transformer.name} (${t('Default')})`
+            : transformer.name,
+        {
+          id: 'name',
+          header: t('Name'),
+          props: ({row}) => ({
+            href: edit({handle: row.original.handle}).url,
+          }),
+        }
+      ),
+      columnHelper.handle('handle'),
+      columnHelper.accessor('driver', {
+        header: t('Driver'),
+      }),
+      columnHelper.actions(({row}) => {
+        const transformer = row.original;
+        const deleteButton = h(DeleteButton, {
+          confirm: t(
+            'Are you sure you want to delete the “{name}” Asset Transformer?',
+            {
+              name: transformer.name,
+            }
+          ),
+          disabled: transformer.deleteDisabledReason !== null,
+          onClick: () =>
+            router
+              .optimistic<{transformers: Array<AssetTransformerIndexData>}>(
+                ({transformers}) => ({
+                  transformers: transformers.filter(
+                    ({handle}) => handle !== transformer.handle
+                  ),
+                })
+              )
+              .delete(destroy({handle: transformer.handle})),
+        });
 
-      if (transformer.deleteDisabledReason === null) {
-        return [deleteButton];
-      }
+        if (transformer.deleteDisabledReason === null) {
+          return [deleteButton];
+        }
 
-      const tooltipId = `delete-asset-transformer-${transformer.uid}`;
+        const tooltipId = `delete-asset-transformer-${transformer.uid}`;
 
-      return [
-        h(
-          'span',
-          {
-            id: tooltipId,
-            class: 'inline-flex',
-          },
-          deleteButton
-        ),
-        h('craft-tooltip', {for: tooltipId}, transformer.deleteDisabledReason),
-      ];
-    }),
-  ]);
-  const table = useVueTable<AssetTransformerIndexData>({
+        return [
+          h(
+            'span',
+            {
+              id: tooltipId,
+              class: 'inline-flex',
+            },
+            deleteButton
+          ),
+          h(
+            'craft-tooltip',
+            {for: tooltipId},
+            transformer.deleteDisabledReason
+          ),
+        ];
+      }),
+    ])
+  );
+  const table = useTable<CraftTableFeatures, AssetTransformerIndexData>({
+    features: craftTableFeatures,
     get data() {
       return props.transformers;
     },
@@ -102,7 +113,6 @@
       },
     },
     enableSorting: false,
-    getCoreRowModel: getCoreRowModel<AssetTransformerIndexData>(),
   });
 </script>
 
diff --git a/resources/js/pages/settings/assets/transforms/Index.vue b/resources/js/pages/settings/assets/transforms/Index.vue
index a3fbb5c1b77..b19b27871f6 100644
--- a/resources/js/pages/settings/assets/transforms/Index.vue
+++ b/resources/js/pages/settings/assets/transforms/Index.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
   import {capitalize, t} from '@craftcms/ui';
-  import {getCoreRowModel, useVueTable} from '@tanstack/vue-table';
+  import {useTable} from '@tanstack/vue-table';
+  import {craftTableFeatures} from '@/modules/admin-table/tableFeatures';
   import {createCraftColumnHelper} from '@/modules/admin-table/helpers/createCraftColumnHelper';
   import {h, ref} from 'vue';
   import CpButtonLink from '@/common/components/CpButtonLink.vue';
@@ -34,57 +35,63 @@
     handle: true,
   });
   const columnHelper = createCraftColumnHelper<ExistingImageTransform>();
-  const columns = ref([
-    columnHelper.link('name', {
-      header: t('Name'),
-      props: ({row}) => ({
-        href: edit({transformHandle: row.original.handle}).url,
-        inertia: true,
+  const columns = ref(
+    columnHelper.columns([
+      columnHelper.link('name', {
+        header: t('Name'),
+        props: ({row}) => ({
+          href: edit({transformHandle: row.original.handle}).url,
+          inertia: true,
+        }),
+      }),
+      columnHelper.handle('handle'),
+      columnHelper.accessor('mode', {
+        header: t('Mode'),
+      }),
+      columnHelper.display({
+        id: 'dimensions',
+        header: t('Dimensions'),
+        cell: ({row}) =>
+          `${row.original.width ?? 'Auto'} x ${row.original.height ?? 'Auto'}`,
       }),
-    }),
-    columnHelper.handle('handle'),
-    columnHelper.accessor('mode', {
-      header: t('Mode'),
-    }),
-    columnHelper.display({
-      id: 'dimensions',
-      header: t('Dimensions'),
-      cell: ({row}) =>
-        `${row.original.width ?? 'Auto'} x ${row.original.height ?? 'Auto'}`,
-    }),
 
-    columnHelper.accessor('interlace', {
-      header: t('Interlace'),
-      cell: ({row}) =>
-        row.original.interlace ? capitalize(row.original.interlace) : 'None',
-    }),
+      columnHelper.accessor('interlace', {
+        header: t('Interlace'),
+        cell: ({row}) =>
+          row.original.interlace ? capitalize(row.original.interlace) : 'None',
+      }),
 
-    columnHelper.accessor('format', {
-      header: t('Format'),
-      cell: ({row}) =>
-        row.original.format ? capitalize(row.original.format) : 'Auto',
-    }),
-    columnHelper.actions(({row}) => [
-      h(DeleteButton, {
-        confirm: t('Are you sure you want to delete the “{name}” transform?', {
-          name: row.original.name,
-        }),
-        onClick: () =>
-          router
-            .optimistic<{transforms: Array<ExistingImageTransform>}>(
-              (props) => ({
-                transforms: props.transforms.filter(
-                  ({id}) => id !== row.original.id
-                ),
-              })
-            )
-            .delete(destroy({transformId: row.original.id}), {
-              preserveScroll: true,
-            }),
+      columnHelper.accessor('format', {
+        header: t('Format'),
+        cell: ({row}) =>
+          row.original.format ? capitalize(row.original.format) : 'Auto',
       }),
-    ]),
-  ]);
-  const table = useVueTable({
+      columnHelper.actions(({row}) => [
+        h(DeleteButton, {
+          confirm: t(
+            'Are you sure you want to delete the “{name}” transform?',
+            {
+              name: row.original.name,
+            }
+          ),
+          onClick: () =>
+            router
+              .optimistic<{transforms: Array<ExistingImageTransform>}>(
+                (props) => ({
+                  transforms: props.transforms.filter(
+                    ({id}) => id !== row.original.id
+                  ),
+                })
+              )
+              .delete(destroy({transformId: row.original.id}), {
+                preserveScroll: true,
+              }),
+        }),
+      ]),
+    ])
+  );
+  const table = useTable({
+    features: craftTableFeatures,
     get data() {
       return props.transforms;
     },
@@ -92,7 +99,6 @@
       return columns.value;
     },
     enableSorting: false,
-    getCoreRowModel: getCoreRowModel<ExistingImageTransform>(),
     state: {
       get columnVisibility() {
         return columnVisibility.value;
diff --git a/resources/js/pages/settings/entry-types/Index.vue b/resources/js/pages/settings/entry-types/Index.vue
index 54c44a9faf4..5ec9a7ba406 100644
--- a/resources/js/pages/settings/entry-types/Index.vue
+++ b/resources/js/pages/settings/entry-types/Index.vue
@@ -1,7 +1,11 @@
 <script setup lang="ts">
   import {t} from '@craftcms/ui';
   import AdminTable from '@/modules/admin-table/components/AdminTable.vue';
-  import {getCoreRowModel, useVueTable} from '@tanstack/vue-table';
+  import {useTable} from '@tanstack/vue-table';
+  import {
+    craftTableFeatures,
+    type CraftTableFeatures,
+  } from '@/modules/admin-table/tableFeatures';
   import {type PaginationData, type SortItem} from '@/common/types';
   import {computed, h, ref} from 'vue';
   import DynamicHtmlRenderer from '@/common/components/DynamicHtmlRenderer.vue';
@@ -39,34 +43,36 @@
       actions: !props.readOnly,
     };
   });
-  const columns = computed(() => [
-    columnHelper.display({
-      id: 'name',
-      header: t('Entry Type'),
-      cell: ({row}) => h(DynamicHtmlRenderer, {html: row.original.chip}),
-    }),
-    columnHelper.accessor('handle', {
-      header: t('Handle'),
-      meta: {
-        cellClass: 'justify-center',
-      },
-      cell: ({getValue}) =>
-        h('craft-copy-attribute', {value: getValue()}, getValue()),
-    }),
-    columnHelper.accessor('usages', {
-      header: t('Usages'),
-      cell: ({getValue}) => h(DynamicHtmlRenderer, {html: getValue()}),
-    }),
-    columnHelper.actions(({row}) => [
-      h(DeleteButton, {
-        confirm: t(
-          'Are you sure you want to delete “{name}” and all entries of that type?',
-          {name: row.original.title}
-        ),
-        onClick: () => router.delete(destroy({entryType: row.original.id})),
+  const columns = computed(() =>
+    columnHelper.columns([
+      columnHelper.display({
+        id: 'name',
+        header: t('Entry Type'),
+        cell: ({row}) => h(DynamicHtmlRenderer, {html: row.original.chip}),
+      }),
+      columnHelper.accessor('handle', {
+        header: t('Handle'),
+        meta: {
+          cellClass: 'justify-center',
+        },
+        cell: ({getValue}) =>
+          h('craft-copy-attribute', {value: getValue()}, getValue()),
+      }),
+      columnHelper.accessor('usages', {
+        header: t('Usages'),
+        cell: ({getValue}) => h(DynamicHtmlRenderer, {html: getValue()}),
       }),
-    ]),
-  ]);
+      columnHelper.actions(({row}) => [
+        h(DeleteButton, {
+          confirm: t(
+            'Are you sure you want to delete “{name}” and all entries of that type?',
+            {name: row.original.title}
+          ),
+          onClick: () => router.delete(destroy({entryType: row.original.id})),
+        }),
+      ]),
+    ])
+  );
 
   const {paginationState, paginationConfig} = useServerPagination({
     initialState: props.pagination,
@@ -104,7 +110,8 @@
     },
   });
 
-  const table = useVueTable<EntryTypeRow>({
+  const table = useTable<CraftTableFeatures, EntryTypeRow>({
+    features: craftTableFeatures,
     get data() {
       return entryTypes.value;
     },
@@ -123,7 +130,6 @@
         return columnVisibility.value;
       },
     },
-    getCoreRowModel: getCoreRowModel<EntryTypeRow>(),
     ...paginationConfig,
     ...sortingConfig,
   });
diff --git a/resources/js/pages/settings/fields/Index.vue b/resources/js/pages/settings/fields/Index.vue
index 351c220ce01..8774eb491e2 100644
--- a/resources/js/pages/settings/fields/Index.vue
+++ b/resources/js/pages/settings/fields/Index.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
   import {t} from '@craftcms/ui';
   import AdminTable from '@/modules/admin-table/components/AdminTable.vue';
+  import {createColumnHelper, useTable} from '@tanstack/vue-table';
   import {
-    createColumnHelper,
-    getCoreRowModel,
-    useVueTable,
-  } from '@tanstack/vue-table';
+    craftTableFeatures,
+    type CraftTableFeatures,
+  } from '@/modules/admin-table/tableFeatures';
   import {computed, h, ref} from 'vue';
   import type {PaginationData, SortItem} from '@/common/types';
   import {useServerPagination} from '@/modules/admin-table/composables/useServerPagination';
@@ -46,7 +46,7 @@
   }>();
 
   const searchTerm = ref(props.searchTerm ?? '');
-  const columnHelper = createColumnHelper<FieldRow>();
+  const columnHelper = createColumnHelper<CraftTableFeatures, FieldRow>();
   const columnVisibility = computed(() => {
     return {
       name: true,
@@ -58,87 +58,89 @@
       actions: !props.readOnly,
     };
   });
-  const columns = ref([
-    columnHelper.accessor('title', {
-      header: t('Name'),
-      meta: {
-        trackSize: '1.5fr',
-      },
-      cell: ({row, getValue}) =>
-        h(CpLink, {href: row.original.url, class: 'font-bold'}, getValue),
-    }),
-    columnHelper.accessor('searchable', {
-      header: t('Searchable'),
-      meta: {
-        trackSize: '34px',
-        headerSrOnly: true,
-      },
-      enableSorting: false,
-      cell: ({row}) => {
-        if (row.original.searchable) {
-          return h('craft-icon', {
-            appearance: 'badge',
-            name: 'magnifying-glass',
-            label: t('This field’s values are used as search keywords.'),
-          });
-        }
-      },
-    }),
-    columnHelper.accessor('translatable', {
-      header: t('Translatable'),
-      meta: {
-        trackSize: '34px',
-        headerSrOnly: true,
-      },
-      enableSorting: false,
-      cell: ({getValue}) => {
-        if (getValue()) {
-          return h('craft-icon', {
-            appearance: 'badge',
-            name: 'custom-icons/language',
-            label: getValue(),
-          });
-        }
-      },
-    }),
-    columnHelper.accessor('handle', {
-      header: t('Handle'),
-      cell: ({getValue}) =>
-        h('craft-copy-attribute', {value: getValue()}, getValue),
-    }),
-    columnHelper.display({
-      id: 'type',
-      header: t('Type'),
-      cell: ({row}) => {
-        if (row.original.type.isMissing) {
-          return t('Missing');
-        }
+  const columns = ref(
+    columnHelper.columns([
+      columnHelper.accessor('title', {
+        header: t('Name'),
+        meta: {
+          trackSize: '1.5fr',
+        },
+        cell: ({row, getValue}) =>
+          h(CpLink, {href: row.original.url, class: 'font-bold'}, getValue),
+      }),
+      columnHelper.accessor('searchable', {
+        header: t('Searchable'),
+        meta: {
+          trackSize: '34px',
+          headerSrOnly: true,
+        },
+        enableSorting: false,
+        cell: ({row}) => {
+          if (row.original.searchable) {
+            return h('craft-icon', {
+              appearance: 'badge',
+              name: 'magnifying-glass',
+              label: t('This field’s values are used as search keywords.'),
+            });
+          }
+        },
+      }),
+      columnHelper.accessor('translatable', {
+        header: t('Translatable'),
+        meta: {
+          trackSize: '34px',
+          headerSrOnly: true,
+        },
+        enableSorting: false,
+        cell: ({getValue}) => {
+          if (getValue()) {
+            return h('craft-icon', {
+              appearance: 'badge',
+              name: 'custom-icons/language',
+              label: getValue(),
+            });
+          }
+        },
+      }),
+      columnHelper.accessor('handle', {
+        header: t('Handle'),
+        cell: ({getValue}) =>
+          h('craft-copy-attribute', {value: getValue()}, getValue),
+      }),
+      columnHelper.display({
+        id: 'type',
+        header: t('Type'),
+        cell: ({row}) => {
+          if (row.original.type.isMissing) {
+            return t('Missing');
+          }
 
-        return h('div', {class: 'flex items-center gap-2'}, [
-          h('craft-icon', row.original.type.icon),
-          h('span', row.original.type.label),
-        ]);
-      },
-    }),
-    columnHelper.accessor('usages', {
-      header: t('Used by'),
-    }),
-    columnHelper.display({
-      id: 'actions',
-      meta: {
-        trackSize: '60px',
-      },
-      cell: ({row}) =>
-        h('div', {class: 'self-end flex justify-end'}, [
-          h(DeleteButton, {
-            confirm: t('Are you sure you want to delete “{name}”?', {
-              name: row.original.title,
+          return h('div', {class: 'flex items-center gap-2'}, [
+            h('craft-icon', row.original.type.icon),
+            h('span', row.original.type.label),
+          ]);
+        },
+      }),
+      columnHelper.accessor('usages', {
+        header: t('Used by'),
+      }),
+      columnHelper.display({
+        id: 'actions',
+        meta: {
+          trackSize: '60px',
+        },
+        cell: ({row}) =>
+          h('div', {class: 'self-end flex justify-end'}, [
+            h(DeleteButton, {
+              confirm: t('Are you sure you want to delete “{name}”?', {
+                name: row.original.title,
+              }),
+              onClick: () => router.delete(destroy({fieldId: row.original.id})),
             }),
-            onClick: () => router.delete(destroy({fieldId: row.original.id})),
-          }),
-        ]),
-    }),
-  ]);
+          ]),
+      }),
+    ])
+  );
 
   const {paginationState, paginationConfig} = useServerPagination({
     initialState: props.pagination,
@@ -175,7 +177,8 @@
     },
   });
 
-  const table = useVueTable({
+  const table = useTable({
+    features: craftTableFeatures,
     get data() {
       return props.data;
     },
@@ -193,8 +196,6 @@
         return sortingState.value;
       },
     },
-
-    getCoreRowModel: getCoreRowModel<FieldRow>(),
     ...paginationConfig,
     ...sortingConfig,
   });
diff --git a/resources/js/pages/settings/sections/Index.vue b/resources/js/pages/settings/sections/Index.vue
index bd69c1eb888..db809a64d3b 100644
--- a/resources/js/pages/settings/sections/Index.vue
+++ b/resources/js/pages/settings/sections/Index.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
   import CpButtonLink from '@/common/components/CpButtonLink.vue';
-  import {getCoreRowModel, useVueTable} from '@tanstack/vue-table';
+  import {useTable} from '@tanstack/vue-table';
+  import {craftTableFeatures} from '@/modules/admin-table/tableFeatures';
   import AdminTable from '@/modules/admin-table/components/AdminTable.vue';
   import {h, ref} from 'vue';
   import {t} from '@craftcms/ui/utilities/translate';
@@ -42,23 +43,25 @@
 
   useAppLayout(() => ({title: props.title}));
   const columnHelper = createCraftColumnHelper<SectionModel>();
-  const columns = ref([
-    columnHelper.link('name', {
-      header: t('Name'),
-      props: ({row}) => ({href: edit({section: row.original.id}).url}),
-    }),
-    columnHelper.accessor('handle', {
-      header: t('Handle'),
-      cell: ({getValue}) =>
-        h('craft-copy-attribute', {value: getValue()}, getValue()),
-    }),
-    columnHelper.accessor('type', {
-      header: t('Type'),
-    }),
-    columnHelper.actions(({row}) => [
-      h(DeleteSectionButton, {section: row.original}),
-    ]),
-  ]);
+  const columns = ref(
+    columnHelper.columns([
+      columnHelper.link('name', {
+        header: t('Name'),
+        props: ({row}) => ({href: edit({section: row.original.id}).url}),
+      }),
+      columnHelper.accessor('handle', {
+        header: t('Handle'),
+        cell: ({getValue}) =>
+          h('craft-copy-attribute', {value: getValue()}, getValue()),
+      }),
+      columnHelper.accessor('type', {
+        header: t('Type'),
+      }),
+      columnHelper.actions(({row}) => [
+        h(DeleteSectionButton, {section: row.original}),
+      ]),
+    ])
+  );
 
   const {paginationState, paginationConfig} = useServerPagination({
     initialState: props.pagination,
@@ -96,14 +99,14 @@
     },
   });
 
-  const sectionTable = useVueTable({
+  const sectionTable = useTable({
+    features: craftTableFeatures,
     get data() {
       return props.data;
     },
     get columns() {
       return columns.value;
     },
-    getCoreRowModel: getCoreRowModel<SectionModel>(),
     state: {
       get pagination() {
         return paginationState.value;
diff --git a/resources/js/pages/settings/sites/Index.vue b/resources/js/pages/settings/sites/Index.vue
index 6ada1763d45..df1ffaba4b0 100644
--- a/resources/js/pages/settings/sites/Index.vue
+++ b/resources/js/pages/settings/sites/Index.vue
@@ -3,7 +3,8 @@
   import type {TextExpanderTriggers} from '@craftcms/ui/components/text-expander/text-expander';
   import CalloutReadOnly from '@/common/components/CalloutReadOnly.vue';
   import AdminTable from '@/modules/admin-table/components/AdminTable.vue';
-  import {getCoreRowModel, useVueTable} from '@tanstack/vue-table';
+  import {useTable} from '@tanstack/vue-table';
+  import {craftTableFeatures} from '@/modules/admin-table/tableFeatures';
   import {computed, h, nextTick, ref, watch} from 'vue';
   import type {Site, SiteGroup} from '@/common/types';
   import ModalForm from '@/common/components/ModalForm.vue';
@@ -100,78 +101,83 @@
     siteIds.value = newIds;
   }
 
-  const columns = ref([
-    columnHelper.accessor('name', {
-      header: () => t('Name'),
-      cell: ({row, getValue}) =>
-        h(
-          CpLink,
-          {
-            href: edit.url({site: row.original.id}),
-            block: true,
-          },
-          () =>
-            h(
-              'div',
-              {
-                class: 'flex gap-2 items-center',
-              },
-              [
-                h('craft-indicator', {
-                  variant: row.original.enabled ? 'success' : 'empty',
-                  appearance: row.original.enabled ? 'outline-fill' : 'outline',
-                }),
-                h('span', getValue()),
-              ]
-            )
-        ),
-    }),
-    columnHelper.accessor('handle', {
-      header: () => t('Handle'),
-      cell: (info) => h('code', info.getValue()),
-    }),
-    columnHelper.accessor('enabled', {
-      header: () => t('Status'),
-      cell: (info) =>
-        h(
-          'craft-badge',
-          {
-            fill: info.getValue() ? 'success' : 'default',
-          },
-          info.getValue() ? t('Enabled') : t('Disabled')
-        ),
-    }),
-    columnHelper.accessor('language', {
-      header: () => t('Language'),
-      cell: (info) => h('code', info.getValue()),
-    }),
-    columnHelper.accessor('primary', {
-      header: () => t('Primary'),
-      cell: (info) =>
-        info.getValue()
-          ? h('craft-icon', {
-              name: 'check',
-            })
-          : '',
-    }),
-    columnHelper.accessor('baseUrl', {
-      header: () => t('Base URL'),
-      cell: (info) => h('code', info.getValue()),
-    }),
-    columnHelper.accessor('group.name', {
-      id: 'group',
-      header: () => t('Group'),
-    }),
-    columnHelper.actions(({row}) => [
-      h(DeleteSiteButton, {
-        site: row.original,
-        disabled: row.original.primary,
-        class: 'whitespace-normal',
+  const columns = ref(
+    columnHelper.columns([
+      columnHelper.accessor('name', {
+        header: () => t('Name'),
+        cell: ({row, getValue}) =>
+          h(
+            CpLink,
+            {
+              href: edit.url({site: row.original.id}),
+              block: true,
+            },
+            () =>
+              h(
+                'div',
+                {
+                  class: 'flex gap-2 items-center',
+                },
+                [
+                  h('craft-indicator', {
+                    variant: row.original.enabled ? 'success' : 'empty',
+                    appearance: row.original.enabled
+                      ? 'outline-fill'
+                      : 'outline',
+                  }),
+                  h('span', getValue()),
+                ]
+              )
+          ),
+      }),
+      columnHelper.accessor('handle', {
+        header: () => t('Handle'),
+        cell: (info) => h('code', info.getValue()),
+      }),
+      columnHelper.accessor('enabled', {
+        header: () => t('Status'),
+        cell: (info) =>
+          h(
+            'craft-badge',
+            {
+              fill: info.getValue() ? 'success' : 'default',
+            },
+            info.getValue() ? t('Enabled') : t('Disabled')
+          ),
+      }),
+      columnHelper.accessor('language', {
+        header: () => t('Language'),
+        cell: (info) => h('code', info.getValue()),
+      }),
+      columnHelper.accessor('primary', {
+        header: () => t('Primary'),
+        cell: (info) =>
+          info.getValue()
+            ? h('craft-icon', {
+                name: 'check',
+              })
+            : '',
+      }),
+      columnHelper.accessor('baseUrl', {
+        header: () => t('Base URL'),
+        cell: (info) => h('code', info.getValue()),
+      }),
+      columnHelper.accessor('group.name', {
+        id: 'group',
+        header: () => t('Group'),
       }),
-    ]),
-  ]);
+      columnHelper.actions(({row}) => [
+        h(DeleteSiteButton, {
+          site: row.original,
+          disabled: row.original.primary,
+          class: 'whitespace-normal',
+        }),
+      ]),
+    ])
+  );
 
-  const sitesTable = useVueTable({
+  const sitesTable = useTable({
+    features: craftTableFeatures,
     get data() {
       return sites.value;
     },
@@ -185,7 +191,6 @@
         };
       },
     },
-    getCoreRowModel: getCoreRowModel<Site>(),
     getRowId: (row) => row.id.toString(),
     enableSorting: false,
     defaultColumn: {
diff --git a/resources/js/pages/settings/users/groups/Index.vue b/resources/js/pages/settings/users/groups/Index.vue
index f63db423b9c..064068d8238 100644
--- a/resources/js/pages/settings/users/groups/Index.vue
+++ b/resources/js/pages/settings/users/groups/Index.vue
@@ -3,7 +3,8 @@
   import {h} from 'vue';
   import LayoutSlot from '@/common/components/LayoutSlot.vue';
   import AdminTable from '@/modules/admin-table/components/AdminTable.vue';
-  import {getCoreRowModel, useVueTable} from '@tanstack/vue-table';
+  import {useTable} from '@tanstack/vue-table';
+  import {craftTableFeatures} from '@/modules/admin-table/tableFeatures';
   import {
     create,
     destroy,
@@ -22,7 +23,8 @@
   }>();
 
   const columnHelper = createCraftColumnHelper<UserGroup>();
-  const table = useVueTable({
+  const table = useTable({
+    features: craftTableFeatures,
     get columns() {
       return [
         columnHelper.link('name', {
@@ -51,7 +53,6 @@
     get data() {
       return props.groups;
     },
-    getCoreRowModel: getCoreRowModel<UserGroup>(),
   });
 </script>
 
diff --git a/resources/js/pages/settings/workflows/Index.vue b/resources/js/pages/settings/workflows/Index.vue
index 97ae2153387..16185e7f82c 100644
--- a/resources/js/pages/settings/workflows/Index.vue
+++ b/resources/js/pages/settings/workflows/Index.vue
@@ -1,7 +1,11 @@
 <script setup lang="ts">
   import {t} from '@craftcms/ui';
   import {router} from '@inertiajs/vue3';
-  import {getCoreRowModel, useVueTable} from '@tanstack/vue-table';
+  import {useTable} from '@tanstack/vue-table';
+  import {
+    craftTableFeatures,
+    type CraftTableFeatures,
+  } from '@/modules/admin-table/tableFeatures';
   import {computed, h, ref} from 'vue';
   import CpContainer from '@/common/components/CpContainer.vue';
   import CpLink from '@/common/components/CpLink.vue';
@@ -39,24 +43,26 @@
 
   useAppLayout({title: props.title, form: null});
   const columnHelper = createCraftColumnHelper<Workflow>();
-  const columns = computed(() => [
-    columnHelper.link('name', {
-      header: t('Name'),
-      props: ({row}) => ({href: edit({workflow: row.original.id}).url}),
-    }),
-    columnHelper.accessor('stages', {
-      header: t('Stages'),
-      enableSorting: false,
-    }),
-    columnHelper.actions(({row}) => [
-      h(DeleteButton, {
-        confirm: t('Are you sure you want to delete “{name}”?', {
-          name: row.original.name,
-        }),
-        onClick: () => router.delete(destroy({workflow: row.original.id})),
+  const columns = computed(() =>
+    columnHelper.columns([
+      columnHelper.link('name', {
+        header: t('Name'),
+        props: ({row}) => ({href: edit({workflow: row.original.id}).url}),
       }),
-    ]),
-  ]);
+      columnHelper.accessor('stages', {
+        header: t('Stages'),
+        enableSorting: false,
+      }),
+      columnHelper.actions(({row}) => [
+        h(DeleteButton, {
+          confirm: t('Are you sure you want to delete “{name}”?', {
+            name: row.original.name,
+          }),
+          onClick: () => router.delete(destroy({workflow: row.original.id})),
+        }),
+      ]),
+    ])
+  );
 
   const {paginationState, paginationConfig} = useServerPagination({
     initialState: props.pagination,
@@ -76,7 +82,8 @@
       });
     },
   });
-  const table = useVueTable<Workflow>({
+  const table = useTable<CraftTableFeatures, Workflow>({
+    features: craftTableFeatures,
     get data() {
       return props.data;
     },
@@ -94,7 +101,6 @@
         return {actions: !props.readOnly};
       },
     },
-    getCoreRowModel: getCoreRowModel<Workflow>(),
     ...paginationConfig,
     ...sortingConfig,
   });
diff --git a/resources/js/pages/users/Passkeys.vue b/resources/js/pages/users/Passkeys.vue
index ab6e30203f5..0f77edbd55d 100644
--- a/resources/js/pages/users/Passkeys.vue
+++ b/resources/js/pages/users/Passkeys.vue
@@ -7,7 +7,11 @@
     platformAuthenticatorIsAvailable,
     startRegistration,
   } from '@simplewebauthn/browser';
-  import {getCoreRowModel, useVueTable} from '@tanstack/vue-table';
+  import {useTable} from '@tanstack/vue-table';
+  import {
+    craftTableFeatures,
+    type CraftTableFeatures,
+  } from '@/modules/admin-table/tableFeatures';
   import CraftDate from '@/common/components/Date.vue';
   import AdminTable from '@/modules/admin-table/components/AdminTable.vue';
   import {createCraftColumnHelper} from '@/modules/admin-table/helpers/createCraftColumnHelper';
@@ -154,7 +158,8 @@
   }
 
   const columnHelper = createCraftColumnHelper<Passkey>();
-  const table = useVueTable<Passkey>({
+  const table = useTable<CraftTableFeatures, Passkey>({
+    features: craftTableFeatures,
     get data() {
       return page.props.passkeys;
     },
@@ -189,7 +194,6 @@
         ]),
       ];
     },
-    getCoreRowModel: getCoreRowModel<Passkey>(),
     enableSorting: false,
   });
 </script>
diff --git a/resources/js/pages/users/SignInProviders.vue b/resources/js/pages/users/SignInProviders.vue
index 873cc75c752..bd36085f1f9 100644
--- a/resources/js/pages/users/SignInProviders.vue
+++ b/resources/js/pages/users/SignInProviders.vue
@@ -3,7 +3,11 @@
   import {router, useHttp, usePage} from '@inertiajs/vue3';
   import {t} from '@craftcms/ui';
   import {connect, destroy} from '@actions/Users/SignInProvidersController';
-  import {getCoreRowModel, useVueTable} from '@tanstack/vue-table';
+  import {useTable} from '@tanstack/vue-table';
+  import {
+    craftTableFeatures,
+    type CraftTableFeatures,
+  } from '@/modules/admin-table/tableFeatures';
   import {createCraftColumnHelper} from '@/modules/admin-table/helpers/createCraftColumnHelper';
   import AdminTable from '@/modules/admin-table/components/AdminTable.vue';
   import {elevatedSessionManager} from '@/modules/auth/elevated-session';
@@ -71,7 +75,8 @@
   }
 
   const columnHelper = createCraftColumnHelper<Provider>();
-  const table = useVueTable<Provider>({
+  const table = useTable<CraftTableFeatures, Provider>({
+    features: craftTableFeatures,
     get data() {
       return page.props.providers;
     },
@@ -137,7 +142,6 @@
         ]),
       ];
     },
-    getCoreRowModel: getCoreRowModel<Provider>(),
     enableSorting: false,
   });
 </script>

From 4ef0d51ba14a418b232afc90a54ae209b3088835 Mon Sep 17 00:00:00 2001
From: Brian Hanson <brian@brianhanson.net>
Date: Sat, 26 Sep 2026 10:25:10 -0500
Subject: [PATCH 2/3] Build CP tables with createTableHook

- Add useCraftTable (createTableHook) with the shared features and
  defaults, replacing per-table `features` wiring
- Default to enableSorting: false; useServerSort opts tables back in.
  Tables with no sorting wired up no longer show sort buttons that
  did nothing
- Type column meta through a columnMeta slot instead of global
  declaration merging
- Use createCraftColumnHelper everywhere and the FlexRender shorthand

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/js/common/types/globals.d.ts        | 20 -------
 .../admin-table/components/AdminTable.vue     |  2 +-
 .../composables/useEditableTable.ts           | 12 ++--
 .../admin-table/composables/useServerSort.ts  |  2 +
 .../js/modules/admin-table/craftTable.test.ts | 39 ++++++++++++
 .../js/modules/admin-table/craftTable.ts      | 60 +++++++++++++++++++
 .../helpers/createCraftColumnHelper.ts        |  2 +-
 .../js/modules/admin-table/tableFeatures.ts   | 29 ---------
 .../useModalElementIndex.ts                   |  9 +--
 .../elements/components/BaseElementIndex.vue  |  2 +-
 .../modules/elements/components/DataTable.vue | 16 ++---
 .../composables/useElementIndexPage.ts        | 10 +---
 .../useElementIndexSelection.test.ts          |  2 +-
 .../composables/useElementIndexSelection.ts   |  2 +-
 .../composables/useElementIndexTable.ts       |  2 +-
 .../js/modules/elements/fixtures/elements.ts  |  2 +-
 .../plugin-manager/components/PluginsList.vue |  6 +-
 .../TwoStepVerification.vue                   | 10 +---
 .../utilities/components/Migrations.vue       | 12 ++--
 .../deprecation-errors/DeprecationErrors.vue  |  7 +--
 .../queue-manager/QueueManagerIndex.vue       | 12 ++--
 resources/js/pages/graphql/schemas/Index.vue  |  7 +--
 resources/js/pages/graphql/tokens/Index.vue   |  7 +--
 resources/js/pages/settings/assets/Index.vue  | 10 +---
 .../settings/assets/transformers/Index.vue    | 10 +---
 .../settings/assets/transforms/Index.vue      |  7 +--
 .../js/pages/settings/entry-types/Index.vue   |  9 +--
 resources/js/pages/settings/fields/Index.vue  | 12 ++--
 .../js/pages/settings/sections/Index.vue      |  6 +-
 resources/js/pages/settings/sites/Index.vue   |  7 +--
 .../js/pages/settings/users/groups/Index.vue  |  6 +-
 .../js/pages/settings/workflows/Index.vue     |  9 +--
 resources/js/pages/users/Passkeys.vue         | 10 +---
 resources/js/pages/users/SignInProviders.vue  | 10 +---
 34 files changed, 163 insertions(+), 205 deletions(-)
 create mode 100644 resources/js/modules/admin-table/craftTable.test.ts
 create mode 100644 resources/js/modules/admin-table/craftTable.ts
 delete mode 100644 resources/js/modules/admin-table/tableFeatures.ts

diff --git a/resources/js/common/types/globals.d.ts b/resources/js/common/types/globals.d.ts
index b2bcda7969e..4fefa41994f 100644
--- a/resources/js/common/types/globals.d.ts
+++ b/resources/js/common/types/globals.d.ts
@@ -29,26 +29,6 @@ interface LegacyModalInstance {
   destroy?(): void;
 }
 
-declare module '@tanstack/vue-table' {
-  interface ColumnMeta<
-    TFeatures extends TableFeatures,
-    TData extends RowData,
-    TValue extends CellData = CellData,
-  > {
-    wrap?: boolean;
-    // Applies classes to the cell
-    cellClass?: string | Record<string, boolean>;
-    cellTag?: 'td' | 'th';
-    headerTip?: string;
-    headerSrOnly?: boolean;
-    // Applies classes to the header
-    headerClass?: string | Record<string, boolean>;
-    // Applies classes to both the header and cell at once
-    columnClass?: string | Record<string, boolean>;
-    trackSize?: string;
-  }
-}
-
 // Set up interfaces and types
 interface ProgressBarInterface {
   // oxlint-disable-next-line @typescript-eslint/no-misused-new
diff --git a/resources/js/modules/admin-table/components/AdminTable.vue b/resources/js/modules/admin-table/components/AdminTable.vue
index 8e67573736e..1010e072b77 100644
--- a/resources/js/modules/admin-table/components/AdminTable.vue
+++ b/resources/js/modules/admin-table/components/AdminTable.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts" generic="TData extends Record<string, any>">
   import {computed} from 'vue';
   import type {Table} from '@tanstack/vue-table';
-  import type {CraftTableFeatures} from '@/modules/admin-table/tableFeatures';
+  import type {CraftTableFeatures} from '@/modules/admin-table/craftTable';
   import BaseElementIndex from '@/modules/elements/components/BaseElementIndex.vue';
   import DataTable from '@/modules/elements/components/DataTable.vue';
   import {TableSpacing, type TableSpacingValue} from '@/common/types';
diff --git a/resources/js/modules/admin-table/composables/useEditableTable.ts b/resources/js/modules/admin-table/composables/useEditableTable.ts
index 4a6b67c4c8e..da80003e587 100644
--- a/resources/js/modules/admin-table/composables/useEditableTable.ts
+++ b/resources/js/modules/admin-table/composables/useEditableTable.ts
@@ -11,13 +11,11 @@ import {
   type ColumnHelper,
   createColumnHelper,
   type Row,
-  type TableOptions,
-  useTable,
 } from '@tanstack/vue-table';
 import {
-  craftTableFeatures,
   type CraftTableFeatures,
-} from '@/modules/admin-table/tableFeatures';
+  useCraftTable,
+} from '@/modules/admin-table/craftTable';
 import CraftSwitch from '@craftcms/ui/vue/CraftSwitch.vue';
 import CraftCombobox from '@craftcms/ui/vue/CraftCombobox.vue';
 import type {SelectItem} from '@/common/types';
@@ -404,15 +402,13 @@ export function useEditableTable<T extends object>(
 
   const columnVisibility = options.columnVisibility;
 
-  const tableOptions: TableOptions<CraftTableFeatures, T> = {
-    features: craftTableFeatures,
+  const tableOptions: Parameters<typeof useCraftTable<T>>[0] = {
     get data() {
       return normalizedData.value;
     },
     get columns() {
       return columns.value;
     },
-    enableSorting: false,
     ...(columnVisibility && {
       state: {
         get columnVisibility() {
@@ -424,7 +420,7 @@ export function useEditableTable<T extends object>(
 
   Object.assign(tableOptions, {defaultColumn: {size: 'auto'}});
 
-  const table = useTable(tableOptions);
+  const table = useCraftTable(tableOptions);
 
   return {table};
 }
diff --git a/resources/js/modules/admin-table/composables/useServerSort.ts b/resources/js/modules/admin-table/composables/useServerSort.ts
index cbf7a88c7b0..2b1de272680 100644
--- a/resources/js/modules/admin-table/composables/useServerSort.ts
+++ b/resources/js/modules/admin-table/composables/useServerSort.ts
@@ -75,6 +75,8 @@ export function useServerSort({
   }
 
   const sortingConfig = {
+    // CP tables leave sorting off unless it's wired up like this.
+    enableSorting: true,
     manualSorting: true,
     enableMultiSort: true,
     enableSortingRemoval: false,
diff --git a/resources/js/modules/admin-table/craftTable.test.ts b/resources/js/modules/admin-table/craftTable.test.ts
new file mode 100644
index 00000000000..dc6ff5dc6cf
--- /dev/null
+++ b/resources/js/modules/admin-table/craftTable.test.ts
@@ -0,0 +1,39 @@
+import {beforeEach, describe, expect, it, vi} from 'vite-plus/test';
+import {useCraftTable} from './craftTable';
+import {createCraftColumnHelper} from './helpers/createCraftColumnHelper';
+import {useServerSort} from './composables/useServerSort';
+
+interface TestRow {
+  id: number;
+  title: string;
+}
+
+const data: TestRow[] = [{id: 1, title: 'First'}];
+const columnHelper = createCraftColumnHelper<TestRow>();
+const columns = columnHelper.columns([
+  columnHelper.accessor('title', {header: 'Title'}),
+]);
+
+beforeEach(() => {
+  // useServerSort reads the CP's page-param name off the legacy global.
+  vi.stubGlobal('Craft', {pageTrigger: 'page'});
+});
+
+describe('useCraftTable', () => {
+  it('leaves columns unsortable, as nothing would sort them', () => {
+    const table = useCraftTable({data, columns});
+
+    expect(table.getColumn('title')?.getCanSort()).toBe(false);
+  });
+
+  it('makes columns sortable for a table sorted on the server', () => {
+    const {sortingConfig} = useServerSort({
+      initialState: [],
+      onChange: () => {},
+      currentQuery: () => ({}),
+    });
+    const table = useCraftTable({data, columns, ...sortingConfig});
+
+    expect(table.getColumn('title')?.getCanSort()).toBe(true);
+  });
+});
diff --git a/resources/js/modules/admin-table/craftTable.ts b/resources/js/modules/admin-table/craftTable.ts
new file mode 100644
index 00000000000..ef8e3decbaf
--- /dev/null
+++ b/resources/js/modules/admin-table/craftTable.ts
@@ -0,0 +1,60 @@
+import {
+  columnOrderingFeature,
+  columnSizingFeature,
+  columnVisibilityFeature,
+  createTableHook,
+  metaHelper,
+  rowPaginationFeature,
+  rowSelectionFeature,
+  rowSortingFeature,
+  tableFeatures,
+} from '@tanstack/vue-table';
+
+/** What a CP table's column definitions can carry in their `meta`. */
+export interface CraftColumnMeta {
+  wrap?: boolean;
+  // Applies classes to the cell
+  cellClass?: string | Record<string, boolean>;
+  cellTag?: 'td' | 'th';
+  headerTip?: string;
+  headerSrOnly?: boolean;
+  // Applies classes to the header
+  headerClass?: string | Record<string, boolean>;
+  // Applies classes to both the header and cell at once
+  columnClass?: string | Record<string, boolean>;
+  trackSize?: string;
+}
+
+/**
+ * The TanStack Table features every CP table is built with.
+ *
+ * Tables all render through the shared `DataTable`/`BaseElementIndex`, which
+ * reach for the selection, sorting, pagination, visibility and ordering APIs
+ * regardless of whether a given table makes use of them — and TanStack only
+ * adds a feature's APIs to a table that registers it. Sorting and pagination
+ * happen on the server, so no client-side row models are registered here.
+ */
+export const craftTableFeatures = tableFeatures({
+  columnOrderingFeature,
+  columnSizingFeature,
+  columnVisibilityFeature,
+  rowPaginationFeature,
+  rowSelectionFeature,
+  rowSortingFeature,
+  columnMeta: metaHelper<CraftColumnMeta>(),
+});
+
+export type CraftTableFeatures = typeof craftTableFeatures;
+
+const craftTableHook = createTableHook({
+  features: craftTableFeatures,
+  // With no client-side sorting, a sortable column would only flip its arrow.
+  // Tables that sort on the server opt back in through `useServerSort`.
+  enableSorting: false,
+});
+
+/**
+ * Creates a CP table: TanStack's `useTable` with the CP's features and
+ * defaults already applied, so a table only supplies what's its own.
+ */
+export const useCraftTable = craftTableHook.useAppTable;
diff --git a/resources/js/modules/admin-table/helpers/createCraftColumnHelper.ts b/resources/js/modules/admin-table/helpers/createCraftColumnHelper.ts
index 91d68294fa9..32d16b79bc4 100644
--- a/resources/js/modules/admin-table/helpers/createCraftColumnHelper.ts
+++ b/resources/js/modules/admin-table/helpers/createCraftColumnHelper.ts
@@ -9,7 +9,7 @@ import {
   createColumnHelper,
   type DisplayColumnDef,
 } from '@tanstack/vue-table';
-import type {CraftTableFeatures} from '@/modules/admin-table/tableFeatures';
+import type {CraftTableFeatures} from '@/modules/admin-table/craftTable';
 import type {AccessorParam} from '@/modules/admin-table/composables/useEditableTable';
 import CpLink from '@/common/components/CpLink.vue';
 import Date from '@/common/components/Date.vue';
diff --git a/resources/js/modules/admin-table/tableFeatures.ts b/resources/js/modules/admin-table/tableFeatures.ts
deleted file mode 100644
index aed57784144..00000000000
--- a/resources/js/modules/admin-table/tableFeatures.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import {
-  columnOrderingFeature,
-  columnSizingFeature,
-  columnVisibilityFeature,
-  rowPaginationFeature,
-  rowSelectionFeature,
-  rowSortingFeature,
-  tableFeatures,
-} from '@tanstack/vue-table';
-
-/**
- * The TanStack Table features every CP table is built with.
- *
- * Tables all render through the shared `DataTable`/`BaseElementIndex`, which
- * reach for the selection, sorting, pagination, visibility and ordering APIs
- * regardless of whether a given table makes use of them — and TanStack only
- * adds a feature's APIs to a table that registers it. Sorting and pagination
- * happen on the server, so no client-side row models are registered here.
- */
-export const craftTableFeatures = tableFeatures({
-  columnOrderingFeature,
-  columnSizingFeature,
-  columnVisibilityFeature,
-  rowPaginationFeature,
-  rowSelectionFeature,
-  rowSortingFeature,
-});
-
-export type CraftTableFeatures = typeof craftTableFeatures;
diff --git a/resources/js/modules/element-selector-modal/useModalElementIndex.ts b/resources/js/modules/element-selector-modal/useModalElementIndex.ts
index 619dc8405aa..41d7fe18cae 100644
--- a/resources/js/modules/element-selector-modal/useModalElementIndex.ts
+++ b/resources/js/modules/element-selector-modal/useModalElementIndex.ts
@@ -1,9 +1,5 @@
 import {actionClient, type ElementInfo} from '@craftcms/ui';
-import {useTable} from '@tanstack/vue-table';
-import {
-  craftTableFeatures,
-  type CraftTableFeatures,
-} from '@/modules/admin-table/tableFeatures';
+import {useCraftTable} from '@/modules/admin-table/craftTable';
 import type {RowSelectionState} from '@tanstack/table-core';
 import {computed, ref, shallowRef, watch} from 'vue';
 import type {ConditionConfig} from '@/modules/conditions/types';
@@ -145,8 +141,7 @@ export function useModalElementIndex(options: Options) {
     () => new Set(options.disabledElementIds?.() ?? [])
   );
 
-  const table = useTable<CraftTableFeatures, Row>({
-    features: craftTableFeatures,
+  const table = useCraftTable<Row>({
     get data() {
       return elementIndex.data ?? [];
     },
diff --git a/resources/js/modules/elements/components/BaseElementIndex.vue b/resources/js/modules/elements/components/BaseElementIndex.vue
index 33da053d6e8..b8b2a54775b 100644
--- a/resources/js/modules/elements/components/BaseElementIndex.vue
+++ b/resources/js/modules/elements/components/BaseElementIndex.vue
@@ -2,7 +2,7 @@
   import {computed, ref, watch} from 'vue';
   import {usePage} from '@inertiajs/vue3';
   import type {Table} from '@tanstack/vue-table';
-  import type {CraftTableFeatures} from '@/modules/admin-table/tableFeatures';
+  import type {CraftTableFeatures} from '@/modules/admin-table/craftTable';
   import {ButtonVariant, t} from '@craftcms/ui';
   import Text from '@/common/components/Text.vue';
   import Select from '@/common/form/Select.vue';
diff --git a/resources/js/modules/elements/components/DataTable.vue b/resources/js/modules/elements/components/DataTable.vue
index 4bf5a4d7723..ca3341ae6d2 100644
--- a/resources/js/modules/elements/components/DataTable.vue
+++ b/resources/js/modules/elements/components/DataTable.vue
@@ -5,7 +5,7 @@
     type Row,
     type Table,
   } from '@tanstack/vue-table';
-  import type {CraftTableFeatures} from '@/modules/admin-table/tableFeatures';
+  import type {CraftTableFeatures} from '@/modules/admin-table/craftTable';
   import {t} from '@craftcms/ui';
   import type CraftSpinner from '@craftcms/ui/components/spinner/spinner';
   import {
@@ -458,8 +458,7 @@
             >
               <FlexRender
                 v-if="!header.isPlaceholder"
-                :render="header.column.columnDef.header"
-                :props="header.getContext()"
+                :header="header"
               />&nbsp;<craft-icon
                 v-if="
                   header.column.getCanSort() && !header.column.getIsSorted()
@@ -634,16 +633,9 @@
               <span class="sr-only"
                 >{{ t('Level {level}', {level: row.original.level ?? 1}) }}
               </span>
-              <FlexRender
-                :render="cell.column.columnDef.cell"
-                :props="cell.getContext()"
-              />
+              <FlexRender :cell="cell" />
             </div>
-            <FlexRender
-              v-else
-              :render="cell.column.columnDef.cell"
-              :props="cell.getContext()"
-            />
+            <FlexRender v-else :cell="cell" />
           </component>
         </tr>
       </template>
diff --git a/resources/js/modules/elements/composables/useElementIndexPage.ts b/resources/js/modules/elements/composables/useElementIndexPage.ts
index 224a29e2ae9..11d3754458a 100644
--- a/resources/js/modules/elements/composables/useElementIndexPage.ts
+++ b/resources/js/modules/elements/composables/useElementIndexPage.ts
@@ -2,11 +2,8 @@ import {router} from '@inertiajs/vue3';
 import {actionClient, t} from '@craftcms/ui';
 import {getElementLevelDelta, moveElement} from '@actions/StructuresController';
 import {useFlashMessages} from '@/common/composables/useFlashMessages';
-import {type RowSelectionState, useTable} from '@tanstack/vue-table';
-import {
-  craftTableFeatures,
-  type CraftTableFeatures,
-} from '@/modules/admin-table/tableFeatures';
+import {type RowSelectionState} from '@tanstack/vue-table';
+import {useCraftTable} from '@/modules/admin-table/craftTable';
 import {computed, onMounted, onScopeDispose, ref, shallowRef, watch} from 'vue';
 import {
   type ElementIndexRow,
@@ -362,8 +359,7 @@ export function useElementIndexPage(options: UseElementIndexPageOptions) {
     }
   }
 
-  const elementTable = useTable<CraftTableFeatures, ElementIndexRow>({
-    features: craftTableFeatures,
+  const elementTable = useCraftTable<ElementIndexRow>({
     get data() {
       return tableData.value;
     },
diff --git a/resources/js/modules/elements/composables/useElementIndexSelection.test.ts b/resources/js/modules/elements/composables/useElementIndexSelection.test.ts
index d388196bdca..ed4739b0167 100644
--- a/resources/js/modules/elements/composables/useElementIndexSelection.test.ts
+++ b/resources/js/modules/elements/composables/useElementIndexSelection.test.ts
@@ -1,7 +1,7 @@
 import {describe, expect, it} from 'vite-plus/test';
 import {ref, type Ref} from 'vue';
 import type {Row, Table} from '@tanstack/vue-table';
-import type {CraftTableFeatures} from '@/modules/admin-table/tableFeatures';
+import type {CraftTableFeatures} from '@/modules/admin-table/craftTable';
 import type {BulkActionItem} from '@/modules/elements/types/actions';
 import {
   useElementIndexSelection,
diff --git a/resources/js/modules/elements/composables/useElementIndexSelection.ts b/resources/js/modules/elements/composables/useElementIndexSelection.ts
index 0645a569bf6..5b6e01bc677 100644
--- a/resources/js/modules/elements/composables/useElementIndexSelection.ts
+++ b/resources/js/modules/elements/composables/useElementIndexSelection.ts
@@ -1,6 +1,6 @@
 import {computed, type MaybeRefOrGetter, toValue} from 'vue';
 import type {Row, Table} from '@tanstack/vue-table';
-import type {CraftTableFeatures} from '@/modules/admin-table/tableFeatures';
+import type {CraftTableFeatures} from '@/modules/admin-table/craftTable';
 import type {BulkActionItem} from '@/modules/elements/types/actions';
 import {isInteractiveClick} from '@/common/utils/dom';
 import {
diff --git a/resources/js/modules/elements/composables/useElementIndexTable.ts b/resources/js/modules/elements/composables/useElementIndexTable.ts
index b7272d36e99..c903dca69ef 100644
--- a/resources/js/modules/elements/composables/useElementIndexTable.ts
+++ b/resources/js/modules/elements/composables/useElementIndexTable.ts
@@ -1,6 +1,6 @@
 import {computed, shallowRef} from 'vue';
 import type {Table} from '@tanstack/vue-table';
-import type {CraftTableFeatures} from '@/modules/admin-table/tableFeatures';
+import type {CraftTableFeatures} from '@/modules/admin-table/craftTable';
 import type {ElementIndexRow} from '@/modules/elements/composables/useContentIndexData';
 
 interface ElementIndexHandle {
diff --git a/resources/js/modules/elements/fixtures/elements.ts b/resources/js/modules/elements/fixtures/elements.ts
index 5c2cbdccb54..3b26ff401ed 100644
--- a/resources/js/modules/elements/fixtures/elements.ts
+++ b/resources/js/modules/elements/fixtures/elements.ts
@@ -12,7 +12,7 @@ import {
 import {
   craftTableFeatures,
   type CraftTableFeatures,
-} from '@/modules/admin-table/tableFeatures';
+} from '@/modules/admin-table/craftTable';
 import ElementStatus from '@/modules/elements/ElementStatus.vue';
 import type {BulkActionItem} from '@/modules/elements/types/actions';
 
diff --git a/resources/js/modules/plugin-manager/components/PluginsList.vue b/resources/js/modules/plugin-manager/components/PluginsList.vue
index be48580bfdf..01bbd4fceaf 100644
--- a/resources/js/modules/plugin-manager/components/PluginsList.vue
+++ b/resources/js/modules/plugin-manager/components/PluginsList.vue
@@ -4,8 +4,7 @@
   import AdminTable from '@/modules/admin-table/components/AdminTable.vue';
   import type {PluginInfo} from '@/modules/plugin-manager/types/plugins';
   import {createCraftColumnHelper} from '@/modules/admin-table/helpers/createCraftColumnHelper';
-  import {useTable} from '@tanstack/vue-table';
-  import {craftTableFeatures} from '@/modules/admin-table/tableFeatures';
+  import {useCraftTable} from '@/modules/admin-table/craftTable';
   import PluginDetails from '@/modules/plugin-manager/components/PluginDetails.vue';
   import PluginStatus from '@/modules/plugin-manager/components/PluginStatus.vue';
   import PluginActionMenu from '@/modules/plugin-manager/components/PluginActionMenu.vue';
@@ -32,8 +31,7 @@
   });
 
   const columnHelper = createCraftColumnHelper<PluginInfo>();
-  const table = useTable({
-    features: craftTableFeatures,
+  const table = useCraftTable({
     state: {
       get columnVisibility() {
         return {
diff --git a/resources/js/modules/two-step-verification/TwoStepVerification.vue b/resources/js/modules/two-step-verification/TwoStepVerification.vue
index a154a3f78ab..ae921da2b2f 100644
--- a/resources/js/modules/two-step-verification/TwoStepVerification.vue
+++ b/resources/js/modules/two-step-verification/TwoStepVerification.vue
@@ -2,11 +2,7 @@
   import {h, ref} from 'vue';
   import {router, useHttp} from '@inertiajs/vue3';
   import {t} from '@craftcms/ui';
-  import {useTable} from '@tanstack/vue-table';
-  import {
-    craftTableFeatures,
-    type CraftTableFeatures,
-  } from '@/modules/admin-table/tableFeatures';
+  import {useCraftTable} from '@/modules/admin-table/craftTable';
   import ActionMenu from '@/common/components/ActionMenu.vue';
   import AdminTable from '@/modules/admin-table/components/AdminTable.vue';
   import {createCraftColumnHelper} from '@/modules/admin-table/helpers/createCraftColumnHelper';
@@ -126,8 +122,7 @@
   }
 
   const columnHelper = createCraftColumnHelper<AuthMethod>();
-  const table = useTable<CraftTableFeatures, AuthMethod>({
-    features: craftTableFeatures,
+  const table = useCraftTable<AuthMethod>({
     get data() {
       return props.methods;
     },
@@ -199,7 +194,6 @@
         }),
       ];
     },
-    enableSorting: false,
   });
 </script>
 
diff --git a/resources/js/modules/utilities/components/Migrations.vue b/resources/js/modules/utilities/components/Migrations.vue
index 2a6f014ff78..8f9a0a3b736 100644
--- a/resources/js/modules/utilities/components/Migrations.vue
+++ b/resources/js/modules/utilities/components/Migrations.vue
@@ -1,11 +1,8 @@
 <script setup lang="ts">
   import {t} from '@craftcms/ui';
   import migrationsController from '@actions/Utilities/MigrationsController';
-  import {createColumnHelper, useTable} from '@tanstack/vue-table';
-  import {
-    craftTableFeatures,
-    type CraftTableFeatures,
-  } from '@/modules/admin-table/tableFeatures';
+  import {useCraftTable} from '@/modules/admin-table/craftTable';
+  import {createCraftColumnHelper} from '@/modules/admin-table/helpers/createCraftColumnHelper';
   import {computed, ref} from 'vue';
   import AdminTable from '@/modules/admin-table/components/AdminTable.vue';
   import {Form} from '@inertiajs/vue3';
@@ -38,7 +35,7 @@
     ] satisfies Migration[];
   });
 
-  const columnHelper = createColumnHelper<CraftTableFeatures, Migration>();
+  const columnHelper = createCraftColumnHelper<Migration>();
   const columns = ref(
     columnHelper.columns([
       columnHelper.accessor('name', {
@@ -56,8 +53,7 @@
     ])
   );
 
-  const migrationsTable = useTable({
-    features: craftTableFeatures,
+  const migrationsTable = useCraftTable({
     get columns() {
       return columns.value;
     },
diff --git a/resources/js/modules/utilities/components/deprecation-errors/DeprecationErrors.vue b/resources/js/modules/utilities/components/deprecation-errors/DeprecationErrors.vue
index 496726d6bd4..8ff84091098 100644
--- a/resources/js/modules/utilities/components/deprecation-errors/DeprecationErrors.vue
+++ b/resources/js/modules/utilities/components/deprecation-errors/DeprecationErrors.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
   import {t} from '@craftcms/ui/utilities/translate';
-  import {useTable} from '@tanstack/vue-table';
-  import {craftTableFeatures} from '@/modules/admin-table/tableFeatures';
+  import {useCraftTable} from '@/modules/admin-table/craftTable';
   import {h, ref} from 'vue';
   import AdminTable from '@/modules/admin-table/components/AdminTable.vue';
   import DeleteLogButton from '@/modules/utilities/components/deprecation-errors/DeleteLogButton.vue';
@@ -49,15 +48,13 @@
     ])
   );
 
-  const table = useTable({
-    features: craftTableFeatures,
+  const table = useCraftTable({
     get columns() {
       return columns.value;
     },
     get data() {
       return props.logs;
     },
-    enableSorting: false,
   });
 </script>
 
diff --git a/resources/js/modules/utilities/components/queue-manager/QueueManagerIndex.vue b/resources/js/modules/utilities/components/queue-manager/QueueManagerIndex.vue
index 545e78b3284..7681a28189a 100644
--- a/resources/js/modules/utilities/components/queue-manager/QueueManagerIndex.vue
+++ b/resources/js/modules/utilities/components/queue-manager/QueueManagerIndex.vue
@@ -2,11 +2,8 @@
   import {t} from '@craftcms/ui/utilities/translate';
   import AdminTable from '@/modules/admin-table/components/AdminTable.vue';
   import {h, ref} from 'vue';
-  import {createColumnHelper, useTable} from '@tanstack/vue-table';
-  import {
-    craftTableFeatures,
-    type CraftTableFeatures,
-  } from '@/modules/admin-table/tableFeatures';
+  import {useCraftTable} from '@/modules/admin-table/craftTable';
+  import {createCraftColumnHelper} from '@/modules/admin-table/helpers/createCraftColumnHelper';
   import CpLink from '@/common/components/CpLink.vue';
   import {type JobInfo, JobStatus} from '@/modules/queue/types';
   import RetryJobButton from '@/modules/utilities/components/queue-manager/RetryJobButton.vue';
@@ -22,7 +19,7 @@
     {totalJobs: 0}
   );
 
-  const columnHelper = createColumnHelper<CraftTableFeatures, JobInfo>();
+  const columnHelper = createCraftColumnHelper<JobInfo>();
 
   function getStatusVariant(value: number) {
     if (value === 2 || value === 3) {
@@ -91,8 +88,7 @@
     ])
   );
 
-  const jobsTable = useTable({
-    features: craftTableFeatures,
+  const jobsTable = useCraftTable({
     get data() {
       return props.jobs;
     },
diff --git a/resources/js/pages/graphql/schemas/Index.vue b/resources/js/pages/graphql/schemas/Index.vue
index 7a7e3b287b0..170a74f0a1d 100644
--- a/resources/js/pages/graphql/schemas/Index.vue
+++ b/resources/js/pages/graphql/schemas/Index.vue
@@ -3,8 +3,7 @@
   import {h} from 'vue';
   import {t} from '@craftcms/ui';
   import AdminTable from '@/modules/admin-table/components/AdminTable.vue';
-  import {useTable} from '@tanstack/vue-table';
-  import {craftTableFeatures} from '@/modules/admin-table/tableFeatures';
+  import {useCraftTable} from '@/modules/admin-table/craftTable';
   import {createCraftColumnHelper} from '@/modules/admin-table/helpers/createCraftColumnHelper';
   import {create, destroy, edit} from '@actions/Gql/SchemasController';
   import DeleteButton from '@/modules/admin-table/components/DeleteButton.vue';
@@ -26,8 +25,7 @@
   }>();
 
   const columnHelper = createCraftColumnHelper<SchemaData>();
-  const table = useTable({
-    features: craftTableFeatures,
+  const table = useCraftTable({
     get columns() {
       return [
         columnHelper.link('name', {
@@ -81,7 +79,6 @@
         };
       },
     },
-    enableSorting: false,
   });
 </script>
 
diff --git a/resources/js/pages/graphql/tokens/Index.vue b/resources/js/pages/graphql/tokens/Index.vue
index ca8fb6a4e1b..fd48f44c251 100644
--- a/resources/js/pages/graphql/tokens/Index.vue
+++ b/resources/js/pages/graphql/tokens/Index.vue
@@ -2,8 +2,7 @@
   import {h} from 'vue';
   import {t} from '@craftcms/ui';
   import AdminTable from '@/modules/admin-table/components/AdminTable.vue';
-  import {useTable} from '@tanstack/vue-table';
-  import {craftTableFeatures} from '@/modules/admin-table/tableFeatures';
+  import {useCraftTable} from '@/modules/admin-table/craftTable';
   import {createCraftColumnHelper} from '@/modules/admin-table/helpers/createCraftColumnHelper';
   import CpButtonLink from '@/common/components/CpButtonLink.vue';
   import DeleteButton from '@/modules/admin-table/components/DeleteButton.vue';
@@ -39,8 +38,7 @@
   }>();
 
   const columnHelper = createCraftColumnHelper<TokenData>();
-  const table = useTable({
-    features: craftTableFeatures,
+  const table = useCraftTable({
     get columns() {
       return [
         columnHelper.link('name', {
@@ -86,7 +84,6 @@
         };
       },
     },
-    enableSorting: false,
   });
 </script>
 
diff --git a/resources/js/pages/settings/assets/Index.vue b/resources/js/pages/settings/assets/Index.vue
index 5fa5b56f0f5..c1f9b00239b 100644
--- a/resources/js/pages/settings/assets/Index.vue
+++ b/resources/js/pages/settings/assets/Index.vue
@@ -1,11 +1,7 @@
 <script setup lang="ts">
   import {t} from '@craftcms/ui';
   import AdminTable from '@/modules/admin-table/components/AdminTable.vue';
-  import {useTable} from '@tanstack/vue-table';
-  import {
-    craftTableFeatures,
-    type CraftTableFeatures,
-  } from '@/modules/admin-table/tableFeatures';
+  import {useCraftTable} from '@/modules/admin-table/craftTable';
   import {computed, h, nextTick, ref, watch} from 'vue';
   import {createCraftColumnHelper} from '@/modules/admin-table/helpers/createCraftColumnHelper';
   import DeleteButton from '@/modules/admin-table/components/DeleteButton.vue';
@@ -114,8 +110,7 @@
     ]),
   ]);
 
-  const table = useTable<CraftTableFeatures, VolumeData>({
-    features: craftTableFeatures,
+  const table = useCraftTable<VolumeData>({
     get data() {
       return volumes.value;
     },
@@ -127,7 +122,6 @@
         return columnVisibility.value;
       },
     },
-    enableSorting: false,
   });
 
   useAppLayout({title: props.title});
diff --git a/resources/js/pages/settings/assets/transformers/Index.vue b/resources/js/pages/settings/assets/transformers/Index.vue
index 32e00c00a06..be5d1c21e09 100644
--- a/resources/js/pages/settings/assets/transformers/Index.vue
+++ b/resources/js/pages/settings/assets/transformers/Index.vue
@@ -1,11 +1,7 @@
 <script setup lang="ts">
   import {t} from '@craftcms/ui';
   import {router} from '@inertiajs/vue3';
-  import {useTable} from '@tanstack/vue-table';
-  import {
-    craftTableFeatures,
-    type CraftTableFeatures,
-  } from '@/modules/admin-table/tableFeatures';
+  import {useCraftTable} from '@/modules/admin-table/craftTable';
   import {computed, h, ref} from 'vue';
   import CpButtonLink from '@/common/components/CpButtonLink.vue';
   import LayoutSlot from '@/common/components/LayoutSlot.vue';
@@ -99,8 +95,7 @@
       }),
     ])
   );
-  const table = useTable<CraftTableFeatures, AssetTransformerIndexData>({
-    features: craftTableFeatures,
+  const table = useCraftTable<AssetTransformerIndexData>({
     get data() {
       return props.transformers;
     },
@@ -112,7 +107,6 @@
         return columnVisibility.value;
       },
     },
-    enableSorting: false,
   });
 </script>
 
diff --git a/resources/js/pages/settings/assets/transforms/Index.vue b/resources/js/pages/settings/assets/transforms/Index.vue
index b19b27871f6..6abb8b39512 100644
--- a/resources/js/pages/settings/assets/transforms/Index.vue
+++ b/resources/js/pages/settings/assets/transforms/Index.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
   import {capitalize, t} from '@craftcms/ui';
-  import {useTable} from '@tanstack/vue-table';
-  import {craftTableFeatures} from '@/modules/admin-table/tableFeatures';
+  import {useCraftTable} from '@/modules/admin-table/craftTable';
   import {createCraftColumnHelper} from '@/modules/admin-table/helpers/createCraftColumnHelper';
   import {h, ref} from 'vue';
   import CpButtonLink from '@/common/components/CpButtonLink.vue';
@@ -90,15 +89,13 @@
       ]),
     ])
   );
-  const table = useTable({
-    features: craftTableFeatures,
+  const table = useCraftTable({
     get data() {
       return props.transforms;
     },
     get columns() {
       return columns.value;
     },
-    enableSorting: false,
     state: {
       get columnVisibility() {
         return columnVisibility.value;
diff --git a/resources/js/pages/settings/entry-types/Index.vue b/resources/js/pages/settings/entry-types/Index.vue
index 5ec9a7ba406..55ea6501cea 100644
--- a/resources/js/pages/settings/entry-types/Index.vue
+++ b/resources/js/pages/settings/entry-types/Index.vue
@@ -1,11 +1,7 @@
 <script setup lang="ts">
   import {t} from '@craftcms/ui';
   import AdminTable from '@/modules/admin-table/components/AdminTable.vue';
-  import {useTable} from '@tanstack/vue-table';
-  import {
-    craftTableFeatures,
-    type CraftTableFeatures,
-  } from '@/modules/admin-table/tableFeatures';
+  import {useCraftTable} from '@/modules/admin-table/craftTable';
   import {type PaginationData, type SortItem} from '@/common/types';
   import {computed, h, ref} from 'vue';
   import DynamicHtmlRenderer from '@/common/components/DynamicHtmlRenderer.vue';
@@ -110,8 +106,7 @@
     },
   });
 
-  const table = useTable<CraftTableFeatures, EntryTypeRow>({
-    features: craftTableFeatures,
+  const table = useCraftTable<EntryTypeRow>({
     get data() {
       return entryTypes.value;
     },
diff --git a/resources/js/pages/settings/fields/Index.vue b/resources/js/pages/settings/fields/Index.vue
index 8774eb491e2..11a44c7c4ad 100644
--- a/resources/js/pages/settings/fields/Index.vue
+++ b/resources/js/pages/settings/fields/Index.vue
@@ -1,11 +1,8 @@
 <script setup lang="ts">
   import {t} from '@craftcms/ui';
   import AdminTable from '@/modules/admin-table/components/AdminTable.vue';
-  import {createColumnHelper, useTable} from '@tanstack/vue-table';
-  import {
-    craftTableFeatures,
-    type CraftTableFeatures,
-  } from '@/modules/admin-table/tableFeatures';
+  import {useCraftTable} from '@/modules/admin-table/craftTable';
+  import {createCraftColumnHelper} from '@/modules/admin-table/helpers/createCraftColumnHelper';
   import {computed, h, ref} from 'vue';
   import type {PaginationData, SortItem} from '@/common/types';
   import {useServerPagination} from '@/modules/admin-table/composables/useServerPagination';
@@ -46,7 +43,7 @@
   }>();
 
   const searchTerm = ref(props.searchTerm ?? '');
-  const columnHelper = createColumnHelper<CraftTableFeatures, FieldRow>();
+  const columnHelper = createCraftColumnHelper<FieldRow>();
   const columnVisibility = computed(() => {
     return {
       name: true,
@@ -177,8 +174,7 @@
     },
   });
 
-  const table = useTable({
-    features: craftTableFeatures,
+  const table = useCraftTable({
     get data() {
       return props.data;
     },
diff --git a/resources/js/pages/settings/sections/Index.vue b/resources/js/pages/settings/sections/Index.vue
index db809a64d3b..5f4e179ed6f 100644
--- a/resources/js/pages/settings/sections/Index.vue
+++ b/resources/js/pages/settings/sections/Index.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
   import CpButtonLink from '@/common/components/CpButtonLink.vue';
-  import {useTable} from '@tanstack/vue-table';
-  import {craftTableFeatures} from '@/modules/admin-table/tableFeatures';
+  import {useCraftTable} from '@/modules/admin-table/craftTable';
   import AdminTable from '@/modules/admin-table/components/AdminTable.vue';
   import {h, ref} from 'vue';
   import {t} from '@craftcms/ui/utilities/translate';
@@ -99,8 +98,7 @@
     },
   });
 
-  const sectionTable = useTable({
-    features: craftTableFeatures,
+  const sectionTable = useCraftTable({
     get data() {
       return props.data;
     },
diff --git a/resources/js/pages/settings/sites/Index.vue b/resources/js/pages/settings/sites/Index.vue
index df1ffaba4b0..1c21ad97f07 100644
--- a/resources/js/pages/settings/sites/Index.vue
+++ b/resources/js/pages/settings/sites/Index.vue
@@ -3,8 +3,7 @@
   import type {TextExpanderTriggers} from '@craftcms/ui/components/text-expander/text-expander';
   import CalloutReadOnly from '@/common/components/CalloutReadOnly.vue';
   import AdminTable from '@/modules/admin-table/components/AdminTable.vue';
-  import {useTable} from '@tanstack/vue-table';
-  import {craftTableFeatures} from '@/modules/admin-table/tableFeatures';
+  import {useCraftTable} from '@/modules/admin-table/craftTable';
   import {computed, h, nextTick, ref, watch} from 'vue';
   import type {Site, SiteGroup} from '@/common/types';
   import ModalForm from '@/common/components/ModalForm.vue';
@@ -176,8 +175,7 @@
     ])
   );
 
-  const sitesTable = useTable({
-    features: craftTableFeatures,
+  const sitesTable = useCraftTable({
     get data() {
       return sites.value;
     },
@@ -192,7 +190,6 @@
       },
     },
     getRowId: (row) => row.id.toString(),
-    enableSorting: false,
     defaultColumn: {
       // @ts-expect-error — this is technically invalid, but gives us the behavior we want
       size: 'auto',
diff --git a/resources/js/pages/settings/users/groups/Index.vue b/resources/js/pages/settings/users/groups/Index.vue
index 064068d8238..571c3913d8e 100644
--- a/resources/js/pages/settings/users/groups/Index.vue
+++ b/resources/js/pages/settings/users/groups/Index.vue
@@ -3,8 +3,7 @@
   import {h} from 'vue';
   import LayoutSlot from '@/common/components/LayoutSlot.vue';
   import AdminTable from '@/modules/admin-table/components/AdminTable.vue';
-  import {useTable} from '@tanstack/vue-table';
-  import {craftTableFeatures} from '@/modules/admin-table/tableFeatures';
+  import {useCraftTable} from '@/modules/admin-table/craftTable';
   import {
     create,
     destroy,
@@ -23,8 +22,7 @@
   }>();
 
   const columnHelper = createCraftColumnHelper<UserGroup>();
-  const table = useTable({
-    features: craftTableFeatures,
+  const table = useCraftTable({
     get columns() {
       return [
         columnHelper.link('name', {
diff --git a/resources/js/pages/settings/workflows/Index.vue b/resources/js/pages/settings/workflows/Index.vue
index 16185e7f82c..3f7489a4194 100644
--- a/resources/js/pages/settings/workflows/Index.vue
+++ b/resources/js/pages/settings/workflows/Index.vue
@@ -1,11 +1,7 @@
 <script setup lang="ts">
   import {t} from '@craftcms/ui';
   import {router} from '@inertiajs/vue3';
-  import {useTable} from '@tanstack/vue-table';
-  import {
-    craftTableFeatures,
-    type CraftTableFeatures,
-  } from '@/modules/admin-table/tableFeatures';
+  import {useCraftTable} from '@/modules/admin-table/craftTable';
   import {computed, h, ref} from 'vue';
   import CpContainer from '@/common/components/CpContainer.vue';
   import CpLink from '@/common/components/CpLink.vue';
@@ -82,8 +78,7 @@
       });
     },
   });
-  const table = useTable<CraftTableFeatures, Workflow>({
-    features: craftTableFeatures,
+  const table = useCraftTable<Workflow>({
     get data() {
       return props.data;
     },
diff --git a/resources/js/pages/users/Passkeys.vue b/resources/js/pages/users/Passkeys.vue
index 0f77edbd55d..c636e992a6e 100644
--- a/resources/js/pages/users/Passkeys.vue
+++ b/resources/js/pages/users/Passkeys.vue
@@ -7,11 +7,7 @@
     platformAuthenticatorIsAvailable,
     startRegistration,
   } from '@simplewebauthn/browser';
-  import {useTable} from '@tanstack/vue-table';
-  import {
-    craftTableFeatures,
-    type CraftTableFeatures,
-  } from '@/modules/admin-table/tableFeatures';
+  import {useCraftTable} from '@/modules/admin-table/craftTable';
   import CraftDate from '@/common/components/Date.vue';
   import AdminTable from '@/modules/admin-table/components/AdminTable.vue';
   import {createCraftColumnHelper} from '@/modules/admin-table/helpers/createCraftColumnHelper';
@@ -158,8 +154,7 @@
   }
 
   const columnHelper = createCraftColumnHelper<Passkey>();
-  const table = useTable<CraftTableFeatures, Passkey>({
-    features: craftTableFeatures,
+  const table = useCraftTable<Passkey>({
     get data() {
       return page.props.passkeys;
     },
@@ -194,7 +189,6 @@
         ]),
       ];
     },
-    enableSorting: false,
   });
 </script>
 
diff --git a/resources/js/pages/users/SignInProviders.vue b/resources/js/pages/users/SignInProviders.vue
index bd36085f1f9..a19673cee60 100644
--- a/resources/js/pages/users/SignInProviders.vue
+++ b/resources/js/pages/users/SignInProviders.vue
@@ -3,11 +3,7 @@
   import {router, useHttp, usePage} from '@inertiajs/vue3';
   import {t} from '@craftcms/ui';
   import {connect, destroy} from '@actions/Users/SignInProvidersController';
-  import {useTable} from '@tanstack/vue-table';
-  import {
-    craftTableFeatures,
-    type CraftTableFeatures,
-  } from '@/modules/admin-table/tableFeatures';
+  import {useCraftTable} from '@/modules/admin-table/craftTable';
   import {createCraftColumnHelper} from '@/modules/admin-table/helpers/createCraftColumnHelper';
   import AdminTable from '@/modules/admin-table/components/AdminTable.vue';
   import {elevatedSessionManager} from '@/modules/auth/elevated-session';
@@ -75,8 +71,7 @@
   }
 
   const columnHelper = createCraftColumnHelper<Provider>();
-  const table = useTable<CraftTableFeatures, Provider>({
-    features: craftTableFeatures,
+  const table = useCraftTable<Provider>({
     get data() {
       return page.props.providers;
     },
@@ -142,7 +137,6 @@
         ]),
       ];
     },
-    enableSorting: false,
   });
 </script>
 

From d4d02f66e03037f45b47e8bb76004739c6b4b0bb Mon Sep 17 00:00:00 2001
From: Brian Hanson <brian@brianhanson.net>
Date: Wed, 30 Sep 2026 16:30:56 -0500
Subject: [PATCH 3/3] Fix lint warnings

---
 resources/js/common/components/DataTable.vue     |  2 +-
 .../js/common/components/PaginationControls.vue  |  6 +++---
 resources/js/common/form/IconPicker.vue          |  4 ++--
 .../elements/components/ElementEditor.vue        |  2 +-
 .../index/components/IndexViewSettings.vue       |  4 ++--
 .../js/modules/forms/ElementSelectControl.vue    |  2 +-
 .../NestedElementBlocksControl.vue               |  6 +++---
 .../NestedEntriesCreateButton.vue                |  2 +-
 .../forms/nested-elements/NestedEntriesIndex.vue |  2 +-
 resources/js/pages/assets/Index.vue              | 16 ++++++++--------
 10 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/resources/js/common/components/DataTable.vue b/resources/js/common/components/DataTable.vue
index 2290288502a..a19dbf08e79 100644
--- a/resources/js/common/components/DataTable.vue
+++ b/resources/js/common/components/DataTable.vue
@@ -297,7 +297,7 @@
             :aria-sort="getAriaSortAttribute(header.column)"
           >
             <div
-              class="flex gap-1 items-center"
+              class="flex gap-sm items-center"
               :class="{'sr-only': header.column.columnDef.meta?.headerSrOnly}"
             >
               <ColumnHeaderTitle
diff --git a/resources/js/common/components/PaginationControls.vue b/resources/js/common/components/PaginationControls.vue
index 432d3db6d47..5af43fa396c 100644
--- a/resources/js/common/components/PaginationControls.vue
+++ b/resources/js/common/components/PaginationControls.vue
@@ -56,7 +56,7 @@
         :params="{from: from ?? 0, to: to ?? 0, total: total ?? 0}"
       />
     </div>
-    <div class="flex gap-1">
+    <div class="flex gap-sm">
       <template v-if="showPagination">
         <craft-button
           type="button"
@@ -71,7 +71,7 @@
             :label="t('Previous page')"
           ></craft-icon>
         </craft-button>
-        <div class="flex items-center gap-1 mx-2">
+        <div class="flex items-center gap-sm mx-md">
           {{ t('Page') }}
           <craft-input
             type="text"
@@ -98,7 +98,7 @@
         </craft-button>
       </template>
     </div>
-    <div class="flex gap-2 items-center">
+    <div class="flex gap-md items-center">
       <template v-if="enableAdjustPageSize">
         <span aria-hidden="true">{{ pageSizeLabel }}</span>
         <Select
diff --git a/resources/js/common/form/IconPicker.vue b/resources/js/common/form/IconPicker.vue
index bb2daa58e3a..ce0123290b4 100644
--- a/resources/js/common/form/IconPicker.vue
+++ b/resources/js/common/form/IconPicker.vue
@@ -176,7 +176,7 @@
           slot="header"
           role="search"
           @submit.prevent="loadIcons()"
-          class="sticky top-0 pt-4 px-4 pb-2 bg-white"
+          class="sticky top-0 pt-lg px-lg pb-md bg-white"
         >
           <CraftInput :label="t('Search')" v-model="query">
             <div slot="suffix" class="flex self-center w-[1em] h-[1em]">
@@ -190,7 +190,7 @@
         <div>
           <!-- This only shows on the initial load -->
           <template v-if="http.processing && icons === null">
-            <div class="flex justify-center p-4">
+            <div class="flex justify-center p-lg">
               <craft-spinner></craft-spinner>
             </div>
           </template>
diff --git a/resources/js/modules/elements/components/ElementEditor.vue b/resources/js/modules/elements/components/ElementEditor.vue
index 8c32caaaf36..38703a45e25 100644
--- a/resources/js/modules/elements/components/ElementEditor.vue
+++ b/resources/js/modules/elements/components/ElementEditor.vue
@@ -363,7 +363,7 @@
     </div>
   </LayoutSlot>
 
-  <div ref="content" class="py-3">
+  <div ref="content" class="py-lg">
     <CpContainer>
       <FormRenderer
         v-if="formPayload"
diff --git a/resources/js/modules/elements/index/components/IndexViewSettings.vue b/resources/js/modules/elements/index/components/IndexViewSettings.vue
index 5bde412dbad..a89fd021148 100644
--- a/resources/js/modules/elements/index/components/IndexViewSettings.vue
+++ b/resources/js/modules/elements/index/components/IndexViewSettings.vue
@@ -98,9 +98,9 @@
       {{ t('View') }}
     </craft-button>
 
-    <div slot="content-body" class="gap-4">
+    <div slot="content-body" class="gap-lg">
       <div>
-        <div class="flex items-end gap-2">
+        <div class="flex items-end gap-md">
           <Select
             :label="t('Sort by')"
             v-model="sortField"
diff --git a/resources/js/modules/forms/ElementSelectControl.vue b/resources/js/modules/forms/ElementSelectControl.vue
index a99788f7425..7c305ef9864 100644
--- a/resources/js/modules/forms/ElementSelectControl.vue
+++ b/resources/js/modules/forms/ElementSelectControl.vue
@@ -657,7 +657,7 @@
       value=""
     />
     <component :is="control.props.customElement" :id="id">
-      <div v-if="editable && !atLimit" class="flex gap-2 pb-2" slot="header">
+      <div v-if="editable && !atLimit" class="flex gap-md pb-md" slot="header">
         <craft-button
           ref="addButton"
           type="button"
diff --git a/resources/js/modules/forms/nested-elements/NestedElementBlocksControl.vue b/resources/js/modules/forms/nested-elements/NestedElementBlocksControl.vue
index 46653c78648..4e4d589e156 100644
--- a/resources/js/modules/forms/nested-elements/NestedElementBlocksControl.vue
+++ b/resources/js/modules/forms/nested-elements/NestedElementBlocksControl.vue
@@ -1513,7 +1513,7 @@
       >
         <template #label="{id: uid}">
           <div
-            class="flex flex-nowrap gap-1 items-center"
+            class="flex flex-nowrap gap-sm items-center"
             data-matrix-block-titlebar
           >
             <craft-icon v-if="blockIcon(uid)" v-bind="blockIcon(uid)!" />
@@ -1580,7 +1580,7 @@
           </div>
         </template>
       </SelectableCardList>
-      <div v-if="canAdd" class="mt-3">
+      <div v-if="canAdd" class="mt-md">
         <NestedEntriesCreateButton
           :choices="createChoices"
           :label="control.props.addLabel"
@@ -1593,7 +1593,7 @@
           type="button"
           variant="dashed"
           icon="duplicate"
-          class="mt-1"
+          class="mt-sm"
           :loading="pasting"
           :disabled="busy"
           @click.stop.prevent="pasteBlocks()"
diff --git a/resources/js/modules/forms/nested-elements/NestedEntriesCreateButton.vue b/resources/js/modules/forms/nested-elements/NestedEntriesCreateButton.vue
index 05a308fa4ed..46d67c459d0 100644
--- a/resources/js/modules/forms/nested-elements/NestedEntriesCreateButton.vue
+++ b/resources/js/modules/forms/nested-elements/NestedEntriesCreateButton.vue
@@ -118,7 +118,7 @@
         </craft-button>
       </template>
     </ActionMenu>
-    <div v-else ref="addButtons" class="flex w-max gap-1 items-center">
+    <div v-else ref="addButtons" class="flex w-max gap-sm items-center">
       <craft-button
         v-for="(choice, index) in choices"
         :key="index"
diff --git a/resources/js/modules/forms/nested-elements/NestedEntriesIndex.vue b/resources/js/modules/forms/nested-elements/NestedEntriesIndex.vue
index f3fdab4ad5e..7e9b8f2c9d8 100644
--- a/resources/js/modules/forms/nested-elements/NestedEntriesIndex.vue
+++ b/resources/js/modules/forms/nested-elements/NestedEntriesIndex.vue
@@ -406,7 +406,7 @@
         >
           <label
             v-if="canReorder && pagination.last_page > 1"
-            class="flex items-center gap-2"
+            class="flex items-center gap-md"
           >
             {{ t('Move to page') }}
             <select v-model.number="movePage" class="text small">
diff --git a/resources/js/pages/assets/Index.vue b/resources/js/pages/assets/Index.vue
index 2c5f7ff48d0..90068a31342 100644
--- a/resources/js/pages/assets/Index.vue
+++ b/resources/js/pages/assets/Index.vue
@@ -136,7 +136,7 @@
       <template #search-options>
         <craft-checkbox
           v-if="page.props.search && page.props.canSearchSubfolders"
-          class="mt-2"
+          class="mt-md"
           .checked="page.props.includeSubfolders"
           @model-value-changed="setIncludeSubfolders"
         >
@@ -174,7 +174,7 @@
           )
         }}
       </p>
-      <div slot="footer" class="flex gap-2 justify-end">
+      <div slot="footer" class="flex gap-md justify-end">
         <craft-button @click="resolveConflictChoice('cancel')">
           {{ t('Cancel') }}
         </craft-button>
@@ -196,7 +196,7 @@
       @craft-before-hide="resolveDragFolderConflictChoice('cancel')"
     >
       <p>{{ dragFolderConflictPrompt?.message }}</p>
-      <div slot="footer" class="flex gap-2 justify-end">
+      <div slot="footer" class="flex gap-md justify-end">
         <craft-button @click="resolveDragFolderConflictChoice('cancel')">
           {{ t('Cancel') }}
         </craft-button>
@@ -219,7 +219,7 @@
       @craft-before-hide="closeNewFolder"
       @craft-after-show="focusNewFolderName"
     >
-      <form class="flex flex-col gap-4" @submit.prevent="createSubfolder">
+      <form class="flex flex-col gap-lg" @submit.prevent="createSubfolder">
         <CraftInput
           ref="newFolderNameInput"
           v-model="newFolderName"
@@ -229,7 +229,7 @@
           autofocus
         />
       </form>
-      <div slot="footer" class="flex gap-2 justify-end">
+      <div slot="footer" class="flex gap-md justify-end">
         <craft-button type="button" @click="closeNewFolder">
           {{ t('Cancel') }}
         </craft-button>
@@ -248,7 +248,7 @@
       :label="t('Rename folder')"
       @craft-before-hide="closeRename"
     >
-      <form class="flex flex-col gap-4" @submit.prevent="submitRename">
+      <form class="flex flex-col gap-lg" @submit.prevent="submitRename">
         <CraftInput
           v-model="renameName"
           :label="t('Folder name')"
@@ -257,7 +257,7 @@
           autofocus
         />
       </form>
-      <div slot="footer" class="flex gap-2 justify-end">
+      <div slot="footer" class="flex gap-md justify-end">
         <craft-button type="button" @click="closeRename">
           {{ t('Cancel') }}
         </craft-button>
@@ -277,7 +277,7 @@
       @craft-before-hide="resolveFolderConflictChoice('cancel')"
     >
       <p>{{ folderConflictPrompt?.message }}</p>
-      <div slot="footer" class="flex gap-2 justify-end">
+      <div slot="footer" class="flex gap-md justify-end">
         <craft-button @click="resolveFolderConflictChoice('cancel')">
           {{ t('Cancel') }}
         </craft-button>