AdaptTable for Tailwind

Filtering in Tailwind

Declare what a column filters by and the table builds the control: text and number operators, date ranges with relative presets, and a checklist of the values actually present.

For the cases one row of inputs cannot express there is an AND/OR tree, and every active filter shows as a chip that removes itself.

The whole filter state lives in the URL, so a filtered view is a link someone can send — and the popover, drawer, inputs and chips are native elements, each one addressable by class so the filter form looks like the form you wrote.

The backdrop, panel, popover and every filter input carry the map's classes with an indigo focus ring, and a checked option fills its label in indigo; the checklist and the AND/OR builder are not in the map, so they read as browser defaults.

The code

import { DataTable } from "@adapttable/unstyled";

const columns = [
  { key: "name", filter: "text" },
  {
    key: "team",
    filter: { type: "select", options: "auto" },
  },
  { key: "budget", filter: "numberRange" },
  { key: "hiredAt", filter: "dateRange" },
];

export function People({ rows }) {
  return (
    <DataTable
      data={rows}
      columns={columns}
      rowKey={(row) => row.id}
      filtersMode="popover"
      urlKey="f"
    />
  );
}

Install

pnpm add @adapttable/unstyled @adapttable/core

The same feature in the other kits

• Filtering in Mantine — Rounded, friendly, filled controls
• Filtering in MUI — Material elevation, uppercase actions
• Filtering in Chakra — Soft teal, generous radius
• Filtering in Ant Design — Compact, tinted header, crisp
• Filtering in Radix — Radix Themes, iris accent
• Filtering in Base UI — Unstyled primitives, blue accent
• Filtering in shadcn — Monochrome, ring focus

More Tailwind features

• Column management in Tailwind — Show, hide, reorder, pin and resize — from a menu you did not write.
• Column groups in Tailwind — Spanning headers that collapse to a stub, a kept child, or a custom cell.
• Row selection in Tailwind — A set of ids that survives paging, with bulk actions over it.
• Rows in Tailwind — Pin, drag-reorder, merge cells, and a 3-dot menu per row.
• Inline cell editing in Tailwind — Kit-native editors in the cell; every write goes through your handler.
• Row grouping in Tailwind — Nested group headers with counts, subtotals, footers and collapse state.
• Nested tables in Tailwind — A real table under a row — same engine, own columns, own keys.
• Export and print in Tailwind — CSV, XLSX and PDF from one seam — plus a real print layout.
• Large datasets in Tailwind — 100k rows, 40 columns, virtualized rows and columns, sticky chrome.
• Tree data in Tailwind — Rows that contain rows — nesting, chevrons, keyboard traversal.
• Mobile cards in Tailwind — Every row becomes a card on phones. Automatically, with the same state.
• Pivot tables in Tailwind — Rows down the side, dimensions across the top, subtotals at every level.
• Saved views in Tailwind — Name an arrangement, share it as a link, manage the list in place.
• Spreadsheet formulas in Tailwind — Computed columns typed as formulas, errors reported in the cell.
• Right-to-left Tailwind data table — Arabic strings, a flipped axis, and a popover that opens from the right edge.
• Live updates in Tailwind — Rows change while you read them. Sort and selection hold.
• Accessible Tailwind data table — Arrow-key focus, a visible ring, and every announcement shown as text.

Reference: filtering, filter-tree, url-state. More of this kit: AdaptTable for Tailwind, or the live demo.