From ed22471564dd8fc011671395e99f26c0179a2dcb Mon Sep 17 00:00:00 2001
From: Kevin Van Cott <kevinvandy656@gmail.com>
Date: Sat, 4 Jan 2025 13:16:04 -0600
Subject: [PATCH] fix vue adapter and examples for v9

---
 examples/vue/basic/src/App.vue                |  19 +--
 examples/vue/column-ordering/src/App.vue      |  43 +++---
 examples/vue/column-pinning/src/App.vue       | 126 ++++++++--------
 examples/vue/filters/src/App.vue              | 135 +++++++-----------
 examples/vue/filters/src/Filter.vue           |   6 +-
 examples/vue/filters/src/tableHelper.ts       |  35 +++++
 .../vue/pagination-controlled/src/App.vue     |  21 ++-
 .../pagination-controlled/src/useService.ts   |   5 +-
 examples/vue/pagination/src/App.vue           | 117 ++++++++-------
 examples/vue/row-selection/src/App.vue        |  35 +++--
 examples/vue/sorting/src/App.vue              |  78 ++++------
 examples/vue/sub-components/src/App.vue       | 103 +++++++------
 examples/vue/virtualized-rows/src/App.vue     |  27 ++--
 .../svelte-table/src/createTable.svelte.ts    |   2 +
 packages/vue-table/src/FlexRender.ts          |  17 +++
 packages/vue-table/src/createTableHelper.ts   |  62 ++++++++
 packages/vue-table/src/index.ts               | 133 +----------------
 packages/vue-table/src/useTable.ts            | 108 ++++++++++++++
 18 files changed, 579 insertions(+), 493 deletions(-)
 create mode 100644 examples/vue/filters/src/tableHelper.ts
 create mode 100644 packages/vue-table/src/FlexRender.ts
 create mode 100644 packages/vue-table/src/createTableHelper.ts
 create mode 100644 packages/vue-table/src/useTable.ts

