lay ground work for better feature type inference

Author: KevinVandy

examples/react/custom-features/src/main.tsx

@@ -21,11 +21,8 @@ import type {
   Column,
   ColumnDef,
   OnChangeFn,
-  RowData,
   Table,
   TableFeature,
-  TableFeatures,
-  TableState,
   Updater,
 } from '@tanstack/react-table'
 import type { Person } from './makeData'
@@ -50,66 +47,34 @@ export interface Table_Density {
   toggleDensity: (value?: DensityState) => void
 }
 
-// Use declaration merging to add our new feature APIs and state types to TanStack Table's existing types.
-declare module '@tanstack/react-table' {
-  // declare our new feature as a plugin
-  interface Plugins {
-    densityPlugin: TableFeature
-  }
-  // merge our new feature's state with the existing table state
-  interface TableState_Plugins extends TableState_Density {}
-  // merge our new feature's options with the existing table options
-  interface TableOptions_Plugins extends TableOptions_Density {}
-  // merge our new feature's instance APIs with the existing table instance APIs
-  interface Table_Plugins extends Table_Density {}
-  // if you need to add cell instance APIs...
-  // interface Cell_Plugins extends Cell_Density {}
-  // if you need to add row instance APIs...
-  // interface Row_Plugins extends Row_Density {}
-  // if you need to add column instance APIs...
-  // interface Column_Plugins extends Column_Density {}
-  // if you need to add header instance APIs...
-  // interface Header_Plugins extends Header_Density {}
-
-  // Note: declaration merging on `ColumnDef` is not possible because it is a type, not an interface.
-  // But you can still use declaration merging on `ColumnDef.meta`
-}
-
-// end of TS setup!
-
 // Here is all of the actual javascript code for our new feature
