Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Data Table examples · Standard

Basic Data Table with Checkboxes for React

A table of products with a checkbox on each row, a select-all checkbox and a sortable name column.

Framework
UI library

Five products with a Checkbox at the start of each row and one in the header that selects them all. The Name header sorts the rows, and the line under the table counts the selection. TanStack Table keeps the selection and the sort; Base UI draws the checkboxes. Start here when people pick rows to act on together: delete, export, assign.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

When is the header checkbox indeterminate?

When some rows are selected but not all. checked is table.getIsAllPageRowsSelected() and the indeterminate prop is table.getIsSomePageRowsSelected(). onCheckedChange receives a boolean.

How does a row checkbox toggle?

Its checked is row.getIsSelected(), and onCheckedChange calls row.toggleSelected. The row checkbox is labeled Select row and the header's Select all.

Does sorting clear the selection?

No. Selection and sorting are separate parts of the table's state, and the selection is keyed by row, so a sorted row keeps its check.

How do I read which rows are selected?

table.getSelectedRowModel().rows holds them; the line under the table prints its length against the five products. A selected TableRow gets data-state="selected", which shades it.

How does the Name column sort?

The Name header is a ghost Button whose onClick is column.getToggleSortingHandler().The table has rowSortingFeature, createSortedRowModel() and the alphanumeric sort.

Can I select rows from the keyboard?

Tab reaches each checkbox and Space toggles it.The selection works the same with the pointer and the keyboard.
All 8 data table examples