From dfaacea951384853d6f1dab12f765edf46e56d8d Mon Sep 17 00:00:00 2001
From: MuhammadM1998 <MuhammadM.1097@gmail.com>
Date: Sat, 25 Jan 2025 18:25:14 +0200
Subject: [PATCH 01/14] refactor: remove manually declared tanstack options

---
 src/runtime/components/Table.vue | 49 --------------------------------
 1 file changed, 49 deletions(-)

diff --git a/src/runtime/components/Table.vue b/src/runtime/components/Table.vue
index 3edf586cd0..745b422593 100644
--- a/src/runtime/components/Table.vue
+++ b/src/runtime/components/Table.vue
@@ -13,13 +13,6 @@ import type {
   SortingState,
   ExpandedState,
   VisibilityState,
-  GlobalFilterOptions,
-  ColumnFiltersOptions,
-  ColumnPinningOptions,
-  VisibilityOptions,
-  ExpandedOptions,
-  SortingOptions,
-  RowSelectionOptions,
   Updater,
   CellContext,
   HeaderContext
@@ -68,41 +61,6 @@ export interface TableProps<T> {
   loading?: boolean
   loadingColor?: TableVariants['loadingColor']
   loadingAnimation?: TableVariants['loadingAnimation']
-  /**
-   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/global-filtering#table-options)
-   * @link [Guide](https://tanstack.com/table/v8/docs/guide/global-filtering)
-   */
-  globalFilterOptions?: Omit<GlobalFilterOptions<T>, 'onGlobalFilterChange'>
-  /**
-   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-filtering#table-options)
-   * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-filtering)
-   */
-  columnFiltersOptions?: Omit<ColumnFiltersOptions<T>, 'getFilteredRowModel' | 'onColumnFiltersChange'>
-  /**
-   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-pinning#table-options)
-   * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-pinning)
-   */
-  columnPinningOptions?: Omit<ColumnPinningOptions, 'onColumnPinningChange'>
-  /**
-   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-visibility#table-options)
-   * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-visibility)
-   */
-  visibilityOptions?: Omit<VisibilityOptions, 'onColumnVisibilityChange'>
-  /**
-   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/sorting#table-options)
-   * @link [Guide](https://tanstack.com/table/v8/docs/guide/sorting)
-   */
-  sortingOptions?: Omit<SortingOptions<T>, 'getSortedRowModel' | 'onSortingChange'>
-  /**
-   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/expanding#table-options)
-   * @link [Guide](https://tanstack.com/table/v8/docs/guide/expanding)
-   */
-  expandedOptions?: Omit<ExpandedOptions<T>, 'getExpandedRowModel' | 'onExpandedChange'>
-  /**
-   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/row-selection#table-options)
-   * @link [Guide](https://tanstack.com/table/v8/docs/guide/row-selection)
-   */
-  rowSelectionOptions?: Omit<RowSelectionOptions<T>, 'onRowSelectionChange'>
   class?: any
   ui?: Partial<typeof table.slots>
 }
@@ -152,21 +110,14 @@ const tableApi = useVueTable({
   data,
   columns: columns.value,
   getCoreRowModel: getCoreRowModel(),
-  ...(props.globalFilterOptions || {}),
   onGlobalFilterChange: updaterOrValue => valueUpdater(updaterOrValue, globalFilterState),
-  ...(props.columnFiltersOptions || {}),
   getFilteredRowModel: getFilteredRowModel(),
   onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFiltersState),
-  ...(props.visibilityOptions || {}),
   onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibilityState),
-  ...(props.columnPinningOptions || {}),
   onColumnPinningChange: updaterOrValue => valueUpdater(updaterOrValue, columnPinningState),
-  ...(props.rowSelectionOptions || {}),
   onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelectionState),
-  ...(props.sortingOptions || {}),
   getSortedRowModel: getSortedRowModel(),
   onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sortingState),