-export const densityPlugin: TableFeature = {
+export const densityPlugin: TableFeature<{
+  Table: Table_Density
+  TableOptions: TableOptions_Density
+  TableState: TableState_Density
+}> = {
   // define the new feature's initial state
-  getInitialState: <TFeatures extends TableFeatures>(
-    initialState: Partial<TableState<TFeatures>>,
-  ): Partial<TableState<TFeatures>> => {
+  getInitialState: (initialState) => {
     return {
       density: 'md',
       ...initialState, // must come last
     }
   },
 
   // define the new feature's default options
-  getDefaultTableOptions: <
-    TFeatures extends TableFeatures,
-    TData extends RowData,
-  >(
-    table: Table<TFeatures, TData>,
-  ): TableOptions_Density => {
+  getDefaultTableOptions: (table) => {
     return {
       enableDensity: true,
       onDensityChange: makeStateUpdater('density', table),
-    } as TableOptions_Density
+    }
   },
   // if you need to add a default column definition...
   // getDefaultColumnDef: <TFeatures extends TableFeatures,  TData extends RowData>(): Partial<ColumnDef<TFeatures, TData>> => {
   //   return { meta: {} } //use meta instead of directly adding to the columnDef to avoid typescript stuff that's hard to workaround
   // },
 
   // define the new feature's table instance methods
-  constructTableAPIs: <TFeatures extends TableFeatures, TData extends RowData>(
-    table: Table<TFeatures, TData>,
-  ): void => {
+  constructTableAPIs: (table) => {
     table.setDensity = (updater) => {
       const safeUpdater: Updater<DensityState> = (old) => {
         const newState = functionalUpdate(updater, old)

examples/svelte/basic-table-helper/src/App.svelte

@@ -46,7 +46,6 @@
   const tableHelper = createTableHelper({
     _features: { columnSizingFeature: {} },
     _rowModels: {}, // client-side row models. `Core` row model is now included by default, but you can still override it here
-
     debugTable: true,
     // TData: {} as Person, // optionally, set the TData type for the table helper. Omit if this will be a table helper for multiple tables of all different data types
   })

examples/svelte/basic-table-helper/src/main.ts

@@ -1,4 +1,4 @@
-// @ts-ignore
+// @ts-ignore - Svelte mount types not properly recognized
 import { mount } from 'svelte'
 import App from './App.svelte'
 

examples/svelte/column-ordering/src/App.svelte

@@ -21,7 +21,7 @@
     columnVisibilityFeature,
   })
 
-  const columns: ColumnDef<any, Person>[] = [
+  const columns: ColumnDef<typeof _features, Person>[] = [
     {
       header: 'Name',
       footer: (props) => props.column.id,

examples/svelte/filtering/src/App.svelte

@@ -39,7 +39,7 @@
     return itemRank.passed
   }
 
-  const columns: ColumnDef<any, Person>[] = [
+  const columns: ColumnDef<typeof _features, Person>[] = [
     {
       accessorFn: (row) => `${row.firstName} ${row.lastName}`,
       id: 'fullName',
@@ -75,7 +75,6 @@
     },
     onGlobalFilterChange: setGlobalFilter,
     globalFilterFn: fuzzyFilter,
-    enableMultiRowSelection: true,
   })
 
   $effect(() => {

examples/svelte/sorting/src/App.svelte

@@ -5,8 +5,10 @@
     createSortedRowModel,
     createTable,
     createTableState,
+    rowSortingFeature,
     renderComponent,
     sortFns,
+    tableFeatures,
   } from '@tanstack/svelte-table'
   import Header from './Header.svelte'
   import './index.css'

examples/svelte/sorting/src/Header.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { Header, rowSortingFeature } from '@tanstack/svelte-table'
+  import type { Header } from '@tanstack/svelte-table'
   import type { Person } from './makeData'
   import type { _features } from './tableHelper.svelte'
 

examples/vue/basic/src/App.vue

@@ -4,6 +4,7 @@ import {
   createCoreRowModel,
   useTable,
   createColumnHelper,
+  tableFeatures,
 } from '@tanstack/vue-table'
 import { ref } from 'vue'
 
@@ -43,7 +44,9 @@ const defaultData: Person[] = [
   },
 ]
 
-const columnHelper = createColumnHelper<any, Person>()
+const _features = tableFeatures({})
+
+const columnHelper = createColumnHelper<typeof _features, Person>()
 
 const columns = [
   columnHelper.group({

examples/vue/column-ordering/src/App.vue

@@ -7,59 +7,66 @@ import {
   type Column,
   createColumnHelper,
   type ColumnVisibilityState,
+  columnOrderingFeature,
+  tableFeatures,
 } from '@tanstack/vue-table'
 import { makeData, type Person } from './makeData'
 import { ref } from 'vue'
 import { faker } from '@faker-js/faker'
 
-const columnHelper = createColumnHelper<any, Person>()
+const _features = tableFeatures({ columnOrderingFeature })
+
+const columnHelper = createColumnHelper<typeof _features, Person>()
 
 const data = ref(makeData(20))
-const columns = ref([
-  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.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 columnVisibility = ref<ColumnVisibilityState>({})
 const columnOrder = ref<ColumnOrderState>([])

examples/vue/column-pinning/src/App.vue

@@ -4,6 +4,9 @@ import {
   FlexRender,
   createCoreRowModel,
   useTable,
+  columnPinningFeature,
+  tableFeatures,
+  columnVisibilityFeature,
 } from '@tanstack/vue-table'
 import type {
   Column,
@@ -16,7 +19,12 @@ import { faker } from '@faker-js/faker'
 
 const data = ref(makeData(5000))
 
-const columnHelper = createColumnHelper<any, Person>()
+const _features = tableFeatures({
+  columnPinningFeature,
+  columnVisibilityFeature,
+})
+
+const columnHelper = createColumnHelper<typeof _features, Person>()
 
 const columns = ref([
   columnHelper.group({
@@ -116,7 +124,7 @@ const randomizeColumns = () => {
   )
 }
 
-function toggleColumnVisibility(column: Column<any, any>) {
+function toggleColumnVisibility(column: Column<typeof _features, Person>) {
   columnVisibility.value = {
     ...columnVisibility.value,
     [column.id]: !column.getIsVisible(),