feat: more succinct createTable/Factory API

docs/api/useFilters.md

@@ -27,7 +27,7 @@ The following options are supported via the main options object passed to `useTa
   - Optional
   - Defaults to `false`
   - If set to `true`, all columns will be filterable, regardless if they have a valid `accessor`
-- `filterTypes: Object<filterKey: filterType>`
+- `filterFns: Object<filterKey: filterFn>`
   - Must be **memoized**
   - Allows overriding or adding additional filter types for columns to use. If a column's filter type isn't found on this object, it will default to using the built-in filter types.
   - For more information on filter types, see Filtering
@@ -58,7 +58,7 @@ The following options are supported on any `Column` object passed to the `column
   - Optional
   - Defaults to `text`
   - The resolved function from the this string/function will be used to filter the this column's data.
-    - If a `string` is passed, the function with that name located on either the custom `filterTypes` option or the built-in filtering types object will be used. If
+    - If a `string` is passed, the function with that name located on either the custom `filterFns` option or the built-in filtering types object will be used. If
     - If a `function` is passed, it will be used directly.
   - For more information on filter types, see Filtering
   - If a **function** is passed, it must be **memoized**

docs/api/useGlobalFilter.md

@@ -22,7 +22,7 @@ The following options are supported via the main options object passed to `useTa
   - Optional
   - Defaults to `text`
   - The resolved function from the this string/function will be used to filter the table's data.
-    - If a `string` is passed, the function with that name located on either the custom `filterTypes` option or the built-in filtering types object will be used. If
+    - If a `string` is passed, the function with that name located on either the custom `filterFns` option or the built-in filtering types object will be used. If
     - If a `function` is passed, it will be used directly.
   - For more information on filter types, see Filtering
   - If a **function** is passed, it must be **memoized**
@@ -31,7 +31,7 @@ The following options are supported via the main options object passed to `useTa
   - Turn this on if you wish to implement your own row filter outside of the table (eg. server-side or manual row grouping/nesting)
 - `disableGlobalFilter: Bool`
   - Disables global filtering for every column in the entire table.
-- `filterTypes: Object<filterKey: filterType>`
+- `filterFns: Object<filterKey: filterFn>`
   - Must be **memoized**
   - Allows overriding or adding additional filter types for the table to use. If the globalFilter type isn't found on this object, it will default to using the built-in filter types.
   - For more information on filter types, see Filtering

docs/api/useSortBy.md

@@ -46,7 +46,7 @@ The following options are supported via the main options object passed to `useTa
   - Must be **memoized**
   - Defaults to the built-in default orderBy function
   - This function is responsible for composing multiple sorting functions together for multi-sorting, and also handles both the directional sorting and stable-sorting tie breaking. Rarely would you want to override this function unless you have a very advanced use-case that requires it.
-- `sortTypes: Object<sortKey: sortType>`
+- `sortingFns: Object<sortKey: sortingFn>`
   - Must be **memoized**
   - Allows overriding or adding additional sort types for columns to use. If a column's sort type isn't found on this object, it will default to using the built-in sort types.
   - For more information on sort types, see Sorting
@@ -78,12 +78,12 @@ The following options are supported on any `Column` object passed to the `column
   - Defaults to `false`
   - If set to `true`, the underlying sorting direction will be inverted, but the UI will not.
   - This may be useful in situations where positive and negative connotation is inverted, eg. a Golfing score where a lower score is considered more positive than a higher one.
-- `sortType: String | Function(rowA: <Row>, rowB: <Row>, columnId: String, desc: Bool)`
+- `sortingFn: String | Function(rowA: <Row>, rowB: <Row>, columnId: String, desc: Bool)`
   - Used to compare 2 rows of data and order them correctly.
   - If a **function** is passed, it must be **memoized**
   - String options: `basic`, `datetime`, `alphanumeric`. Defaults to `alphanumeric`.
   - The resolved function from the this string/function will be used to sort the this column's data.
-    - If a `string` is passed, the function with that name located on either the custom `sortTypes` option or the built-in sorting types object will be used.
+    - If a `string` is passed, the function with that name located on either the custom `sortingFns` option or the built-in sorting types object will be used.
     - If a `function` is passed, it will be used.
   - For more information on sort types, see Sorting
 

examples/basic/src/main.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import ReactDOM from 'react-dom'
 
 import './index.css'
@@ -18,6 +18,8 @@ type Person = {
   progress: number
 }
 
