import {
flexRender,
getCoreRowModel,
VisibilityState,
ColumnDef,
createSolidTable,
} from '@tanstack/solid-table'
import { createSignal, For, Show } from 'solid-js'
type Person = {
firstName: string
lastName: string
age: number
visits: number
status: string
progress: number
}
const defaultData: Person[] = [
{
firstName: 'tanner',
lastName: 'linsley',
age: 24,
visits: 100,
status: 'In Relationship',
progress: 50,
},
{
firstName: 'tandy',
lastName: 'miller',
age: 40,
visits: 40,
status: 'Single',
progress: 80,
},
{
firstName: 'joe',
lastName: 'dirte',
age: 45,
visits: 20,
status: 'Complicated',
progress: 10,
},
]
const defaultColumns: ColumnDef<Person>[] = [
{
header: 'Name',
footer: props => props.column.id,
columns: [
{
accessorKey: 'firstName',
cell: info => info.getValue(),
footer: props => props.column.id,
},
{
accessorFn: row => row.lastName,
id: 'lastName',
cell: info => info.getValue(),
header: () => <span>Last Name</span>,
footer: props => props.column.id,
},
],
},
{
header: 'Info',
footer: props => props.column.id,
columns: [
{
accessorKey: 'age',
header: () => 'Age',
footer: props => props.column.id,
},
{
header: 'More Info',
columns: [
{
accessorKey: 'visits',
header: () => <span>Visits</span>,
footer: props => props.column.id,
},
{
accessorKey: 'status',
header: 'Status',
footer: props => props.column.id,
},
{
accessorKey: 'progress',
header: 'Profile Progress',
footer: props => props.column.id,
},
],
},
],
},
]
function App() {
const [data, setData] = createSignal(defaultData)
const [columnVisibility, setColumnVisibility] = createSignal<VisibilityState>(
{}
)
const rerender = () => setData(defaultData)
const table = createSolidTable({
get data() {
return data()
},
columns: defaultColumns,
state: {
get columnVisibility() {
return columnVisibility()
},
},
onColumnVisibilityChange: setColumnVisibility,
getCoreRowModel: getCoreRowModel(),
})
return (
<div class="p-2">
<div class="inline-block border border-black shadow rounded">
<div class="px-1 border-b border-black">
<label>
<input
checked={table.getIsAllColumnsVisible()}
onChange={table.getToggleAllColumnsVisibilityHandler()}
type="checkbox"
/>{' '}
Toggle All
</label>
</div>
<For each={table.getAllLeafColumns()}>
{column => (
<div class="px-1">
<label>
<input
checked={column.getIsVisible()}
onChange={column.getToggleVisibilityHandler()}
type="checkbox"
/>{' '}
{column.id}
</label>
</div>
)}
</For>
</div>
<div class="h-4" />
<table>
<thead>
<For each={table.getHeaderGroups()}>
{headerGroup => (
<tr>
<For each={headerGroup.headers}>
{header => (
<th colSpan={header.colSpan}>
<Show when={!header.isPlaceholder}>
{flexRender(
header.column.columnDef.header,
header.getContext()
)}
</Show>
</th>
)}
</For>
</tr>
)}
</For>
</thead>
<tbody>
<For each={table.getRowModel().rows}>
{row => (
<tr>
<For each={row.getVisibleCells()}>
{cell => (
<td>
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
</td>
)}
</For>
</tr>
)}
</For>
</tbody>
<tfoot>
<For each={table.getFooterGroups()}>
{footerGroup => (
<tr>
<For each={footerGroup.headers}>
{header => (
<th colSpan={header.colSpan}>
<Show when={!header.isPlaceholder}>
{flexRender(
header.column.columnDef.footer,
header.getContext()
)}
</Show>
</th>
)}
</For>
</tr>
)}
</For>
</tfoot>
</table>
<div class="h-4" />
<button onClick={() => rerender()} class="border p-2">
Rerender
</button>
<div class="h-4" />
<pre>{JSON.stringify(table.getState().columnVisibility, null, 2)}</pre>
</div>
)
}
export default App
import {
flexRender,
getCoreRowModel,
VisibilityState,
ColumnDef,
createSolidTable,
} from '@tanstack/solid-table'
import { createSignal, For, Show } from 'solid-js'
type Person = {
firstName: string
lastName: string
age: number
visits: number
status: string
progress: number
}
const defaultData: Person[] = [
{
firstName: 'tanner',
lastName: 'linsley',
age: 24,
visits: 100,
status: 'In Relationship',
progress: 50,
},
{
firstName: 'tandy',
lastName: 'miller',
age: 40,
visits: 40,
status: 'Single',
progress: 80,
},
{
firstName: 'joe',
lastName: 'dirte',
age: 45,
visits: 20,
status: 'Complicated',
progress: 10,
},
]
const defaultColumns: ColumnDef<Person>[] = [
{
header: 'Name',
footer: props => props.column.id,
columns: [
{
accessorKey: 'firstName',
cell: info => info.getValue(),
footer: props => props.column.id,
},
{
accessorFn: row => row.lastName,
id: 'lastName',
cell: info => info.getValue(),
header: () => <span>Last Name</span>,
footer: props => props.column.id,
},
],
},
{
header: 'Info',
footer: props => props.column.id,
columns: [
{
accessorKey: 'age',
header: () => 'Age',
footer: props => props.column.id,
},
{
header: 'More Info',
columns: [
{
accessorKey: 'visits',
header: () => <span>Visits</span>,
footer: props => props.column.id,
},
{
accessorKey: 'status',
header: 'Status',
footer: props => props.column.id,
},
{
accessorKey: 'progress',
header: 'Profile Progress',
footer: props => props.column.id,
},
],
},
],
},
]
function App() {
const [data, setData] = createSignal(defaultData)
const [columnVisibility, setColumnVisibility] = createSignal<VisibilityState>(
{}
)
const rerender = () => setData(defaultData)
const table = createSolidTable({
get data() {
return data()
},
columns: defaultColumns,
state: {
get columnVisibility() {
return columnVisibility()
},
},
onColumnVisibilityChange: setColumnVisibility,
getCoreRowModel: getCoreRowModel(),
})
return (
<div class="p-2">
<div class="inline-block border border-black shadow rounded">
<div class="px-1 border-b border-black">
<label>
<input
checked={table.getIsAllColumnsVisible()}
onChange={table.getToggleAllColumnsVisibilityHandler()}
type="checkbox"
/>{' '}
Toggle All
</label>
</div>
<For each={table.getAllLeafColumns()}>
{column => (
<div class="px-1">
<label>
<input
checked={column.getIsVisible()}
onChange={column.getToggleVisibilityHandler()}
type="checkbox"
/>{' '}
{column.id}
</label>
</div>
)}
</For>
</div>
<div class="h-4" />
<table>
<thead>
<For each={table.getHeaderGroups()}>
{headerGroup => (
<tr>
<For each={headerGroup.headers}>
{header => (
<th colSpan={header.colSpan}>
<Show when={!header.isPlaceholder}>
{flexRender(
header.column.columnDef.header,
header.getContext()
)}
</Show>
</th>
)}
</For>
</tr>
)}
</For>
</thead>
<tbody>
<For each={table.getRowModel().rows}>
{row => (
<tr>
<For each={row.getVisibleCells()}>
{cell => (
<td>
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
</td>
)}
</For>
</tr>
)}
</For>
</tbody>
<tfoot>
<For each={table.getFooterGroups()}>
{footerGroup => (
<tr>
<For each={footerGroup.headers}>
{header => (
<th colSpan={header.colSpan}>
<Show when={!header.isPlaceholder}>
{flexRender(
header.column.columnDef.footer,
header.getContext()
)}
</Show>
</th>
)}
</For>
</tr>
)}
</For>
</tfoot>
</table>
<div class="h-4" />
<button onClick={() => rerender()} class="border p-2">
Rerender
</button>
<div class="h-4" />
<pre>{JSON.stringify(table.getState().columnVisibility, null, 2)}</pre>
</div>
)
}
export default App
Your weekly dose of JavaScript news. Delivered every Monday to over 100,000 devs, for free.
Your weekly dose of JavaScript news. Delivered every Monday to over 100,000 devs, for free.