@adapttable/antd

📖 Documentation · 🚀 Live demo · Get started · ⚡ Try in StackBlitz

The Ant Design adapter for AdaptTable — a batteries-included antd data table with sorting, filtering, URL-synced state, selection + bulk actions, RTL, and dark mode. It drives antd's high-level <Table> from the headless @adapttable/core engine, so you get the antd look-and-feel wired to a shareable, server-or-client data source.

pnpm add @adapttable/antd @adapttable/core antd react react-dom

Quickstart

import { DataTable, useFrontendData, type ColumnDef } from "@adapttable/antd";

interface Person {
  id: string;
  name: string;
  city: string;
}

const columns: ColumnDef<Person>[] = [
  { key: "name", header: "Name", accessor: (r) => r.name, sortable: true },
  { key: "city", header: "City", accessor: (r) => r.city },
];

export function People({ data }: { data: Person[] }) {
  const source = useFrontendData({ data, columns });
  return <DataTable source={source} columns={columns} rowKey={(r) => r.id} />;
}

Wrap your app in antd's ConfigProvider to control the theme (including theme.darkAlgorithm) and direction="rtl", as usual. Swap useFrontendData for useQuerySource to drive the table from a server-paginated query — the component doesn't change.

Features

• Automatic mobile cards — a horizontally-scrollable <Table> on desktop becomes a Card + Descriptions list below the mobile breakpoint (same filters, search, selection and URL state); tune per column with mobileLabel / hideOnMobile, pin either layout with forceMobile. See it flip live.
• Client or server data through one TableSource contract — same props either way.
• URL-synced search / sort / filters / page — shareable, deep-linkable links.
• Sorting via native antd <Table> header sort carets.
• Filtering — a Drawer or Popover of filters plus removable Tag chips, with a filter count on the trigger.
• Selection + bulk actions using antd Checkboxes (with indeterminate select-all), with confirm dialogs (bulkActions).
• Row actions with optional confirm, isHidden / isDisabled per row.
• Row expansion — inline detail panels via renderRowDetail.
• Inline cell editing (onCellEdit + editable columns) — text, number and select editors; Enter commits, Escape cancels, Tab moves on. Omit the handler and no cell opens.
• Row grouping (groupBy) with per-group aggregates sharing the summaryRow mapper.
• Column management — show/hide, reorder, pin (sticky) and resize, from a built-in menu.
• Saved views — name a filter/sort/column arrangement and switch between them.
• CSV export (exportCsv) — current page or the full filtered set.
• Virtualization (virtualize) — opt-in row/card windowing for very large lists.
• Pagination — antd Pagination with page-size changer, or infinite scroll (IntersectionObserver auto-load plus a "Load more" fallback).
• States — antd Skeleton (honouring skeletonRows), Alert error with retry, and Empty.
• RTL via dir-aware logical column alignment; dark mode via antd's algorithm.
• Customisation — slots (skeleton, empty), className, size, bordered, injectable confirm, and the full headless escape hatch via @adapttable/core.

See it work

Each clip is the real adapter, recorded on the live demo.

Row grouping — group rows by a column with per-group subtotals

Inline cell editing — double-click a cell; text, number and select editors

Filtering — type a bound and the table answers as you type

Column management — show, hide, reorder, pin and resize

RTL / Arabic — the whole table mirrors, not just the text

Documentation

Getting started · Live demo · Comparison vs ag-Grid · MUI X · TanStack

• Data — client vs server tiers · pagination & infinite scroll · URL-synced state
• Interaction — filtering · sorting · selection & bulk actions · row expansion · inline cell editing
• Columns — show/hide · reorder · pin · resize · row grouping & aggregates · CSV export
• More — i18n & RTL · virtualization · customization · API · FAQ

License

MIT © Orwa Mahmoud