Mantine Data Table

A config-driven wrapper around mantine-datatable. Describe a table once as a list of fields and get sorting, pagination, filtering, CRUD modals, row expansion and a responsive mobile card layout — backed by TanStack Query.

Installation

npm i @espresso-lab/mantine-data-table

Peer dependencies you need to install: @mantine/core, @mantine/dates, @mantine/form, @mantine/hooks, @tabler/icons-react, react and react-dom. (mantine-datatable and @tanstack/react-query come bundled.)

Setup

Wrap your app in DataTableProvider. It provides the base URL, a TanStack Query client and the headers sent with every request.

import "@mantine/core/styles.css";
import "@mantine/dates/styles.css";
import "mantine-datatable/styles.css";

import { MantineProvider } from "@mantine/core";
import { QueryClient } from "@tanstack/react-query";
import { DataTableProvider } from "@espresso-lab/mantine-data-table";

const queryClient = new QueryClient();

export function Root() {
  return (
    <MantineProvider>
      <DataTableProvider
        baseUrl="https://api.example.com"
        queryClient={queryClient}
        getHeaders={async () => ({ Authorization: `Bearer ${await getToken()}` })}
      >
        <App />
      </DataTableProvider>
    </MantineProvider>
  );
}

Usage

A table is described by a queryKey, an apiPath and a list of fields. The component fetches GET {apiPath}, renders the rows and wires create/update/delete against the same path.

import { DataTable, Field } from "@espresso-lab/mantine-data-table";

interface User {
  id: string;
  name: string;
  email: string;
  active: boolean;
}

const fields: Field<User>[] = [
  {
    id: "name",
    list: true, create: true, update: true, delete: true,
    required: true,
    column: { accessor: "name", title: "Name", sortable: true },
  },
  {
    id: "email",
    list: true, create: true, update: true, delete: true,
    column: { accessor: "email", title: "Email" },
  },
  {
    id: "active",
    list: true, create: true, update: true, delete: true,
    type: "boolean",
    column: { accessor: "active", title: "Active" },
  },
];

export function Users() {
  return (
    <DataTable<User>
      title="Users"
      queryKey={["users"]}
      apiPath="/users"
      fields={fields}
      selection
      pagination
      mobileCards
    />
  );
}

Fields

A field describes both a table column and a form input.

Key	Description
id	Unique key; used as the form field name and column accessor fallback.
list / create / update / delete	Whether the field shows in the table, the create form, the edit form, and is editable.
type	text (default), number, date, boolean, textarea or custom.
required	boolean or (values) => boolean.
column	A mantine-datatable column — accessor, title, render, sortable, textAlign, filter, footer, hidden.
render	For type: "custom" — render your own input.
defaultValue, placeholder, step, conditional	Optional.

Common props

Prop	Description
selection	Row checkboxes with bulk actions.
pagination	Client-side pagination.
mobileCards	Render a card list instead of the table below the sm breakpoint.
tabs	Switch between datasets, each with its own query params and api path.
actions	Custom bulk actions on the selected rows.
rowExpansion	Expandable rows (see below).
defaultSort, queryParams, onRowClick, canUpdate, canDelete	Optional.

Row expansion

Set rowExpansion to render content under a row. A chevron is added to the first column automatically; expandable controls which rows can open.

import { SubTable } from "@espresso-lab/mantine-data-table";

<DataTable<Account>
  title="Accounts"
  queryKey={["accounts"]}
  apiPath="/accounts"
  fields={fields}
  mobileCards
  rowExpansion={{
    expandable: (account) => account.entries.length > 0,
    content: (account, isMobile) => (
      <SubTable
        mobile={isMobile}
        records={account.entries}
        idAccessor="id"
        columns={[
          { accessor: "date", title: "Date", render: (e) => formatDate(e.date) },
          {
            accessor: "amount",
            title: "Amount",
            textAlign: "right",
            render: (e) => formatAmount(e.amount),
            footer: formatAmount(account.total),
          },
        ]}
      />
    ),
  }}
/>;

SubTable uses one set of columns for both layouts: a full mantine-datatable on desktop (sorting, column filters, footer totals) and a labelled card list on mobile. Add hideOnMobile: (record) => boolean to a column to drop low-value cells from the mobile cards.

License

MIT