diff --git a/examples/vue/basic/src/App.vue b/examples/vue/basic/src/App.vue
index 219a516b13..d806ba9ea2 100644
--- a/examples/vue/basic/src/App.vue
+++ b/examples/vue/basic/src/App.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import {
   FlexRender,
-  createCoreRowModel,
   useTable,
   createColumnHelper,
   tableFeatures,
@@ -52,7 +51,7 @@ const columns = [
   columnHelper.group({
     header: 'Name',
     footer: (props) => props.column.id,
-    columns: [
+    columns: columnHelper.columns([
       columnHelper.accessor('firstName', {
         cell: (info) => info.getValue(),
         footer: (props) => props.column.id,
@@ -63,19 +62,19 @@ const columns = [
         header: () => 'Last Name',
         footer: (props) => props.column.id,
       }),
-    ],
+    ]),
   }),
   columnHelper.group({
     header: 'Info',
     footer: (props) => props.column.id,
-    columns: [
+    columns: columnHelper.columns([
       columnHelper.accessor('age', {
         header: () => 'Age',
         footer: (props) => props.column.id,
       }),
       columnHelper.group({
         header: 'More Info',
-        columns: [
+        columns: columnHelper.columns([
           columnHelper.accessor('visits', {
             header: () => 'Visits',
             footer: (props) => props.column.id,
@@ -88,9 +87,9 @@ const columns = [
             header: 'Profile Progress',
             footer: (props) => props.column.id,
           }),
-        ],
+        ]),
       }),
-    ],
+    ]),
   }),
 ]
 
@@ -101,11 +100,13 @@ const rerender = () => {
 }
 
 const table = useTable({
+  _features,
+  _rowModels: {},
   get data() {
     return data.value
   },
   columns,
-  getCoreRowModel: createCoreRowModel(),
+  debugTable: true,
 })
 </script>
 
@@ -132,7 +133,7 @@ const table = useTable({
       </thead>
       <tbody>
         <tr v-for="row in table.getRowModel().rows" :key="row.id">
-          <td v-for="cell in row.getVisibleCells()" :key="cell.id">
+          <td v-for="cell in row.getAllCells()" :key="cell.id">
             <FlexRender
               :render="cell.column.columnDef.cell"
               :props="cell.getContext()"
diff --git a/examples/vue/column-ordering/src/App.vue b/examples/vue/column-ordering/src/App.vue
index d6a89fb3c7..56a78ce227 100644
--- a/examples/vue/column-ordering/src/App.vue
+++ b/examples/vue/column-ordering/src/App.vue
@@ -1,20 +1,25 @@
 <script setup lang="ts">
 import {
-  type ColumnOrderState,
   FlexRender,
-  createCoreRowModel,
-  useTable,
-  type Column,
-  createColumnHelper,
-  type ColumnVisibilityState,
   columnOrderingFeature,
+  columnVisibilityFeature,
+  createColumnHelper,
   tableFeatures,
+  type Column,
+  type ColumnOrderState,
+  type ColumnVisibilityState,
+  useTable,
+  Updater,
+  isFunction,
 } from '@tanstack/vue-table'
 import { makeData, type Person } from './makeData'
 import { ref } from 'vue'
 import { faker } from '@faker-js/faker'
 
-const _features = tableFeatures({ columnOrderingFeature })
+const _features = tableFeatures({
+  columnOrderingFeature,
+  columnVisibilityFeature,
+})
 
 const columnHelper = createColumnHelper<typeof _features, Person>()
 
@@ -25,7 +30,7 @@ const columns = ref(
     columnHelper.group({
       header: 'Name',
       footer: (props) => props.column.id,
-      columns: [
+      columns: columnHelper.columns([
         columnHelper.accessor('firstName', {
           cell: (info) => info.getValue(),
           footer: (props) => props.column.id,
@@ -36,19 +41,19 @@ const columns = ref(
           header: () => 'Last Name',
           footer: (props) => props.column.id,
         }),
-      ],
+      ]),
     }),
     columnHelper.group({
       header: 'Info',
       footer: (props) => props.column.id,
-      columns: [
+      columns: columnHelper.columns([
         columnHelper.accessor('age', {
           header: () => 'Age',
           footer: (props) => props.column.id,
         }),
         columnHelper.group({
           header: 'More Info',
-          columns: [
+          columns: columnHelper.columns([
             columnHelper.accessor('visits', {
               header: () => 'Visits',
               footer: (props) => props.column.id,
@@ -61,9 +66,9 @@ const columns = ref(
               header: 'Profile Progress',
               footer: (props) => props.column.id,
             }),
-          ],
+          ]),
         }),
-      ],
+      ]),
     }),
   ]),
 )
@@ -74,6 +79,7 @@ const columnOrder = ref<ColumnOrderState>([])
 const rerender = () => (data.value = makeData(20))
 
 const table = useTable({
+  _features,
   get data() {
     return data.value
   },
@@ -88,14 +94,11 @@ const table = useTable({
       return columnOrder.value
     },
   },
-
-  onColumnOrderChange: (updaterOrValue) => {
-    columnOrder.value =
-      updaterOrValue === 'function'
-        ? updaterOrValue(columnOrder.value)
-        : updaterOrValue
+  onColumnOrderChange: (updaterOrValue: Updater<ColumnOrderState>) => {
+    columnOrder.value = isFunction(updaterOrValue)
+      ? updaterOrValue(columnOrder.value)
+      : updaterOrValue
   },
-  getCoreRowModel: createCoreRowModel(),
   debugTable: true,
   debugHeaders: true,
   debugColumns: true,
diff --git a/examples/vue/column-pinning/src/App.vue b/examples/vue/column-pinning/src/App.vue
index 379b6f04f1..ac6f79c25e 100644
--- a/examples/vue/column-pinning/src/App.vue
+++ b/examples/vue/column-pinning/src/App.vue
@@ -1,17 +1,19 @@
 <script setup lang="ts">
 import {
-  createColumnHelper,
   FlexRender,
-  createCoreRowModel,
-  useTable,
+  columnOrderingFeature,
   columnPinningFeature,
-  tableFeatures,
   columnVisibilityFeature,
+  createColumnHelper,
+  isFunction,
+  tableFeatures,
+  useTable,
 } from '@tanstack/vue-table'
 import type {
   Column,
   ColumnOrderState,
   ColumnPinningState,
+  Updater,
 } from '@tanstack/vue-table'
 import { makeData, type Person } from './makeData'
 import { ref } from 'vue'
@@ -20,68 +22,71 @@ import { faker } from '@faker-js/faker'
 const data = ref(makeData(5000))
 
 const _features = tableFeatures({
+  columnOrderingFeature,
   columnPinningFeature,
   columnVisibilityFeature,
 })
 
 const columnHelper = createColumnHelper<typeof _features, Person>()
 
-const columns = ref([
-  columnHelper.group({
-    // id: 'Name',
-    header: 'Name',
-    footer: (props) => props.column.id,
-    columns: [
-      columnHelper.accessor('firstName', {
-        cell: (info) => info.getValue(),
-        footer: (props) => props.column.id,
-      }),
-      columnHelper.accessor((row) => row.lastName, {
-        id: 'lastName',
-        cell: (info) => info.getValue(),
-        header: () => 'Last Name',
-        footer: (props) => props.column.id,
-      }),
-    ],
-  }),
-  columnHelper.group({
-    header: 'Info',
-    footer: (props) => props.column.id,
-    columns: [
-      columnHelper.accessor('age', {
-        header: () => 'Age',
-        footer: (props) => props.column.id,
-      }),
-      columnHelper.group({
-        header: 'More Info',
-        columns: [
-          columnHelper.accessor('visits', {
-            header: () => 'Visits',
-            footer: (props) => props.column.id,
-          }),
-          columnHelper.accessor('status', {
-            header: 'Status',
-            footer: (props) => props.column.id,
-          }),
-          columnHelper.accessor('progress', {
-            header: 'Profile Progress',
-            footer: (props) => props.column.id,
-          }),
-        ],
-      }),
-    ],
-  }),
-])
+const columns = ref(
+  columnHelper.columns([
+    columnHelper.group({
+      header: 'Name',
+      footer: (props) => props.column.id,
+      columns: columnHelper.columns([
+        columnHelper.accessor('firstName', {
+          cell: (info) => info.getValue(),
+          footer: (props) => props.column.id,
+        }),
+        columnHelper.accessor((row) => row.lastName, {
+          id: 'lastName',
+          cell: (info) => info.getValue(),
+          header: () => 'Last Name',
+          footer: (props) => props.column.id,
+        }),
+      ]),
+    }),
+    columnHelper.group({
+      header: 'Info',
+      footer: (props) => props.column.id,
+      columns: columnHelper.columns([
+        columnHelper.accessor('age', {
+          header: () => 'Age',
+          footer: (props) => props.column.id,
+        }),
+        columnHelper.group({
+          header: 'More Info',
+          columns: columnHelper.columns([
+            columnHelper.accessor('visits', {
+              header: () => 'Visits',
+              footer: (props) => props.column.id,
+            }),
+            columnHelper.accessor('status', {
+              header: 'Status',
+              footer: (props) => props.column.id,
+            }),
+            columnHelper.accessor('progress', {
+              header: 'Profile Progress',
+              footer: (props) => props.column.id,
+            }),
+          ]),
+        }),
+      ]),
+    }),
+  ]),
+)
 
 const columnVisibility = ref({})
 const columnOrder = ref<ColumnOrderState>([])
 
-const columnPinning = ref<ColumnPinningState>({})
+const columnPinning = ref<ColumnPinningState>({ left: [], right: [] })
 const isSplit = ref(false)
 
 const rerender = () => (data.value = makeData(5000))
 
 const table = useTable({
+  _features,
   get data() {
     return data.value
   },
@@ -100,19 +105,16 @@ const table = useTable({
     },
   },
 
-  onColumnOrderChange: (updaterOrValue) => {
-    columnOrder.value =
-      typeof updaterOrValue === 'function'
-        ? updaterOrValue(columnOrder.value)
-        : updaterOrValue
+  onColumnOrderChange: (updaterOrValue: Updater<ColumnOrderState>) => {
+    columnOrder.value = isFunction(updaterOrValue)
+      ? updaterOrValue(columnOrder.value)
+      : updaterOrValue
   },
-  onColumnPinningChange: (updaterOrValue) => {
-    columnPinning.value =
-      typeof updaterOrValue === 'function'
-        ? updaterOrValue(columnPinning.value)
-        : updaterOrValue
+  onColumnPinningChange: (updaterOrValue: Updater<ColumnPinningState>) => {
+    columnPinning.value = isFunction(updaterOrValue)
+      ? updaterOrValue(columnPinning.value)
+      : updaterOrValue
   },
-  getCoreRowModel: createCoreRowModel(),
   debugTable: true,
   debugHeaders: true,
   debugColumns: true,
diff --git a/examples/vue/filters/src/App.vue b/examples/vue/filters/src/App.vue
index e82cdb25f7..549907cde2 100644
--- a/examples/vue/filters/src/App.vue
+++ b/examples/vue/filters/src/App.vue
@@ -3,33 +3,14 @@ import {
   ColumnFiltersState,
   FlexRender,
   Updater,
-  columnFacetingFeature,
-  columnFilteringFeature,
-  createColumnHelper,
-  createFacetedMinMaxValues,
-  createFacetedRowModel,
-  createFacetedUniqueValues,
-  createFilteredRowModel,
-  filterFns,
-  globalFilteringFeature,
   isFunction,
-  tableFeatures,
-  useTable,
 } from '@tanstack/vue-table'
 import { ref } from 'vue'
 import DebouncedInput from './DebouncedInput.vue'
 import Filter from './Filter.vue'
+import { Person, tableHelper } from './tableHelper'
 
-export type Person = {
-  firstName: string
-  lastName: string
-  age: number
-  visits: number
-  status: string
-  progress: number
-}
-
-const defaultData: Person[] = [
+const defaultData: Array<Person> = [
   {
     firstName: 'tanner',
     lastName: 'linsley',
@@ -56,59 +37,56 @@ const defaultData: Person[] = [
   },
 ]
 
-export const _features = tableFeatures({
-  columnFilteringFeature,
-  globalFilteringFeature,
-  columnFacetingFeature,
-})
+const { columnHelper } = tableHelper
 
-const columnHelper = createColumnHelper<typeof _features, Person>()
+const columns = ref(
+  columnHelper.columns([
+    columnHelper.group({
+      header: 'Name',
+      footer: (props) => props.column.id,
+      columns: columnHelper.columns([
+        columnHelper.accessor('firstName', {
+          cell: (info) => info.getValue(),
+          footer: (props) => props.column.id,
+        }),
+        columnHelper.accessor((row) => row.lastName, {
+          id: 'lastName',
+          cell: (info) => info.getValue(),
+          header: () => 'Last Name',
+          footer: (props) => props.column.id,
+        }),
+      ]),
+    }),
+    columnHelper.group({
+      header: 'Info',
+      footer: (props) => props.column.id,
+      columns: columnHelper.columns([
+        columnHelper.accessor('age', {
+          header: () => 'Age',
+          footer: (props) => props.column.id,
+        }),
+        columnHelper.group({
+          header: 'More Info',
+          columns: columnHelper.columns([
+            columnHelper.accessor('visits', {
+              header: () => 'Visits',
+              footer: (props) => props.column.id,
+            }),
+            columnHelper.accessor('status', {
+              header: 'Status',
+              footer: (props) => props.column.id,
+            }),
+            columnHelper.accessor('progress', {
+              header: 'Profile Progress',
+              footer: (props) => props.column.id,
+            }),
+          ]),
+        }),
+      ]),
+    }),
+  ]),
+)
 
-const columns = [
-  columnHelper.group({
-    header: 'Name',
-    footer: (props) => props.column.id,
-    columns: [
-      columnHelper.accessor('firstName', {
-        cell: (info) => info.getValue(),
-        footer: (props) => props.column.id,
-      }),
-      columnHelper.accessor((row) => row.lastName, {
-        id: 'lastName',
-        cell: (info) => info.getValue(),
-        header: () => 'Last Name',
-        footer: (props) => props.column.id,
-      }),
-    ],
-  }),
-  columnHelper.group({
-    header: 'Info',
-    footer: (props) => props.column.id,
-    columns: [
-      columnHelper.accessor('age', {
-        header: () => 'Age',
-        footer: (props) => props.column.id,
-      }),
-      columnHelper.group({
-        header: 'More Info',
-        columns: [
-          columnHelper.accessor('visits', {
-            header: () => 'Visits',
-            footer: (props) => props.column.id,
-          }),
-          columnHelper.accessor('status', {
-            header: 'Status',
-            footer: (props) => props.column.id,
-          }),
-          columnHelper.accessor('progress', {
-            header: 'Profile Progress',
-            footer: (props) => props.column.id,
-          }),
-        ],
-      }),
-    ],
-  }),
-]
 const data = ref(defaultData)
 const rerender = () => {
   data.value = defaultData
@@ -116,18 +94,13 @@ const rerender = () => {
 const columnFilters = ref<ColumnFiltersState>([])
 const globalFilter = ref('')
 
-const table = useTable({
-  _features,
-  _rowModels: {
-    filteredRowModel: createFilteredRowModel(filterFns),
-    facetedRowModel: createFacetedRowModel(),
-    facetedMinMaxValues: createFacetedMinMaxValues(),
-    facetedUniqueValues: createFacetedUniqueValues(),
-  },
+const table = tableHelper.useTable({
   get data() {
     return data.value
   },
-  columns,
+  get columns() {
+    return columns.value
+  },
   state: {
     get columnFilters() {
       return columnFilters.value
diff --git a/examples/vue/filters/src/Filter.vue b/examples/vue/filters/src/Filter.vue
index 9043735342..802c5b18eb 100644
--- a/examples/vue/filters/src/Filter.vue
+++ b/examples/vue/filters/src/Filter.vue
@@ -2,15 +2,15 @@
 import type { Column, Table } from '@tanstack/vue-table'
 import { computed, PropType } from 'vue'
 import DebouncedInput from './DebouncedInput.vue'
-import { _features, Person } from './App.vue'
+import { Person, tableHelper } from './tableHelper'
 
 const props = defineProps({
   column: {
-    type: Object as PropType<Column<typeof _features, Person>>,
+    type: Object as PropType<Column<typeof tableHelper.features, Person>>,
     required: true,
   },
   table: {
-    type: Object as PropType<Table<typeof _features, Person>>,
+    type: Object as PropType<Table<typeof tableHelper.features, Person>>,
     required: true,
   },
 })
diff --git a/examples/vue/filters/src/tableHelper.ts b/examples/vue/filters/src/tableHelper.ts
new file mode 100644
index 0000000000..a284cedf50
--- /dev/null
+++ b/examples/vue/filters/src/tableHelper.ts
@@ -0,0 +1,35 @@
+import {
+  columnFacetingFeature,
+  columnFilteringFeature,
+  createFacetedMinMaxValues,
+  createFacetedRowModel,
+  createFacetedUniqueValues,
+  createFilteredRowModel,
+  createTableHelper,
+  filterFns,
+  globalFilteringFeature,
+} from '@tanstack/vue-table'
+
+export type Person = {
+  firstName: string
+  lastName: string
+  age: number
+  visits: number
+  status: string
+  progress: number
+}
+
+export const tableHelper = createTableHelper({
+  _features: {
+    columnFilteringFeature,
+    globalFilteringFeature,
+    columnFacetingFeature,
+  },
+  _rowModels: {
+    filteredRowModel: createFilteredRowModel(filterFns),
+    facetedRowModel: createFacetedRowModel(),
+    facetedMinMaxValues: createFacetedMinMaxValues(),
+    facetedUniqueValues: createFacetedUniqueValues(),
+  },
+  TData: {} as Array<Person>,
+})
diff --git a/examples/vue/pagination-controlled/src/App.vue b/examples/vue/pagination-controlled/src/App.vue
index f79a7615fb..b82f3650b9 100644
--- a/examples/vue/pagination-controlled/src/App.vue
+++ b/examples/vue/pagination-controlled/src/App.vue
@@ -2,13 +2,19 @@
 import { ref } from 'vue'
 import {
   FlexRender,
-  createCoreRowModel,
   useTable,
   createColumnHelper,
   PaginationState,
+  rowPaginationFeature,
+  tableFeatures,
+  Updater,
 } from '@tanstack/vue-table'
 import useService from './useService'
 
+const _features = tableFeatures({
+  rowPaginationFeature,
+})
+
 type Post = {
   userId: number
   id: number
@@ -19,12 +25,12 @@ type Post = {
 const INITIAL_PAGE_INDEX = 0
 const INITIAL_PAGE_SIZE = 10
 
-const columnHelper = createColumnHelper<Post>()
+const columnHelper = createColumnHelper<typeof _features, Post>()
 
-const columns = [
+const columns = columnHelper.columns([
   columnHelper.accessor('id', { header: 'Post ID' }),
   columnHelper.accessor('title', { header: 'Title' }),
-]
+])
 
 const pageSizes = [10, 20, 30, 40, 50]
 
@@ -38,6 +44,8 @@ const goToPageNumber = ref(INITIAL_PAGE_INDEX + 1)
 const { data, isLoading, pageCount } = useService(pagination)
 
 const table = useTable({
+  _features,
+  _rowModels: {}, // no client-side row models since we're using server-side pagination
   get data() {
     return data.value ?? []
   },
@@ -49,7 +57,7 @@ const table = useTable({
     pagination: pagination.value,
   },
   manualPagination: true,
-  onPaginationChange: (updater) => {
+  onPaginationChange: (updater: Updater<PaginationState>) => {
     if (typeof updater === 'function') {
       setPagination(
         updater({
@@ -61,7 +69,6 @@ const table = useTable({
       setPagination(updater)
     }
   },
-  getCoreRowModel: createCoreRowModel(),
   debugTable: true,
 })
 
@@ -109,7 +116,7 @@ function handlePageSizeChange(e: any) {
       </thead>
       <tbody>
         <tr v-for="row in table.getRowModel().rows" :key="row.id">
-          <td v-for="cell in row.getVisibleCells()" :key="cell.id">
+          <td v-for="cell in row.getAllCells()" :key="cell.id">
             <FlexRender
               :render="cell.column.columnDef.cell"
               :props="cell.getContext()"
diff --git a/examples/vue/pagination-controlled/src/useService.ts b/examples/vue/pagination-controlled/src/useService.ts
index c2d6f9bc63..c7e5ef84bc 100644
--- a/examples/vue/pagination-controlled/src/useService.ts
+++ b/examples/vue/pagination-controlled/src/useService.ts
@@ -45,8 +45,9 @@ export default function useService(pagination: Ref<PaginationState>) {
         if (response.ok) {
           data.value = responseData
           error.value = null
-          totalResultCount.value =
-            Number(response.headers.get('x-total-count')) ?? DEFAULT_PAGE_COUNT
+          totalResultCount.value = Number(
+            response.headers.get('x-total-count') ?? DEFAULT_PAGE_COUNT,
+          )
         } else {
           throw new Error('Network response was not OK')
         }
diff --git a/examples/vue/pagination/src/App.vue b/examples/vue/pagination/src/App.vue
index 1be8f1348d..040f285862 100644
--- a/examples/vue/pagination/src/App.vue
+++ b/examples/vue/pagination/src/App.vue
@@ -1,75 +1,88 @@
 <script setup lang="ts">
 import {
   FlexRender,
-  createCoreRowModel,
+  createColumnHelper,
   createPaginatedRowModel,
+  rowPaginationFeature,
+  tableFeatures,
   useTable,
-  createColumnHelper,
 } from '@tanstack/vue-table'
 import { ref } from 'vue'
 import { makeData, Person } from './makeData'
 
+const _features = tableFeatures({
+  rowPaginationFeature,
+})
+
+const columnHelper = createColumnHelper<typeof _features, Person>()
+
 const INITIAL_PAGE_INDEX = 0
 
 const defaultData = makeData(100)
-const columnHelper = createColumnHelper<any, Person>()
 const goToPageNumber = ref(INITIAL_PAGE_INDEX + 1)
 const pageSizes = [10, 20, 30, 40, 50]
 const data = ref(defaultData)
 
-const columns = [
-  columnHelper.group({
-    header: 'Name',
-    footer: (props) => props.column.id,
-    columns: [
-      columnHelper.accessor('firstName', {
-        cell: (info) => info.getValue(),
-        footer: (props) => props.column.id,
-      }),
-      columnHelper.accessor((row) => row.lastName, {
-        id: 'lastName',
-        cell: (info) => info.getValue(),
-        header: () => 'Last Name',
-        footer: (props) => props.column.id,
-      }),
-    ],
-  }),
-  columnHelper.group({
-    header: 'Info',
-    footer: (props) => props.column.id,
-    columns: [
-      columnHelper.accessor('age', {
-        header: () => 'Age',
-        footer: (props) => props.column.id,
-      }),
-      columnHelper.group({
-        header: 'More Info',
-        columns: [
-          columnHelper.accessor('visits', {
-            header: () => 'Visits',
-            footer: (props) => props.column.id,
-          }),
-          columnHelper.accessor('status', {
-            header: 'Status',
-            footer: (props) => props.column.id,
-          }),
-          columnHelper.accessor('progress', {
-            header: 'Profile Progress',
-            footer: (props) => props.column.id,
-          }),
-        ],
-      }),
-    ],
-  }),
-]
+const columns = ref(
+  columnHelper.columns([
+    columnHelper.group({
+      header: 'Name',
+      footer: (props) => props.column.id,
+      columns: columnHelper.columns([
+        columnHelper.accessor('firstName', {
+          cell: (info) => info.getValue(),
+          footer: (props) => props.column.id,
+        }),
+        columnHelper.accessor((row) => row.lastName, {
+          id: 'lastName',
+          cell: (info) => info.getValue(),
+          header: () => 'Last Name',
+          footer: (props) => props.column.id,
+        }),
+      ]),
+    }),
+    columnHelper.group({
+      header: 'Info',
+      footer: (props) => props.column.id,
+      columns: columnHelper.columns([
+        columnHelper.accessor('age', {
+          header: () => 'Age',
+          footer: (props) => props.column.id,
+        }),
+        columnHelper.group({
+          header: 'More Info',
+          columns: columnHelper.columns([
+            columnHelper.accessor('visits', {
+              header: () => 'Visits',
+              footer: (props) => props.column.id,
+            }),
+            columnHelper.accessor('status', {
+              header: 'Status',
+              footer: (props) => props.column.id,
+            }),
+            columnHelper.accessor('progress', {
+              header: 'Profile Progress',
+              footer: (props) => props.column.id,
+            }),
+          ]),
+        }),
+      ]),
+    }),
+  ]),
+)
 
 const table = useTable({
+  _features,
+  _rowModels: {
+    paginatedRowModel: createPaginatedRowModel(),
+  },
   get data() {
     return data.value
   },
-  columns,
-  getCoreRowModel: createCoreRowModel(),
-  getPaginatedRowModel: createPaginatedRowModel(),
+  get columns() {
+    return columns.value
+  },
+  debugTable: true,
 })
 
 function rerender() {
@@ -110,7 +123,7 @@ function handlePageSizeChange(e: any) {
       </thead>
       <tbody>
         <tr v-for="row in table.getRowModel().rows" :key="row.id">
-          <td v-for="cell in row.getVisibleCells()" :key="cell.id">
+          <td v-for="cell in row.getAllCells()" :key="cell.id">
             <FlexRender
               :render="cell.column.columnDef.cell"
               :props="cell.getContext()"
diff --git a/examples/vue/row-selection/src/App.vue b/examples/vue/row-selection/src/App.vue
index cee1181b56..95b3808238 100644
--- a/examples/vue/row-selection/src/App.vue
+++ b/examples/vue/row-selection/src/App.vue
@@ -1,18 +1,24 @@
 <script setup lang="tsx">
 import {
   FlexRender,
-  createCoreRowModel,
   useTable,
   createColumnHelper,
   RowSelectionState,
+  tableFeatures,
+  rowSelectionFeature,
+  Updater,
 } from '@tanstack/vue-table'
 import { ref } from 'vue'
 import IndeterminateCheckbox from './IndeterminateCheckbox.vue'
 import { makeData, Person } from './makeData'
 
-const columnHelper = createColumnHelper<any, Person>()
+const _features = tableFeatures({
+  rowSelectionFeature,
+})
+
+const columnHelper = createColumnHelper<typeof _features, Person>()
 
-const columns = [
+const columns = columnHelper.columns([
   columnHelper.display({
     id: 'select',
     header: ({ table }) => {
@@ -26,12 +32,14 @@ const columns = [
     },
     cell: ({ row }) => {
       return (
+        // @ts-ignore
         <div className="px-1">
           <IndeterminateCheckbox
             checked={row.getIsSelected()}
             disabled={!row.getCanSelect()}
             onChange={row.getToggleSelectedHandler()}
           ></IndeterminateCheckbox>
+          {/* @ts-ignore */}
         </div>
       ) as any
     },
@@ -39,7 +47,7 @@ const columns = [
   columnHelper.group({
     header: 'Name',
     footer: (props) => props.column.id,
-    columns: [
+    columns: columnHelper.columns([
       columnHelper.accessor('firstName', {
         cell: (info) => info.getValue(),
         footer: (props) => props.column.id,
@@ -50,19 +58,19 @@ const columns = [
         header: () => 'Last Name',
         footer: (props) => props.column.id,
       }),
-    ],
+    ]),
   }),
   columnHelper.group({
     header: 'Info',
     footer: (props) => props.column.id,
-    columns: [
+    columns: columnHelper.columns([
       columnHelper.accessor('age', {
         header: () => 'Age',
         footer: (props) => props.column.id,
       }),
       columnHelper.group({
         header: 'More Info',
-        columns: [
+        columns: columnHelper.columns([
           columnHelper.accessor('visits', {
             header: () => 'Visits',
             footer: (props) => props.column.id,
@@ -75,11 +83,11 @@ const columns = [
             header: 'Profile Progress',
             footer: (props) => props.column.id,
           }),
-        ],
+        ]),
       }),
-    ],
+    ]),
   }),
-]
+])
 
 const data = ref(makeData(10))
 const rowSelection = ref<RowSelectionState>({})
@@ -89,6 +97,8 @@ const rerender = () => {
 }
 
 const table = useTable({
+  _features,
+  _rowModels: {},
   get data() {
     return data.value
   },
@@ -100,13 +110,12 @@ const table = useTable({
   },
   enableRowSelection: true, //enable row selection for all rows
   // enableRowSelection: row => row.original.age > 18, // or enable row selection conditionally per row
-  onRowSelectionChange: (updateOrValue) => {
+  onRowSelectionChange: (updateOrValue: Updater<RowSelectionState>) => {
     rowSelection.value =
       typeof updateOrValue === 'function'
         ? updateOrValue(rowSelection.value)
         : updateOrValue
   },
-  getCoreRowModel: createCoreRowModel(),
 })
 </script>
 
@@ -133,7 +142,7 @@ const table = useTable({
       </thead>
       <tbody>
         <tr v-for="row in table.getRowModel().rows" :key="row.id">
-          <td v-for="cell in row.getVisibleCells()" :key="cell.id">
+          <td v-for="cell in row.getAllCells()" :key="cell.id">
             <FlexRender
               :render="cell.column.columnDef.cell"
               :props="cell.getContext()"
diff --git a/examples/vue/sorting/src/App.vue b/examples/vue/sorting/src/App.vue
index 3e831e8058..8938a87d86 100644
--- a/examples/vue/sorting/src/App.vue
+++ b/examples/vue/sorting/src/App.vue
@@ -20,61 +20,37 @@ const _features = tableFeatures({
 
 const columnHelper = createColumnHelper<typeof _features, Person>()
 
-const columns = [
-  columnHelper.group({
-    header: 'Name',
+const columns = columnHelper.columns([
+  columnHelper.accessor('firstName', {
+    cell: (info) => info.getValue(),
     footer: (props) => props.column.id,
-    columns: [
-      columnHelper.accessor('firstName', {
-        cell: (info) => info.getValue(),
-        footer: (props) => props.column.id,
-      }),
-
-      columnHelper.accessor((row) => row.lastName, {
-        id: 'lastName',
-        cell: (info) => info.getValue(),
-        header: () => h('span', 'Last Name'),
-        footer: (props) => props.column.id,
-      }),
-    ],
   }),
-
-  columnHelper.group({
-    header: 'Info',
+  columnHelper.accessor((row) => row.lastName, {
+    id: 'lastName', 
+    cell: (info) => info.getValue(),
+    header: () => h('span', 'Last Name'),
     footer: (props) => props.column.id,
-
-    columns: [
-      columnHelper.accessor('age', {
-        header: () => 'Age',
-        footer: (props) => props.column.id,
-      }),
-
-      columnHelper.group({
-        header: 'More Info',
-        columns: [
-          columnHelper.accessor('visits', {
-            header: () => h('span', 'Visits'),
-            footer: (props) => props.column.id,
-          }),
-
-          columnHelper.accessor('status', {
-            header: 'Status',
-            footer: (props) => props.column.id,
-          }),
-
-          columnHelper.accessor('progress', {
-            header: 'Profile Progress',
-            footer: (props) => props.column.id,
-          }),
-        ],
-      }),
-
-      columnHelper.accessor('createdAt', {
-        header: 'Created At',
-      }),
-    ],
   }),
-]
+  columnHelper.accessor('age', {
+    header: () => 'Age',
+    footer: (props) => props.column.id,
+  }),
+  columnHelper.accessor('visits', {
+    header: () => h('span', 'Visits'),
+    footer: (props) => props.column.id,
+  }),
+  columnHelper.accessor('status', {
+    header: 'Status',
+    footer: (props) => props.column.id,
+  }),
+  columnHelper.accessor('progress', {
+    header: 'Profile Progress',
+    footer: (props) => props.column.id,
+  }),
+  columnHelper.accessor('createdAt', {
+    header: 'Created At',
+  }),
+])
 
 const data = ref(makeData(10000))
 
diff --git a/examples/vue/sub-components/src/App.vue b/examples/vue/sub-components/src/App.vue
index 0cd88e62cf..b2a97988ff 100644
--- a/examples/vue/sub-components/src/App.vue
+++ b/examples/vue/sub-components/src/App.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import {
   FlexRender,
-  createColumnHelper,
-  createCoreRowModel,
   createExpandedRowModel,
-  useTable,
+  createTableHelper,
+  rowExpandingFeature,
   type ExpandedState,
   type Row,
 } from '@tanstack/vue-table'
 import { Text, h, ref } from 'vue'
+
 type Person = {
   firstName: string
   lastName: string
@@ -17,6 +17,7 @@ type Person = {
   status: string
   progress: number
 }
+
 const defaultData: Person[] = [
   {
     firstName: 'tanner',
@@ -43,8 +44,17 @@ const defaultData: Person[] = [
     progress: 10,
   },
 ]
-const columnHelper = createColumnHelper<any, Person>()
-function renderExpanded(row: Row<any, Person>) {
+
+const tableHelper = createTableHelper({
+  _features: { rowExpandingFeature },
+  _rowModels: {
+    expandedRowModel: createExpandedRowModel(),
+  },
+})
+
+const columnHelper = tableHelper.createColumnHelper<Person>()
+
+function renderExpanded(row: Row<typeof tableHelper.features, Person>) {
   if (!row.getCanExpand()) {
     return h(Text, '🔵')
   }
@@ -57,61 +67,48 @@ function renderExpanded(row: Row<any, Person>) {
     row.getIsExpanded() ? '👇' : '👉',
   )
 }
-const columns = [
-  columnHelper.group({
-    header: 'Name',
+
+const columns = columnHelper.columns([
+  columnHelper.display({
+    id: 'expander',
+    header: () => null,
+    cell: ({ row }) => renderExpanded(row),
+  }),
+  columnHelper.accessor('firstName', {
     footer: (props) => props.column.id,
-    columns: [
-      columnHelper.display({
-        id: 'expander',
-        header: () => null,
-        cell: ({ row }) => renderExpanded(row),
-      }),
-      columnHelper.accessor('firstName', {
-        footer: (props) => props.column.id,
-      }),
-      columnHelper.accessor((row) => row.lastName, {
-        id: 'lastName',
-        cell: (info) => info.getValue(),
-        header: () => 'Last Name',
-        footer: (props) => props.column.id,
-      }),
-    ],
   }),
-  columnHelper.group({
-    header: 'Info',
+  columnHelper.accessor((row) => row.lastName, {
+    id: 'lastName',
+    cell: (info) => info.getValue(),
+    header: () => 'Last Name',
     footer: (props) => props.column.id,
-    columns: [
-      columnHelper.accessor('age', {
-        header: () => 'Age',
-        footer: (props) => props.column.id,
-      }),
-      columnHelper.group({
-        header: 'More Info',
-        columns: [
-          columnHelper.accessor('visits', {
-            header: () => 'Visits',
-            footer: (props) => props.column.id,
-          }),
-          columnHelper.accessor('status', {
-            header: 'Status',
-            footer: (props) => props.column.id,
-          }),
-          columnHelper.accessor('progress', {
-            header: 'Profile Progress',
-            footer: (props) => props.column.id,
-          }),
-        ],
-      }),
-    ],
   }),
-]
+  columnHelper.accessor('age', {
+    header: () => 'Age',
+    footer: (props) => props.column.id,
+  }),
+  columnHelper.accessor('visits', {
+    header: () => 'Visits',
+    footer: (props) => props.column.id,
+  }),
+  columnHelper.accessor('status', {
+    header: 'Status',
+    footer: (props) => props.column.id,
+  }),
+  columnHelper.accessor('progress', {
+    header: 'Profile Progress',
+    footer: (props) => props.column.id,
+  }),
+])
+
 const data = ref(defaultData)
 const expanded = ref<ExpandedState>({})
+
 const rerender = () => {
   data.value = defaultData
 }
-const table = useTable({
+const table = tableHelper.useTable({
+  // features and row models are already defined in the tableHelper
   get data() {
     return data.value
   },
@@ -122,8 +119,6 @@ const table = useTable({
   },
   columns,
   getRowCanExpand: () => true,
-  getCoreRowModel: createCoreRowModel(),
-  getExpandedRowModel: createExpandedRowModel(),
   onExpandedChange: (updaterOrValue) => {
     expanded.value =
       typeof updaterOrValue === 'function'
@@ -157,7 +152,7 @@ const table = useTable({
       <tbody>
         <template v-for="row in table.getRowModel().rows" :key="row.id">
           <tr>
-            <td v-for="cell in row.getVisibleCells()" :key="cell.id">
+            <td v-for="cell in row.getAllCells()" :key="cell.id">
               <FlexRender
                 :render="cell.column.columnDef.cell"
                 :props="cell.getContext()"
diff --git a/examples/vue/virtualized-rows/src/App.vue b/examples/vue/virtualized-rows/src/App.vue
index 2e3bb8ff46..23284d9241 100644
--- a/examples/vue/virtualized-rows/src/App.vue
+++ b/examples/vue/virtualized-rows/src/App.vue
@@ -4,14 +4,21 @@ import { computed, ref, h } from 'vue'
 import {
   type ColumnDef,
   FlexRender,
-  useVueTable,
-  getCoreRowModel,
-  getSortedRowModel,
+  useTable,
+  columnSizingFeature,
+  rowSortingFeature,
+  createSortedRowModel,
+  tableFeatures,
+  sortFns,
 } from '@tanstack/vue-table'
 import { useVirtualizer } from '@tanstack/vue-virtual'
-
 import { makeData, type Person } from './makeData'
 
+const _features = tableFeatures({
+  columnSizingFeature,
+  rowSortingFeature,
+})
+
 const search = ref('')
 
 const data = ref<Person[]>(makeData(50_000))
@@ -44,7 +51,7 @@ function handleDebounceSearch(ev: Event) {
   }, 300)
 }
 
-const columns = computed<ColumnDef<Person>[]>(() => [
+const columns = computed<ColumnDef<typeof _features, Person>[]>(() => [
   {
     accessorKey: 'id',
     header: 'ID',
@@ -82,13 +89,15 @@ const columns = computed<ColumnDef<Person>[]>(() => [
   },
 ])
 
-const table = useVueTable({
+const table = useTable({
+  _features,
+  _rowModels: {
+    sortedRowModel: createSortedRowModel(sortFns),
+  },
   get data() {
     return filteredData.value
   },
   columns: columns.value,
-  getCoreRowModel: getCoreRowModel(),
-  getSortedRowModel: getSortedRowModel(),
   debugTable: false,
 })
 
@@ -210,7 +219,7 @@ function measureElement(el?: Element) {
             }"
           >
             <td
-              v-for="cell in rows[vRow.index].getVisibleCells()"
+              v-for="cell in rows[vRow.index].getAllCells()"
               :key="cell.id"
               :style="{
                 display: 'flex',
diff --git a/packages/svelte-table/src/createTable.svelte.ts b/packages/svelte-table/src/createTable.svelte.ts
index 528b7d5074..cf5a351d76 100644
--- a/packages/svelte-table/src/createTable.svelte.ts
+++ b/packages/svelte-table/src/createTable.svelte.ts
@@ -35,6 +35,8 @@ export function createTable<
     },
   )
 
+  console.log(statefulOptions)
+
   const table = constructTable(statefulOptions)
 
   function updateOptions() {
diff --git a/packages/vue-table/src/FlexRender.ts b/packages/vue-table/src/FlexRender.ts
new file mode 100644
index 0000000000..5fc8626214
--- /dev/null
+++ b/packages/vue-table/src/FlexRender.ts
@@ -0,0 +1,17 @@
+import { defineComponent, h } from 'vue'
+
+export const FlexRender = defineComponent({
+  props: ['render', 'props'],
+  setup: (props: { render: any; props: any }) => {
+    return () => {
+      if (
+        typeof props.render === 'function' ||
+        typeof props.render === 'object'
+      ) {
+        return h(props.render, props.props)
+      }
+
+      return props.render
+    }
+  },
+})
diff --git a/packages/vue-table/src/createTableHelper.ts b/packages/vue-table/src/createTableHelper.ts
new file mode 100644
index 0000000000..b2b392cc98
--- /dev/null
+++ b/packages/vue-table/src/createTableHelper.ts
@@ -0,0 +1,62 @@
+import { constructTableHelper } from '@tanstack/table-core'
+import { useTable } from './useTable'
+import type {
+  RowData,
+  Table,
+  TableFeatures,
+  TableHelperOptions,
+  TableHelper_Core,
+  TableOptions,
+} from '@tanstack/table-core'
+
+export type TableHelper<
+  TFeatures extends TableFeatures,
+  TData extends RowData = any,
+> = Omit<TableHelper_Core<TFeatures, TData>, 'tableCreator'> & {
+  useTable: (
+    tableOptions: Omit<
+      TableOptions<TFeatures, TData>,
+      '_features' | '_rowModels'
+    >,
+  ) => Table<TFeatures, TData>
+}
+
+export function createTableHelper<
+  TFeatures extends TableFeatures,
+  TDataList extends Array<RowData> = Array<any>,
+>(
+  tableHelperOptions: TableHelperOptions<TFeatures, TDataList>,
+): TableHelper<TFeatures, TDataList[number]> {
+  const tableHelper = constructTableHelper(useTable, tableHelperOptions)
+  return {
+    ...tableHelper,
+    useTable: tableHelper.tableCreator,
+  } as unknown as TableHelper<TFeatures, TDataList[number]>
+}
+
+// test
+
+// type Person = {
+//   firstName: string
+//   lastName: string
+//   age: number
+// }
+
+// const tableHelper = createTableHelper({
+//   _features: { rowSelectionFeature: {} },
+//   TData: {} as Person,
+// })
+
+// const columns = [
+//   tableHelper.columnHelper.accessor('firstName', { header: 'First Name' }),
+//   tableHelper.columnHelper.accessor('lastName', { header: 'Last Name' }),
+//   tableHelper.columnHelper.accessor('age', { header: 'Age' }),
+//   tableHelper.columnHelper.display({ header: 'Actions', id: 'actions' }),
+// ] as Array<ColumnDef<typeof tableHelper.features, Person, unknown>>
+
+// const data: Array<Person> = []
+
+// tableHelper.useTable({
+//   columns,
+//   data,
+// })
diff --git a/packages/vue-table/src/index.ts b/packages/vue-table/src/index.ts
index 3efc7ff826..71b1be9b3d 100755
--- a/packages/vue-table/src/index.ts
+++ b/packages/vue-table/src/index.ts
@@ -1,131 +1,4 @@
-import { constructTable, isFunction } from '@tanstack/table-core'
-import {
-  defineComponent,
-  h,
-  isRef,
-  ref,
-  shallowRef,
-  unref,
-  watch,
-  watchEffect,
-} from 'vue'
-import { mergeProxy } from './merge-proxy'
-import type { MaybeRef } from 'vue'
-import type { RowData, TableFeatures, TableOptions } from '@tanstack/table-core'
-
+export * from './FlexRender'
+export * from './useTable'
+export * from './createTableHelper'
 export * from '@tanstack/table-core'
-
-export type TableOptionsWithReactiveData<
-  TFeatures extends TableFeatures,
-  TData extends RowData,
-> = Omit<TableOptions<TFeatures, TData>, 'data'> & {
-  data: MaybeRef<Array<TData>>
-}
-
-export const FlexRender = defineComponent({
-  props: ['render', 'props'],
-  setup: (props: { render: any; props: any }) => {
-    return () => {
-      if (
-        typeof props.render === 'function' ||
-        typeof props.render === 'object'
-      ) {
-        return h(props.render, props.props)
-      }
-
-      return props.render
-    }
-  },
-})
-
-function getOptionsWithReactiveData<
-  TFeatures extends TableFeatures,
-  TData extends RowData,
->(options: TableOptionsWithReactiveData<TFeatures, TData>) {
-  return mergeProxy(options, {
-    data: unref(options.data),
-  })
-}
-
-export function useTable<
-  TFeatures extends TableFeatures,
-  TData extends RowData,
->(initialOptions: TableOptionsWithReactiveData<TFeatures, TData>) {
-  const IS_REACTIVE = isRef(initialOptions.data)
-
-  const resolvedOptions = mergeProxy(
-    {
-      state: {}, // Dummy state
-      onStateChange: () => {}, // noop
-      renderFallbackValue: null,
-      mergeOptions(
-        defaultOptions: TableOptions<TFeatures, TData>,
-        options: TableOptions<TFeatures, TData>,
-      ) {
-        return IS_REACTIVE
-          ? {
-              ...defaultOptions,
-              ...options,
-            }
-          : mergeProxy(defaultOptions, options)
-      },
-    },
-    IS_REACTIVE ? getOptionsWithReactiveData(initialOptions) : initialOptions,
-  )
-
-  const table = constructTable(
-    resolvedOptions as TableOptions<TFeatures, TData>,
-  )
-
-  // Add reactivity support
-  if (IS_REACTIVE) {
-    const dataRef = shallowRef(initialOptions.data)
-    watch(
-      dataRef,
-      () => {
-        table.setState((prev) => ({
-          ...(prev ?? {}),
-          data: dataRef.value,
-        }))
-      },
-      { immediate: true },
-    )
-  }
-
-  // can't use `reactive` because update needs to be immutable
-  const state = ref(table.initialState)
-
-  watchEffect(() => {
-    table.setOptions((prev: any) => {
-      const stateProxy = new Proxy({} as typeof state.value, {
-        get: (_, prop) => state.value[prop as keyof typeof state.value],
-      })
-
-      return mergeProxy(
-        prev,
-        IS_REACTIVE
-          ? getOptionsWithReactiveData(initialOptions)
-          : initialOptions,
-        {
-          // merge the initialState and `options.state`
-          // create a new proxy on each `setOptions` call
-          // and get the value from state on each property access
-          state: mergeProxy(stateProxy, initialOptions.state ?? {}),
-          // Similarly, we'll maintain both our internal state and any user-provided
-          // state.
-          onStateChange: (updater: any) => {
-            if (isFunction(updater)) {
-              state.value = updater(state.value)
-            } else {
-              state.value = updater
-            }
-
-            initialOptions.onStateChange?.(updater)
-          },
-        },
-      )
-    })
-  })
-
-  return table
-}
diff --git a/packages/vue-table/src/useTable.ts b/packages/vue-table/src/useTable.ts
new file mode 100644
index 0000000000..44ff20c9f2
--- /dev/null
+++ b/packages/vue-table/src/useTable.ts
@@ -0,0 +1,108 @@
+import { isRef, ref, shallowRef, unref, watch, watchEffect } from 'vue'
+import {
+  constructTable,
+  coreFeatures,
+  getInitialTableState,
+  isFunction,
+} from '@tanstack/table-core'
+import { mergeProxy } from './merge-proxy'
+import type { RowData, TableFeatures, TableOptions } from '@tanstack/table-core'
+import type { MaybeRef } from 'vue'
+
+export type TableOptionsWithReactiveData<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+> = Omit<TableOptions<TFeatures, TData>, 'data'> & {
+  data: MaybeRef<Array<TData>>
+}
+
+function getOptionsWithReactiveData<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(options: TableOptionsWithReactiveData<TFeatures, TData>) {
+  return mergeProxy(options, {
+    data: unref(options.data),
+  })
+}
+
+export function useTable<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(tableOptions: TableOptionsWithReactiveData<TFeatures, TData>) {
+  const _features = { ...coreFeatures, ...tableOptions._features }
+
+  const IS_REACTIVE = isRef(tableOptions.data)
+
+  // can't use `reactive` because update needs to be immutable
+  const state = ref(getInitialTableState(_features, tableOptions.initialState))
+
+  const statefulOptions = mergeProxy(
+    IS_REACTIVE ? getOptionsWithReactiveData(tableOptions) : tableOptions,
+    {
+      _features,
+      state,
+      mergeOptions(
+        defaultOptions: TableOptions<TFeatures, TData>,
+        newOptions: TableOptions<TFeatures, TData>,
+      ) {
+        return IS_REACTIVE
+          ? {
+              ...defaultOptions,
+              ...newOptions,
+            }
+          : mergeProxy(defaultOptions, newOptions)
+      },
+    },
+  )
+
+  const table = constructTable(
+    statefulOptions as TableOptions<TFeatures, TData>,
+  )
+
+  // Add reactivity support
+  if (IS_REACTIVE) {
+    const dataRef = shallowRef(tableOptions.data)
+    watch(
+      dataRef,
+      () => {
+        table.setState((prev) => ({
+          ...prev,
+          data: dataRef.value,
+        }))
+      },
+      { immediate: true },
+    )
+  }
+
+  watchEffect(() => {
+    table.setOptions((prev: any) => {
+      const stateProxy = new Proxy({} as typeof state.value, {
+        get: (_, prop) => state.value[prop as keyof typeof state.value],
+      })
+
+      return mergeProxy(
+        prev,
+        IS_REACTIVE ? getOptionsWithReactiveData(tableOptions) : tableOptions,
+        {
+          // merge the initialState and `options.state`
+          // create a new proxy on each `setOptions` call
+          // and get the value from state on each property access
+          state: mergeProxy(stateProxy, tableOptions.state ?? {}),
+          // Similarly, we'll maintain both our internal state and any user-provided
+          // state.
+          onStateChange: (updater: any) => {
+            if (isFunction(updater)) {
+              state.value = updater(state.value)
+            } else {
+              state.value = updater
+            }
+
+            tableOptions.onStateChange?.(updater)
+          },
+        },
+      )
+    })
+  })
+
+  return table
+}