fix vue adapter and examples for v9

TanStack · Jan 4, 2025 · ed22471 · ed22471
1 parent 2612dbc
commit ed22471
Show file tree

Hide file tree

Showing 18 changed files with 579 additions and 493 deletions.
diff --git 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
@@ -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
@@ -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,