📄 tanstack/table/v8/docs/framework/solid/examples/sorting
File: sorting.md | Updated: 11/15/2025
Source: https://tanstack.com/table/v8/docs/framework/solid/examples/sorting
Search...
+ K
Auto
Docs Examples GitHub Contributors
Docs Examples GitHub Contributors
Docs Examples GitHub Contributors
Docs Examples Github Contributors
Docs Examples Github Contributors
Docs Examples Github Contributors
Docs Examples Github Contributors
Docs Examples Github Contributors
Maintainers Partners Support Learn StatsBETA Discord Merch Blog GitHub Ethos Brand Guide
Documentation
Framework
Solid
Version
v8
Search...
+ K
Menu
Getting Started
Core Guides
Feature Guides
Core APIs
Feature APIs
Enterprise
Examples
Framework
Solid
Version
v8
Menu
Getting Started
Core Guides
Feature Guides
Core APIs
Feature APIs
Enterprise
Examples
Solid Example: Sorting
===================================================================================================================================================================================================================================================================================================================================================================================================
Code ExplorerCode
Interactive SandboxSandbox
-
src
-
App.tsx
-
index.css
-
index.tsx
-
makeData.ts
-
-
.gitignore
-
README.md
-
index.html
-
package.json
-
tsconfig.json
-
vite.config.ts
tsx
import {
flexRender,
getCoreRowModel,
getSortedRowModel,
SortingState,
ColumnDef,
createSolidTable,
} from '@tanstack/solid-table'
import { makeData, Person } from './makeData'
import { createSignal, For, Show } from 'solid-js'
function App() {
const [data, setData] = createSignal(makeData(100_000))
const [sorting, setSorting] = createSignal<SortingState>([])
const refreshData = () => setData(makeData(100_000))
const columns: 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,\
},\
],\
},\
],\
},\
]
const table = createSolidTable({
get data() {
return data()
},
columns,
state: {
get sorting() {
return sorting()
},
},
onSortingChange: setSorting,
getCoreRowModel: getCoreRowModel(),
getSortedRowModel: getSortedRowModel(),
debugTable: true,
})
return (
<div class="p-2">
<table>
<thead>
<For each={table.getHeaderGroups()}>
{headerGroup => (
<tr>
<For each={headerGroup.headers}>
{header => (
<th colSpan={header.colSpan}>
<Show when={!header.isPlaceholder}>
<div
class={
header.column.getCanSort()
? 'cursor-pointer select-none'
: undefined
}
onClick={header.column.getToggleSortingHandler()}
>
{flexRender(
header.column.columnDef.header,
header.getContext()
)}
{{
asc: ' 🔼',
desc: ' 🔽',
}[header.column.getIsSorted() as string] ?? null}
</div>
</Show>
</th>
)}
</For>
</tr>
)}
</For>
</thead>
<tbody>
<For each={table.getRowModel().rows.slice(0, 10)}>
{row => (
<tr>
<For each={row.getVisibleCells()}>
{cell => (
<td>
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
</td>
)}
</For>
</tr>
)}
</For>
</tbody>
</table>
<div>{table.getRowModel().rows.length} Rows</div>
<div>
<button onClick={() => refreshData()}>Refresh Data</button>
</div>
<pre>{JSON.stringify(sorting(), null, 2)}</pre>
</div>
)
}
export default App
import {
flexRender,
getCoreRowModel,
getSortedRowModel,
SortingState,
ColumnDef,
createSolidTable,
} from '@tanstack/solid-table'
import { makeData, Person } from './makeData'
import { createSignal, For, Show } from 'solid-js'
function App() {
const [data, setData] = createSignal(makeData(100_000))
const [sorting, setSorting] = createSignal<SortingState>([])
const refreshData = () => setData(makeData(100_000))
const columns: 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,\
},\
],\
},\
],\
},\
]
const table = createSolidTable({
get data() {
return data()
},
columns,
state: {
get sorting() {
return sorting()
},
},
onSortingChange: setSorting,
getCoreRowModel: getCoreRowModel(),
getSortedRowModel: getSortedRowModel(),
debugTable: true,
})
return (
<div class="p-2">
<table>
<thead>
<For each={table.getHeaderGroups()}>
{headerGroup => (
<tr>
<For each={headerGroup.headers}>
{header => (
<th colSpan={header.colSpan}>
<Show when={!header.isPlaceholder}>
<div
class={
header.column.getCanSort()
? 'cursor-pointer select-none'
: undefined
}
onClick={header.column.getToggleSortingHandler()}
>
{flexRender(
header.column.columnDef.header,
header.getContext()
)}
{{
asc: ' 🔼',
desc: ' 🔽',
}[header.column.getIsSorted() as string] ?? null}
</div>
</Show>
</th>
)}
</For>
</tr>
)}
</For>
</thead>
<tbody>
<For each={table.getRowModel().rows.slice(0, 10)}>
{row => (
<tr>
<For each={row.getVisibleCells()}>
{cell => (
<td>
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
</td>
)}
</For>
</tr>
)}
</For>
</tbody>
</table>
<div>{table.getRowModel().rows.length} Rows</div>
<div>
<button onClick={() => refreshData()}>Refresh Data</button>
</div>
<pre>{JSON.stringify(sorting(), null, 2)}</pre>
</div>
)
}
export default App
