---
title: Filtered Table Pattern
description: A toolbar with faceted filters and table actions above a data table.
icon: table-2
author:
  name: eblairmckee
  url: https://github.com/eblairmckee
mode: wide
---

A toolbar with [DataTableFilter](/docs/data-table-filter) on the left and table actions on the right, positioned `gap-4` above the table.

<ComponentPreview name="pattern-filtered-table-demo" />

## Toolbar Layout

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

**Left side (filters):**

- [DataTableFilter](/docs/data-table-filter) 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

| Component                                  | Purpose                                  |
| ------------------------------------------ | ---------------------------------------- |
| [DataTableFilter](/docs/data-table-filter) | Faceted filter bar with operator support |
| [Data Table](/docs/data-table)             | TanStack Table-based data grid           |
| [Button](/docs/button)                     | Toolbar action buttons                   |
| [DropdownMenu](/docs/dropdown-menu)        | Column visibility toggle                 |

## 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