Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Basic Data Table with Checkboxes for Ark UI

A product table with a checkbox on each row, a select-all checkbox and a Name header that sorts. Laptop is the first product.

Each row has a checkbox, then Name, Category, Price and Stock. A select-all checkbox sits in the header, and Name is a button with a sort icon. Laptop is first, in Electronics.

Use row checkboxes when people act on a selection. A plain Table is enough when nothing is selected. On React, Ark UI does not track which rows are checked.

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

Usage

<div className="w-full max-w-4xl">
  <div className="rounded-md border bg-background">
    <Table>
      <TableHeader>
        {table.getHeaderGroups().map((headerGroup) => (
          <TableRow key={headerGroup.id}>
            {headerGroup.headers.map((header) => (
              <TableHead key={header.id}>
                {header.isPlaceholder ? null : (
                  <table.FlexRender header={header} />
                )}
              </TableHead>
            ))}
          </TableRow>
        ))}
      </TableHeader>
      <TableBody>
        {rows.length > 0 ? (
          rows.map((row) => (
            <TableRow
              data-state={row.getIsSelected() ? "selected" : undefined}
              key={row.id}
            >
              {row.getAllCells().map((cell) => (
                <TableCell key={cell.id}>
                  <table.FlexRender cell={cell} />
                </TableCell>
              ))}
            </TableRow>
          ))
        ) : (
{/* The rest of the file is under Installation. */}

FAQ

When is the header checkbox indeterminate?

When some rows are selected but not all. checked is true, false or "indeterminate" from table.getIsAllPageRowsSelected() and table.getIsSomePageRowsSelected(), and onCheckedChange receives { checked }.

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.

API Reference

Table

Sets data-state={row.getIsSelected() ? "selected" : undefined} and colSpan={columns.length}. The rest is on the Table page.

All 8 data table examples