Skip to content

Commit cd17e52

Browse files
committed
fix(solid-table): converge on use for hooks
1 parent f7bf6f1 commit cd17e52

File tree

12 files changed

+39
-30
lines changed

12 files changed

+39
-30
lines changed

docs/api/core/table.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
title: Table APIs
33
---
44

5-
## `createAngularTable` / `useReactTable` / `createSolidTable` / `useQwikTable` / `useVueTable` / `createSvelteTable`
5+
## `createAngularTable` / `useReactTable` / `useSolidTable` / `useQwikTable` / `useVueTable` / `createSvelteTable`
66

77
```tsx
88
type useReactTable = <TData extends AnyData>(

docs/framework/solid/guide/table-state.md

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ TanStack Table has a simple underlying internal state management system to store
1111
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.
1212

1313
```jsx
14-
const table = createSolidTable({
14+
const table = useSolidTable({
1515
columns,
1616
get data() {
1717
return data()
@@ -28,7 +28,7 @@ console.log(table.getState().rowSelection) //access just the row selection state
2828
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.
2929

3030
```jsx
31-
const table = createSolidTable({
31+
const table = useSolidTable({
3232
columns,
3333
data,
3434
initialState: {
@@ -67,7 +67,7 @@ const [columnFilters, setColumnFilters] = createSignal([]) //no default filters
6767
const [sorting, setSorting] = createSignal([{
6868
id: 'age',
6969
desc: true, //sort by age in descending order by default
70-
}])
70+
}])
7171
const [pagination, setPagination] = createSignal({ pageIndex: 0, pageSize: 15 })
7272

7373
//Use our controlled state values to fetch data
@@ -77,7 +77,7 @@ const tableQuery = createQuery({
7777
//...
7878
})
7979

80-
const table = createSolidTable({
80+
const table = useSolidTable({
8181
columns,
8282
get data() {
8383
return tableQuery.data()
@@ -109,7 +109,7 @@ A couple of more tricks may be needed to make this work. If you use the `onState
109109

110110
```jsx
111111
//create a table instance with default state values
112-
const table = createSolidTable({
112+
const table = useSolidTable({
113113
columns,
114114
get data() {
115115
return data()
@@ -147,7 +147,7 @@ Specifying an `on[State]Change` callback tells the table instance that this will
147147
```jsx
148148
const [sorting, setSorting] = createSignal([])
149149
//...
150-
const table = createSolidTable({
150+
const table = useSolidTable({
151151
columns,
152152
data,
153153
//...
@@ -170,7 +170,7 @@ What implications does this have? It means that if you want to add in some extra
170170
const [sorting, setSorting] = createSignal([])
171171
const [pagination, setPagination] = createSignal({ pageIndex: 0, pageSize: 10 })
172172

173-
const table = createSolidTable({
173+
const table = useSolidTable({
174174
get columns() {
175175
return columns()
176176
},
@@ -210,12 +210,12 @@ const table = createSolidTable({
210210
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.
211211

212212
```tsx
213-
import { createSolidTable, type SortingState } from '@tanstack/solid-table'
213+
import { useSolidTable, type SortingState } from '@tanstack/solid-table'
214214
//...
215215
const [sorting, setSorting] = createSignal<SortingState[]>([
216216
{
217217
id: 'age', //you should get autocomplete for the `id` and `desc` properties
218218
desc: true,
219219
}
220220
])
221-
```
221+
```

docs/framework/solid/solid-table.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,15 @@ title: Solid Table
44

55
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.
66

7-
## `createSolidTable`
7+
## `useSolidTable`
88

99
Takes an `options` object and returns a table.
1010

1111
```tsx
12-
import { createSolidTable } from '@tanstack/solid-table'
12+
import { useSolidTable } from '@tanstack/solid-table'
1313

1414
function App() {
15-
const table = createSolidTable(options)
15+
const table = useSolidTable(options)
1616

1717
// ...render your table
1818
}

docs/guide/tables.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ title: Table Instance Guide
88

99
## Table Instance Guide
1010

11-
TanStack Table is a headless UI library. When we talk about the `table` or "table instance", we're not talking about a literal `<table>` 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`).
11+
TanStack Table is a headless UI library. When we talk about the `table` or "table instance", we're not talking about a literal `<table>` 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`).
1212

1313
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.
1414

@@ -63,7 +63,7 @@ const table = useQwikTable({ columns, data, getCoreRowModel: getCoreRowModel() }
6363
const table = useReactTable({ columns, data, getCoreRowModel: getCoreRowModel() })
6464

6565
//solid
66-
const table = createSolidTable({ columns, get data() { return data() }, getCoreRowModel: getCoreRowModel() })
66+
const table = useSolidTable({ columns, get data() { return data() }, getCoreRowModel: getCoreRowModel() })
6767

6868
//svelte
6969
const table = createSvelteTable({ columns, data, getCoreRowModel: getCoreRowModel() })

examples/solid/basic/src/App.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import {
22
flexRender,
33
getCoreRowModel,
44
ColumnDef,
5-
createSolidTable,
5+
useSolidTable,
66
} from '@tanstack/solid-table'
77
import { createSignal, For } from 'solid-js'
88

@@ -81,7 +81,7 @@ function App() {
8181
const [data, setData] = createSignal(defaultData)
8282
const rerender = () => setData(defaultData)
8383

84-
const table = createSolidTable({
84+
const table = useSolidTable({
8585
get data() {
8686
return data()
8787
},

examples/solid/bootstrap/src/App.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import {
22
flexRender,
33
getCoreRowModel,
44
ColumnDef,
5-
createSolidTable,
5+
useSolidTable,
66
} from '@tanstack/solid-table'
77
import { createSignal, For } from 'solid-js'
88
import { makeData, Person } from './makeData'
@@ -66,7 +66,7 @@ function App() {
6666
const [data, setData] = createSignal(makeData(10))
6767
const rerender = () => setData(makeData(10))
6868

69-
const table = createSolidTable({
69+
const table = useSolidTable({
7070
get data() {
7171
return data()
7272
},

examples/solid/column-groups/src/App.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import {
22
flexRender,
33
getCoreRowModel,
44
ColumnDef,
5-
createSolidTable,
5+
useSolidTable,
66
} from '@tanstack/solid-table'
77
import { createSignal, For } from 'solid-js'
88

@@ -98,7 +98,7 @@ function App() {
9898
const [data, setData] = createSignal(defaultData)
9999
const rerender = () => setData(defaultData)
100100

101-
const table = createSolidTable({
101+
const table = useSolidTable({
102102
get data() {
103103
return data()
104104
},

examples/solid/column-ordering/src/App.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
ColumnOrderState,
88
VisibilityState,
99
ColumnDef,
10-
createSolidTable,
10+
useSolidTable,
1111
} from '@tanstack/solid-table'
1212

1313
const defaultColumns: ColumnDef<Person>[] = [
@@ -70,7 +70,7 @@ function App() {
7070
)
7171
const rerender = () => setData(() => makeData(20))
7272

73-
const table = createSolidTable({
73+
const table = useSolidTable({
7474
get data() {
7575
return data()
7676
},

examples/solid/column-visibility/src/App.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import {
33
getCoreRowModel,
44
VisibilityState,
55
ColumnDef,
6-
createSolidTable,
6+
useSolidTable,
77
} from '@tanstack/solid-table'
88
import { createSignal, For, Show } from 'solid-js'
99

@@ -102,7 +102,7 @@ function App() {
102102
)
103103
const rerender = () => setData(defaultData)
104104

105-
const table = createSolidTable({
105+
const table = useSolidTable({
106106
get data() {
107107
return data()
108108
},

examples/solid/filters/src/App.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
getFacetedMinMaxValues,
88
ColumnDef,
99
ColumnFiltersState,
10-
createSolidTable,
10+
useSolidTable,
1111
} from '@tanstack/solid-table'
1212
import { debounce } from '@solid-primitives/scheduled'
1313
import { makeData, Person } from './makeData'
@@ -76,7 +76,7 @@ function App() {
7676
)
7777
const refreshData = () => setData(makeData(50000))
7878

79-
const table = createSolidTable({
79+
const table = useSolidTable({
8080
get data() {
8181
return data()
8282
},

0 commit comments

Comments
 (0)