Skip to content

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

Free

Data Table with Column Visibility for React

An orders table with a Columns button. The menu checks each hideable column, over heads such as Customer, Product, Quantity and Total.

A Columns button sits above an orders table. Its menu is a checkbox for each hideable column. The heads include Order ID, Customer, Product, Quantity, Total and Date.

Let people hide columns on a wide orders table. A shorter Table is enough if everyone needs the same columns. Base UI in React does not remember hidden columns.

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="flex items-center justify-end py-4">
    <ColumnsMenu table={table} />
  </div>
  <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 key={row.id}>
              {row.getVisibleCells().map((cell) => (
                <TableCell key={cell.id}>
                  <table.FlexRender cell={cell} />
                </TableCell>
              ))}
            </TableRow>
          ))
        ) : (
{/* The rest of the file is under Installation. */}

FAQ

Where is column visibility stored?

In the table, from columnVisibilityFeature; every column starts visible. Pass initialState: { columnVisibility: { date: false } } to start with a column hidden.

How does the Columns menu toggle a column?

It lists table.getAllColumns() filtered by getCanHide(), checked from column.getIsVisible(). Each DropdownMenuCheckboxItem calls column.toggleVisibility from onCheckedChange.

What text does each item show?

The column's id with capitalize: Id, Customer, Product, Quantity, Total and Date. Give a column meta with a label, or map ids to names, to show something else.

What does the trigger look like?

An outline Button reading Columns with a chevron after the text. The menu opens below it, aligned to its end.

Does a refresh keep hidden columns hidden?

No. Visibility lives in the table's state. Save it from onColumnVisibilityChange and pass it back as initial state to keep it.

Can every column be hidden?

Yes, nothing stops the last one. Set enableHiding: false on a column, such as the order id, to keep it in the table and out of the menu.

API Reference

Table

Sets colSpan={table.getVisibleLeafColumns().length}. The rest is on the Table page.

All 8 data table examples