📄 tanstack/table/v8/docs/framework/qwik/examples/sorting
File: sorting.md | Updated: 11/15/2025
Source: https://tanstack.com/table/v8/docs/framework/qwik/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
Qwik
Version
v8
Search...
+ K
Menu
Getting Started
Core Guides
Feature Guides
Core APIs
Feature APIs
Enterprise
Examples
Framework
Qwik
Version
v8
Menu
Getting Started
Core Guides
Feature Guides
Core APIs
Feature APIs
Enterprise
Examples
Qwik Example: Sorting
===============================================================================================================================================================================================================================================================================================================================================================================================
Code ExplorerCode
Interactive SandboxSandbox
-
src
-
index.css
-
main.tsx
-
makeData.ts
-
vite-env.d.ts
-
-
.gitignore
-
README.md
-
index.html
-
package.json
-
tsconfig.json
-
tsconfig.node.json
-
vite.config.ts
tsx
import '@builder.io/qwik/qwikloader.js'
import { render, component$, useSignal, $ } from '@builder.io/qwik'
import './index.css'
import { makeData } from './makeData'
import {
getCoreRowModel,
flexRender,
useQwikTable,
SortingState,
ColumnDef,
getSortedRowModel,
} from '@tanstack/qwik-table'
type Person = {
firstName: string
lastName: string
age: number
visits: number
status: string
progress: number
}
const columns: ColumnDef<Person>[] = [\
{\
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,\
},\
{\
accessorKey: 'age',\
header: () => 'Age',\
footer: props => props.column.id,\
},\
{\
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,\
sortDescFirst: true, // This column will sort in descending order first (default for number columns anyway)\
},\
{\
accessorKey: 'createdAt',\
header: 'Created At',\
cell: info => info.getValue<Date>().toLocaleDateString(),\
// sortingFn: 'datetime' (inferred from the data)\
},\
]
const App = component$(() => {
const data = useSignal(makeData(10_000))
const sorting = useSignal<SortingState>([])
const table = useQwikTable({
columns,
data: data.value,
getCoreRowModel: getCoreRowModel(),
getSortedRowModel: getSortedRowModel(),
enableSorting: true,
state: {
sorting: sorting.value,
},
onSortingChange: updater => {
sorting.value =
updater instanceof Function ? updater(sorting.value) : updater
},
})
return (
<div class="p-2">
<table>
<thead>
{table.getHeaderGroups().map(headerGroup => (
<tr key={headerGroup.id}>
{headerGroup.headers.map(header => {
const { column } = header
const id = column.id
return (
<th key={header.id} colSpan={header.colSpan}>
{header.isPlaceholder ? null : (
<div
class={
column.getCanSort()
? 'cursor-pointer select-none'
: ''
}
onClick$={$(event => {
const col = table.getColumn(id)! //avoid serializing errors
col.getToggleSortingHandler()!(event)
})}
title={
column.getCanSort()
? column.getNextSortingOrder() === 'asc'
? 'Sort ascending'
: column.getNextSortingOrder() === 'desc'
? 'Sort descending'
: 'Clear sort'
: undefined
}
>
{flexRender(
header.column.columnDef.header,
header.getContext()
)}
{{
asc: ' 🔼',
desc: ' 🔽',
}[header.column.getIsSorted() as string] ?? null}
</div>
)}
</th>
)
})}
</tr>
))}
</thead>
<tbody>
{table
.getRowModel()
.rows.slice(0, 10)
.map(row => {
return (
<tr key={row.id}>
{row.getVisibleCells().map(cell => {
return (
<td key={cell.id}>
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
</td>
)
})}
</tr>
)
})}
</tbody>
</table>
<div>{table.getRowModel().rows.length.toLocaleString()} Rows</div>
<pre>{JSON.stringify(sorting, null, 2)}</pre>
</div>
)
})
render(document.getElementById('app') as HTMLElement, <App />)
import '@builder.io/qwik/qwikloader.js'
import { render, component$, useSignal, $ } from '@builder.io/qwik'
import './index.css'
import { makeData } from './makeData'
import {
getCoreRowModel,
flexRender,
useQwikTable,
SortingState,
ColumnDef,
getSortedRowModel,
} from '@tanstack/qwik-table'
type Person = {
firstName: string
lastName: string
age: number
visits: number
status: string
progress: number
}
const columns: ColumnDef<Person>[] = [\
{\
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,\
},\
{\
accessorKey: 'age',\
header: () => 'Age',\
footer: props => props.column.id,\
},\
{\
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,\
sortDescFirst: true, // This column will sort in descending order first (default for number columns anyway)\
},\
{\
accessorKey: 'createdAt',\
header: 'Created At',\
cell: info => info.getValue<Date>().toLocaleDateString(),\
// sortingFn: 'datetime' (inferred from the data)\
},\
]
const App = component$(() => {
const data = useSignal(makeData(10_000))
const sorting = useSignal<SortingState>([])
const table = useQwikTable({
columns,
data: data.value,
getCoreRowModel: getCoreRowModel(),
getSortedRowModel: getSortedRowModel(),
enableSorting: true,
state: {
sorting: sorting.value,
},
onSortingChange: updater => {
sorting.value =
updater instanceof Function ? updater(sorting.value) : updater
},
})
return (
<div class="p-2">
<table>
<thead>
{table.getHeaderGroups().map(headerGroup => (
<tr key={headerGroup.id}>
{headerGroup.headers.map(header => {
const { column } = header
const id = column.id
return (
<th key={header.id} colSpan={header.colSpan}>
{header.isPlaceholder ? null : (
<div
class={
column.getCanSort()
? 'cursor-pointer select-none'
: ''
}
onClick$={$(event => {
const col = table.getColumn(id)! //avoid serializing errors
col.getToggleSortingHandler()!(event)
})}
title={
column.getCanSort()
? column.getNextSortingOrder() === 'asc'
? 'Sort ascending'
: column.getNextSortingOrder() === 'desc'
? 'Sort descending'
: 'Clear sort'
: undefined
}
>
{flexRender(
header.column.columnDef.header,
header.getContext()
)}
{{
asc: ' 🔼',
desc: ' 🔽',
}[header.column.getIsSorted() as string] ?? null}
</div>
)}
</th>
)
})}
</tr>
))}
</thead>
<tbody>
{table
.getRowModel()
.rows.slice(0, 10)
.map(row => {
return (
<tr key={row.id}>
{row.getVisibleCells().map(cell => {
return (
<td key={cell.id}>
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
</td>
)
})}
</tr>
)
})}
</tbody>
</table>
<div>{table.getRowModel().rows.length.toLocaleString()} Rows</div>
<pre>{JSON.stringify(sorting, null, 2)}</pre>
</div>
)
})
render(document.getElementById('app') as HTMLElement, <App />)
