@adapttable/mantine

v2.1.2

Published

3 days ago

Mantine adapter for AdaptTable — a batteries-included, themeable React data table with sorting, filtering, URL state, virtualization, RTL, dark mode, and responsive card rendering.

0High
0Medium
0Low

orwa.mahmoud

react mantine data-table table datagrid mantine-datatable server-side-pagination url-state virtualized-table responsive-table rtl dark-mode typescript

@adapttable/mantine

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

Migrating from mantine-datatable? See the migration guide.

The Mantine adapter for AdaptTable — a batteries-included React data table with sorting, filtering, URL-synced state, selection + bulk actions, RTL, dark mode, and optional entrance animation. Built on the headless @adapttable/core engine.

pnpm add @adapttable/mantine @adapttable/core @mantine/core @mantine/hooks react react-dom

Quickstart

import "@mantine/core/styles.css";
import { MantineProvider } from "@mantine/core";
import {
  DataTable,
  useFrontendData,
  type ColumnDef,
} from "@adapttable/mantine";

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 (
    <MantineProvider>
      <DataTable source={source} columns={columns} rowKey={(r) => r.id} />
    </MantineProvider>
  );
}

Swap useFrontendData for useQuerySource to drive the same table from a server-paginated useInfiniteQuery — nothing else changes.

Features

Automatic mobile cards — below the mobile breakpoint every row renders as a Mantine Card (same filters, search, selection and URL state) and infinite scroll replaces the pager; 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 accessible header controls.
Filtering — a Drawer or anchored Popover of filters plus removable chips (filters + filterLabels), with a filter count on the trigger.
Selection + bulk actions using Mantine Checkboxes, 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 — numbered Pagination, or infinite scroll (auto by device).
States — Skeleton loading, error with retry, and an empty state.
RTL via dir; dark mode via Mantine's color scheme.
Customisation — slots, classNames, custom toolbar, injectable confirm, optional entrance animation (animate, honours prefers-reduced-motion), and the full headless escape hatch via @adapttable/core.