AdaptTable for Ant Design

Filtering in Ant Design

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 all Ant Design components.

The popover lets antd portal its Selects and pickers to the body the way antd does everywhere, and teaches the outside-click handler to ignore those layers instead — numbers filter through an InputNumber, and each active filter is a closable Tag.

The code

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

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/antd @adapttable/core antd

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 Radix — Radix Themes, iris accent
• Filtering in Base UI — Unstyled primitives, blue accent
• Filtering in shadcn — Monochrome, ring focus
• Filtering in Tailwind — Unstyled — your own classes

More Ant Design features

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