Data Table

BlockMantine ≥ 9

Sortable table with loading skeletons, click-through rows and an empty state.

Install

One command copies the item's source into your project, where you own and edit it.

1
npx manteen add @house/data-table

Dependencies

@mantine/core@^9npm
@tabler/icons-react@^3npm

Installing this item also installs @house/empty-state from the registry.

Preview

Usage

A copy-ready example published by the registry author. Imports use the aliases Manteen configures at init.

1
import { Badge } from "@mantine/core";
2
import { DataTable } from "@/components/ui/data-table";
3

4
interface Invoice extends Record<string, unknown> {
5
  id: string;
6
  client: string;
7
  amount: number;
8
  status: "paid" | "overdue" | "pending";
9
}
10

11
const invoices: Invoice[] = [
12
  { id: "INV-1042", client: "Bluefin Studio", amount: 1280, status: "paid" },
13
  { id: "INV-1043", client: "Northwind Labs", amount: 640, status: "pending" },
14
  { id: "INV-1044", client: "Harbor & Co.", amount: 2150, status: "overdue" },
15
];
16

17
const statusColor: Record<Invoice["status"], string> = {
18
  paid: "teal",
19
  pending: "yellow",
20
  overdue: "red",
21
};
22

23
export function InvoicesTable() {
24
  return (
25
    <DataTable<Invoice>
26
      data={invoices}
27
      columns={[
28
        { key: "id", header: "Invoice", sortable: true },
29
        { key: "client", header: "Client", sortable: true },
30
        {
31
          key: "amount",
32
          header: "Amount",
33
          sortable: true,
34
          render: (row) => `$${row.amount.toFixed(2)}`,
35
        },
36
        {
37
          key: "status",
38
          header: "Status",
39
          render: (row) => <Badge color={statusColor[row.status]}>{row.status}</Badge>,
40
        },
41
      ]}
42
      onRowClick={(row) => console.log("open invoice", row.id)}
43
      emptyTitle="No invoices yet"
44
    />
45
  );
46
}

Props

Author-documented props, carried verbatim from the registry item.

Prop	Type	Default	Description
`data`*	`T[]`	—	Rows to render. Sorting a column header does not mutate this array — internally the table sorts a copy of it and re-renders with the copy.
`columns`*	`DataTableColumn<T>[]`	—	Column definitions controlling header text, width, sortability and per-cell rendering.
`loading`	`boolean`	`false`	Shows skeleton placeholder rows instead of the table body while true.
`loadingRows`	`number`	`5`	Number of skeleton rows rendered while loading.
`emptyTitle`	`string`	`"No results"`	Title shown by the empty state when there are no rows to display.
`emptyDescription`	`ReactNode`	`"Try adjusting your filters."`	Description shown by the empty state when there are no rows to display.
`onRowClick`	`(row: T) => void`	—	Makes rows clickable, enabling hover highlighting and a pointer cursor, and fires with the clicked row.
`getRowKey`	`(row: T, index: number) => string \| number`	`(_row, index) => index`	Derives the React key for each row; defaults to the row's index.

* required

Styling

No public Styles API is declared. Installed CSS remains editable because your project owns the source; internal class names are implementation details, not a customization contract.

registry/lib/data-table.theme.tstheme fragment · 629 B

Folded into the configured project theme; not written at this source path.

1
import { createTheme, Skeleton, Table } from "@mantine/core";
2

3
/**
4
 * Theme fragment for the `data-table` item.
5
 *
6
 * Declared as `themeFragment` in manteen.registry.json. The Mantine client
7
 * merges it into the project's existing theme via tools/merge-theme, so two
8
 * items can both contribute `theme.components` entries without clobbering.
9
 */
10
export const theme = createTheme({
11
  components: {
12
    Table: Table.extend({
13
      defaultProps: {
14
        verticalSpacing: "sm",
15
        highlightOnHover: true,
16
      },
17
    }),
18
    Skeleton: Skeleton.extend({
19
      defaultProps: {
20
        radius: "sm",
21
      },
22
    }),
23
  },
24
});

Source

2 installable files ship with this item.

registry/blocks/data-table/data-table.tsxcomponent · 4.0 kB · tsx

1
import { Group, Skeleton, Stack, Table, Text, UnstyledButton } from "@mantine/core";
2
import { IconChevronDown, IconChevronUp, IconSelector } from "@tabler/icons-react";
3
import type { ReactNode } from "react";
4

5
import { EmptyState } from "@/components/ui/empty-state";
6
import { useDataTable } from "@/hooks/use-data-table";
7

8
export interface DataTableColumn<T> {
9
  key: keyof T;
10
  header: ReactNode;
11
  sortable?: boolean;
12
  width?: number | string;
13
  render?: (row: T) => ReactNode;
14
}
15

16
export interface DataTableProps<T extends Record<string, unknown>> {
17
  data: T[];
18
  columns: DataTableColumn<T>[];
19
  loading?: boolean;
20
  /** Number of skeleton rows to show while `loading`. */
21
  loadingRows?: number;
22
  emptyTitle?: string;
23
  emptyDescription?: ReactNode;
24
  onRowClick?: (row: T) => void;
25
  getRowKey?: (row: T, index: number) => string | number;
26
}
27

