diff --git a/package.json b/package.json
index 0ba7336c246..b78bd28bfa0 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 bd19e730d05..3e1161170b0 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)
@@ -3672,9 +3672,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==}
@@ -3682,9 +3685,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'
 
@@ -12758,15 +12761,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/components/DataTable.vue b/resources/js/common/components/DataTable.vue
index 21b0747a557..8b184e61033 100644
--- a/resources/js/common/components/DataTable.vue
+++ b/resources/js/common/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/craftTable';
   import {t} from '@craftcms/ui';
   import type CraftSpinner from '@craftcms/ui/components/spinner/spinner';
   import {
@@ -23,7 +24,7 @@
   import DropIndicator from '@/common/components/DropIndicator.vue';
   const props = withDefaults(
     defineProps<{
-      table: Table<any>;
+      table: Table<CraftTableFeatures, TData>;
       title?: string;
       reorderable?: boolean;
       /**
@@ -33,7 +34,7 @@
       interactionsDisabled?: boolean;
       readOnly?: boolean;
       leadingColumnTracks?: string[];
-      rowAttributes?: (row: Row<any>) => HTMLAttributes;
+      rowAttributes?: (row: Row<CraftTableFeatures, TData>) => HTMLAttributes;
       loading?: boolean;
       layout?: 'auto' | 'fixed';
       spacing?: TableSpacingValue;
@@ -53,9 +54,13 @@
 
   const emit = defineEmits<{
     reorder: [startIndex: number, finishIndex: number];
-    rowClick: [row: Row<any>, event: MouseEvent];
-    rowKeydown: [row: Row<any>, index: number, event: KeyboardEvent];
-    rowRef: [element: Element | null, row: Row<any>];
+    rowClick: [row: Row<CraftTableFeatures, TData>, event: MouseEvent];
+    rowKeydown: [
+      row: Row<CraftTableFeatures, TData>,
+      index: number,
+      event: KeyboardEvent,
+    ];
+    rowRef: [element: Element | null, row: Row<CraftTableFeatures, TData>];
   }>();
 
   const loadingRef = useTemplateRef<CraftSpinner>('loading-ref');
@@ -134,7 +139,7 @@
   );
 
   function getAriaSortAttribute(
-    column: Column<any>
+    column: Column<CraftTableFeatures, TData>
   ): 'ascending' | 'descending' | 'none' | undefined {
     if (column.getCanSort()) {
       if (column.getIsSorted()) {
@@ -146,8 +151,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;
 
@@ -160,14 +165,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;
       },
@@ -212,7 +217,11 @@
     rows?.[index]?.focus();
   }
 
-  function onRowKeydown(row: Row<any>, index: number, event: KeyboardEvent) {
+  function onRowKeydown(
+    row: Row<CraftTableFeatures, TData>,
+    index: number,
+    event: KeyboardEvent
+  ) {
     emit('rowKeydown', row, index, event);
 
     if (event.defaultPrevented || !(event.currentTarget instanceof HTMLElement))
@@ -288,7 +297,7 @@
             :aria-sort="getAriaSortAttribute(header.column)"
           >
             <div
-              class="flex gap-1 items-center [.text-center>&]:justify-center"
+              class="flex gap-sm items-center [.text-center>&]:justify-center"
               :class="{'sr-only': header.column.columnDef.meta?.headerSrOnly}"
             >
               <ColumnHeaderTitle
@@ -299,8 +308,7 @@
               >
                 <FlexRender
                   v-if="!header.isPlaceholder"
-                  :render="header.column.columnDef.header"
-                  :props="header.getContext()"
+                  :header="header"
                 /><template v-if="header.column.getCanSort()">&nbsp;</template
                 ><craft-icon
                   v-if="
@@ -393,10 +401,7 @@
               ]"
             >
               <slot name="cell" :cell="cell" :row="row" :index="cellIdx">
-                <FlexRender
-                  :render="cell.column.columnDef.cell"
-                  :props="cell.getContext()"
-                />
+                <FlexRender :cell="cell" />
               </slot>
             </component>
           </tr>
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/common/types/globals.d.ts b/resources/js/common/types/globals.d.ts
index 4fd62f65f31..43eed684ca2 100644
--- a/resources/js/common/types/globals.d.ts
+++ b/resources/js/common/types/globals.d.ts
@@ -30,22 +30,6 @@ interface LegacyModalInstance {
   destroy?(): void;
 }
 
-declare module '@tanstack/vue-table' {
-  interface ColumnMeta {
-    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.stories.ts b/resources/js/modules/admin-table/components/AdminTable.stories.ts
index cf9817f8d75..936c2e4f2a8 100644
--- a/resources/js/modules/admin-table/components/AdminTable.stories.ts
+++ b/resources/js/modules/admin-table/components/AdminTable.stories.ts
@@ -4,7 +4,10 @@ import {createSampleTable} from '@/modules/elements/fixtures/elements';
 
 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: {
@@ -13,7 +16,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.test.ts b/resources/js/modules/admin-table/components/AdminTable.test.ts
index b9ad7c969fd..d5f82280174 100644
--- a/resources/js/modules/admin-table/components/AdminTable.test.ts
+++ b/resources/js/modules/admin-table/components/AdminTable.test.ts
@@ -1,6 +1,6 @@
 import {createApp, h} from 'vue';
 import {afterEach, beforeEach, expect, it, vi} from 'vite-plus/test';
-import {createTable, getCoreRowModel} from '@tanstack/vue-table';
+import {useCraftTable} from '@/modules/admin-table/craftTable';
 import AdminTable from './AdminTable.vue';
 
 vi.mock('@inertiajs/vue3', () => ({
@@ -21,7 +21,7 @@ afterEach(() => {
 
 it('renders settings rows and drives caller pagination without an element payload', () => {
   const onPaginationChange = vi.fn();
-  const table = createTable({
+  const table = useCraftTable({
     data: [{id: 1, name: 'Settings record'}],
     columns: [
       {accessorKey: 'name', header: 'Name', cell: ({getValue}) => getValue()},
@@ -29,19 +29,12 @@ it('renders settings rows and drives caller pagination without an element payloa
     state: {pagination: {pageIndex: 0, pageSize: 50}},
     manualPagination: true,
     rowCount: 151,
-    getCoreRowModel: getCoreRowModel(),
-    onStateChange: () => {},
     onPaginationChange,
-    renderFallbackValue: null,
   });
-  table.setOptions((options) => ({
-    ...options,
-    state: {...table.initialState, pagination: {pageIndex: 0, pageSize: 50}},
-  }));
   const host = document.createElement('div');
   document.body.append(host);
   const app = createApp({
-    render: () => h(AdminTable, {table, from: 1, to: 50, total: 151}),
+    render: () => h(AdminTable, {table, from: 1, to: 50, total: 151} as never),
   });
   app.config.compilerOptions.isCustomElement = (tag) => tag.includes('-');
   app.mount(host);
diff --git a/resources/js/modules/admin-table/components/AdminTable.vue b/resources/js/modules/admin-table/components/AdminTable.vue
index 7dc86751b27..acc365c529b 100644
--- a/resources/js/modules/admin-table/components/AdminTable.vue
+++ b/resources/js/modules/admin-table/components/AdminTable.vue
@@ -1,5 +1,6 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="TData extends Record<string, any>">
   import type {Table} from '@tanstack/vue-table';
+  import type {CraftTableFeatures} from '@/modules/admin-table/craftTable';
   import DataTable from '@/common/components/DataTable.vue';
   import PaginationControls from '@/common/components/PaginationControls.vue';
   import {usePage} from '@inertiajs/vue3';
@@ -8,7 +9,7 @@
 
   const props = withDefaults(
     defineProps<{
-      table: Table<any>;
+      table: Table<CraftTableFeatures, TData>;
       title?: string;
       reorderable?: boolean;
       readOnly?: boolean;
@@ -68,13 +69,13 @@
     </div>
     <div class="admin-table__footer" v-if="showFooter">
       <PaginationControls
-        :page-index="table.getState().pagination.pageIndex"
-        :page-size="table.getState().pagination.pageSize"
+        :page-index="table.atoms.pagination.get().pageIndex"
+        :page-size="table.atoms.pagination.get().pageSize"
         :page-count="table.getPageCount()"
         :paginated="
           Boolean(
             table.options.manualPagination ||
-            table.options.getPaginationRowModel
+            'paginatedRowModel' in table.options.features
           )
         "
         :from="from"
diff --git a/resources/js/modules/admin-table/composables/useEditableTable.ts b/resources/js/modules/admin-table/composables/useEditableTable.ts
index cd81ab7a4d8..8a0d250ce13 100644
--- a/resources/js/modules/admin-table/composables/useEditableTable.ts
+++ b/resources/js/modules/admin-table/composables/useEditableTable.ts
@@ -10,10 +10,12 @@ import {
   type ColumnDef,
   type ColumnHelper,
   createColumnHelper,
-  getCoreRowModel,
   type Row,
-  useVueTable,
 } from '@tanstack/vue-table';
+import {
+  type CraftTableFeatures,
+  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';
@@ -26,21 +28,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 +62,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 +71,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 +142,7 @@ export function useEditableTable<T extends object>(
   });
 
   function handleChange(
-    row: Row<T>,
+    row: Row<CraftTableFeatures, T>,
     columnId: string,
     value: string | boolean
   ): void {
@@ -165,7 +171,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 +187,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 +227,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 +253,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 +282,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 +315,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,29 +400,27 @@ 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: Parameters<typeof useCraftTable<T>>[0] = {
     get data() {
       return normalizedData.value;
     },
     get columns() {
       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 = 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 a6a597d9269..7e3c7ad9537 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 f7156d6ce47..32d16b79bc4 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/craftTable';
 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/elements/components/ElementEditor.vue b/resources/js/modules/elements/components/ElementEditor.vue
index 98e3b60f445..a039ea63008 100644
--- a/resources/js/modules/elements/components/ElementEditor.vue
+++ b/resources/js/modules/elements/components/ElementEditor.vue
@@ -380,7 +380,7 @@
     </div>
   </LayoutSlot>
 
-  <div ref="content" class="py-3">
+  <div ref="content" class="py-lg">
     <CpContainer>
       <component
         :is="formWrapper ?? 'div'"
diff --git a/resources/js/modules/elements/fixtures/elements.ts b/resources/js/modules/elements/fixtures/elements.ts
index 28f8f5ee0ef..efd4d45914f 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/craftTable';
 import ElementStatus from '@/modules/elements/ElementStatus.vue';
 import type {BulkActionItem} from '@/modules/elements/types/actions';
 
@@ -105,9 +112,18 @@ export const sampleEntries: Array<SampleEntry> = [
   },
 ].map((entry) => ({...entry, label: entry.title}));
 
-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',
@@ -115,7 +131,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
@@ -124,19 +140,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/elements/index/components/ElementIndex.vue b/resources/js/modules/elements/index/components/ElementIndex.vue
index 7987186b324..7516dd2f2fe 100644
--- a/resources/js/modules/elements/index/components/ElementIndex.vue
+++ b/resources/js/modules/elements/index/components/ElementIndex.vue
@@ -354,13 +354,13 @@
       <slot v-else-if="footerActive" name="footer" />
       <PaginationControls
         v-else
-        :page-index="table.getState().pagination.pageIndex"
-        :page-size="table.getState().pagination.pageSize"
+        :page-index="table.atoms.pagination.get().pageIndex"
+        :page-size="table.atoms.pagination.get().pageSize"
         :page-count="table.getPageCount()"
         :paginated="
           Boolean(
             table.options.manualPagination ||
-            table.options.getPaginationRowModel
+            'paginatedRowModel' in table.options.features
           )
         "
         :from="elementIndex.pagination.from"
diff --git a/resources/js/modules/elements/index/components/ElementIndexPage.test.ts b/resources/js/modules/elements/index/components/ElementIndexPage.test.ts
index 6f0fcb843b9..6b5fa504aa9 100644
--- a/resources/js/modules/elements/index/components/ElementIndexPage.test.ts
+++ b/resources/js/modules/elements/index/components/ElementIndexPage.test.ts
@@ -1,6 +1,10 @@
 import {createApp, h, nextTick, reactive, ref, type Slots} from 'vue';
 import {afterEach, beforeEach, expect, it, vi} from 'vite-plus/test';
-import {createTable, getCoreRowModel} from '@tanstack/vue-table';
+import type {Table} from '@tanstack/vue-table';
+import {
+  type CraftTableFeatures,
+  useCraftTable,
+} from '@/modules/admin-table/craftTable';
 import {useElementIndexSelection} from '../composables/useElementIndexSelection';
 import {useNavItemActions} from '@/common/composables/useNavItemActions';
 
@@ -52,7 +56,7 @@ vi.mock('@/modules/elements/index/components/ElementTable.vue', () => ({
   default: {
     name: 'ElementTable',
     props: {table: Object},
-    render(this: {table: ReturnType<typeof createTable>}) {
+    render(this: {table: Table<CraftTableFeatures, Record<string, unknown>>}) {
       const row = this.table.getRowModel().rows[0]?.original as
         | {cpEditUrl?: string | null; label?: string}
         | undefined;
@@ -128,17 +132,14 @@ async function mountPage(
   mode = 'table'
 ) {
   const viewState = reactive({mode});
-  const elementTable = createTable({
+  const elementTable = useCraftTable({
     data,
     columns: [],
-    getCoreRowModel: getCoreRowModel(),
     getRowId: (row) => String(row.id),
     state: {
       rowSelection: {'11': true},
       pagination: {pageIndex: 0, pageSize: 50},
     },
-    onStateChange: () => {},
-    renderFallbackValue: null,
   });
 
   page.elementIndex = {
diff --git a/resources/js/modules/elements/index/components/ElementTable.stories.ts b/resources/js/modules/elements/index/components/ElementTable.stories.ts
index 0eb5f54f461..b365b29c52a 100644
--- a/resources/js/modules/elements/index/components/ElementTable.stories.ts
+++ b/resources/js/modules/elements/index/components/ElementTable.stories.ts
@@ -8,7 +8,10 @@ import {
 
 const meta = {
   title: 'Elements/ElementTable',
-  component: ElementTable,
+  // 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: ElementTable as Meta['component'],
   args: {
     loading: false,
   },
@@ -28,7 +31,7 @@ const meta = {
       },
     },
   },
-} satisfies Meta<typeof ElementTable>;
+} satisfies Meta;
 
 export default meta;
 interface ElementTableStoryArgs {
diff --git a/resources/js/modules/elements/index/components/ElementTable.test.ts b/resources/js/modules/elements/index/components/ElementTable.test.ts
index e835a4e2d5e..8a741ccf844 100644
--- a/resources/js/modules/elements/index/components/ElementTable.test.ts
+++ b/resources/js/modules/elements/index/components/ElementTable.test.ts
@@ -260,7 +260,7 @@ describe('DataTable', () => {
             readOnly: false,
           }),
           loading: loading.value,
-        }),
+        } as never),
     });
     app.mount(container);
     await nextTick();
@@ -310,7 +310,7 @@ describe('DataTable', () => {
             readOnly: false,
           }),
           loading: loading.value,
-        }),
+        } as never),
     });
     app.mount(container);
     await nextTick();
diff --git a/resources/js/modules/elements/index/components/ElementTable.vue b/resources/js/modules/elements/index/components/ElementTable.vue
index 06b6522d7c3..dfd7a44ac5c 100644
--- a/resources/js/modules/elements/index/components/ElementTable.vue
+++ b/resources/js/modules/elements/index/components/ElementTable.vue
@@ -1,10 +1,11 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="TData extends Record<string, any>">
   import {
     FlexRender,
     type CellContext,
     type Row,
     type Table,
   } from '@tanstack/vue-table';
+  import type {CraftTableFeatures} from '@/modules/admin-table/craftTable';
   import {t} from '@craftcms/ui';
   import {computed, ref, type HTMLAttributes, type VNodeChild} from 'vue';
   import DataTable from '@/common/components/DataTable.vue';
@@ -24,8 +25,8 @@
 
   const props = withDefaults(
     defineProps<{
-      table: Table<any>;
-      selection: ElementIndexSelection;
+      table: Table<CraftTableFeatures, TData>;
+      selection: ElementIndexSelection<TData>;
       title?: string;
       reorderable?: boolean;
       selectable?: boolean;
@@ -54,7 +55,7 @@
       interactionsDisabled?: boolean;
       inlineEditing?: boolean;
       renderCell?: (
-        context: CellContext<any, unknown>,
+        context: CellContext<CraftTableFeatures, TData, unknown>,
         showErrors: boolean
       ) => unknown;
     }>(),
@@ -88,7 +89,9 @@
     extendSelectionTo,
   } = props.selection;
 
-  function renderInlineCell(context: CellContext<any, unknown>): VNodeChild {
+  function renderInlineCell(
+    context: CellContext<CraftTableFeatures, TData, unknown>
+  ): VNodeChild {
     const showErrors = context.row.getVisibleCells()[0]?.id === context.cell.id;
 
     return props.renderCell?.(context, showErrors) as VNodeChild;
@@ -175,7 +178,7 @@
     ...(props.selectable ? ['44px'] : []),
   ]);
 
-  function rowAttributes(row: Row<any>): HTMLAttributes {
+  function rowAttributes(row: Row<CraftTableFeatures, TData>): HTMLAttributes {
     return {
       ...props.itemBehavior?.attrs?.(row.original),
       tabindex: props.selectable ? 0 : undefined,
@@ -191,7 +194,7 @@
     };
   }
 
-  function rowLabel(row: Row<any>): string {
+  function rowLabel(row: Row<CraftTableFeatures, TData>): string {
     return row.original.label ?? String(row.original.id);
   }
 
@@ -275,7 +278,9 @@
         <craft-checkbox
           label-sr-only
           .checked="table.getIsAllRowsSelected()"
-          .indeterminate="table.getIsSomeRowsSelected()"
+          .indeterminate="
+            table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected()
+          "
           .disabled="readOnly || interactionsDisabled"
           @model-value-changed="
             onToggleAllSelected(($event.target as HTMLInputElement).checked)
@@ -373,16 +378,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" />
     </template>
     <template #empty-row v-if="$slots['empty-row']"
       ><slot name="empty-row"
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/elements/index/composables/useDetachedElementIndex.ts b/resources/js/modules/elements/index/composables/useDetachedElementIndex.ts
index 1c0b309d211..a60f65721f6 100644
--- a/resources/js/modules/elements/index/composables/useDetachedElementIndex.ts
+++ b/resources/js/modules/elements/index/composables/useDetachedElementIndex.ts
@@ -1,4 +1,5 @@
 import type {ColumnDef} from '@tanstack/vue-table';
+import type {CraftTableFeatures} from '@/modules/admin-table/craftTable';
 import {shallowRef, type ComputedRef, type MaybeRefOrGetter} from 'vue';
 import {
   useContentIndexData,
@@ -47,9 +48,9 @@ export interface UseDetachedElementIndexOptions<
     elementIndex: ReturnType<typeof useContentIndexData>
   ) => ElementIndexRow[];
   columns?: (
-    columns: ComputedRef<Array<ColumnDef<ElementIndexRow>>>,
+    columns: ComputedRef<Array<ColumnDef<CraftTableFeatures, ElementIndexRow>>>,
     context: {elementIndex: ReturnType<typeof useContentIndexData>}
-  ) => ComputedRef<Array<ColumnDef<ElementIndexRow>>>;
+  ) => ComputedRef<Array<ColumnDef<CraftTableFeatures, ElementIndexRow>>>;
 }
 
 /** Adds local payloads and request ordering to the shared index. */
diff --git a/resources/js/modules/elements/index/composables/useElementIndex.ts b/resources/js/modules/elements/index/composables/useElementIndex.ts
index acf446d5dcb..3653393aaff 100644
--- a/resources/js/modules/elements/index/composables/useElementIndex.ts
+++ b/resources/js/modules/elements/index/composables/useElementIndex.ts
@@ -1,9 +1,8 @@
+import type {ColumnDef, RowSelectionState} from '@tanstack/vue-table';
 import {
-  getCoreRowModel,
-  useVueTable,
-  type ColumnDef,
-} from '@tanstack/vue-table';
-import type {RowSelectionState} from '@tanstack/table-core';
+  type CraftTableFeatures,
+  useCraftTable,
+} from '@/modules/admin-table/craftTable';
 import {
   computed,
   shallowRef,
@@ -72,9 +71,9 @@ interface UseElementIndexOptions {
     elementIndex: ReturnType<typeof useContentIndexData>
   ) => ElementIndexRow[];
   columns?: (
-    columns: ComputedRef<Array<ColumnDef<ElementIndexRow>>>,
+    columns: ComputedRef<Array<ColumnDef<CraftTableFeatures, ElementIndexRow>>>,
     context: {elementIndex: ReturnType<typeof useContentIndexData>}
-  ) => ComputedRef<Array<ColumnDef<ElementIndexRow>>>;
+  ) => ComputedRef<Array<ColumnDef<CraftTableFeatures, ElementIndexRow>>>;
   structure?: boolean;
   readOnly?: MaybeRefOrGetter<boolean>;
   refresh: () => Promise<boolean>;
@@ -195,7 +194,7 @@ export function useElementIndex(options: UseElementIndexOptions) {
     structureView.toggle(id);
   }
 
-  const table = useVueTable<ElementIndexRow>({
+  const table = useCraftTable<ElementIndexRow>({
     get data() {
       return data.value;
     },
@@ -227,7 +226,6 @@ export function useElementIndex(options: UseElementIndexOptions) {
           ? cascadeStructureSelection(rowSelection.value, next, data.value)
           : next;
     },
-    getCoreRowModel: getCoreRowModel<ElementIndexRow>(),
     ...sortingConfig,
     ...paginationConfig,
     enableMultiSort: false,
diff --git a/resources/js/modules/elements/index/composables/useElementIndexSelection.test.ts b/resources/js/modules/elements/index/composables/useElementIndexSelection.test.ts
index de226d793ba..89022309b71 100644
--- a/resources/js/modules/elements/index/composables/useElementIndexSelection.test.ts
+++ b/resources/js/modules/elements/index/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/craftTable';
 import {
   useElementIndexSelection,
   type ElementIndexSelectionOptions,
@@ -10,7 +11,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}.`);
 
@@ -30,7 +34,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};
@@ -45,10 +49,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}),
@@ -58,7 +64,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/index/composables/useElementIndexSelection.ts b/resources/js/modules/elements/index/composables/useElementIndexSelection.ts
index 3b88873144a..dc8c857d7b1 100644
--- a/resources/js/modules/elements/index/composables/useElementIndexSelection.ts
+++ b/resources/js/modules/elements/index/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/craftTable';
 import {isInteractiveClick} from '@/common/utils/dom';
 import {
   type SelectableId,
@@ -20,15 +21,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({
@@ -67,13 +71,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);
   }
@@ -81,7 +85,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;
@@ -98,7 +105,7 @@ export function useElementIndexSelection(
     }
   }
 
-  function extendSelectionTo(row: Row<any>) {
+  function extendSelectionTo(row: Row<CraftTableFeatures, TData>) {
     if (readOnly.value) return;
     selection.extendTo(row.original.id);
   }
@@ -120,4 +127,5 @@ export function useElementIndexSelection(
   };
 }
 
-export type ElementIndexSelection = ReturnType<typeof useElementIndexSelection>;
+export type ElementIndexSelection<TData extends Record<string, any>> =
+  ReturnType<typeof useElementIndexSelection<TData>>;
diff --git a/resources/js/modules/elements/index/composables/useElementIndexStructure.test.ts b/resources/js/modules/elements/index/composables/useElementIndexStructure.test.ts
index de400dd66b4..995352378fb 100644
--- a/resources/js/modules/elements/index/composables/useElementIndexStructure.test.ts
+++ b/resources/js/modules/elements/index/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/index/composables/useInlineEditing.ts b/resources/js/modules/elements/index/composables/useInlineEditing.ts
index 7defcc2565a..ac025a24cb3 100644
--- a/resources/js/modules/elements/index/composables/useInlineEditing.ts
+++ b/resources/js/modules/elements/index/composables/useInlineEditing.ts
@@ -1,6 +1,7 @@
 import {serializeFormInputs, t} from '@craftcms/ui';
 import {focusableWithin} from '@craftcms/ui/utilities/focus-trap';
 import type {CellContext} from '@tanstack/vue-table';
+import type {CraftTableFeatures} from '@/modules/admin-table/craftTable';
 import {h, nextTick, ref, toValue, type MaybeRefOrGetter, type Ref} from 'vue';
 import DynamicHtmlRenderer from '@/common/components/DynamicHtmlRenderer.vue';
 import type {InlineAttributeFormHost} from '@/modules/forms/inline-attribute-form-host';
@@ -33,7 +34,10 @@ export function useInlineEditing<Row extends InlineEditableRow>(options: {
   const errors = ref<InlineEditingErrors>({});
   let initialInputs = '';
 
-  function renderCell(context: CellContext<Row, unknown>, showErrors: boolean) {
+  function renderCell(
+    context: CellContext<CraftTableFeatures, Row, unknown>,
+    showErrors: boolean
+  ) {
     const entry = context.row.original;
     const columnId = context.column.id;
     const html = editingIds.value.includes(entry.id)
diff --git a/resources/js/modules/elements/index/types/model.ts b/resources/js/modules/elements/index/types/model.ts
index e71d37c51a0..8c64f494a7c 100644
--- a/resources/js/modules/elements/index/types/model.ts
+++ b/resources/js/modules/elements/index/types/model.ts
@@ -1,5 +1,6 @@
 import type {ComputedRef, Ref} from 'vue';
 import type {Table} from '@tanstack/vue-table';
+import type {CraftTableFeatures} from '@/modules/admin-table/craftTable';
 import type {CheckboxOption} from '@/common/types';
 import type {ConditionConfig} from '@/modules/conditions/types';
 import type {
@@ -31,9 +32,9 @@ export type ExportElementIndex = (
 
 export interface ElementIndexView {
   elementIndex: Readonly<ReturnType<typeof useContentIndexData>>;
-  table: Table<ElementIndexRow>;
+  table: Table<CraftTableFeatures, ElementIndexRow>;
   data: ComputedRef<ElementIndexRow[]>;
-  selection: ElementIndexSelection;
+  selection: ElementIndexSelection<ElementIndexRow>;
   search: Ref<string>;
   status: Ref<string>;
   conditions: Ref<ConditionConfig | null>;
diff --git a/resources/js/modules/forms/ElementSelectControl.vue b/resources/js/modules/forms/ElementSelectControl.vue
index cf37bf27dbd..79bd9645e06 100644
--- a/resources/js/modules/forms/ElementSelectControl.vue
+++ b/resources/js/modules/forms/ElementSelectControl.vue
@@ -654,7 +654,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 43089dc9d60..63ed1d625f7 100644
--- a/resources/js/modules/forms/nested-elements/NestedElementBlocksControl.vue
+++ b/resources/js/modules/forms/nested-elements/NestedElementBlocksControl.vue
@@ -1514,7 +1514,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)!" />
@@ -1581,7 +1581,7 @@
           </div>
         </template>
       </SelectableCardList>
-      <div v-if="canAdd" class="mt-3">
+      <div v-if="canAdd" class="mt-md">
         <NestedElementsCreateButton
           :choices="createChoices"
           :label="control.props.addLabel"
@@ -1594,7 +1594,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/NestedElementsCreateButton.vue b/resources/js/modules/forms/nested-elements/NestedElementsCreateButton.vue
index fb3e140cdea..47f233fdb78 100644
--- a/resources/js/modules/forms/nested-elements/NestedElementsCreateButton.vue
+++ b/resources/js/modules/forms/nested-elements/NestedElementsCreateButton.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/NestedElementsIndex.vue b/resources/js/modules/forms/nested-elements/NestedElementsIndex.vue
index 7e87a5e4180..4079c4d5391 100644
--- a/resources/js/modules/forms/nested-elements/NestedElementsIndex.vue
+++ b/resources/js/modules/forms/nested-elements/NestedElementsIndex.vue
@@ -14,6 +14,7 @@
   import ActionMenu from '@/common/components/ActionMenu.vue';
   import {createCraftColumnHelper} from '@/modules/admin-table/helpers/createCraftColumnHelper';
   import type {ColumnDef} from '@tanstack/vue-table';
+  import type {CraftTableFeatures} from '@/modules/admin-table/craftTable';
   import ElementIndex from '@/modules/elements/index/components/ElementIndex.vue';
   import ElementBulkActionsBar from '@/modules/elements/index/components/ElementBulkActionsBar.vue';
   import {saveInlineElements} from '@/modules/elements/index/save-inline-elements';
@@ -116,7 +117,7 @@
               ]),
             ]
           : []),
-      ]) as ComputedRef<Array<ColumnDef<ElementIndexRow>>>,
+      ]) as ComputedRef<Array<ColumnDef<CraftTableFeatures, ElementIndexRow>>>,
   });
 
   const {
@@ -421,7 +422,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/modules/forms/nested-elements/useNestedElementsQuery.ts b/resources/js/modules/forms/nested-elements/useNestedElementsQuery.ts
index 50b1a4c2777..eb6ba9a4223 100644
--- a/resources/js/modules/forms/nested-elements/useNestedElementsQuery.ts
+++ b/resources/js/modules/forms/nested-elements/useNestedElementsQuery.ts
@@ -201,7 +201,7 @@ export function useNestedElementsQuery(options: {
     () => index.view.data.value as NestedIndexElement[]
   );
   const page = computed({
-    get: () => table.getState().pagination.pageIndex + 1,
+    get: () => table.atoms.pagination.get().pageIndex + 1,
     set: (value: number) => table.setPageIndex(value - 1),
   });
   const pagination = computed(() => index.payload.value.pagination);
diff --git a/resources/js/modules/plugin-manager/components/PluginsList.vue b/resources/js/modules/plugin-manager/components/PluginsList.vue
index 08b24d6f80a..01bbd4fceaf 100644
--- a/resources/js/modules/plugin-manager/components/PluginsList.vue
+++ b/resources/js/modules/plugin-manager/components/PluginsList.vue
@@ -4,7 +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 {getCoreRowModel, useVueTable} from '@tanstack/vue-table';
+  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';
@@ -31,7 +31,7 @@
   });
 
   const columnHelper = createCraftColumnHelper<PluginInfo>();
-  const table = useVueTable({
+  const table = useCraftTable({
     state: {
       get columnVisibility() {
         return {
@@ -72,7 +72,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..ae921da2b2f 100644
--- a/resources/js/modules/two-step-verification/TwoStepVerification.vue
+++ b/resources/js/modules/two-step-verification/TwoStepVerification.vue
@@ -2,7 +2,7 @@
   import {h, ref} from 'vue';
   import {router, useHttp} from '@inertiajs/vue3';
   import {t} from '@craftcms/ui';
-  import {getCoreRowModel, useVueTable} from '@tanstack/vue-table';
+  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';
@@ -122,7 +122,7 @@
   }
 
   const columnHelper = createCraftColumnHelper<AuthMethod>();
-  const table = useVueTable<AuthMethod>({
+  const table = useCraftTable<AuthMethod>({
     get data() {
       return props.methods;
     },
@@ -194,8 +194,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..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,
-    getCoreRowModel,
-    useVueTable,
-  } from '@tanstack/vue-table';
+  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,23 +35,25 @@
     ] 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 = createCraftColumnHelper<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 = useCraftTable({
     get columns() {
       return columns.value;
     },
@@ -62,7 +61,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..8ff84091098 100644
--- a/resources/js/modules/utilities/components/deprecation-errors/DeprecationErrors.vue
+++ b/resources/js/modules/utilities/components/deprecation-errors/DeprecationErrors.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
   import {t} from '@craftcms/ui/utilities/translate';
-  import {getCoreRowModel, useVueTable} from '@tanstack/vue-table';
+  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';
@@ -20,41 +20,41 @@
   }>();
 
   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 = useCraftTable({
     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..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,
-    getCoreRowModel,
-    useVueTable,
-  } from '@tanstack/vue-table';
+  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<JobInfo>();
+  const columnHelper = createCraftColumnHelper<JobInfo>();
 
   function getStatusVariant(value: number) {
     if (value === 2 || value === 3) {
@@ -44,59 +41,60 @@
     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 = useCraftTable({
     get data() {
       return props.jobs;
     },
     get columns() {
       return columns.value;
     },
-    getCoreRowModel: getCoreRowModel<JobInfo>(),
   });
 </script>
 
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>
diff --git a/resources/js/pages/graphql/schemas/Index.vue b/resources/js/pages/graphql/schemas/Index.vue
index 7fd601e2d0e..fdfb71283e8 100644
--- a/resources/js/pages/graphql/schemas/Index.vue
+++ b/resources/js/pages/graphql/schemas/Index.vue
@@ -3,7 +3,7 @@
   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 {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';
@@ -24,7 +24,7 @@
   }>();
 
   const columnHelper = createCraftColumnHelper<SchemaData>();
-  const table = useVueTable({
+  const table = useCraftTable({
     get columns() {
       return [
         columnHelper.link('name', {
@@ -78,8 +78,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 6cff2777101..c51e99d896e 100644
--- a/resources/js/pages/graphql/tokens/Index.vue
+++ b/resources/js/pages/graphql/tokens/Index.vue
@@ -2,7 +2,7 @@
   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 {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';
@@ -37,7 +37,7 @@
   }>();
 
   const columnHelper = createCraftColumnHelper<TokenData>();
-  const table = useVueTable({
+  const table = useCraftTable({
     get columns() {
       return [
         columnHelper.link('name', {
@@ -83,8 +83,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 647ab11c35c..18aa2bf55dd 100644
--- a/resources/js/pages/settings/assets/Index.vue
+++ b/resources/js/pages/settings/assets/Index.vue
@@ -1,7 +1,7 @@
 <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 {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';
@@ -109,7 +109,7 @@
     ]),
   ]);
 
-  const table = useVueTable<VolumeData>({
+  const table = useCraftTable<VolumeData>({
     get data() {
       return volumes.value;
     },
@@ -121,8 +121,6 @@
         return columnVisibility.value;
       },
     },
-    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 b5b89e25695..54c4864152b 100644
--- a/resources/js/pages/settings/assets/transformers/Index.vue
+++ b/resources/js/pages/settings/assets/transformers/Index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
   import {t} from '@craftcms/ui';
   import {router} from '@inertiajs/vue3';
-  import {getCoreRowModel, useVueTable} from '@tanstack/vue-table';
+  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';
@@ -29,66 +29,72 @@
     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 = useCraftTable<AssetTransformerIndexData>({
     get data() {
       return props.transformers;
     },
@@ -100,8 +106,6 @@
         return columnVisibility.value;
       },
     },
-    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 d09407a5c06..562e7010cd5 100644
--- a/resources/js/pages/settings/assets/transforms/Index.vue
+++ b/resources/js/pages/settings/assets/transforms/Index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
   import {capitalize, t} from '@craftcms/ui';
-  import {getCoreRowModel, useVueTable} from '@tanstack/vue-table';
+  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';
@@ -33,65 +33,68 @@
     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 = useCraftTable({
     get data() {
       return props.transforms;
     },
     get columns() {
       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 2b65bb307e2..fd88e916e31 100644
--- a/resources/js/pages/settings/entry-types/Index.vue
+++ b/resources/js/pages/settings/entry-types/Index.vue
@@ -1,7 +1,7 @@
 <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 {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';
@@ -38,34 +38,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,
@@ -103,7 +105,7 @@
     },
   });
 
-  const table = useVueTable<EntryTypeRow>({
+  const table = useCraftTable<EntryTypeRow>({
     get data() {
       return entryTypes.value;
     },
@@ -122,7 +124,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 634363d33b0..c08c5a2a24b 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,
-    getCoreRowModel,
-    useVueTable,
-  } from '@tanstack/vue-table';
+  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';
@@ -45,7 +42,7 @@
   }>();
 
   const searchTerm = ref(props.searchTerm ?? '');
-  const columnHelper = createColumnHelper<FieldRow>();
+  const columnHelper = createCraftColumnHelper<FieldRow>();
   const columnVisibility = computed(() => {
     return {
       name: true,
@@ -57,87 +54,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,
@@ -174,7 +173,7 @@
     },
   });
 
-  const table = useVueTable({
+  const table = useCraftTable({
     get data() {
       return props.data;
     },
@@ -192,8 +191,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 6f610cb4558..8d629a0d9aa 100644
--- a/resources/js/pages/settings/sections/Index.vue
+++ b/resources/js/pages/settings/sections/Index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
   import CpButtonLink from '@/common/components/CpButtonLink.vue';
-  import {getCoreRowModel, useVueTable} from '@tanstack/vue-table';
+  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';
@@ -42,23 +42,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 +98,13 @@
     },
   });
 
-  const sectionTable = useVueTable({
+  const sectionTable = useCraftTable({
     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 1109e69e5fb..1df55a3ce54 100644
--- a/resources/js/pages/settings/sites/Index.vue
+++ b/resources/js/pages/settings/sites/Index.vue
@@ -3,7 +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 {getCoreRowModel, useVueTable} from '@tanstack/vue-table';
+  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';
@@ -99,79 +99,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',
-              label: t('Yes'),
-            })
-          : '',
-    }),
-    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',
+                label: t('Yes'),
+              })
+            : '',
+      }),
+      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 = useCraftTable({
     get data() {
       return sites.value;
     },
@@ -185,9 +189,7 @@
         };
       },
     },
-    getCoreRowModel: getCoreRowModel<Site>(),
     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 5e8b8ec6574..ff281fffd78 100644
--- a/resources/js/pages/settings/users/groups/Index.vue
+++ b/resources/js/pages/settings/users/groups/Index.vue
@@ -3,7 +3,7 @@
   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 {useCraftTable} from '@/modules/admin-table/craftTable';
   import {
     create,
     destroy,
@@ -21,7 +21,7 @@
   }>();
 
   const columnHelper = createCraftColumnHelper<UserGroup>();
-  const table = useVueTable({
+  const table = useCraftTable({
     get columns() {
       return [
         columnHelper.link('name', {
@@ -50,7 +50,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 6a64e1c4538..92a03f2b832 100644
--- a/resources/js/pages/settings/workflows/Index.vue
+++ b/resources/js/pages/settings/workflows/Index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
   import {t} from '@craftcms/ui';
   import {router} from '@inertiajs/vue3';
-  import {getCoreRowModel, useVueTable} from '@tanstack/vue-table';
+  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';
@@ -38,24 +38,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,
@@ -75,7 +77,7 @@
       });
     },
   });
-  const table = useVueTable<Workflow>({
+  const table = useCraftTable<Workflow>({
     get data() {
       return props.data;
     },
@@ -93,7 +95,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 f113957a256..a2eb5cd8186 100644
--- a/resources/js/pages/users/Passkeys.vue
+++ b/resources/js/pages/users/Passkeys.vue
@@ -7,7 +7,7 @@
     platformAuthenticatorIsAvailable,
     startRegistration,
   } from '@simplewebauthn/browser';
-  import {getCoreRowModel, useVueTable} from '@tanstack/vue-table';
+  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';
@@ -154,7 +154,7 @@
   }
 
   const columnHelper = createCraftColumnHelper<Passkey>();
-  const table = useVueTable<Passkey>({
+  const table = useCraftTable<Passkey>({
     get data() {
       return page.props.passkeys;
     },
@@ -189,8 +189,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..a19673cee60 100644
--- a/resources/js/pages/users/SignInProviders.vue
+++ b/resources/js/pages/users/SignInProviders.vue
@@ -3,7 +3,7 @@
   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 {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';
@@ -71,7 +71,7 @@
   }
 
   const columnHelper = createCraftColumnHelper<Provider>();
-  const table = useVueTable<Provider>({
+  const table = useCraftTable<Provider>({
     get data() {
       return page.props.providers;
     },
@@ -137,8 +137,6 @@
         ]),
       ];
     },
-    getCoreRowModel: getCoreRowModel<Provider>(),
-    enableSorting: false,
   });
 </script>