chore: update more examples

Author: KevinVandy

examples/react/editable-data/src/main.tsx

@@ -6,6 +6,7 @@ import {
   createFilteredRowModel,
   createPaginatedRowModel,
   flexRender,
+  tableFeatures,
   tableOptions,
   useTable,
 } from '@tanstack/react-table'
@@ -20,8 +21,10 @@ import type {
 import type { Person } from './makeData'
 import './index.css'
 
-const options = tableOptions({
-  _features: { RowPagination, ColumnFiltering },
+const _features = tableFeatures({ RowPagination, ColumnFiltering })
+
+const options = tableOptions<typeof _features, Person>({
+  _features,
   _rowModels: {
     Filtered: createFilteredRowModel(),
     Paginated: createPaginatedRowModel(),

examples/react/expanding/src/main.tsx

@@ -1,14 +1,16 @@
 import React, { type HTMLProps } from 'react'
 import ReactDOM from 'react-dom/client'
-
-import './index.css'
-
 import {
+  ColumnFiltering,
+  RowExpanding,
+  RowPagination,
+  RowSorting,
   createCoreRowModel,
   createFilteredRowModel,
   createPaginatedRowModel,
   createSortedRowModel,
   flexRender,
+  tableFeatures,
   useTable,
 } from '@tanstack/react-table'
 import { makeData } from './makeData'
@@ -19,11 +21,19 @@ import type {
   ExpandedState,
   Table,
 } from '@tanstack/react-table'
+import './index.css'
+
+const _features = tableFeatures({
+  ColumnFiltering,
+  RowExpanding,
+  RowPagination,
+  RowSorting,
+})
 
 function App() {
   const rerender = React.useReducer(() => ({}), {})[1]
 
-  const columns = React.useMemo<Array<ColumnDef<any, Person>>>(
+  const columns = React.useMemo<Array<ColumnDef<typeof _features, Person>>>(
     () => [
       {
         accessorKey: 'firstName',
@@ -119,6 +129,7 @@ function App() {
   const [expanded, setExpanded] = React.useState<ExpandedState>({})
 
   const table = useTable({
+    _features,
     _rowModels: {
       Core: createCoreRowModel(),
       Filtered: createFilteredRowModel(),
@@ -266,8 +277,8 @@ function Filter({
   column,
   table,
 }: {
-  column: Column<any, any>
-  table: Table<any, any>
+  column: Column<typeof _features, Person>
+  table: Table<typeof _features, Person>
 }) {
   const firstValue = table
     .getPreFilteredRowModel()

examples/react/filters-fuzzy/src/main.tsx

@@ -4,12 +4,16 @@ import ReactDOM from 'react-dom/client'
 import './index.css'
 
 import {
+  ColumnFiltering,
+  RowPagination,
+  RowSorting,
   createCoreRowModel,
   createFilteredRowModel,
   createPaginatedRowModel,
   createSortedRowModel,
   flexRender,
   sortingFns,
+  tableFeatures,
   useTable,
 } from '@tanstack/react-table'
 import { compareItems, rankItem } from '@tanstack/match-sorter-utils'
@@ -27,18 +31,29 @@ import type { RankingInfo } from '@tanstack/match-sorter-utils'
 
 import type { Person } from './makeData'
 
+const _features = tableFeatures({
+  ColumnFiltering,
+  RowSorting,
+  RowPagination,
+})
+
 declare module '@tanstack/react-table' {
   //add fuzzy filter to the filterFns
   interface FilterFns {
-    fuzzy: FilterFn<unknown>
+    fuzzy: FilterFn<typeof _features, unknown>
   }
   interface FilterMeta {
     itemRank?: RankingInfo
   }
 }
 
 // Define a custom fuzzy filter function that will apply ranking info to rows (using match-sorter utils)
-const fuzzyFilter: FilterFn<any> = (row, columnId, value, addMeta) => {
+const fuzzyFilter: FilterFn<typeof _features, any> = (
+  row,
+  columnId,
+  value,
+  addMeta,
+) => {
   // Rank the item
   const itemRank = rankItem(row.getValue(columnId), value)
 
@@ -52,7 +67,7 @@ const fuzzyFilter: FilterFn<any> = (row, columnId, value, addMeta) => {
 }
 
 // Define a custom fuzzy sort function that will sort by rank if the row has ranking information
-const fuzzySort: SortingFn<any> = (rowA, rowB, columnId) => {
+const fuzzySort: SortingFn<typeof _features, any> = (rowA, rowB, columnId) => {
   let dir = 0
 
   // Only sort by rank if the column has ranking information
@@ -75,7 +90,7 @@ function App() {
   )
   const [globalFilter, setGlobalFilter] = React.useState<string | undefined>('')
 
-  const columns = React.useMemo<Array<ColumnDef<any, Person>>>(
+  const columns = React.useMemo<Array<ColumnDef<typeof _features, Person>>>(
     () => [
       {
         accessorKey: 'id',
@@ -109,7 +124,8 @@ function App() {
   const [data, setData] = React.useState<Array<Person>>(() => makeData(5_000))
   const refreshData = () => setData((_old) => makeData(50_000)) //stress test
 
-  const table = useTable({
+  const table = useTable<typeof _features, Person>({
+    _features,
     _rowModels: {
       Core: createCoreRowModel(),
       Filtered: createFilteredRowModel(),
@@ -294,7 +310,7 @@ function App() {
   )
 }
 
-function Filter({ column }: { column: Column<any, unknown> }) {
+function Filter({ column }: { column: Column<typeof _features, Person> }) {
   const columnFilterValue = column.getFilterValue()
 
   return (

examples/react/filters/src/main.tsx

@@ -12,6 +12,7 @@ import {
   createPaginatedRowModel,
   createSortedRowModel,
   flexRender,
+  tableFeatures,
   useTable,
 } from '@tanstack/react-table'
 import { makeData } from './makeData'
@@ -37,14 +38,18 @@ declare module '@tanstack/react-table' {
   }
 }
 
+const _features = tableFeatures({ ColumnFiltering, RowSorting, RowPagination })
+
 function App() {
   const rerender = React.useReducer(() => ({}), {})[1]
 
   const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
     [],
   )
 
-  const columns = React.useMemo<Array<ColumnDef<any, Person, any>>>(
+  const columns = React.useMemo<
+    Array<ColumnDef<typeof _features, Person, any>>
+  >(
     () => [
       {
         accessorKey: 'firstName',
@@ -98,7 +103,7 @@ function App() {
   const refreshData = () => setData((_old) => makeData(50_000)) //stress test
 
   const table = useTable({
-    _features: { ColumnFiltering, RowSorting, RowPagination },
+    _features,
     _rowModels: {
       Core: createCoreRowModel(),
       Filtered: createFilteredRowModel(), //client side filtering