Filtered Table Pattern

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 - Enable getFacetedRowModel() and getFacetedUniqueValues() on the table for live filter counts