📄 tanstack/table/v8/docs/framework/react/examples/row-selection
File: row-selection.md | Updated: 11/15/2025
Source: https://tanstack.com/table/v8/docs/framework/react/examples/row-selection
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
React
Version
v8
Search...
+ K
Menu
Getting Started
Core Guides
Feature Guides
Core APIs
Feature APIs
Enterprise
Examples
Framework
React
Version
v8
Menu
Getting Started
Core Guides
Feature Guides
Core APIs
Feature APIs
Enterprise
Examples
React Example: Row Selection
===========================================================================================================================================================================================================================================================================================================================================================================================================================
Code ExplorerCode
Interactive SandboxSandbox
-
src
-
index.css
-
main.tsx
-
makeData.ts
-
-
.gitignore
-
README.md
-
index.html
-
package.json
-
tsconfig.json
-
vite.config.js
tsx
import React, { HTMLAttributes, HTMLProps } from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'
import { makeData, Person } from './makeData'
import {
Column,
ColumnDef,
flexRender,
getCoreRowModel,
getFilteredRowModel,
getPaginationRowModel,
Table,
useReactTable,
} from '@tanstack/react-table'
function App() {
const rerender = React.useReducer(() => ({}), {})[1]
const [rowSelection, setRowSelection] = React.useState({})
const [globalFilter, setGlobalFilter] = React.useState('')
const columns = React.useMemo<ColumnDef<Person>[]>(
() => [\
{\
id: 'select',\
header: ({ table }) => (\
<IndeterminateCheckbox\
{...{\
checked: table.getIsAllRowsSelected(),\
indeterminate: table.getIsSomeRowsSelected(),\
onChange: table.getToggleAllRowsSelectedHandler(),\
}}\
/>\
),\
cell: ({ row }) => (\
<div className="px-1">\
<IndeterminateCheckbox\
{...{\
checked: row.getIsSelected(),\
disabled: !row.getCanSelect(),\
indeterminate: row.getIsSomeSelected(),\
onChange: row.getToggleSelectedHandler(),\
}}\
/>\
</div>\
),\
},\
{\
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 [data, setData] = React.useState(() => makeData(100000))
const refreshData = () => setData(() => makeData(100000))
const table = useReactTable({
data,
columns,
state: {
rowSelection,
},
enableRowSelection: true, //enable row selection for all rows
// enableRowSelection: row => row.original.age > 18, // or enable row selection conditionally per row
onRowSelectionChange: setRowSelection,
getCoreRowModel: getCoreRowModel(),
getFilteredRowModel: getFilteredRowModel(),
getPaginationRowModel: getPaginationRowModel(),
debugTable: true,
})
return (
<div className="p-2">
<div>
<input
value={globalFilter ?? ''}
onChange={e => setGlobalFilter(e.target.value)}
className="p-2 font-lg shadow border border-block"
placeholder="Search all columns..."
/>
</div>
<div className="h-2" />
<table>
<thead>
{table.getHeaderGroups().map(headerGroup => (
<tr key={headerGroup.id}>
{headerGroup.headers.map(header => {
return (
<th key={header.id} colSpan={header.colSpan}>
{header.isPlaceholder ? null : (
<>
{flexRender(
header.column.columnDef.header,
header.getContext()
)}
{header.column.getCanFilter() ? (
<div>
<Filter column={header.column} table={table} />
</div>
) : null}
</>
)}
</th>
)
})}
</tr>
))}
</thead>
<tbody>
{table.getRowModel().rows.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>
<tfoot>
<tr>
<td className="p-1">
<IndeterminateCheckbox
{...{
checked: table.getIsAllPageRowsSelected(),
indeterminate: table.getIsSomePageRowsSelected(),
onChange: table.getToggleAllPageRowsSelectedHandler(),
}}
/>
</td>
<td colSpan={20}>Page Rows ({table.getRowModel().rows.length})</td>
</tr>
</tfoot>
</table>
<div className="h-2" />
<div className="flex items-center gap-2">
<button
className="border rounded p-1"
onClick={() => table.setPageIndex(0)}
disabled={!table.getCanPreviousPage()}
>
{'<<'}
</button>
<button
className="border rounded p-1"
onClick={() => table.previousPage()}
disabled={!table.getCanPreviousPage()}
>
{'<'}
</button>
<button
className="border rounded p-1"
onClick={() => table.nextPage()}
disabled={!table.getCanNextPage()}
>
{'>'}
</button>
<button
className="border rounded p-1"
onClick={() => table.setPageIndex(table.getPageCount() - 1)}
disabled={!table.getCanNextPage()}
>
{'>>'}
</button>
<span className="flex items-center gap-1">
<div>Page</div>
<strong>
{table.getState().pagination.pageIndex + 1} of{' '}
{table.getPageCount()}
</strong>
</span>
<span className="flex items-center gap-1">
| Go to page:
<input
type="number"
min="1"
max={table.getPageCount()}
defaultValue={table.getState().pagination.pageIndex + 1}
onChange={e => {
const page = e.target.value ? Number(e.target.value) - 1 : 0
table.setPageIndex(page)
}}
className="border p-1 rounded w-16"
/>
</span>
<select
value={table.getState().pagination.pageSize}
onChange={e => {
table.setPageSize(Number(e.target.value))
}}
>
{[10, 20, 30, 40, 50].map(pageSize => (
<option key={pageSize} value={pageSize}>
Show {pageSize}
</option>
))}
</select>
</div>
<br />
<div>
{Object.keys(rowSelection).length} of{' '}
{table.getPreFilteredRowModel().rows.length} Total Rows Selected
</div>
<hr />
<br />
<div>
<button className="border rounded p-2 mb-2" onClick={() => rerender()}>
Force Rerender
</button>
</div>
<div>
<button
className="border rounded p-2 mb-2"
onClick={() => refreshData()}
>
Refresh Data
</button>
</div>
<div>
<button
className="border rounded p-2 mb-2"
onClick={() =>
console.info(
'table.getSelectedRowModel().flatRows',
table.getSelectedRowModel().flatRows
)
}
>
Log table.getSelectedRowModel().flatRows
</button>
</div>
<div>
<label>Row Selection State:</label>
<pre>{JSON.stringify(table.getState().rowSelection, null, 2)}</pre>
</div>
</div>
)
}
function Filter({
column,
table,
}: {
column: Column<any, any>
table: Table<any>
}) {
const firstValue = table
.getPreFilteredRowModel()
.flatRows[0]?.getValue(column.id)
return typeof firstValue === 'number' ? (
<div className="flex space-x-2">
<input
type="number"
value={((column.getFilterValue() as any)?.[0] ?? '') as string}
onChange={e =>
column.setFilterValue((old: any) => [e.target.value, old?.[1]])
}
placeholder={`Min`}
className="w-24 border shadow rounded"
/>
<input
type="number"
value={((column.getFilterValue() as any)?.[1] ?? '') as string}
onChange={e =>
column.setFilterValue((old: any) => [old?.[0], e.target.value])
}
placeholder={`Max`}
className="w-24 border shadow rounded"
/>
</div>
) : (
<input
type="text"
value={(column.getFilterValue() ?? '') as string}
onChange={e => column.setFilterValue(e.target.value)}
placeholder={`Search...`}
className="w-36 border shadow rounded"
/>
)
}
function IndeterminateCheckbox({
indeterminate,
className = '',
...rest
}: { indeterminate?: boolean } & HTMLProps<HTMLInputElement>) {
const ref = React.useRef<HTMLInputElement>(null!)
React.useEffect(() => {
if (typeof indeterminate === 'boolean') {
ref.current.indeterminate = !rest.checked && indeterminate
}
}, [ref, indeterminate])
return (
<input
type="checkbox"
ref={ref}
className={className + ' cursor-pointer'}
{...rest}
/>
)
}
const rootElement = document.getElementById('root')
if (!rootElement) throw new Error('Failed to find the root element')
ReactDOM.createRoot(rootElement).render(
<React.StrictMode>
<App />
</React.StrictMode>
)
import React, { HTMLAttributes, HTMLProps } from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'
import { makeData, Person } from './makeData'
import {
Column,
ColumnDef,
flexRender,
getCoreRowModel,
getFilteredRowModel,
getPaginationRowModel,
Table,
useReactTable,
} from '@tanstack/react-table'
function App() {
const rerender = React.useReducer(() => ({}), {})[1]
const [rowSelection, setRowSelection] = React.useState({})
const [globalFilter, setGlobalFilter] = React.useState('')
const columns = React.useMemo<ColumnDef<Person>[]>(
() => [\
{\
id: 'select',\
header: ({ table }) => (\
<IndeterminateCheckbox\
{...{\
checked: table.getIsAllRowsSelected(),\
indeterminate: table.getIsSomeRowsSelected(),\
onChange: table.getToggleAllRowsSelectedHandler(),\
}}\
/>\
),\
cell: ({ row }) => (\
<div className="px-1">\
<IndeterminateCheckbox\
{...{\
checked: row.getIsSelected(),\
disabled: !row.getCanSelect(),\
indeterminate: row.getIsSomeSelected(),\
onChange: row.getToggleSelectedHandler(),\
}}\
/>\
</div>\
),\
},\
{\
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 [data, setData] = React.useState(() => makeData(100000))
const refreshData = () => setData(() => makeData(100000))
const table = useReactTable({
data,
columns,
state: {
rowSelection,
},
enableRowSelection: true, //enable row selection for all rows
// enableRowSelection: row => row.original.age > 18, // or enable row selection conditionally per row
onRowSelectionChange: setRowSelection,
getCoreRowModel: getCoreRowModel(),
getFilteredRowModel: getFilteredRowModel(),
getPaginationRowModel: getPaginationRowModel(),
debugTable: true,
})
return (
<div className="p-2">
<div>
<input
value={globalFilter ?? ''}
onChange={e => setGlobalFilter(e.target.value)}
className="p-2 font-lg shadow border border-block"
placeholder="Search all columns..."
/>
</div>
<div className="h-2" />
<table>
<thead>
{table.getHeaderGroups().map(headerGroup => (
<tr key={headerGroup.id}>
{headerGroup.headers.map(header => {
return (
<th key={header.id} colSpan={header.colSpan}>
{header.isPlaceholder ? null : (
<>
{flexRender(
header.column.columnDef.header,
header.getContext()
)}
{header.column.getCanFilter() ? (
<div>
<Filter column={header.column} table={table} />
</div>
) : null}
</>
)}
</th>
)
})}
</tr>
))}
</thead>
<tbody>
{table.getRowModel().rows.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>
<tfoot>
<tr>
<td className="p-1">
<IndeterminateCheckbox
{...{
checked: table.getIsAllPageRowsSelected(),
indeterminate: table.getIsSomePageRowsSelected(),
onChange: table.getToggleAllPageRowsSelectedHandler(),
}}
/>
</td>
<td colSpan={20}>Page Rows ({table.getRowModel().rows.length})</td>
</tr>
</tfoot>
</table>
<div className="h-2" />
<div className="flex items-center gap-2">
<button
className="border rounded p-1"
onClick={() => table.setPageIndex(0)}
disabled={!table.getCanPreviousPage()}
>
{'<<'}
</button>
<button
className="border rounded p-1"
onClick={() => table.previousPage()}
disabled={!table.getCanPreviousPage()}
>
{'<'}
</button>
<button
className="border rounded p-1"
onClick={() => table.nextPage()}
disabled={!table.getCanNextPage()}
>
{'>'}
</button>
<button
className="border rounded p-1"
onClick={() => table.setPageIndex(table.getPageCount() - 1)}
disabled={!table.getCanNextPage()}
>
{'>>'}
</button>
<span className="flex items-center gap-1">
<div>Page</div>
<strong>
{table.getState().pagination.pageIndex + 1} of{' '}
{table.getPageCount()}
</strong>
</span>
<span className="flex items-center gap-1">
| Go to page:
<input
type="number"
min="1"
max={table.getPageCount()}
defaultValue={table.getState().pagination.pageIndex + 1}
onChange={e => {
const page = e.target.value ? Number(e.target.value) - 1 : 0
table.setPageIndex(page)
}}
className="border p-1 rounded w-16"
/>
</span>
<select
value={table.getState().pagination.pageSize}
onChange={e => {
table.setPageSize(Number(e.target.value))
}}
>
{[10, 20, 30, 40, 50].map(pageSize => (
<option key={pageSize} value={pageSize}>
Show {pageSize}
</option>
))}
</select>
</div>
<br />
<div>
{Object.keys(rowSelection).length} of{' '}
{table.getPreFilteredRowModel().rows.length} Total Rows Selected
</div>
<hr />
<br />
<div>
<button className="border rounded p-2 mb-2" onClick={() => rerender()}>
Force Rerender
</button>
</div>
<div>
<button
className="border rounded p-2 mb-2"
onClick={() => refreshData()}
>
Refresh Data
</button>
</div>
<div>
<button
className="border rounded p-2 mb-2"
onClick={() =>
console.info(
'table.getSelectedRowModel().flatRows',
table.getSelectedRowModel().flatRows
)
}
>
Log table.getSelectedRowModel().flatRows
</button>
</div>
<div>
<label>Row Selection State:</label>
<pre>{JSON.stringify(table.getState().rowSelection, null, 2)}</pre>
</div>
</div>
)
}
function Filter({
column,
table,
}: {
column: Column<any, any>
table: Table<any>
}) {
const firstValue = table
.getPreFilteredRowModel()
.flatRows[0]?.getValue(column.id)
return typeof firstValue === 'number' ? (
<div className="flex space-x-2">
<input
type="number"
value={((column.getFilterValue() as any)?.[0] ?? '') as string}
onChange={e =>
column.setFilterValue((old: any) => [e.target.value, old?.[1]])
}
placeholder={`Min`}
className="w-24 border shadow rounded"
/>
<input
type="number"
value={((column.getFilterValue() as any)?.[1] ?? '') as string}
onChange={e =>
column.setFilterValue((old: any) => [old?.[0], e.target.value])
}
placeholder={`Max`}
className="w-24 border shadow rounded"
/>
</div>
) : (
<input
type="text"
value={(column.getFilterValue() ?? '') as string}
onChange={e => column.setFilterValue(e.target.value)}
placeholder={`Search...`}
className="w-36 border shadow rounded"
/>
)
}
function IndeterminateCheckbox({
indeterminate,
className = '',
...rest
}: { indeterminate?: boolean } & HTMLProps<HTMLInputElement>) {
const ref = React.useRef<HTMLInputElement>(null!)
React.useEffect(() => {
if (typeof indeterminate === 'boolean') {
ref.current.indeterminate = !rest.checked && indeterminate
}
}, [ref, indeterminate])
return (
<input
type="checkbox"
ref={ref}
className={className + ' cursor-pointer'}
{...rest}
/>
)
}
const rootElement = document.getElementById('root')
if (!rootElement) throw new Error('Failed to find the root element')
ReactDOM.createRoot(rootElement).render(
<React.StrictMode>
<App />
</React.StrictMode>
)