+const table = createTable().setRowType<Person>()
+
 const defaultData: Person[] = [
   {
     firstName: 'tanner',
@@ -45,8 +47,6 @@ const defaultData: Person[] = [
   },
 ]
 
-const table = createTable<{ Row: Person }>()
-
 const defaultColumns = table.createColumns([
   table.createGroup({
     header: 'Name',

examples/column-ordering/src/main.tsx

@@ -11,7 +11,7 @@ import {
 } from '@tanstack/react-table'
 import { makeData, Person } from './makeData'
 
-let table = createTable<{ Row: Person }>()
+let table = createTable().setRowType<Person>()
 
 const defaultColumns = table.createColumns([
   table.createGroup({

examples/column-pinning/src/main.tsx

@@ -12,7 +12,7 @@ import {
 } from '@tanstack/react-table'
 import { makeData, Person } from './makeData'
 
-let table = createTable<{ Row: Person }>()
+let table = createTable().setRowType<Person>()
 
 const defaultColumns = table.createColumns([
   table.createGroup({

examples/column-sizing/src/main.tsx

@@ -46,7 +46,7 @@ const defaultData: Person[] = [
   },
 ]
 
-let table = createTable<{ Row: Person }>()
+let table = createTable().setRowType<Person>()
 
 const defaultColumns = table.createColumns([
   table.createGroup({

examples/column-visibility/src/main.tsx

@@ -45,7 +45,7 @@ const defaultData: Person[] = [
   },
 ]
 
-let table = createTable<{ Row: Person }>()
+let table = createTable().setRowType<Person>()
 
 const defaultColumns = table.createColumns([
   table.createGroup({

examples/editable-data/src/main.tsx

@@ -17,13 +17,12 @@ import {
 } from '@tanstack/react-table'
 import { makeData, Person } from './makeData'
 
-let table = createTable<{
-  Row: Person
-  TableMeta: {
-    // We can tell our table about a custom "updateData" method we will provide it
+let table = createTable()
+  .setRowType<Person>()
+  // In addition to our row type, we can also tell our table about a custom "updateData" method we will provide it
+  .setTableMetaType<{
     updateData: (rowIndex: number, columnId: string, value: unknown) => void
-  }
-}>()
+  }>()
 
 // Get our table generics
 type TableGenerics = typeof table.generics

examples/expanding/src/main.tsx

@@ -16,7 +16,7 @@ import {
 } from '@tanstack/react-table'
 import { makeData, Person } from './makeData'
 
-let table = createTable<{ Row: Person }>()
+let table = createTable().setRowType<Person>()
 
 function App() {
   const rerender = React.useReducer(() => ({}), {})[1]

examples/filters/src/main.tsx

@@ -16,7 +16,7 @@ import {
 
 import { makeData, Person } from './makeData'
 
-let table = createTable<{ Row: Person }>()
+let table = createTable().setRowType<Person>()
 
 function App() {
   const rerender = React.useReducer(() => ({}), {})[1]

examples/fully-controlled/src/main.tsx

@@ -47,7 +47,7 @@ const defaultData: Person[] = [
   },
 ]
 
-const table = createTable<{ Row: Person }>()
+const table = createTable().setRowType<Person>()
 
 const defaultColumns = table.createColumns([
   table.createGroup({

examples/grouping/src/main.tsx

@@ -17,7 +17,7 @@ import {
 } from '@tanstack/react-table'
 import { makeData, Person } from './makeData'
 
-let table = createTable<{ Row: Person }>()
+let table = createTable().setRowType<Person>()
 
 function App() {
   const rerender = React.useReducer(() => ({}), {})[1]

examples/pagination/src/main.tsx

@@ -18,7 +18,7 @@ import {
 } from '@tanstack/react-table'
 import { makeData, Person } from './makeData'
 
-let table = createTable<{ Row: Person }>()
+let table = createTable().setRowType<Person>()
 
 function App() {
   const rerender = React.useReducer(() => ({}), {})[1]

examples/row-selection/src/main.tsx

@@ -16,7 +16,7 @@ import {
   useTableInstance,
 } from '@tanstack/react-table'
 
-let table = createTable<{ Row: Person }>()
+let table = createTable().setRowType<Person>()
 
 function App() {
   const rerender = React.useReducer(() => ({}), {})[1]

examples/sorting/src/main.tsx

@@ -11,7 +11,7 @@ import {
 } from '@tanstack/react-table'
 import { makeData, Person } from './makeData'
 
-let table = createTable<{ Row: Person }>()
+let table = createTable().setRowType<Person>()
 
 function App() {
   const rerender = React.useReducer(() => ({}), {})[1]