Table toolbar

The controls over a table, in one row

Search, filters as chips, sort, group, the columns, the density, saved views, a bulk bar for selected rows and the page's actions, in one row that never wraps. Put it in a data table's toolbar slot and it reads and sets the table's own state with no props. Its filters and the table's header filters are one list, so a filter set from either shows in both.

Inside a data table

Add a filter from the Filter button, beside search, or from a column's menu. Each chip reads its column, its condition and its value, and opens the same editor as the header; chips that do not fit fold into a +N chip. Columns shows, hides and orders the columns, and the density switch sets the table's density, which every control in the bar follows. The primary action is a split button when it carries a menu.

Filters, 1 on
Sort
Columns
Issues
Labels
Composer loses focus on paste
Open
Jane Doe
3
2026-11-04
editor
Dark-mode chart palette drifts
Blocked
Alex Smith
5
2026-11-12
charts, theme
Sidebar badge miscounts drafts
Open
Sam Reyes
1
2026-11-02
nav
Globe drag stutters on trackpads
Open
Sam Reyes
8
2026-11-20
maps, gestures

Sort and group

Sort lists the sorts first sort first: drag a row, or press Alt with the arrows, to reorder them, and Add sort picks another column. Group picks the column the rows gather by, with Collapse all and Expand all. Each icon carries a count while it is set.

Filter
Sort, 2 on
Group, on
Columns
Issues, sorted and grouped
Labels
Dark-mode chart palette drifts
Blocked
Alex Smith
5
2026-11-12
charts, theme
Stepper skips the review step
Done
Alex Smith
2
2026-10-30
forms
Toast stacks past its inset
Done
Jane Doe
2
2026-10-28
feedback
Composer loses focus on paste
Open
Jane Doe
3
2026-11-04
editor
Globe drag stutters on trackpads
Open
Sam Reyes
8
2026-11-20
maps, gestures
Sidebar badge miscounts drafts
Open
Sam Reyes
1
2026-11-02
nav

The bulk bar

Tick a row and the bar becomes the bulk bar at the same height: Clear, the count, Select all N past the page, then each action in full, the destructive ones last, with a More menu for what does not fit. An action runs on the selection, which can be every matching row, as a query a server can act on.

Clear selection2 selected
Filter
Sort
Columns
Issues, two selected
Labels
Composer loses focus on paste
Open
Jane Doe
3
2026-11-04
editor
Dark-mode chart palette drifts
Blocked
Alex Smith
5
2026-11-12
charts, theme
Sidebar badge miscounts drafts
Open
Sam Reyes
1
2026-11-02
nav

Saved views

Views sit as tabs on their own row over the bar. Picking one applies its setup to the table; once the table moves on from it, the tab shows a dot, and its menu saves, saves as new, resets, renames or deletes it. The plus saves the table as a new view.

All issues options
New view
Filter
Sort
Group
Columns
Issues, saved views
Labels
Composer loses focus on paste
Open
Jane Doe
3
2026-11-04
editor
Dark-mode chart palette drifts
Blocked
Alex Smith
5
2026-11-12
charts, theme
Sidebar badge miscounts drafts
Open
Sam Reyes
1
2026-11-02
nav
Toast stacks past its inset
Done
Jane Doe
2
2026-10-28
feedback
Globe drag stutters on trackpads
Open
Sam Reyes
8
2026-11-20
maps, gestures
Stepper skips the review step
Done
Alex Smith
2
2026-10-30
forms

Narrow

Narrower than a phone, measured on the bar itself, it folds to icons: search opens in a panel, the chips move into the Filter panel with a count on its icon, and More holds the secondary actions and the density. On a phone screen every panel opens as a sheet from the bottom.

Filters, 1 on
Sort
Columns
Issues, narrow
Labels
Composer loses focus on paste
Open
Jane Doe
3
2026-11-04
editor
Sidebar badge miscounts drafts
Open
Sam Reyes
1
2026-11-02
nav
Globe drag stutters on trackpads
Open
Sam Reyes
8
2026-11-20
maps, gestures

Over any table

Outside a data table the bar is driven by its own props: the columns it knows about, and each piece of state as a controlled or uncontrolled pair. Here it searches a plain table.

6 results
Sort
IssueOwner
Composer loses focus on paste
Jane Doe
Dark-mode chart palette drifts
Alex Smith
Sidebar badge miscounts drafts
Sam Reyes
Toast stacks past its inset
Jane Doe
Globe drag stutters on trackpads
Sam Reyes
Stepper skips the review step
Alex Smith

Filters

A column's filter takes the conditions its values call for: text contains, starts with or is; a number compares or falls between two; a date is before, after or between; a column with options is any of or none of them; a list has any, all or none of its values. Every condition joins with and. A filter left without a value when its editor closes is dropped.

tsx
// From the npm package
import { TableToolbar } from 'rift-ds/components/TableToolbar/TableToolbar';

// Or as source you own, via the shadcn CLI
npx shadcn@latest add https://rift-ds.com/r/table-toolbar.json