Filtered Table Pattern

A toolbar with faceted filters and table actions above a data table.

A toolbar with DataTableFilter on the left and table actions on the right, positioned gap-4 above the table.

Toolbar Layout

┌──────────────────────────────────────────────────────────────────┐│  [+ Filter ▼] [Status: is Running ✕]        [↻] [⋮ Columns]    │├──────────────────────────────────────────────────────────────────┤│  Name          │ Status  │ Nodes │ Region    │ Actions           ││  ...           │ ...     │ ...   │ ...       │ ...               │└──────────────────────────────────────────────────────────────────┘

Left side (filters):

• DataTableFilter with faceted counts from TanStack Table
• Active filter pills with operator display and clear actions

Right side (table actions):

• Refresh button
• Column visibility toggle
• Other table-level actions (export, bulk actions, etc.)

Components Used

Best Practices

1. Consistent spacing - Use gap-4 between toolbar and table
2. Logical filter order - Order filter columns by frequency of use
3. Icon buttons for actions - Use icon-only buttons for refresh and column toggle
4. Right-align row actions - Keep action menus in the last column, right-aligned
5. Column visibility - Allow users to hide/show columns for dense tables
6. Faceted counts - Use the registry’s useDataTable hook; its explicit V9 feature set includes faceted row models and unique-value counts