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.
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.
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.
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.
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.
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.
| Issue | Owner |
|---|---|
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.
// 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