Skip to content

Commit 581f621

Browse files
KevinVandyKevinVandy
committed
fix some svelte and solid examples
1 parent f5cb60c commit 581f621

File tree

21 files changed

+507
-66
lines changed

21 files changed

+507
-66
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,7 @@ function App() {
131131
<For each={table.getRowModel().rows}>
132132
{(row) => (
133133
<tr>
134-
<For each={row.getVisibleCells()}>
134+
<For each={row.getAllCells()}>
135135
{(cell) => (
136136
<td>
137137
{flexRender(

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { For, Show, createSignal } from 'solid-js'
22
import { faker } from '@faker-js/faker'
33
import {
44
columnOrderingFeature,
5+
columnVisibilityFeature,
56
createTable,
67
flexRender,
78
tableFeatures,
@@ -14,7 +15,10 @@ import type {
1415
ColumnVisibilityState,
1516
} from '@tanstack/solid-table'
1617

17-
const _features = tableFeatures({ columnOrderingFeature })
18+
const _features = tableFeatures({
19+
columnOrderingFeature,
20+
columnVisibilityFeature,
21+
})
1822

1923
const defaultColumns: Array<ColumnDef<typeof _features, Person>> = [
2024
{

‎examples/solid/filters-faceted/.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules
2+
dist

‎examples/solid/filters-faceted/README.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# Example
2+
3+
To run this example:
4+
5+
- `npm install` or `yarn`
6+
- `npm run start` or `yarn start`

‎examples/solid/filters-faceted/index.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<meta name="theme-color" content="#000000" />
7+
<link rel="shortcut icon" type="image/ico" href="/src/assets/favicon.ico" />
8+
<title>Solid App</title>
9+
</head>
10+
<body>
11+
<noscript>You need to enable JavaScript to run this app.</noscript>
12+
<div id="root"></div>
13+
14+
<script src="/src/index.tsx" type="module"></script>
15+
</body>
16+
</html>

‎examples/solid/filters-faceted/package.json‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"name": "tanstack-table-example-solid-filters-faceted",
3+
"version": "0.0.0",
4+
"description": "",
5+
"scripts": {
6+
"start": "vite",
7+
"dev": "vite",
8+
"build": "vite build",
9+
"serve": "vite preview",
10+
"lint": "eslint ./src"
11+
},
12+
"license": "MIT",
13+
"devDependencies": {
14+
"@faker-js/faker": "^9.2.0",
15+
"typescript": "5.6.3",
16+
"vite": "^5.4.11",
17+
"vite-plugin-solid": "^2.10.2"
18+
},
19+
"dependencies": {
20+
"@solid-primitives/scheduled": "^1.4.4",
21+
"@tanstack/solid-table": "^9.0.0-alpha.10",
22+
"solid-js": "^1.9.3"
23+
}
24+
}

‎examples/solid/filters-faceted/src/App.tsx‎

Lines changed: 184 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
1+
import {
2+
columnFacetingFeature,
3+
columnFilteringFeature,
4+
createFacetedMinMaxValues,
5+
createFacetedRowModel,
6+
createFacetedUniqueValues,
7+
createFilteredRowModel,
8+
createTable,
9+
flexRender,
10+
globalFilteringFeature,
11+
tableFeatures,
12+
} from '@tanstack/solid-table'
13+
import { debounce } from '@solid-primitives/scheduled'
14+
import { For, createSignal } from 'solid-js'
15+
import { makeData } from './makeData'
16+
import ColumnFilter from './ColumnFilter'
17+
import type { Person } from './makeData'
18+
import type { ColumnDef, ColumnFiltersState } from '@tanstack/solid-table'
19+
20+
const _features = tableFeatures({
21+
columnFilteringFeature,
22+
globalFilteringFeature,
23+
columnFacetingFeature,
24+
})
25+
26+
const columns: Array<ColumnDef<typeof _features, Person>> = [
27+
{
28+
header: 'Name',
29+
footer: (props) => props.column.id,
30+
columns: [
31+
{
32+
accessorKey: 'firstName',
33+
cell: (info) => info.getValue(),
34+
footer: (props) => props.column.id,
35+
},
36+
{
37+
accessorFn: (row) => row.lastName,
38+
id: 'lastName',
39+
cell: (info) => info.getValue(),
40+
header: () => <span>Last Name</span>,
41+
footer: (props) => props.column.id,
42+
},
43+
],
44+
},
45+
{
46+
header: 'Info',
47+
footer: (props) => props.column.id,
48+
columns: [
49+
{
50+
accessorKey: 'age',
51+
header: () => 'Age',
52+
footer: (props) => props.column.id,
53+
},
54+
{
55+
header: 'More Info',
56+
columns: [
57+
{
58+
accessorKey: 'visits',
59+
header: () => <span>Visits</span>,
60+
footer: (props) => props.column.id,
61+
},
62+
{
63+
accessorKey: 'status',
64+
header: 'Status',
65+
footer: (props) => props.column.id,
66+
},
67+
{
68+
accessorKey: 'progress',
69+
header: 'Profile Progress',
70+
footer: (props) => props.column.id,
71+
},
72+
],
73+
},
74+
],
75+
},
76+
]
77+
78+
function App() {
79+
const [data, setData] = createSignal(makeData(1_000))
80+
const [columnFilters, setColumnFilters] = createSignal<ColumnFiltersState>([])
81+
const [globalFilter, setGlobalFilter] = createSignal('')
82+
const debounceSetGlobalFilter = debounce(
83+
(value: string) => setGlobalFilter(value),
84+
500,
85+
)
86+
const refreshData = () => setData(makeData(50_000)) // stress test
87+
88+
const table = createTable({
89+
_features,
90+
_rowModels: {
91+
facetedRowModel: createFacetedRowModel(),
92+
facetedMinMaxValues: createFacetedMinMaxValues(),
93+
facetedUniqueValues: createFacetedUniqueValues(),
94+
filteredRowModel: createFilteredRowModel(),
95+
},
96+
get data() {
97+
return data()
98+
},
99+
columns,
100+
state: {
101+
get columnFilters() {
102+
return columnFilters()
103+
},
104+
get globalFilter() {
105+
return globalFilter()
106+
},
107+
},
108+
onGlobalFilterChange: setGlobalFilter,
109+
globalFilterFn: 'includesString',
110+
onColumnFiltersChange: setColumnFilters,
111+
debugTable: true,
112+
debugHeaders: true,
113+
debugColumns: false,
114+
})
115+
116+
return (
117+
<div class="p-2">
118+
<input
119+
class="p-2 font-lg shadow border border-block"
120+
value={globalFilter()}
121+
onInput={(e) => debounceSetGlobalFilter(e.currentTarget.value)}
122+
placeholder="Search all columns..."
123+
/>
124+
<div class="h-2" />
125+
<table>
126+
<thead>
127+
<For each={table.getHeaderGroups()}>
128+
{(headerGroup) => (
129+
<tr>
130+
<For each={headerGroup.headers}>
131+
{(header) => (
132+
<th colSpan={header.colSpan}>
133+
{header.isPlaceholder ? null : (
134+
<>
135+
{flexRender(
136+
header.column.columnDef.header,
137+
header.getContext(),
138+
)}
139+
{header.column.getCanFilter() ? (
140+
<div>
141+
<ColumnFilter
142+
column={header.column}
143+
table={table as any}
144+
/>
145+
</div>
146+
) : null}
147+
</>
148+
)}
149+
</th>
150+
)}
151+
</For>
152+
</tr>
153+
)}
154+
</For>
155+
</thead>
156+
<tbody>
157+
<For each={table.getRowModel().rows.slice(0, 10)}>
158+
{(row) => (
159+
<tr>
160+
<For each={row.getVisibleCells()}>
161+
{(cell) => (
162+
<td>
163+
{flexRender(
164+
cell.column.columnDef.cell,
165+
cell.getContext(),
166+
)}
167+
</td>
168+
)}
169+
</For>
170+
</tr>
171+
)}
172+
</For>
173+
</tbody>
174+
</table>
175+
<div>{table.getRowModel().rows.length} Rows</div>
176+
<div>
177+
<button onClick={() => refreshData()}>Refresh Data</button>
178+
</div>
179+
<pre>{JSON.stringify(table.getState(), null, 2)}</pre>
180+
</div>
181+
)
182+
}
183+
184+
export default App

‎examples/solid/filters-faceted/src/ColumnFilter.tsx‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
import { debounce } from '@solid-primitives/scheduled'
2+
import { For, Show, createMemo } from 'solid-js'
3+
import type { Column, Table } from '@tanstack/solid-table'
4+
5+
function ColumnFilter(props: {
6+
column: Column<any, any>
7+
table: Table<any, any>
8+
}) {
9+
const firstValue = props.table
10+
.getPreFilteredRowModel()
11+
.flatRows[0]?.getValue(props.column.id)
12+
13+
const columnFilterValue = () => props.column.getFilterValue()
14+
15+
const sortedUniqueValues = createMemo(() =>
16+
typeof firstValue === 'number'
17+
? []
18+
: Array.from(props.column.getFacetedUniqueValues().keys()).sort(),
19+
)
20+
21+
return (
22+
<Show
23+
when={typeof firstValue === 'number'}
24+
fallback={
25+
<div>
26+
<datalist id={`${props.column.id}list`}>
27+
<For each={sortedUniqueValues().slice(0, 5000)}>
28+
{(value: string) => <option value={value} />}
29+
</For>
30+
</datalist>
31+
<input
32+
type="text"
33+
value={(columnFilterValue() ?? '') as string}
34+
onInput={debounce(
35+
(e) => props.column.setFilterValue(e.target.value),
36+
500,
37+
)}
38+
placeholder={`Search... (${props.column.getFacetedUniqueValues().size})`}
39+
class="w-36 border shadow rounded"
40+
list={`${props.column.id}list`}
41+
/>
42+
</div>
43+
}
44+
>
45+
<div>
46+
<div class="flex space-x-2">
47+
<input
48+
type="number"
49+
min={Number(props.column.getFacetedMinMaxValues()?.[0] ?? '')}
50+
max={Number(props.column.getFacetedMinMaxValues()?.[1] ?? '')}
51+
value={
52+
(columnFilterValue() as [number, number] | undefined)?.[0] ?? ''
53+
}
54+
onInput={debounce(
55+
(e) =>
56+
props.column.setFilterValue((old: [number, number]) => [
57+
e.target.value,
58+
old[1],
59+
]),
60+
500,
61+
)}
62+
placeholder={`Min ${
63+
props.column.getFacetedMinMaxValues()?.[0]
64+
? `(${props.column.getFacetedMinMaxValues()?.[0]})`
65+
: ''
66+
}`}
67+
class="w-24 border shadow rounded"
68+
/>
69+
<input
70+
type="number"
71+
min={Number(props.column.getFacetedMinMaxValues()?.[0] ?? '')}
72+
max={Number(props.column.getFacetedMinMaxValues()?.[1] ?? '')}
73+
value={
74+
(columnFilterValue() as [number, number] | undefined)?.[1] ?? ''
75+
}
76+
onInput={debounce(
77+
(e) =>
78+
props.column.setFilterValue((old: [number, number]) => [
79+
old[0],
80+
e.target.value,
81+
]),
82+
500,
83+
)}
84+
placeholder={`Max ${
85+
props.column.getFacetedMinMaxValues()?.[1]
86+
? `(${props.column.getFacetedMinMaxValues()?.[1]})`
87+
: ''
88+
}`}
89+
class="w-24 border shadow rounded"
90+
/>
91+
</div>
92+
</div>
93+
</Show>
94+
)
95+
}
96+
97+
export default ColumnFilter

‎examples/solid/filters-faceted/src/index.css‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
html {
2+
font-family: sans-serif;
3+
font-size: 14px;
4+
}
5+
6+
table {
7+
border: 1px solid lightgray;
8+
}
9+
10+
tbody {
11+
border-bottom: 1px solid lightgray;
12+
}
13+
14+
th {
15+
border-bottom: 1px solid lightgray;
16+
border-right: 1px solid lightgray;
17+
padding: 2px 4px;
18+
}
19+
20+
tfoot {
21+
color: gray;
22+
}
23+
24+
tfoot th {
25+
font-weight: normal;
26+
}

‎examples/solid/filters-faceted/src/index.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
/* @refresh reload */
2+
import { render } from 'solid-js/web'
3+
import './index.css'
4+
import App from './App'
5+
6+
render(() => <App />, document.getElementById('root') as HTMLElement)

0 commit comments

Comments
 (0)