28
export function DataTable<T extends Record<string, unknown>>({
29
  data,
30
  columns,
31
  loading = false,
32
  loadingRows = 5,
33
  emptyTitle = "No results",
34
  emptyDescription = "Try adjusting your filters.",
35
  onRowClick,
36
  getRowKey = (_row, index) => index,
37
}: DataTableProps<T>) {
38
  const { rows, sort, toggleSort } = useDataTable(data);
39

40
  if (loading) {
41
    return (
42
      <Stack gap="xs">
43
        {Array.from({ length: loadingRows }, (_, i) => (
44
          // biome-ignore lint/suspicious/noArrayIndexKey: fixed-length loading placeholders with no identity and no reordering, so the index IS the stable key.
45
          <Skeleton key={i} height={40} radius="sm" />
46
        ))}
47
      </Stack>
48
    );
49
  }
50

51
  if (!rows.length) {
52
    return <EmptyState title={emptyTitle} description={emptyDescription} />;
53
  }
54

55
  return (
56
    // minWidth is the point below which the table scrolls horizontally instead of squeezing
57
    // columns into wrapped, multi-line text. 420 was measured against this demo's four columns
58
    // (id, name, currency + sort icon, status badge) with a small safety margin; it does not
59
    // eliminate horizontal scroll on common phones (390-412px) but is 60px closer than the
60
    // previous 480. Consumers adding wider or more columns should raise it — a lower floor
61
    // forces wrapping sooner as column count/content grows.
62
    <Table.ScrollContainer minWidth={420}>
63
      <Table highlightOnHover={Boolean(onRowClick)} verticalSpacing="sm">
64
        <Table.Thead>
65
          <Table.Tr>
66
            {columns.map((column) => (
67
              <Table.Th key={String(column.key)} w={column.width}>
68
                {column.sortable ? (
69
                  <UnstyledButton onClick={() => toggleSort(column.key)}>
70
                    <Group gap={4} wrap="nowrap">
71
                      <Text size="sm" fw={600}>
72
                        {column.header}
73
                      </Text>
74
                      <SortIcon active={sort.key === column.key} direction={sort.direction} />
75
                    </Group>
76
                  </UnstyledButton>
77
                ) : (
78
                  <Text size="sm" fw={600}>
79
                    {column.header}
80
                  </Text>
81
                )}
82
              </Table.Th>
83
            ))}
84
          </Table.Tr>
85
        </Table.Thead>
86

87
        <Table.Tbody>
88
          {rows.map((row, index) => (
89
            <Table.Tr
90
              key={getRowKey(row, index)}
91
              onClick={onRowClick ? () => onRowClick(row) : undefined}
92
              style={onRowClick ? { cursor: "pointer" } : undefined}
93
            >
94
              {columns.map((column) => (
95
                <Table.Td key={String(column.key)}>
96
                  {column.render ? column.render(row) : String(row[column.key] ?? "—")}
97
                </Table.Td>
98
              ))}
99
            </Table.Tr>
100
          ))}
101
        </Table.Tbody>
102
      </Table>
103
    </Table.ScrollContainer>
104
  );
105
}
106

107
function SortIcon({ active, direction }: { active: boolean; direction: "asc" | "desc" }) {
108
  if (!active) return <IconSelector size={14} opacity={0.5} />;
109
  return direction === "asc" ? <IconChevronUp size={14} /> : <IconChevronDown size={14} />;
110
}

registry/blocks/data-table/use-data-table.tshook · 1.3 kB · ts

1
import { useMemo, useState } from "react";
2

3
export type SortDirection = "asc" | "desc";
4

5
export interface SortState<T> {
6
  key: keyof T | null;
7
  direction: SortDirection;
8
}
9

10
/**
11
 * Client-side sorting for `<DataTable />`.
12
 *
13
 * Swap this out for a server-driven implementation by keeping the same return
14
 * shape — the table component only cares about `rows`, `sort` and `toggleSort`.
15
 */
16
export function useDataTable<T extends Record<string, unknown>>(data: T[]) {
17
  const [sort, setSort] = useState<SortState<T>>({ key: null, direction: "asc" });
18

19
  const rows = useMemo(() => {
20
    if (!sort.key) return data;
21

22
    const key = sort.key;
23
    return [...data].sort((a, b) => {
24
      const av = a[key];
25
      const bv = b[key];
26

27
      if (av === bv) return 0;
28
      if (av == null) return 1;
29
      if (bv == null) return -1;
30

31
      const result =
32
        typeof av === "number" && typeof bv === "number"
33
          ? av - bv
34
          : String(av).localeCompare(String(bv));
35

36
      return sort.direction === "asc" ? result : -result;
37
    });
38
  }, [data, sort]);
39

40
  function toggleSort(key: keyof T) {
41
    setSort((current) =>
42
      current.key === key
43
        ? { key, direction: current.direction === "asc" ? "desc" : "asc" }
44
        : { key, direction: "asc" },
45
    );
46
  }
47

48
  return { rows, sort, toggleSort };
49
}