Getting started

AdaptTable is a headless, UI-agnostic React data table. Pick the adapter for your design system and you get a styled, sortable, filterable, paginated table with URL-synced state, selection + bulk actions, RTL, and dark mode.

Install

The fastest path is the CLI — it detects your UI kit from package.json, prints the install command, and scaffolds a starter src/PeopleTable.tsx:

npx @adapttable/cli init

Or install manually: @adapttable/core, the adapter for your kit, and the kit’s own packages (peer dependencies — skip what you already have). react / react-dom 18 or 19 are peers everywhere.

# Mantine
pnpm add @adapttable/core @adapttable/mantine @mantine/core @mantine/hooks

# Material UI
pnpm add @adapttable/core @adapttable/mui @mui/material

# Chakra UI (v2 — pin Chakra v2; v3 support hasn't landed yet)
pnpm add @adapttable/core @adapttable/chakra @chakra-ui/react@2 @emotion/react

# Ant Design
pnpm add @adapttable/core @adapttable/antd antd

# Tailwind / unstyled
pnpm add @adapttable/core @adapttable/unstyled

Provider setup

Each adapter renders with its UI kit’s own components, so your app needs that kit’s provider once at the root — exactly as the kit’s docs describe.

Mantine

// main.tsx — once per app, straight from Mantine's own setup guide.
import "@mantine/core/styles.css";
import { MantineProvider } from "@mantine/core";

<MantineProvider>
  <App />
</MantineProvider>;

Material UI — works with the default theme out of the box; wrap in ThemeProvider to customize:

import { createTheme, ThemeProvider } from "@mui/material";

<ThemeProvider theme={createTheme()}>
  <App />
</ThemeProvider>;

Chakra UI

import { ChakraProvider } from "@chakra-ui/react";

<ChakraProvider>
  <App />
</ChakraProvider>;

Ant Design — works without a provider; add ConfigProvider for theme or locale:

import { ConfigProvider } from "antd";

<ConfigProvider>
  <App />
</ConfigProvider>;

Unstyled — no provider. It renders semantic HTML with data-* and className hooks for your own CSS or Tailwind.

Your first table

Pass data and declare columns — that’s the whole thing:

// or import from "@adapttable/mui", "@adapttable/chakra",
// "@adapttable/antd", "@adapttable/unstyled" — same props everywhere.
import { DataTable } from "@adapttable/mantine";

interface Person {
  id: string;
  name: string;
  role: string;
  status: string;
  hiredAt: string;
}

const PEOPLE: Person[] = [
  {
    id: "1",
    name: "Ada Lovelace",
    role: "Engineer",
    status: "active",
    hiredAt: "2021-03-01",
  },
  {
    id: "2",
    name: "Alan Turing",
    role: "Founder",
    status: "active",
    hiredAt: "2019-06-15",
  },
  {
    id: "3",
    name: "Grace Hopper",
    role: "Admiral",
    status: "retired",
    hiredAt: "2018-01-20",
  },
];

export function PeopleTable() {
  return (
    <DataTable
      data={PEOPLE}
      columns={[
        { key: "name", sortable: true },
        { key: "role" },
        { key: "status", filter: { type: "select", options: "auto" } },
        { key: "hiredAt", filter: "dateRange" },
      ]}
      rowKey={(r) => r.id}
    />
  );
}

What you just got without writing any of it: search, sorting, pagination (paged on desktop, infinite scroll on mobile), URL-synced state (reload-safe, shareable links), empty/loading states, a mobile card layout, and a filter form built from those filter declarations with kit-native widgets — each filter also drives its own removable chip, URL parsing, and row predicate.

• Headers auto-derive from keys (hiredAt → “Hired At”); pass header to control the text in any language.
• Dot-path keys reach nested values: { key: "department.name" }.
• Filters that aren’t columns go in a table-level array:

<DataTable
  data={PEOPLE}
  columns={columns}
  filters={[
    { key: "companyId", type: "select", label: "Company", options: companies },
    { key: "budget", type: "numberRange" },
  ]}
  rowKey={(r) => r.id}
/>

Where next

• Columns — headers, custom cells, the Columns menu (show/hide, reorder, pin), resizing.
• Filtering — every filter type, options sources, chips, popover vs drawer.
• Data tiers — server data without a query library (onQueryChange), or full control via source and TanStack Query.
• Demo — every adapter, live.

Full surface: API reference · core concepts.