-  ...(props.expandedOptions || {}),
   getExpandedRowModel: getExpandedRowModel(),
   onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expandedState),
   state: {

From 93bca1fa1bb79a17abd44b11b9a33e17f0f4dd60 Mon Sep 17 00:00:00 2001
From: MuhammadM1998 <MuhammadM.1097@gmail.com>
Date: Sat, 25 Jan 2025 18:27:08 +0200
Subject: [PATCH 02/14] feat: add `tanstackOptions` prop and use defu to pass
 our defaults

---
 src/runtime/components/Table.vue | 25 +++++++++++++++----------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/runtime/components/Table.vue b/src/runtime/components/Table.vue
index 745b422593..85377a5930 100644
--- a/src/runtime/components/Table.vue
+++ b/src/runtime/components/Table.vue
@@ -15,7 +15,8 @@ import type {
   VisibilityState,
   Updater,
   CellContext,
-  HeaderContext
+  HeaderContext,
+  TableOptionsWithReactiveData
 } from '@tanstack/vue-table'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/table'
@@ -39,6 +40,8 @@ type TableVariants = VariantProps<typeof table>
 
 export type TableColumn<T> = ColumnDef<T>
 
+export type TableTanstackOptions<T> = Omit<TableOptionsWithReactiveData<T>, 'data' | 'columns' | 'getCoreRowModel'>
+
 export interface TableData {
   [key: string]: any
 }
@@ -51,6 +54,7 @@ export interface TableProps<T> {
   as?: any
   data?: T[]
   columns?: TableColumn<T>[]
+  tanstackOptions?: TableTanstackOptions<T>
   caption?: string
   /**
    * Whether the table should have a sticky header.
@@ -78,6 +82,7 @@ export type TableSlots<T> = {
 
 <script setup lang="ts" generic="T extends TableData">
 import { computed } from 'vue'
+import { defu } from 'defu'
 import { Primitive } from 'reka-ui'
 import { FlexRender, getCoreRowModel, getFilteredRowModel, getSortedRowModel, getExpandedRowModel, useVueTable } from '@tanstack/vue-table'
 import { upperFirst } from 'scule'
@@ -106,20 +111,20 @@ const rowSelectionState = defineModel<RowSelectionState>('rowSelection', { defau
 const sortingState = defineModel<SortingState>('sorting', { default: [] })
 const expandedState = defineModel<ExpandedState>('expanded', { default: {} })
 
-const tableApi = useVueTable({
+const tableApi = useVueTable(defu(props.tanstackOptions, {
   data,
   columns: columns.value,
   getCoreRowModel: getCoreRowModel(),
-  onGlobalFilterChange: updaterOrValue => valueUpdater(updaterOrValue, globalFilterState),
+  onGlobalFilterChange: (updaterOrValue: any) => valueUpdater(updaterOrValue, globalFilterState),
   getFilteredRowModel: getFilteredRowModel(),
-  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFiltersState),
-  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibilityState),
-  onColumnPinningChange: updaterOrValue => valueUpdater(updaterOrValue, columnPinningState),
-  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelectionState),
+  onColumnFiltersChange: (updaterOrValue: Updater<ColumnFiltersState>) => valueUpdater(updaterOrValue, columnFiltersState),
+  onColumnVisibilityChange: (updaterOrValue: Updater<VisibilityState>) => valueUpdater(updaterOrValue, columnVisibilityState),
+  onColumnPinningChange: (updaterOrValue: Updater<ColumnPinningState>) => valueUpdater(updaterOrValue, columnPinningState),
+  onRowSelectionChange: (updaterOrValue: Updater<RowSelectionState>) => valueUpdater(updaterOrValue, rowSelectionState),
   getSortedRowModel: getSortedRowModel(),
-  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sortingState),
+  onSortingChange: (updaterOrValue: Updater<SortingState>) => valueUpdater(updaterOrValue, sortingState),
   getExpandedRowModel: getExpandedRowModel(),
-  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expandedState),
+  onExpandedChange: (updaterOrValue: Updater<ExpandedState>) => valueUpdater(updaterOrValue, expandedState),
   state: {
     get globalFilter() {
       return globalFilterState.value
@@ -143,7 +148,7 @@ const tableApi = useVueTable({
       return sortingState.value
     }
   }
-})
+}))
 
 function valueUpdater<T extends Updater<any>>(updaterOrValue: T, ref: Ref) {
   ref.value = typeof updaterOrValue === 'function' ? updaterOrValue(ref.value) : updaterOrValue

From 674cb162a7d200a8bb4f399e65e65a30f67b9c97 Mon Sep 17 00:00:00 2001
From: MuhammadM1998 <MuhammadM.1097@gmail.com>
Date: Sat, 25 Jan 2025 18:27:53 +0200
Subject: [PATCH 03/14] feat: add paginationRowModel to table defaults

---
 src/runtime/components/Table.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/runtime/components/Table.vue b/src/runtime/components/Table.vue
index 85377a5930..bf4fd833e6 100644
--- a/src/runtime/components/Table.vue
+++ b/src/runtime/components/Table.vue
@@ -84,7 +84,7 @@ export type TableSlots<T> = {
 import { computed } from 'vue'
 import { defu } from 'defu'
 import { Primitive } from 'reka-ui'
-import { FlexRender, getCoreRowModel, getFilteredRowModel, getSortedRowModel, getExpandedRowModel, useVueTable } from '@tanstack/vue-table'
+import { FlexRender, getCoreRowModel, getFilteredRowModel, getSortedRowModel, getExpandedRowModel, getPaginationRowModel, useVueTable } from '@tanstack/vue-table'
 import { upperFirst } from 'scule'
 import { useLocale } from '../composables/useLocale'
 
@@ -125,6 +125,7 @@ const tableApi = useVueTable(defu(props.tanstackOptions, {
   onSortingChange: (updaterOrValue: Updater<SortingState>) => valueUpdater(updaterOrValue, sortingState),
   getExpandedRowModel: getExpandedRowModel(),
   onExpandedChange: (updaterOrValue: Updater<ExpandedState>) => valueUpdater(updaterOrValue, expandedState),
+  getPaginationRowModel: getPaginationRowModel(),
   state: {
     get globalFilter() {
       return globalFilterState.value

From d8e4cfdaaedbba06d59483af668adc9f6016a660 Mon Sep 17 00:00:00 2001
From: MuhammadM1998 <MuhammadM.1097@gmail.com>
Date: Sat, 25 Jan 2025 18:28:46 +0200
Subject: [PATCH 04/14] docs: add table pagination example

---
 .../examples/table/TablePaginationExample.vue | 162 ++++++++++++++++++
 docs/content/3.components/table.md            |  11 ++
 2 files changed, 173 insertions(+)
 create mode 100644 docs/app/components/content/examples/table/TablePaginationExample.vue

diff --git a/docs/app/components/content/examples/table/TablePaginationExample.vue b/docs/app/components/content/examples/table/TablePaginationExample.vue
new file mode 100644
index 0000000000..a4125a2a32
--- /dev/null
+++ b/docs/app/components/content/examples/table/TablePaginationExample.vue
@@ -0,0 +1,162 @@
+<script setup lang="ts">
+import type { TableColumn } from '@nuxt/ui'
+
+type Payment = {
+  id: string
+  date: string
+  email: string
+  amount: number
+}
+const data = ref<Payment[]>([{
+  id: '4600',
+  date: '2024-03-11T15:30:00',
+  email: 'james.anderson@example.com',
+  amount: 594
+}, {
+  id: '4599',
+  date: '2024-03-11T10:10:00',
+  email: 'mia.white@example.com',
+  amount: 276
+}, {
+  id: '4598',
+  date: '2024-03-11T08:50:00',
+  email: 'william.brown@example.com',
+  amount: 315
+}, {
+  id: '4597',
+  date: '2024-03-10T19:45:00',
+  email: 'emma.davis@example.com',
+  amount: 529
+}, {
+  id: '4596',
+  date: '2024-03-10T15:55:00',
+  email: 'ethan.harris@example.com',
+  amount: 639
+}, {
+  id: '4595',
+  date: '2024-03-10T13:20:00',
+  email: 'sophia.miller@example.com',
+  amount: 428
+}, {
+  id: '4594',
+  date: '2024-03-10T11:05:00',
+  email: 'noah.wilson@example.com',
+  amount: 673
+}, {
+  id: '4593',
+  date: '2024-03-09T22:15:00',
+  email: 'olivia.jones@example.com',
+  amount: 382
+}, {
+  id: '4592',
+  date: '2024-03-09T20:30:00',
+  email: 'liam.taylor@example.com',
+  amount: 547
+}, {
+  id: '4591',
+  date: '2024-03-09T18:45:00',
+  email: 'ava.thomas@example.com',
+  amount: 291
+}, {
+  id: '4590',
+  date: '2024-03-09T16:20:00',
+  email: 'lucas.martin@example.com',
+  amount: 624
+}, {
+  id: '4589',
+  date: '2024-03-09T14:10:00',
+  email: 'isabella.clark@example.com',
+  amount: 438
+}, {
+  id: '4588',
+  date: '2024-03-09T12:05:00',
+  email: 'mason.rodriguez@example.com',
+  amount: 583
+}, {
+  id: '4587',
+  date: '2024-03-09T10:30:00',
+  email: 'sophia.lee@example.com',
+  amount: 347
+}, {
+  id: '4586',
+  date: '2024-03-09T08:15:00',
+  email: 'ethan.walker@example.com',
+  amount: 692
+}, {
+  id: '4585',
+  date: '2024-03-08T23:40:00',
+  email: 'amelia.hall@example.com',
+  amount: 419
+}, {
+  id: '4584',
+  date: '2024-03-08T21:25:00',
+  email: 'oliver.young@example.com',
+  amount: 563
+}, {
+  id: '4583',
+  date: '2024-03-08T19:50:00',
+  email: 'aria.king@example.com',
+  amount: 328
+}, {
+  id: '4582',
+  date: '2024-03-08T17:35:00',
+  email: 'henry.wright@example.com',
+  amount: 647
+}, {
+  id: '4581',
+  date: '2024-03-08T15:20:00',
+  email: 'luna.lopez@example.com',
+  amount: 482
+}])
+const columns: TableColumn<Payment>[] = [{
+  accessorKey: 'id',
+  header: '#',
+  cell: ({ row }) => `#${row.getValue('id')}`
+}, {
+  accessorKey: 'date',
+  header: 'Date',
+  cell: ({ row }) => {
+    return new Date(row.getValue('date')).toLocaleString('en-US', {
+      day: 'numeric',
+      month: 'short',
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: false
+    })
+  }
+}, {
+  accessorKey: 'email',
+  header: 'Email'
+}, {
+  accessorKey: 'amount',
+  header: () => h('div', { class: 'text-right' }, 'Amount'),
+  cell: ({ row }) => {
+    const amount = Number.parseFloat(row.getValue('amount'))
+    const formatted = new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'EUR'
+    }).format(amount)
+    return h('div', { class: 'text-right font-medium' }, formatted)
+  }
+}]
+const table = useTemplateRef('table')
+</script>
+
+<template>
+  <div class="w-full space-y-4 pb-4">
+    <UTable
+      ref="table"
+      :data="data"
+      :columns="columns"
+      :tanstack-options="{ initialState: { pagination: { pageSize: 7 } } }"
+      class="flex-1"
+    />
+    <UPagination
+      :default-page="(table?.tableApi.getState().pagination.pageIndex || 0) + 1"
+      :items-per-page="table?.tableApi.getState().pagination.pageSize"
+      :total="table?.tableApi.getFilteredRowModel().rows.length"
+      class="w-fit mx-auto"
+      @update:page="(p) => table?.tableApi.setPageIndex(p - 1)"
+    />
+  </div>
+</template>
diff --git a/docs/content/3.components/table.md b/docs/content/3.components/table.md
index 82eb61ebf2..d692f40f47 100644
--- a/docs/content/3.components/table.md
+++ b/docs/content/3.components/table.md
@@ -404,6 +404,17 @@ class: '!p-0'
 ---
 ::
 
+### With pagination
+We already pass the `getPaginationRowModel` function to the table so you don't need to pass it again. There are different pagination approaches as explained in [Pagination Guide](https://tanstack.com/table/v8/docs/guide/pagination#pagination-guide). You can implement any of them by passing options to `tanstackOptions` prop. In the example below, we use the `initialState` prop to set the default page size and use `UPagination` component to control the pagination state.
+::component-example
+---
+prettier: true
+collapse: true
+name: 'table-pagination-example'
+class: '!p-0'
+---
+::
+
 ### With slots
 
 You can use slots to customize the header and data cells of the table.

From 20307f4551fdca2ecbced5ab9108d1d752086345 Mon Sep 17 00:00:00 2001
From: Sandros94 <sandro.circi@digitoolmedia.com>
Date: Sat, 1 Feb 2025 19:22:40 +0100
Subject: [PATCH 05/14] feat(Table): most tanstack options as top-level props

---
 src/runtime/components/Table.vue | 56 ++++++++++++++++++++++++--------
 1 file changed, 43 insertions(+), 13 deletions(-)

diff --git a/src/runtime/components/Table.vue b/src/runtime/components/Table.vue
index bf4fd833e6..4ecd00553b 100644
--- a/src/runtime/components/Table.vue
+++ b/src/runtime/components/Table.vue
@@ -16,7 +16,20 @@ import type {
   Updater,
   CellContext,
   HeaderContext,
-  TableOptionsWithReactiveData
+  CoreOptions,
+  VisibilityOptions,
+  ColumnOrderOptions,
+  ColumnPinningOptions,
+  RowPinningOptions,
+  FacetedOptions,
+  // ColumnFiltersOptions,
+  GlobalFilterOptions,
+  // SortingOptions,
+  // GroupingOptions,
+  ExpandedOptions,
+  ColumnSizingOptions,
+  PaginationOptions,
+  RowSelectionOptions
 } from '@tanstack/vue-table'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/table'
@@ -38,15 +51,32 @@ const table = tv({ extend: tv(theme), ...(appConfigTable.ui?.table || {}) })
 
 type TableVariants = VariantProps<typeof table>
 
-export type TableColumn<T> = ColumnDef<T>
-
-export type TableTanstackOptions<T> = Omit<TableOptionsWithReactiveData<T>, 'data' | 'columns' | 'getCoreRowModel'>
+export type TableData = RowData
+
+export type TableColumn<T extends TableData, D = unknown> = ColumnDef<T, D>
+
+interface FeatureOptions<TData extends RowData> extends VisibilityOptions,
+  ColumnOrderOptions,
+  ColumnPinningOptions,
+  RowPinningOptions<TData>,
+  FacetedOptions<TData>,
+  // ColumnFiltersOptions<TData>,
+  GlobalFilterOptions<TData>,
+  // SortingOptions<TData>,
+  // GroupingOptions,
+  ExpandedOptions<TData>,
+  ColumnSizingOptions,
+  PaginationOptions,
+  RowSelectionOptions<TData> {
+}
 
-export interface TableData {
-  [key: string]: any
+export interface TableOptions<T extends TableData> extends Omit<CoreOptions<T>, 'state' | 'onStateChange' | 'renderFallbackValue'>, FeatureOptions<T> {
+  state?: CoreOptions<T>['state']
+  onStateChange?: CoreOptions<T>['onStateChange']
+  renderFallbackValue?: CoreOptions<T>['renderFallbackValue']
 }
 
-export interface TableProps<T> {
+export interface TableProps<T extends TableData> extends Omit<TableOptions<T>, 'data' | 'columns' | 'getCoreRowModel'> {
   /**
    * The element or component this component should render as.
    * @defaultValue 'div'
@@ -54,7 +84,6 @@ export interface TableProps<T> {
   as?: any
   data?: T[]
   columns?: TableColumn<T>[]
-  tanstackOptions?: TableTanstackOptions<T>
   caption?: string
   /**
    * Whether the table should have a sticky header.
@@ -84,7 +113,8 @@ export type TableSlots<T> = {
 import { computed } from 'vue'
 import { defu } from 'defu'
 import { Primitive } from 'reka-ui'
-import { FlexRender, getCoreRowModel, getFilteredRowModel, getSortedRowModel, getExpandedRowModel, getPaginationRowModel, useVueTable } from '@tanstack/vue-table'
+import { FlexRender, getCoreRowModel, getFilteredRowModel, getSortedRowModel, getExpandedRowModel, useVueTable } from '@tanstack/vue-table'
+import { reactiveOmit } from '@vueuse/core'
 import { upperFirst } from 'scule'
 import { useLocale } from '../composables/useLocale'
 
@@ -110,12 +140,13 @@ const columnPinningState = defineModel<ColumnPinningState>('columnPinning', { de
 const rowSelectionState = defineModel<RowSelectionState>('rowSelection', { default: {} })
 const sortingState = defineModel<SortingState>('sorting', { default: [] })
 const expandedState = defineModel<ExpandedState>('expanded', { default: {} })
+const tableProps = reactiveOmit(props, 'as', 'data', 'columns', 'caption', 'sticky', 'loading', 'loadingColor', 'loadingAnimation', 'class', 'ui')
 
-const tableApi = useVueTable(defu(props.tanstackOptions, {
+const tableApi = useVueTable(defu({
   data,
   columns: columns.value,
   getCoreRowModel: getCoreRowModel(),
-  onGlobalFilterChange: (updaterOrValue: any) => valueUpdater(updaterOrValue, globalFilterState),
+  onGlobalFilterChange: (updaterOrValue: Updater<any>) => valueUpdater(updaterOrValue, globalFilterState),
   getFilteredRowModel: getFilteredRowModel(),
   onColumnFiltersChange: (updaterOrValue: Updater<ColumnFiltersState>) => valueUpdater(updaterOrValue, columnFiltersState),
   onColumnVisibilityChange: (updaterOrValue: Updater<VisibilityState>) => valueUpdater(updaterOrValue, columnVisibilityState),
@@ -125,7 +156,6 @@ const tableApi = useVueTable(defu(props.tanstackOptions, {
   onSortingChange: (updaterOrValue: Updater<SortingState>) => valueUpdater(updaterOrValue, sortingState),
   getExpandedRowModel: getExpandedRowModel(),
   onExpandedChange: (updaterOrValue: Updater<ExpandedState>) => valueUpdater(updaterOrValue, expandedState),
-  getPaginationRowModel: getPaginationRowModel(),
   state: {
     get globalFilter() {
       return globalFilterState.value
@@ -149,7 +179,7 @@ const tableApi = useVueTable(defu(props.tanstackOptions, {
       return sortingState.value
     }
   }
-}))
+}, tableProps))
 
 function valueUpdater<T extends Updater<any>>(updaterOrValue: T, ref: Ref) {
   ref.value = typeof updaterOrValue === 'function' ? updaterOrValue(ref.value) : updaterOrValue

From aaeef77f06cbf650b5afb0a8a111ab8b50d5a318 Mon Sep 17 00:00:00 2001
From: Sandros94 <sandro.circi@digitoolmedia.com>
Date: Sat, 1 Feb 2025 21:53:18 +0100
Subject: [PATCH 06/14] fix(Table): select and visibility

---
 src/runtime/components/Table.vue | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/runtime/components/Table.vue b/src/runtime/components/Table.vue
index 4ecd00553b..9dd18d5d85 100644
--- a/src/runtime/components/Table.vue
+++ b/src/runtime/components/Table.vue
@@ -17,7 +17,7 @@ import type {
   CellContext,
   HeaderContext,
   CoreOptions,
-  VisibilityOptions,
+  // VisibilityOptions,
   ColumnOrderOptions,
   ColumnPinningOptions,
   RowPinningOptions,
@@ -28,8 +28,7 @@ import type {
   // GroupingOptions,
   ExpandedOptions,
   ColumnSizingOptions,
-  PaginationOptions,
-  RowSelectionOptions
+  PaginationOptions
 } from '@tanstack/vue-table'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/table'
@@ -55,7 +54,8 @@ export type TableData = RowData
 
 export type TableColumn<T extends TableData, D = unknown> = ColumnDef<T, D>
 
-interface FeatureOptions<TData extends RowData> extends VisibilityOptions,
+interface FeatureOptions<TData extends RowData> extends
+  // VisibilityOptions,
   ColumnOrderOptions,
   ColumnPinningOptions,
   RowPinningOptions<TData>,
@@ -66,8 +66,7 @@ interface FeatureOptions<TData extends RowData> extends VisibilityOptions,
   // GroupingOptions,
   ExpandedOptions<TData>,
   ColumnSizingOptions,
-  PaginationOptions,
-  RowSelectionOptions<TData> {
+  PaginationOptions {
 }
 
 export interface TableOptions<T extends TableData> extends Omit<CoreOptions<T>, 'state' | 'onStateChange' | 'renderFallbackValue'>, FeatureOptions<T> {
@@ -142,7 +141,7 @@ const sortingState = defineModel<SortingState>('sorting', { default: [] })
 const expandedState = defineModel<ExpandedState>('expanded', { default: {} })
 const tableProps = reactiveOmit(props, 'as', 'data', 'columns', 'caption', 'sticky', 'loading', 'loadingColor', 'loadingAnimation', 'class', 'ui')
 
-const tableApi = useVueTable(defu({
+const tableApi = useVueTable(defu(tableProps, {
   data,
   columns: columns.value,
   getCoreRowModel: getCoreRowModel(),
@@ -179,7 +178,7 @@ const tableApi = useVueTable(defu({
       return sortingState.value
     }
   }
-}, tableProps))
+}))
 
 function valueUpdater<T extends Updater<any>>(updaterOrValue: T, ref: Ref) {
   ref.value = typeof updaterOrValue === 'function' ? updaterOrValue(ref.value) : updaterOrValue

From 8c9cb695c2771355adbc869925ec810c0201e4a0 Mon Sep 17 00:00:00 2001
From: Sandros94 <sandro.circi@digitoolmedia.com>
Date: Sat, 1 Feb 2025 21:54:08 +0100
Subject: [PATCH 07/14] docs(Table): update pagination example

---
 .../examples/table/TablePaginationExample.vue        | 12 ++++++++++--
 docs/content/3.components/table.md                   |  2 +-
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/docs/app/components/content/examples/table/TablePaginationExample.vue b/docs/app/components/content/examples/table/TablePaginationExample.vue
index a4125a2a32..ef805e1c59 100644
--- a/docs/app/components/content/examples/table/TablePaginationExample.vue
+++ b/docs/app/components/content/examples/table/TablePaginationExample.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
+import { getPaginationRowModel } from '@tanstack/vue-table'
 import type { TableColumn } from '@nuxt/ui'
 
+const table = useTemplateRef('table')
+
 type Payment = {
   id: string
   date: string
@@ -139,7 +142,6 @@ const columns: TableColumn<Payment>[] = [{
     return h('div', { class: 'text-right font-medium' }, formatted)
   }
 }]
-const table = useTemplateRef('table')
 </script>
 
 <template>
@@ -148,7 +150,13 @@ const table = useTemplateRef('table')
       ref="table"
       :data="data"
       :columns="columns"
-      :tanstack-options="{ initialState: { pagination: { pageSize: 7 } } }"
+      :get-pagination-row-model="getPaginationRowModel()"
+      :initial-state="{
+        pagination: {
+          pageIndex: 0,
+          pageSize: 7
+        }
+      }"
       class="flex-1"
     />
     <UPagination
diff --git a/docs/content/3.components/table.md b/docs/content/3.components/table.md
index d692f40f47..e242a60129 100644
--- a/docs/content/3.components/table.md
+++ b/docs/content/3.components/table.md
@@ -405,7 +405,7 @@ class: '!p-0'
 ::
 
 ### With pagination
-We already pass the `getPaginationRowModel` function to the table so you don't need to pass it again. There are different pagination approaches as explained in [Pagination Guide](https://tanstack.com/table/v8/docs/guide/pagination#pagination-guide). You can implement any of them by passing options to `tanstackOptions` prop. In the example below, we use the `initialState` prop to set the default page size and use `UPagination` component to control the pagination state.
+There are different pagination approaches as explained in [Pagination Guide](https://tanstack.com/table/v8/docs/guide/pagination#pagination-guide). In the example below, we use the `initialState` prop to set the default page index and size and use `UPagination` component to control the pagination state. To support client side navigation you need to manually pass `getPaginationRowModel` function.
 ::component-example
 ---
 prettier: true

From 4784d907d260a8d46a5746e6ec9d638c3ae18525 Mon Sep 17 00:00:00 2001
From: Sandros94 <sandro.circi@digitoolmedia.com>
Date: Sat, 1 Feb 2025 22:04:20 +0100
Subject: [PATCH 08/14] up

---
 src/runtime/components/Table.vue | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/runtime/components/Table.vue b/src/runtime/components/Table.vue
index 9dd18d5d85..538cd96922 100644
--- a/src/runtime/components/Table.vue
+++ b/src/runtime/components/Table.vue
@@ -17,18 +17,19 @@ import type {
   CellContext,
   HeaderContext,
   CoreOptions,
-  // VisibilityOptions,
+  VisibilityOptions,
   ColumnOrderOptions,
   ColumnPinningOptions,
   RowPinningOptions,
   FacetedOptions,
-  // ColumnFiltersOptions,
+  ColumnFiltersOptions,
   GlobalFilterOptions,
-  // SortingOptions,
-  // GroupingOptions,
+  SortingOptions,
+  GroupingOptions,
   ExpandedOptions,
   ColumnSizingOptions,
-  PaginationOptions
+  PaginationOptions,
+  RowSelectionOptions
 } from '@tanstack/vue-table'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/table'
@@ -55,18 +56,19 @@ export type TableData = RowData
 export type TableColumn<T extends TableData, D = unknown> = ColumnDef<T, D>
 
 interface FeatureOptions<TData extends RowData> extends
-  // VisibilityOptions,
+  /* @vue-ignore */ VisibilityOptions,
   ColumnOrderOptions,
   ColumnPinningOptions,
   RowPinningOptions<TData>,
   FacetedOptions<TData>,
-  // ColumnFiltersOptions<TData>,
+  /* @vue-ignore */ ColumnFiltersOptions<TData>,
   GlobalFilterOptions<TData>,
-  // SortingOptions<TData>,
-  // GroupingOptions,
+  /* @vue-ignore */ SortingOptions<TData>,
+  /* @vue-ignore */ GroupingOptions,
   ExpandedOptions<TData>,
   ColumnSizingOptions,
-  PaginationOptions {
+  PaginationOptions,
+  /* @vue-ignore */ RowSelectionOptions<TData> {
 }
 
 export interface TableOptions<T extends TableData> extends Omit<CoreOptions<T>, 'state' | 'onStateChange' | 'renderFallbackValue'>, FeatureOptions<T> {

From e679c46d2d6ffe4fad975cfdf165e4dc82ab7db8 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Mon, 3 Feb 2025 14:24:30 +0100
Subject: [PATCH 09/14] up

---
 .../table/TableColumnFiltersExample.vue       |  4 +--
 .../table/TableColumnVisibilityExample.vue    |  4 +--
 .../content/examples/table/TableExample.vue   | 12 ++++-----
 .../examples/table/TablePaginationExample.vue |  8 +++---
 .../table/TableRowSelectionExample.vue        |  4 +--
 docs/content/3.components/table.md            |  6 +----
 playground/app/pages/components/table.vue     | 26 ++++++++++---------
 src/runtime/components/Table.vue              | 25 +++++++++---------
 8 files changed, 43 insertions(+), 46 deletions(-)

diff --git a/docs/app/components/content/examples/table/TableColumnFiltersExample.vue b/docs/app/components/content/examples/table/TableColumnFiltersExample.vue
index 0176b4142d..29235efb75 100644
--- a/docs/app/components/content/examples/table/TableColumnFiltersExample.vue
+++ b/docs/app/components/content/examples/table/TableColumnFiltersExample.vue
@@ -102,10 +102,10 @@ const columnFilters = ref([{
   <div class="flex flex-col flex-1 w-full">
     <div class="flex px-4 py-3.5 border-b border-[var(--ui-border-accented)]">
       <UInput
-        :model-value="(table?.tableApi?.getColumn('email')?.getFilterValue() as string)"
+        :model-value="(table?.getColumn('email')?.getFilterValue() as string)"
         class="max-w-sm"
         placeholder="Filter emails..."
-        @update:model-value="table?.tableApi?.getColumn('email')?.setFilterValue($event)"
+        @update:model-value="table?.getColumn('email')?.setFilterValue($event)"
       />
     </div>
 
diff --git a/docs/app/components/content/examples/table/TableColumnVisibilityExample.vue b/docs/app/components/content/examples/table/TableColumnVisibilityExample.vue
index e5854eb894..c36fb16b1a 100644
--- a/docs/app/components/content/examples/table/TableColumnVisibilityExample.vue
+++ b/docs/app/components/content/examples/table/TableColumnVisibilityExample.vue
@@ -102,12 +102,12 @@ const columnVisibility = ref({
   <div class="flex flex-col flex-1 w-full">
     <div class="flex justify-end px-4 py-3.5 border-b  border-[var(--ui-border-accented)]">
       <UDropdownMenu
-        :items="table?.tableApi?.getAllColumns().filter(column => column.getCanHide()).map(column => ({
+        :items="table?.getAllColumns().filter(column => column.getCanHide()).map(column => ({
           label: upperFirst(column.id),
           type: 'checkbox' as const,
           checked: column.getIsVisible(),
           onUpdateChecked(checked: boolean) {
-            table?.tableApi?.getColumn(column.id)?.toggleVisibility(!!checked)
+            table?.getColumn(column.id)?.toggleVisibility(!!checked)
           },
           onSelect(e?: Event) {
             e?.preventDefault()
diff --git a/docs/app/components/content/examples/table/TableExample.vue b/docs/app/components/content/examples/table/TableExample.vue
index 98d107de7c..90d6861cb7 100644
--- a/docs/app/components/content/examples/table/TableExample.vue
+++ b/docs/app/components/content/examples/table/TableExample.vue
@@ -266,21 +266,21 @@ function randomize() {
   <div class="flex-1 divide-y divide-[var(--ui-border-accented)] w-full">
     <div class="flex items-center gap-2 px-4 py-3.5 overflow-x-auto">
       <UInput
-        :model-value="(table?.tableApi?.getColumn('email')?.getFilterValue() as string)"
+        :model-value="(table?.getColumn('email')?.getFilterValue() as string)"
         class="max-w-sm min-w-[12ch]"
         placeholder="Filter emails..."
-        @update:model-value="table?.tableApi?.getColumn('email')?.setFilterValue($event)"
+        @update:model-value="table?.getColumn('email')?.setFilterValue($event)"
       />
 
       <UButton color="neutral" label="Randomize" @click="randomize" />
 
       <UDropdownMenu
-        :items="table?.tableApi?.getAllColumns().filter(column => column.getCanHide()).map(column => ({
+        :items="table?.getAllColumns().filter(column => column.getCanHide()).map(column => ({
           label: upperFirst(column.id),
           type: 'checkbox' as const,
           checked: column.getIsVisible(),
           onUpdateChecked(checked: boolean) {
-            table?.tableApi?.getColumn(column.id)?.toggleVisibility(!!checked)
+            table?.getColumn(column.id)?.toggleVisibility(!!checked)
           },
           onSelect(e?: Event) {
             e?.preventDefault()
@@ -311,8 +311,8 @@ function randomize() {
     </UTable>
 
     <div class="px-4 py-3.5 text-sm text-[var(--ui-text-muted)]">
-      {{ table?.tableApi?.getFilteredSelectedRowModel().rows.length || 0 }} of
-      {{ table?.tableApi?.getFilteredRowModel().rows.length || 0 }} row(s) selected.
+      {{ table?.getFilteredSelectedRowModel().rows.length || 0 }} of
+      {{ table?.getFilteredRowModel().rows.length || 0 }} row(s) selected.
     </div>
   </div>
 </template>
diff --git a/docs/app/components/content/examples/table/TablePaginationExample.vue b/docs/app/components/content/examples/table/TablePaginationExample.vue
index ef805e1c59..50e8c8da63 100644
--- a/docs/app/components/content/examples/table/TablePaginationExample.vue
+++ b/docs/app/components/content/examples/table/TablePaginationExample.vue
@@ -160,11 +160,11 @@ const columns: TableColumn<Payment>[] = [{
       class="flex-1"
     />
     <UPagination
-      :default-page="(table?.tableApi.getState().pagination.pageIndex || 0) + 1"
-      :items-per-page="table?.tableApi.getState().pagination.pageSize"
-      :total="table?.tableApi.getFilteredRowModel().rows.length"
+      :default-page="(table?.getState().pagination.pageIndex || 0) + 1"
+      :items-per-page="table?.getState().pagination.pageSize"
+      :total="table?.getFilteredRowModel().rows.length"
       class="w-fit mx-auto"
-      @update:page="(p) => table?.tableApi.setPageIndex(p - 1)"
+      @update:page="(p) => table?.setPageIndex(p - 1)"
     />
   </div>
 </template>
diff --git a/docs/app/components/content/examples/table/TableRowSelectionExample.vue b/docs/app/components/content/examples/table/TableRowSelectionExample.vue
index e242b02885..aa0e0ab7e5 100644
--- a/docs/app/components/content/examples/table/TableRowSelectionExample.vue
+++ b/docs/app/components/content/examples/table/TableRowSelectionExample.vue
@@ -114,8 +114,8 @@ const rowSelection = ref({ 1: true })
     />
 
     <div class="px-4 py-3.5 border-t border-[var(--ui-border-accented)] text-sm text-[var(--ui-text-muted)]">
-      {{ table?.tableApi?.getFilteredSelectedRowModel().rows.length || 0 }} of
-      {{ table?.tableApi?.getFilteredRowModel().rows.length || 0 }} row(s) selected.
+      {{ table?.getFilteredSelectedRowModel().rows.length || 0 }} of
+      {{ table?.getFilteredRowModel().rows.length || 0 }} row(s) selected.
     </div>
   </div>
 </template>
diff --git a/docs/content/3.components/table.md b/docs/content/3.components/table.md
index e242a60129..525ab237c1 100644
--- a/docs/content/3.components/table.md
+++ b/docs/content/3.components/table.md
@@ -456,11 +456,7 @@ const table = useTemplateRef('table')
 </template>
 ```
 
-This will give you access to the following:
-
-| Name | Type |
-| ---- | ---- |
-| `tableApi`{lang="ts-type"} | [`Ref<Table \| null>`{lang="ts-type"}](https://tanstack.com/table/latest/docs/api/core/table#table-api) |
+This will give you access to the [TanStack Table API](https://tanstack.com/table/latest/docs/api/core/table#table-api).
 
 ## Theme
 
diff --git a/playground/app/pages/components/table.vue b/playground/app/pages/components/table.vue
index 8cdc3f3225..ede2407f36 100644
--- a/playground/app/pages/components/table.vue
+++ b/playground/app/pages/components/table.vue
@@ -2,6 +2,7 @@
 import { h, resolveComponent } from 'vue'
 import { upperFirst } from 'scule'
 import type { TableColumn } from '@nuxt/ui'
+import { getPaginationRowModel } from '@tanstack/vue-table'
 
 const UButton = resolveComponent('UButton')
 const UCheckbox = resolveComponent('UCheckbox')
@@ -284,21 +285,21 @@ onMounted(() => {
   <div class="h-full flex flex-col flex-1 gap-4 w-full">
     <div class="flex gap-2 items-center">
       <UInput
-        :model-value="(table?.tableApi?.getColumn('email')?.getFilterValue() as string)"
+        :model-value="(table?.getColumn('email')?.getFilterValue() as string)"
         class="max-w-sm"
         placeholder="Filter emails..."
-        @update:model-value="table?.tableApi?.getColumn('email')?.setFilterValue($event)"
+        @update:model-value="table?.getColumn('email')?.setFilterValue($event)"
       />
 
       <UButton color="neutral" label="Randomize" @click="randomize" />
 
       <UDropdownMenu
-        :items="table?.tableApi?.getAllColumns().filter(column => column.getCanHide()).map(column => ({
+        :items="table?.getAllColumns().filter(column => column.getCanHide()).map(column => ({
           label: upperFirst(column.id),
           type: 'checkbox' as const,
           checked: column.getIsVisible(),
           onUpdateChecked(checked: boolean) {
-            table?.tableApi?.getColumn(column.id)?.toggleVisibility(!!checked)
+            table?.getColumn(column.id)?.toggleVisibility(!!checked)
           },
           onSelect(e?: Event) {
             e?.preventDefault()
@@ -322,6 +323,7 @@ onMounted(() => {
       :columns="columns"
       :column-pinning="columnPinning"
       :loading="loading"
+      :get-pagination-row-model="getPaginationRowModel()"
       sticky
       :ui="{
         tr: 'divide-x divide-[var(--ui-border)]'
@@ -335,28 +337,28 @@ onMounted(() => {
 
     <div class="flex items-center justify-between gap-3">
       <div class="text-sm text-[var(--ui-text-muted)]">
-        {{ table?.tableApi?.getFilteredSelectedRowModel().rows.length || 0 }} of
-        {{ table?.tableApi?.getFilteredRowModel().rows.length || 0 }} row(s) selected.
+        {{ table?.getFilteredSelectedRowModel().rows.length || 0 }} of
+        {{ table?.getFilteredRowModel().rows.length || 0 }} row(s) selected.
       </div>
 
-      <!-- <div class="flex items-center gap-1.5">
+      <div class="flex items-center gap-1.5">
         <UButton
           color="neutral"
           variant="outline"
-          :disabled="!table?.tableApi?.getCanPreviousPage()"
-          @click="table?.tableApi?.previousPage()"
+          :disabled="!table?.getCanPreviousPage()"
+          @click="table?.previousPage()"
         >
           Prev
         </UButton>
         <UButton
           color="neutral"
           variant="outline"
-          :disabled="!table?.tableApi?.getCanNextPage()"
-          @click="table?.tableApi?.nextPage()"
+          :disabled="!table?.getCanNextPage()"
+          @click="table?.nextPage()"
         >
           Next
         </UButton>
-      </div> -->
+      </div>
     </div>
   </div>
 </template>
diff --git a/src/runtime/components/Table.vue b/src/runtime/components/Table.vue
index 538cd96922..7a86de4b79 100644
--- a/src/runtime/components/Table.vue
+++ b/src/runtime/components/Table.vue
@@ -55,29 +55,29 @@ export type TableData = RowData
 
 export type TableColumn<T extends TableData, D = unknown> = ColumnDef<T, D>
 
-interface FeatureOptions<TData extends RowData> extends
+interface FeatureOptions<T extends RowData> extends
   /* @vue-ignore */ VisibilityOptions,
   ColumnOrderOptions,
   ColumnPinningOptions,
-  RowPinningOptions<TData>,
-  FacetedOptions<TData>,
-  /* @vue-ignore */ ColumnFiltersOptions<TData>,
-  GlobalFilterOptions<TData>,
-  /* @vue-ignore */ SortingOptions<TData>,
+  RowPinningOptions<T>,
+  FacetedOptions<T>,
+  /* @vue-ignore */ ColumnFiltersOptions<T>,
+  GlobalFilterOptions<T>,
+  /* @vue-ignore */ SortingOptions<T>,
   /* @vue-ignore */ GroupingOptions,
-  ExpandedOptions<TData>,
+  ExpandedOptions<T>,
   ColumnSizingOptions,
   PaginationOptions,
-  /* @vue-ignore */ RowSelectionOptions<TData> {
+  /* @vue-ignore */ RowSelectionOptions<T> {
 }
 
-export interface TableOptions<T extends TableData> extends Omit<CoreOptions<T>, 'state' | 'onStateChange' | 'renderFallbackValue'>, FeatureOptions<T> {
+export interface TableOptions<T extends TableData> extends Omit<CoreOptions<T>, 'data' | 'columns' | 'getCoreRowModel' | 'state' | 'onStateChange' | 'renderFallbackValue'>, FeatureOptions<T> {
   state?: CoreOptions<T>['state']
   onStateChange?: CoreOptions<T>['onStateChange']
   renderFallbackValue?: CoreOptions<T>['renderFallbackValue']
 }
 
-export interface TableProps<T extends TableData> extends Omit<TableOptions<T>, 'data' | 'columns' | 'getCoreRowModel'> {
+export interface TableProps<T extends TableData> extends TableOptions<T> {
   /**
    * The element or component this component should render as.
    * @defaultValue 'div'
@@ -141,6 +141,7 @@ const columnPinningState = defineModel<ColumnPinningState>('columnPinning', { de
 const rowSelectionState = defineModel<RowSelectionState>('rowSelection', { default: {} })
 const sortingState = defineModel<SortingState>('sorting', { default: [] })
 const expandedState = defineModel<ExpandedState>('expanded', { default: {} })
+
 const tableProps = reactiveOmit(props, 'as', 'data', 'columns', 'caption', 'sticky', 'loading', 'loadingColor', 'loadingAnimation', 'class', 'ui')
 
 const tableApi = useVueTable(defu(tableProps, {
@@ -186,9 +187,7 @@ function valueUpdater<T extends Updater<any>>(updaterOrValue: T, ref: Ref) {
   ref.value = typeof updaterOrValue === 'function' ? updaterOrValue(ref.value) : updaterOrValue
 }
 
-defineExpose({
-  tableApi
-})
+defineExpose(tableApi)
 </script>
 
 <template>

From 15970870f86e5cb9b01130d6494dc588ccec9bb1 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Wed, 5 Feb 2025 10:19:46 +0100
Subject: [PATCH 10/14] up

---
 .../table/TableColumnFiltersExample.vue       |  4 ++--
 .../table/TableColumnVisibilityExample.vue    |  4 ++--
 .../content/examples/table/TableExample.vue   | 12 +++++------
 .../examples/table/TablePaginationExample.vue |  8 ++++----
 .../table/TableRowSelectionExample.vue        |  4 ++--
 playground/app/pages/components/table.vue     | 20 +++++++++----------
 src/runtime/components/Table.vue              |  4 +++-
 7 files changed, 29 insertions(+), 27 deletions(-)

diff --git a/docs/app/components/content/examples/table/TableColumnFiltersExample.vue b/docs/app/components/content/examples/table/TableColumnFiltersExample.vue
index 29235efb75..0176b4142d 100644
--- a/docs/app/components/content/examples/table/TableColumnFiltersExample.vue
+++ b/docs/app/components/content/examples/table/TableColumnFiltersExample.vue
@@ -102,10 +102,10 @@ const columnFilters = ref([{
   <div class="flex flex-col flex-1 w-full">
     <div class="flex px-4 py-3.5 border-b border-[var(--ui-border-accented)]">
       <UInput
-        :model-value="(table?.getColumn('email')?.getFilterValue() as string)"
+        :model-value="(table?.tableApi?.getColumn('email')?.getFilterValue() as string)"
         class="max-w-sm"
         placeholder="Filter emails..."
-        @update:model-value="table?.getColumn('email')?.setFilterValue($event)"
+        @update:model-value="table?.tableApi?.getColumn('email')?.setFilterValue($event)"
       />
     </div>
 
diff --git a/docs/app/components/content/examples/table/TableColumnVisibilityExample.vue b/docs/app/components/content/examples/table/TableColumnVisibilityExample.vue
index c36fb16b1a..e5854eb894 100644
--- a/docs/app/components/content/examples/table/TableColumnVisibilityExample.vue
+++ b/docs/app/components/content/examples/table/TableColumnVisibilityExample.vue
@@ -102,12 +102,12 @@ const columnVisibility = ref({
   <div class="flex flex-col flex-1 w-full">
     <div class="flex justify-end px-4 py-3.5 border-b  border-[var(--ui-border-accented)]">
       <UDropdownMenu
-        :items="table?.getAllColumns().filter(column => column.getCanHide()).map(column => ({
+        :items="table?.tableApi?.getAllColumns().filter(column => column.getCanHide()).map(column => ({
           label: upperFirst(column.id),
           type: 'checkbox' as const,
           checked: column.getIsVisible(),
           onUpdateChecked(checked: boolean) {
-            table?.getColumn(column.id)?.toggleVisibility(!!checked)
+            table?.tableApi?.getColumn(column.id)?.toggleVisibility(!!checked)
           },
           onSelect(e?: Event) {
             e?.preventDefault()
diff --git a/docs/app/components/content/examples/table/TableExample.vue b/docs/app/components/content/examples/table/TableExample.vue
index 90d6861cb7..98d107de7c 100644
--- a/docs/app/components/content/examples/table/TableExample.vue
+++ b/docs/app/components/content/examples/table/TableExample.vue
@@ -266,21 +266,21 @@ function randomize() {
   <div class="flex-1 divide-y divide-[var(--ui-border-accented)] w-full">
     <div class="flex items-center gap-2 px-4 py-3.5 overflow-x-auto">
       <UInput
-        :model-value="(table?.getColumn('email')?.getFilterValue() as string)"
+        :model-value="(table?.tableApi?.getColumn('email')?.getFilterValue() as string)"
         class="max-w-sm min-w-[12ch]"
         placeholder="Filter emails..."
-        @update:model-value="table?.getColumn('email')?.setFilterValue($event)"
+        @update:model-value="table?.tableApi?.getColumn('email')?.setFilterValue($event)"
       />
 
       <UButton color="neutral" label="Randomize" @click="randomize" />
 
       <UDropdownMenu
-        :items="table?.getAllColumns().filter(column => column.getCanHide()).map(column => ({
+        :items="table?.tableApi?.getAllColumns().filter(column => column.getCanHide()).map(column => ({
           label: upperFirst(column.id),
           type: 'checkbox' as const,
           checked: column.getIsVisible(),
           onUpdateChecked(checked: boolean) {
-            table?.getColumn(column.id)?.toggleVisibility(!!checked)
+            table?.tableApi?.getColumn(column.id)?.toggleVisibility(!!checked)
           },
           onSelect(e?: Event) {
             e?.preventDefault()
@@ -311,8 +311,8 @@ function randomize() {
     </UTable>
 
     <div class="px-4 py-3.5 text-sm text-[var(--ui-text-muted)]">
-      {{ table?.getFilteredSelectedRowModel().rows.length || 0 }} of
-      {{ table?.getFilteredRowModel().rows.length || 0 }} row(s) selected.
+      {{ table?.tableApi?.getFilteredSelectedRowModel().rows.length || 0 }} of
+      {{ table?.tableApi?.getFilteredRowModel().rows.length || 0 }} row(s) selected.
     </div>
   </div>
 </template>
diff --git a/docs/app/components/content/examples/table/TablePaginationExample.vue b/docs/app/components/content/examples/table/TablePaginationExample.vue
index 50e8c8da63..7b8e01889c 100644
--- a/docs/app/components/content/examples/table/TablePaginationExample.vue
+++ b/docs/app/components/content/examples/table/TablePaginationExample.vue
@@ -160,11 +160,11 @@ const columns: TableColumn<Payment>[] = [{
       class="flex-1"
     />
     <UPagination
-      :default-page="(table?.getState().pagination.pageIndex || 0) + 1"
-      :items-per-page="table?.getState().pagination.pageSize"
-      :total="table?.getFilteredRowModel().rows.length"
+      :default-page="(table?.tableApi?.getState().pagination.pageIndex || 0) + 1"
+      :items-per-page="table?.tableApi?.getState().pagination.pageSize"
+      :total="table?.tableApi?.getFilteredRowModel().rows.length"
       class="w-fit mx-auto"
-      @update:page="(p) => table?.setPageIndex(p - 1)"
+      @update:page="(p) => table?.tableApi?.setPageIndex(p - 1)"
     />
   </div>
 </template>
diff --git a/docs/app/components/content/examples/table/TableRowSelectionExample.vue b/docs/app/components/content/examples/table/TableRowSelectionExample.vue
index aa0e0ab7e5..e242b02885 100644
--- a/docs/app/components/content/examples/table/TableRowSelectionExample.vue
+++ b/docs/app/components/content/examples/table/TableRowSelectionExample.vue
@@ -114,8 +114,8 @@ const rowSelection = ref({ 1: true })
     />
 
     <div class="px-4 py-3.5 border-t border-[var(--ui-border-accented)] text-sm text-[var(--ui-text-muted)]">
-      {{ table?.getFilteredSelectedRowModel().rows.length || 0 }} of
-      {{ table?.getFilteredRowModel().rows.length || 0 }} row(s) selected.
+      {{ table?.tableApi?.getFilteredSelectedRowModel().rows.length || 0 }} of
+      {{ table?.tableApi?.getFilteredRowModel().rows.length || 0 }} row(s) selected.
     </div>
   </div>
 </template>
diff --git a/playground/app/pages/components/table.vue b/playground/app/pages/components/table.vue
index ede2407f36..461173a4f7 100644
--- a/playground/app/pages/components/table.vue
+++ b/playground/app/pages/components/table.vue
@@ -285,21 +285,21 @@ onMounted(() => {
   <div class="h-full flex flex-col flex-1 gap-4 w-full">
     <div class="flex gap-2 items-center">
       <UInput
-        :model-value="(table?.getColumn('email')?.getFilterValue() as string)"
+        :model-value="(table?.tableApi?.getColumn('email')?.getFilterValue() as string)"
         class="max-w-sm"
         placeholder="Filter emails..."
-        @update:model-value="table?.getColumn('email')?.setFilterValue($event)"
+        @update:model-value="table?.tableApi?.getColumn('email')?.setFilterValue($event)"
       />
 
       <UButton color="neutral" label="Randomize" @click="randomize" />
 
       <UDropdownMenu
-        :items="table?.getAllColumns().filter(column => column.getCanHide()).map(column => ({
+        :items="table?.tableApi?.getAllColumns().filter(column => column.getCanHide()).map(column => ({
           label: upperFirst(column.id),
           type: 'checkbox' as const,
           checked: column.getIsVisible(),
           onUpdateChecked(checked: boolean) {
-            table?.getColumn(column.id)?.toggleVisibility(!!checked)
+            table?.tableApi?.getColumn(column.id)?.toggleVisibility(!!checked)
           },
           onSelect(e?: Event) {
             e?.preventDefault()
@@ -337,24 +337,24 @@ onMounted(() => {
 
     <div class="flex items-center justify-between gap-3">
       <div class="text-sm text-[var(--ui-text-muted)]">
-        {{ table?.getFilteredSelectedRowModel().rows.length || 0 }} of
-        {{ table?.getFilteredRowModel().rows.length || 0 }} row(s) selected.
+        {{ table?.tableApi?.getFilteredSelectedRowModel().rows.length || 0 }} of
+        {{ table?.tableApi?.getFilteredRowModel().rows.length || 0 }} row(s) selected.
       </div>
 
       <div class="flex items-center gap-1.5">
         <UButton
           color="neutral"
           variant="outline"
-          :disabled="!table?.getCanPreviousPage()"
-          @click="table?.previousPage()"
+          :disabled="!table?.tableApi?.getCanPreviousPage()"
+          @click="table?.tableApi?.previousPage()"
         >
           Prev
         </UButton>
         <UButton
           color="neutral"
           variant="outline"
-          :disabled="!table?.getCanNextPage()"
-          @click="table?.nextPage()"
+          :disabled="!table?.tableApi?.getCanNextPage()"
+          @click="table?.tableApi?.nextPage()"
         >
           Next
         </UButton>
diff --git a/src/runtime/components/Table.vue b/src/runtime/components/Table.vue
index 7a86de4b79..7af21ef2e5 100644
--- a/src/runtime/components/Table.vue
+++ b/src/runtime/components/Table.vue
@@ -187,7 +187,9 @@ function valueUpdater<T extends Updater<any>>(updaterOrValue: T, ref: Ref) {
   ref.value = typeof updaterOrValue === 'function' ? updaterOrValue(ref.value) : updaterOrValue
 }
 
-defineExpose(tableApi)
+defineExpose({
+  tableApi
+})
 </script>
 
 <template>

From e3911feba1ba03bb5a1ece6d3082aababd42a8d1 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Wed, 5 Feb 2025 10:23:41 +0100
Subject: [PATCH 11/14] up

---
 docs/content/3.components/table.md | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/docs/content/3.components/table.md b/docs/content/3.components/table.md
index 525ab237c1..e242a60129 100644
--- a/docs/content/3.components/table.md
+++ b/docs/content/3.components/table.md
@@ -456,7 +456,11 @@ const table = useTemplateRef('table')
 </template>
 ```
 
-This will give you access to the [TanStack Table API](https://tanstack.com/table/latest/docs/api/core/table#table-api).
+This will give you access to the following:
+
+| Name | Type |
+| ---- | ---- |
+| `tableApi`{lang="ts-type"} | [`Ref<Table \| null>`{lang="ts-type"}](https://tanstack.com/table/latest/docs/api/core/table#table-api) |
 
 ## Theme
 

From c191588e58df3928f360a8844c4de12eeefa0218 Mon Sep 17 00:00:00 2001
From: Sandros94 <sandro.circi@digitoolmedia.com>
Date: Wed, 5 Feb 2025 17:46:24 +0100
Subject: [PATCH 12/14] feat(Talbe): `CoreOptions` as top-level props, plugins
 as dedicated ones

---
 .../examples/table/TablePaginationExample.vue |   4 +-
 playground/app/pages/components/table.vue     |   2 -
 src/runtime/components/Table.vue              | 126 +++++++++++++-----
 3 files changed, 97 insertions(+), 35 deletions(-)

diff --git a/docs/app/components/content/examples/table/TablePaginationExample.vue b/docs/app/components/content/examples/table/TablePaginationExample.vue
index 7b8e01889c..8be4a761f3 100644
--- a/docs/app/components/content/examples/table/TablePaginationExample.vue
+++ b/docs/app/components/content/examples/table/TablePaginationExample.vue
@@ -150,7 +150,9 @@ const columns: TableColumn<Payment>[] = [{
       ref="table"
       :data="data"
       :columns="columns"
-      :get-pagination-row-model="getPaginationRowModel()"
+      :pagination-options="{
+        getPaginationRowModel: getPaginationRowModel()
+      }"
       :initial-state="{
         pagination: {
           pageIndex: 0,
diff --git a/playground/app/pages/components/table.vue b/playground/app/pages/components/table.vue
index 461173a4f7..36746595ca 100644
--- a/playground/app/pages/components/table.vue
+++ b/playground/app/pages/components/table.vue
@@ -2,7 +2,6 @@
 import { h, resolveComponent } from 'vue'
 import { upperFirst } from 'scule'
 import type { TableColumn } from '@nuxt/ui'
-import { getPaginationRowModel } from '@tanstack/vue-table'
 
 const UButton = resolveComponent('UButton')
 const UCheckbox = resolveComponent('UCheckbox')
@@ -323,7 +322,6 @@ onMounted(() => {
       :columns="columns"
       :column-pinning="columnPinning"
       :loading="loading"
-      :get-pagination-row-model="getPaginationRowModel()"
       sticky
       :ui="{
         tr: 'divide-x divide-[var(--ui-border)]'
diff --git a/src/runtime/components/Table.vue b/src/runtime/components/Table.vue
index 7af21ef2e5..ee3646a858 100644
--- a/src/runtime/components/Table.vue
+++ b/src/runtime/components/Table.vue
@@ -8,9 +8,14 @@ import type {
   Row,
   ColumnDef,
   ColumnFiltersState,
+  ColumnOrderState,
   ColumnPinningState,
+  ColumnSizingState,
+  ColumnSizingInfoState,
   RowSelectionState,
+  RowPinningState,
   SortingState,
+  GroupingState,
   ExpandedState,
   VisibilityState,
   Updater,
@@ -18,14 +23,13 @@ import type {
   HeaderContext,
   CoreOptions,
   VisibilityOptions,
-  ColumnOrderOptions,
   ColumnPinningOptions,
   RowPinningOptions,
   FacetedOptions,
   ColumnFiltersOptions,
   GlobalFilterOptions,
-  SortingOptions,
   GroupingOptions,
+  SortingOptions,
   ExpandedOptions,
   ColumnSizingOptions,
   PaginationOptions,
@@ -55,23 +59,7 @@ export type TableData = RowData
 
 export type TableColumn<T extends TableData, D = unknown> = ColumnDef<T, D>
 
-interface FeatureOptions<T extends RowData> extends
-  /* @vue-ignore */ VisibilityOptions,
-  ColumnOrderOptions,
-  ColumnPinningOptions,
-  RowPinningOptions<T>,
-  FacetedOptions<T>,
-  /* @vue-ignore */ ColumnFiltersOptions<T>,
-  GlobalFilterOptions<T>,
-  /* @vue-ignore */ SortingOptions<T>,
-  /* @vue-ignore */ GroupingOptions,
-  ExpandedOptions<T>,
-  ColumnSizingOptions,
-  PaginationOptions,
-  /* @vue-ignore */ RowSelectionOptions<T> {
-}
-
-export interface TableOptions<T extends TableData> extends Omit<CoreOptions<T>, 'data' | 'columns' | 'getCoreRowModel' | 'state' | 'onStateChange' | 'renderFallbackValue'>, FeatureOptions<T> {
+export interface TableOptions<T extends TableData> extends Omit<CoreOptions<T>, 'data' | 'columns' | 'getCoreRowModel' | 'state' | 'onStateChange' | 'renderFallbackValue'> {
   state?: CoreOptions<T>['state']
   onStateChange?: CoreOptions<T>['onStateChange']
   renderFallbackValue?: CoreOptions<T>['renderFallbackValue']
@@ -95,6 +83,62 @@ export interface TableProps<T extends TableData> extends TableOptions<T> {
   loading?: boolean
   loadingColor?: TableVariants['loadingColor']
   loadingAnimation?: TableVariants['loadingAnimation']
+  /**
+   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/global-filtering#table-options)
+   * @link [Guide](https://tanstack.com/table/v8/docs/guide/global-filtering)
+   */
+  globalFilterOptions?: Omit<GlobalFilterOptions<T>, 'onGlobalFilterChange'>
+  /**
+   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-filtering#table-options)
+   * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-filtering)
+   */
+  columnFiltersOptions?: Omit<ColumnFiltersOptions<T>, 'getFilteredRowModel' | 'onColumnFiltersChange'>
+  /**
+   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-pinning#table-options)
+   * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-pinning)
+   */
+  columnPinningOptions?: Omit<ColumnPinningOptions, 'onColumnPinningChange'>
+  /**
+   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-sizing#table-options)
+   * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-sizing)
+   */
+  columnSizingOptions?: Omit<ColumnSizingOptions, 'onColumnSizingChange' | 'onColumnSizingInfoChange'>
+  /**
+   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-visibility#table-options)
+   * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-visibility)
+   */
+  visibilityOptions?: Omit<VisibilityOptions, 'onColumnVisibilityChange'>
+  /**
+   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/sorting#table-options)
+   * @link [Guide](https://tanstack.com/table/v8/docs/guide/sorting)
+   */
+  sortingOptions?: Omit<SortingOptions<T>, 'getSortedRowModel' | 'onSortingChange'>
+  /**
+   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/grouping#table-options)
+   * @link [Guide](https://tanstack.com/table/v8/docs/guide/grouping)
+   */
+  groupingOptions?: Omit<GroupingOptions, 'onGroupingChange'>
+  /**
+   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/expanding#table-options)
+   * @link [Guide](https://tanstack.com/table/v8/docs/guide/expanding)
+   */
+  expandedOptions?: Omit<ExpandedOptions<T>, 'getExpandedRowModel' | 'onExpandedChange'>
+  /**
+   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/row-selection#table-options)
+   * @link [Guide](https://tanstack.com/table/v8/docs/guide/row-selection)
+   */
+  rowSelectionOptions?: Omit<RowSelectionOptions<T>, 'onRowSelectionChange'>
+  /**
+   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/row-pinning#table-options)
+   * @link [Guide](https://tanstack.com/table/v8/docs/guide/row-pinning)
+   */
+  rowPinningOptions?: Omit<RowPinningOptions<T>, 'onRowPinningChange'>
+  /**
+   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/pagination#table-options)
+   * @link [Guide](https://tanstack.com/table/v8/docs/guide/pagination)
+   */
+  paginationOptions?: PaginationOptions
+  facetedOptions?: FacetedOptions<T>
   class?: any
   ui?: Partial<typeof table.slots>
 }
@@ -112,10 +156,8 @@ export type TableSlots<T> = {
 
 <script setup lang="ts" generic="T extends TableData">
 import { computed } from 'vue'
-import { defu } from 'defu'
 import { Primitive } from 'reka-ui'
 import { FlexRender, getCoreRowModel, getFilteredRowModel, getSortedRowModel, getExpandedRowModel, useVueTable } from '@tanstack/vue-table'
-import { reactiveOmit } from '@vueuse/core'
 import { upperFirst } from 'scule'
 import { useLocale } from '../composables/useLocale'
 
@@ -136,28 +178,48 @@ const ui = computed(() => table({
 
 const globalFilterState = defineModel<string>('globalFilter', { default: undefined })
 const columnFiltersState = defineModel<ColumnFiltersState>('columnFilters', { default: [] })
+const columnOrderState = defineModel<ColumnOrderState>('columnOrder', { default: [] })
 const columnVisibilityState = defineModel<VisibilityState>('columnVisibility', { default: {} })
 const columnPinningState = defineModel<ColumnPinningState>('columnPinning', { default: {} })
+const columnSizingState = defineModel<ColumnSizingState>('columnSizing', { default: {} })
+const columnSizingInfoState = defineModel<ColumnSizingInfoState>('columnSizingInfo', { default: {} })
 const rowSelectionState = defineModel<RowSelectionState>('rowSelection', { default: {} })
+const rowPinningState = defineModel<RowPinningState>('rowPinning', { default: {} })
 const sortingState = defineModel<SortingState>('sorting', { default: [] })
+const groupingState = defineModel<GroupingState>('grouping', { default: [] })
 const expandedState = defineModel<ExpandedState>('expanded', { default: {} })
 
-const tableProps = reactiveOmit(props, 'as', 'data', 'columns', 'caption', 'sticky', 'loading', 'loadingColor', 'loadingAnimation', 'class', 'ui')
-
-const tableApi = useVueTable(defu(tableProps, {
+const tableApi = useVueTable({
   data,
   columns: columns.value,
   getCoreRowModel: getCoreRowModel(),
-  onGlobalFilterChange: (updaterOrValue: Updater<any>) => valueUpdater(updaterOrValue, globalFilterState),
+  ...(props.globalFilterOptions || {}),
+  onGlobalFilterChange: updaterOrValue => valueUpdater(updaterOrValue, globalFilterState),
+  ...(props.columnFiltersOptions || {}),
   getFilteredRowModel: getFilteredRowModel(),
-  onColumnFiltersChange: (updaterOrValue: Updater<ColumnFiltersState>) => valueUpdater(updaterOrValue, columnFiltersState),
-  onColumnVisibilityChange: (updaterOrValue: Updater<VisibilityState>) => valueUpdater(updaterOrValue, columnVisibilityState),
-  onColumnPinningChange: (updaterOrValue: Updater<ColumnPinningState>) => valueUpdater(updaterOrValue, columnPinningState),
-  onRowSelectionChange: (updaterOrValue: Updater<RowSelectionState>) => valueUpdater(updaterOrValue, rowSelectionState),
+  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFiltersState),
+  onColumnOrderChange: updaterOrValue => valueUpdater(updaterOrValue, columnOrderState),
+  ...(props.visibilityOptions || {}),
+  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibilityState),
+  ...(props.columnPinningOptions || {}),
+  onColumnPinningChange: updaterOrValue => valueUpdater(updaterOrValue, columnPinningState),
+  ...(props.columnSizingOptions || {}),
+  onColumnSizingChange: updaterOrValue => valueUpdater(updaterOrValue, columnSizingState),
+  onColumnSizingInfoChange: updaterOrValue => valueUpdater(updaterOrValue, columnSizingInfoState),
+  ...(props.rowSelectionOptions || {}),
+  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelectionState),
+  ...(props.rowPinningOptions || {}),
+  onRowPinningChange: updaterOrValue => valueUpdater(updaterOrValue, rowPinningState),
+  ...(props.sortingOptions || {}),
   getSortedRowModel: getSortedRowModel(),
-  onSortingChange: (updaterOrValue: Updater<SortingState>) => valueUpdater(updaterOrValue, sortingState),
+  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sortingState),
+  ...(props.groupingOptions || {}),
+  onGroupingChange: updaterOrValue => valueUpdater(updaterOrValue, groupingState),
+  ...(props.expandedOptions || {}),
   getExpandedRowModel: getExpandedRowModel(),
-  onExpandedChange: (updaterOrValue: Updater<ExpandedState>) => valueUpdater(updaterOrValue, expandedState),
+  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expandedState),
+  ...(props.paginationOptions || {}),
+  ...(props.facetedOptions || {}),
   state: {
     get globalFilter() {
       return globalFilterState.value
@@ -181,7 +243,7 @@ const tableApi = useVueTable(defu(tableProps, {
       return sortingState.value
     }
   }
-}))
+})
 
 function valueUpdater<T extends Updater<any>>(updaterOrValue: T, ref: Ref) {
   ref.value = typeof updaterOrValue === 'function' ? updaterOrValue(ref.value) : updaterOrValue

From d6b5385cd6b020f68fabe5c10c1f101b3a83d17d Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Wed, 5 Feb 2025 21:41:45 +0100
Subject: [PATCH 13/14] up

---
 .../table/TableGlobalFilterExample.vue        |  2 -
 .../examples/table/TablePaginationExample.vue | 28 +++----
 docs/content/3.components/table.md            | 22 ++++--
 playground/app/pages/components/table.vue     |  6 +-
 src/runtime/components/Table.vue              | 73 +++++++++++++------
 5 files changed, 86 insertions(+), 45 deletions(-)

diff --git a/docs/app/components/content/examples/table/TableGlobalFilterExample.vue b/docs/app/components/content/examples/table/TableGlobalFilterExample.vue
index ac78465145..059b044807 100644
--- a/docs/app/components/content/examples/table/TableGlobalFilterExample.vue
+++ b/docs/app/components/content/examples/table/TableGlobalFilterExample.vue
@@ -90,8 +90,6 @@ const columns: TableColumn<Payment>[] = [{
   }
 }]
 
-const table = useTemplateRef('table')
-
 const globalFilter = ref('45')
 </script>
 
diff --git a/docs/app/components/content/examples/table/TablePaginationExample.vue b/docs/app/components/content/examples/table/TablePaginationExample.vue
index 8be4a761f3..a8b4926988 100644
--- a/docs/app/components/content/examples/table/TablePaginationExample.vue
+++ b/docs/app/components/content/examples/table/TablePaginationExample.vue
@@ -142,31 +142,33 @@ const columns: TableColumn<Payment>[] = [{
     return h('div', { class: 'text-right font-medium' }, formatted)
   }
 }]
+
+const pagination = ref({
+  pageIndex: 0,
+  pageSize: 5
+})
 </script>
 
 <template>
   <div class="w-full space-y-4 pb-4">
     <UTable
       ref="table"
+      v-model:pagination="pagination"
       :data="data"
       :columns="columns"
       :pagination-options="{
         getPaginationRowModel: getPaginationRowModel()
       }"
-      :initial-state="{
-        pagination: {
-          pageIndex: 0,
-          pageSize: 7
-        }
-      }"
       class="flex-1"
     />
-    <UPagination
-      :default-page="(table?.tableApi?.getState().pagination.pageIndex || 0) + 1"
-      :items-per-page="table?.tableApi?.getState().pagination.pageSize"
-      :total="table?.tableApi?.getFilteredRowModel().rows.length"
-      class="w-fit mx-auto"
-      @update:page="(p) => table?.tableApi?.setPageIndex(p - 1)"
-    />
+
+    <div class="flex justify-center border-t border-[var(--ui-border)] pt-4">
+      <UPagination
+        :default-page="(table?.tableApi?.getState().pagination.pageIndex || 0) + 1"
+        :items-per-page="table?.tableApi?.getState().pagination.pageSize"
+        :total="table?.tableApi?.getFilteredRowModel().rows.length"
+        @update:page="(p) => table?.tableApi?.setPageIndex(p - 1)"
+      />
+    </div>
   </div>
 </template>
diff --git a/docs/content/3.components/table.md b/docs/content/3.components/table.md
index e242a60129..5615f636c3 100644
--- a/docs/content/3.components/table.md
+++ b/docs/content/3.components/table.md
@@ -336,7 +336,7 @@ You can use the `column-pinning` prop to control the pinning state of the column
 
 ### With column visibility
 
-You can add use [DropdownMenu](/components/dropdown-menu) component to toggle the visibility of the columns using the TanStack Table [Column Visibility APIs](https://tanstack.com/table/latest/docs/api/features/column-visibility).
+You can use a [DropdownMenu](/components/dropdown-menu) component to toggle the visibility of the columns using the TanStack Table [Column Visibility APIs](https://tanstack.com/table/latest/docs/api/features/column-visibility).
 
 ::component-example
 ---
@@ -391,26 +391,34 @@ class: '!p-0'
 You can use the `global-filter` prop to control the global filter state (can be binded with `v-model`).
 ::
 
-### With fetched data
+### With pagination
 
-You can fetch data from an API and use them in the Table.
+You can use a [Pagination](/components/pagination) component to control the pagination state using the [Pagination APIs](https://tanstack.com/table/latest/docs/api/features/pagination).
+
+There are different pagination approaches as explained in [Pagination Guide](https://tanstack.com/table/latest/docs/guide/pagination#pagination-guide). In this example, we use client-side pagination so we need to manually pass `getPaginationRowModel()`{lang="ts-type"} function.
 
 ::component-example
 ---
 prettier: true
 collapse: true
-name: 'table-fetch-example'
+name: 'table-pagination-example'
 class: '!p-0'
 ---
 ::
 
-### With pagination
-There are different pagination approaches as explained in [Pagination Guide](https://tanstack.com/table/v8/docs/guide/pagination#pagination-guide). In the example below, we use the `initialState` prop to set the default page index and size and use `UPagination` component to control the pagination state. To support client side navigation you need to manually pass `getPaginationRowModel` function.
+::tip
+You can use the `pagination` prop to control the pagination state (can be binded with `v-model`).
+::
+
+### With fetched data
+
+You can fetch data from an API and use them in the Table.
+
 ::component-example
 ---
 prettier: true
 collapse: true
-name: 'table-pagination-example'
+name: 'table-fetch-example'
 class: '!p-0'
 ---
 ::
diff --git a/playground/app/pages/components/table.vue b/playground/app/pages/components/table.vue
index 36746595ca..d87a92fe01 100644
--- a/playground/app/pages/components/table.vue
+++ b/playground/app/pages/components/table.vue
@@ -2,6 +2,7 @@
 import { h, resolveComponent } from 'vue'
 import { upperFirst } from 'scule'
 import type { TableColumn } from '@nuxt/ui'
+import { getPaginationRowModel } from '@tanstack/vue-table'
 
 const UButton = resolveComponent('UButton')
 const UCheckbox = resolveComponent('UCheckbox')
@@ -323,10 +324,13 @@ onMounted(() => {
       :column-pinning="columnPinning"
       :loading="loading"
       sticky
+      :pagination-options="{
+        getPaginationRowModel: getPaginationRowModel()
+      }"
       :ui="{
         tr: 'divide-x divide-[var(--ui-border)]'
       }"
-      class="border border-[var(--ui-border-accented)] rounded-[var(--ui-radius)] flex-1"
+      class="border border-[var(--ui-border-accented)] rounded-[var(--ui-radius)]"
     >
       <template #expanded="{ row }">
         <pre>{{ row.original }}</pre>
diff --git a/src/runtime/components/Table.vue b/src/runtime/components/Table.vue
index ee3646a858..97ab79f8af 100644
--- a/src/runtime/components/Table.vue
+++ b/src/runtime/components/Table.vue
@@ -3,37 +3,38 @@
 import type { Ref } from 'vue'
 import type { VariantProps } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
-import type { RowData } from '@tanstack/table-core'
 import type {
-  Row,
+  CellContext,
   ColumnDef,
+  ColumnFiltersOptions,
   ColumnFiltersState,
   ColumnOrderState,
+  ColumnPinningOptions,
   ColumnPinningState,
-  ColumnSizingState,
   ColumnSizingInfoState,
-  RowSelectionState,
-  RowPinningState,
-  SortingState,
-  GroupingState,
-  ExpandedState,
-  VisibilityState,
-  Updater,
-  CellContext,
-  HeaderContext,
+  ColumnSizingOptions,
+  ColumnSizingState,
   CoreOptions,
-  VisibilityOptions,
-  ColumnPinningOptions,
-  RowPinningOptions,
+  ExpandedOptions,
+  ExpandedState,
   FacetedOptions,
-  ColumnFiltersOptions,
   GlobalFilterOptions,
   GroupingOptions,
-  SortingOptions,
-  ExpandedOptions,
-  ColumnSizingOptions,
+  GroupingState,
+  HeaderContext,
   PaginationOptions,
-  RowSelectionOptions
+  PaginationState,
+  Row,
+  RowData,
+  RowPinningOptions,
+  RowPinningState,
+  RowSelectionOptions,
+  RowSelectionState,
+  SortingOptions,
+  SortingState,
+  Updater,
+  VisibilityOptions,
+  VisibilityState
 } from '@tanstack/vue-table'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/table'
@@ -138,6 +139,10 @@ export interface TableProps<T extends TableData> extends TableOptions<T> {
    * @link [Guide](https://tanstack.com/table/v8/docs/guide/pagination)
    */
   paginationOptions?: PaginationOptions
+  /**
+   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-faceting#table-options)
+   * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-faceting)
+   */
   facetedOptions?: FacetedOptions<T>
   class?: any
   ui?: Partial<typeof table.slots>
@@ -156,9 +161,10 @@ export type TableSlots<T> = {
 
 <script setup lang="ts" generic="T extends TableData">
 import { computed } from 'vue'
-import { Primitive } from 'reka-ui'
-import { FlexRender, getCoreRowModel, getFilteredRowModel, getSortedRowModel, getExpandedRowModel, useVueTable } from '@tanstack/vue-table'
+import { Primitive, useForwardProps } from 'reka-ui'
 import { upperFirst } from 'scule'
+import { FlexRender, getCoreRowModel, getFilteredRowModel, getSortedRowModel, getExpandedRowModel, useVueTable } from '@tanstack/vue-table'
+import { reactiveOmit } from '@vueuse/core'
 import { useLocale } from '../composables/useLocale'
 
 const props = defineProps<TableProps<T>>()
@@ -188,8 +194,12 @@ const rowPinningState = defineModel<RowPinningState>('rowPinning', { default: {}
 const sortingState = defineModel<SortingState>('sorting', { default: [] })
 const groupingState = defineModel<GroupingState>('grouping', { default: [] })
 const expandedState = defineModel<ExpandedState>('expanded', { default: {} })
+const paginationState = defineModel<PaginationState>('pagination', { default: {} })
+
+const tableProps = useForwardProps(reactiveOmit(props, 'as', 'data', 'columns', 'caption', 'sticky', 'loading', 'loadingColor', 'loadingAnimation', 'class', 'ui'))
 
 const tableApi = useVueTable({
+  ...tableProps,
   data,
   columns: columns.value,
   getCoreRowModel: getCoreRowModel(),
@@ -219,6 +229,7 @@ const tableApi = useVueTable({
   getExpandedRowModel: getExpandedRowModel(),
   onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expandedState),
   ...(props.paginationOptions || {}),
+  onPaginationChange: updaterOrValue => valueUpdater(updaterOrValue, paginationState),
   ...(props.facetedOptions || {}),
   state: {
     get globalFilter() {
@@ -227,6 +238,9 @@ const tableApi = useVueTable({
     get columnFilters() {
       return columnFiltersState.value
     },
+    get columnOrder() {
+      return columnOrderState.value
+    },
     get columnVisibility() {
       return columnVisibilityState.value
     },
@@ -241,6 +255,21 @@ const tableApi = useVueTable({
     },
     get sorting() {
       return sortingState.value
+    },
+    get grouping() {
+      return groupingState.value
+    },
+    get rowPinning() {
+      return rowPinningState.value
+    },
+    get columnSizing() {
+      return columnSizingState.value
+    },
+    get columnSizingInfo() {
+      return columnSizingInfoState.value
+    },
+    get pagination() {
+      return paginationState.value
     }
   }
 })

From c2aeb9d3cccbd375be7fab46496bb6e7591cb8d6 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Wed, 5 Feb 2025 21:53:19 +0100
Subject: [PATCH 14/14] up

---
 playground/app/pages/components/table.vue | 8 +++++++-
 src/runtime/components/Table.vue          | 2 +-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/playground/app/pages/components/table.vue b/playground/app/pages/components/table.vue
index d87a92fe01..77e548aff8 100644
--- a/playground/app/pages/components/table.vue
+++ b/playground/app/pages/components/table.vue
@@ -270,6 +270,11 @@ const columnPinning = ref({
   right: ['actions']
 })
 
+const pagination = ref({
+  pageIndex: 0,
+  pageSize: 10
+})
+
 function randomize() {
   data.value = [...data.value].sort(() => Math.random() - 0.5)
 }
@@ -323,13 +328,14 @@ onMounted(() => {
       :columns="columns"
       :column-pinning="columnPinning"
       :loading="loading"
-      sticky
+      :pagination="pagination"
       :pagination-options="{
         getPaginationRowModel: getPaginationRowModel()
       }"
       :ui="{
         tr: 'divide-x divide-[var(--ui-border)]'
       }"
+      sticky
       class="border border-[var(--ui-border-accented)] rounded-[var(--ui-radius)]"
     >
       <template #expanded="{ row }">
diff --git a/src/runtime/components/Table.vue b/src/runtime/components/Table.vue
index 97ab79f8af..9e2375d19c 100644
--- a/src/runtime/components/Table.vue
+++ b/src/runtime/components/Table.vue
@@ -138,7 +138,7 @@ export interface TableProps<T extends TableData> extends TableOptions<T> {
    * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/pagination#table-options)
    * @link [Guide](https://tanstack.com/table/v8/docs/guide/pagination)
    */
-  paginationOptions?: PaginationOptions
+  paginationOptions?: Omit<PaginationOptions, 'onPaginationChange'>
   /**
    * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-faceting#table-options)
    * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-faceting)