diff --git a/docs/api/core/table.md b/docs/api/core/table.md index e5cf07c793..18c1e18a91 100644 --- a/docs/api/core/table.md +++ b/docs/api/core/table.md @@ -2,7 +2,7 @@ title: Table APIs --- -## `createAngularTable` / `useReactTable` / `createSolidTable` / `useQwikTable` / `useVueTable` / `createSvelteTable` +## `createAngularTable` / `useReactTable` / `useSolidTable` / `useQwikTable` / `useVueTable` / `createSvelteTable` ```tsx type useReactTable = ( diff --git a/docs/framework/solid/guide/table-state.md b/docs/framework/solid/guide/table-state.md index f5d2f1a62c..ddb08b86f9 100644 --- a/docs/framework/solid/guide/table-state.md +++ b/docs/framework/solid/guide/table-state.md @@ -11,7 +11,7 @@ TanStack Table has a simple underlying internal state management system to store You do not need to set up anything special in order for the table state to work. If you pass nothing into either `state`, `initialState`, or any of the `on[State]Change` table options, the table will manage its own state internally. You can access any part of this internal state by using the `table.getState()` table instance API. ```jsx -const table = createSolidTable({ +const table = useSolidTable({ columns, get data() { return data() @@ -28,7 +28,7 @@ console.log(table.getState().rowSelection) //access just the row selection state If all you need to do for certain states is customize their initial default values, you still do not need to manage any of the state yourself. You can simply set values in the `initialState` option of the table instance. ```jsx -const table = createSolidTable({ +const table = useSolidTable({ columns, data, initialState: { @@ -67,7 +67,7 @@ const [columnFilters, setColumnFilters] = createSignal([]) //no default filters const [sorting, setSorting] = createSignal([{ id: 'age', desc: true, //sort by age in descending order by default -}]) +}]) const [pagination, setPagination] = createSignal({ pageIndex: 0, pageSize: 15 }) //Use our controlled state values to fetch data @@ -77,7 +77,7 @@ const tableQuery = createQuery({ //... }) -const table = createSolidTable({ +const table = useSolidTable({ columns, get data() { return tableQuery.data() @@ -109,7 +109,7 @@ A couple of more tricks may be needed to make this work. If you use the `onState ```jsx //create a table instance with default state values -const table = createSolidTable({ +const table = useSolidTable({ columns, get data() { return data() @@ -147,7 +147,7 @@ Specifying an `on[State]Change` callback tells the table instance that this will ```jsx const [sorting, setSorting] = createSignal([]) //... -const table = createSolidTable({ +const table = useSolidTable({ columns, data, //... @@ -170,7 +170,7 @@ What implications does this have? It means that if you want to add in some extra const [sorting, setSorting] = createSignal([]) const [pagination, setPagination] = createSignal({ pageIndex: 0, pageSize: 10 }) -const table = createSolidTable({ +const table = useSolidTable({ get columns() { return columns() }, @@ -210,7 +210,7 @@ const table = createSolidTable({ All complex states in TanStack Table have their own TypeScript types that you can import and use. This can be handy for ensuring that you are using the correct data structures and properties for the state values that you are controlling. ```tsx -import { createSolidTable, type SortingState } from '@tanstack/solid-table' +import { useSolidTable, type SortingState } from '@tanstack/solid-table' //... const [sorting, setSorting] = createSignal([ { @@ -218,4 +218,4 @@ const [sorting, setSorting] = createSignal([ desc: true, } ]) -``` \ No newline at end of file +``` diff --git a/docs/framework/solid/solid-table.md b/docs/framework/solid/solid-table.md index dc5afc392e..e9ffb3ce90 100644 --- a/docs/framework/solid/solid-table.md +++ b/docs/framework/solid/solid-table.md @@ -4,15 +4,15 @@ title: Solid Table The `@tanstack/solid-table` adapter is a wrapper around the core table logic. Most of it's job is related to managing state the "solid" way, providing types and the rendering implementation of cell/header/footer templates. -## `createSolidTable` +## `useSolidTable` Takes an `options` object and returns a table. ```tsx -import { createSolidTable } from '@tanstack/solid-table' +import { useSolidTable } from '@tanstack/solid-table' function App() { - const table = createSolidTable(options) + const table = useSolidTable(options) // ...render your table } diff --git a/docs/guide/tables.md b/docs/guide/tables.md index ff0f6c5468..c225bc1819 100644 --- a/docs/guide/tables.md +++ b/docs/guide/tables.md @@ -8,7 +8,7 @@ title: Table Instance Guide ## Table Instance Guide -TanStack Table is a headless UI library. When we talk about the `table` or "table instance", we're not talking about a literal `` element. Instead, we're referring to the core table object that contains the table state and APIs. The `table` instance is created by calling your adapter's `createTable` function (e.g. `useReactTable`, `useVueTable`, `createSolidTable`, `createSvelteTable`, `createAngularTable`, `useQwikTable`). +TanStack Table is a headless UI library. When we talk about the `table` or "table instance", we're not talking about a literal `
` element. Instead, we're referring to the core table object that contains the table state and APIs. The `table` instance is created by calling your adapter's `createTable` function (e.g. `useReactTable`, `useVueTable`, `useSolidTable`, `createSvelteTable`, `createAngularTable`, `useQwikTable`). The `table` instance that is returned from the `createTable` function (from the framework adapter) is the main object that you will interact with to read and mutate the table state. It is the one place where everything happens in TanStack Table. When you get to the point where you are rendering your UI, you will use APIs from this `table` instance. @@ -63,7 +63,7 @@ const table = useQwikTable({ columns, data, getCoreRowModel: getCoreRowModel() } const table = useReactTable({ columns, data, getCoreRowModel: getCoreRowModel() }) //solid -const table = createSolidTable({ columns, get data() { return data() }, getCoreRowModel: getCoreRowModel() }) +const table = useSolidTable({ columns, get data() { return data() }, getCoreRowModel: getCoreRowModel() }) //svelte const table = createSvelteTable({ columns, data, getCoreRowModel: getCoreRowModel() }) diff --git a/examples/solid/basic/src/App.tsx b/examples/solid/basic/src/App.tsx index 8a988dcfc0..b14ce3a1ab 100644 --- a/examples/solid/basic/src/App.tsx +++ b/examples/solid/basic/src/App.tsx @@ -2,7 +2,7 @@ import { flexRender, getCoreRowModel, ColumnDef, - createSolidTable, + useSolidTable, } from '@tanstack/solid-table' import { createSignal, For } from 'solid-js' @@ -81,7 +81,7 @@ function App() { const [data, setData] = createSignal(defaultData) const rerender = () => setData(defaultData) - const table = createSolidTable({ + const table = useSolidTable({ get data() { return data() }, diff --git a/examples/solid/bootstrap/src/App.tsx b/examples/solid/bootstrap/src/App.tsx index 781adc6daa..92ed209993 100644 --- a/examples/solid/bootstrap/src/App.tsx +++ b/examples/solid/bootstrap/src/App.tsx @@ -2,7 +2,7 @@ import { flexRender, getCoreRowModel, ColumnDef, - createSolidTable, + useSolidTable, } from '@tanstack/solid-table' import { createSignal, For } from 'solid-js' import { makeData, Person } from './makeData' @@ -66,7 +66,7 @@ function App() { const [data, setData] = createSignal(makeData(10)) const rerender = () => setData(makeData(10)) - const table = createSolidTable({ + const table = useSolidTable({ get data() { return data() }, diff --git a/examples/solid/column-groups/src/App.tsx b/examples/solid/column-groups/src/App.tsx index 27e9526967..996fb66760 100644 --- a/examples/solid/column-groups/src/App.tsx +++ b/examples/solid/column-groups/src/App.tsx @@ -2,7 +2,7 @@ import { flexRender, getCoreRowModel, ColumnDef, - createSolidTable, + useSolidTable, } from '@tanstack/solid-table' import { createSignal, For } from 'solid-js' @@ -98,7 +98,7 @@ function App() { const [data, setData] = createSignal(defaultData) const rerender = () => setData(defaultData) - const table = createSolidTable({ + const table = useSolidTable({ get data() { return data() }, diff --git a/examples/solid/column-ordering/src/App.tsx b/examples/solid/column-ordering/src/App.tsx index f09d5a9ee0..0b3e47a703 100644 --- a/examples/solid/column-ordering/src/App.tsx +++ b/examples/solid/column-ordering/src/App.tsx @@ -7,7 +7,7 @@ import { ColumnOrderState, VisibilityState, ColumnDef, - createSolidTable, + useSolidTable, } from '@tanstack/solid-table' const defaultColumns: ColumnDef[] = [ @@ -70,7 +70,7 @@ function App() { ) const rerender = () => setData(() => makeData(20)) - const table = createSolidTable({ + const table = useSolidTable({ get data() { return data() }, diff --git a/examples/solid/column-visibility/src/App.tsx b/examples/solid/column-visibility/src/App.tsx index d972aabdd4..1f159a3685 100644 --- a/examples/solid/column-visibility/src/App.tsx +++ b/examples/solid/column-visibility/src/App.tsx @@ -3,7 +3,7 @@ import { getCoreRowModel, VisibilityState, ColumnDef, - createSolidTable, + useSolidTable, } from '@tanstack/solid-table' import { createSignal, For, Show } from 'solid-js' @@ -102,7 +102,7 @@ function App() { ) const rerender = () => setData(defaultData) - const table = createSolidTable({ + const table = useSolidTable({ get data() { return data() }, diff --git a/examples/solid/filters/src/App.tsx b/examples/solid/filters/src/App.tsx index c9c8989657..0185c9db5a 100644 --- a/examples/solid/filters/src/App.tsx +++ b/examples/solid/filters/src/App.tsx @@ -7,7 +7,7 @@ import { getFacetedMinMaxValues, ColumnDef, ColumnFiltersState, - createSolidTable, + useSolidTable, } from '@tanstack/solid-table' import { debounce } from '@solid-primitives/scheduled' import { makeData, Person } from './makeData' @@ -76,7 +76,7 @@ function App() { ) const refreshData = () => setData(makeData(50000)) - const table = createSolidTable({ + const table = useSolidTable({ get data() { return data() }, diff --git a/examples/solid/sorting/src/App.tsx b/examples/solid/sorting/src/App.tsx index 8b73cc3ad8..6b0fe183a6 100644 --- a/examples/solid/sorting/src/App.tsx +++ b/examples/solid/sorting/src/App.tsx @@ -4,7 +4,7 @@ import { getSortedRowModel, SortingState, ColumnDef, - createSolidTable, + useSolidTable, } from '@tanstack/solid-table' import { makeData, Person } from './makeData' import { createSignal, For, Show } from 'solid-js' @@ -66,7 +66,7 @@ function App() { }, ] - const table = createSolidTable({ + const table = useSolidTable({ get data() { return data() }, diff --git a/packages/solid-table/src/index.tsx b/packages/solid-table/src/index.tsx index a1a0244668..e60bb13c4c 100755 --- a/packages/solid-table/src/index.tsx +++ b/packages/solid-table/src/index.tsx @@ -24,7 +24,7 @@ export function flexRender( return Comp } -export function createSolidTable( +export function useSolidTable( options: TableOptions ) { const resolvedOptions: TableOptionsResolved = mergeProps( @@ -63,3 +63,12 @@ export function createSolidTable( return table } + +/** + * @deprecated Use useSolidTable instead + */ +export function createSolidTable( + options: TableOptions +) { + return useSolidTable(options) +}