Skip to content
Mantle JS

Data table

A live demo against a mocked server in your browser — the block is the registry's own source.

Install

Section titled “Install”
Terminal window
npx shadcn add @mantle/data-table

Needs a React Aria shadcn project and the @mantle registry in components.json — see Install. The block lands in components/mantle/data-table.tsx, yours to edit.

Usage

Section titled “Usage”

Works with any service that returns Paginated<T> (every RepositoryService does).

import { DataTable } from "@/components/mantle/data-table";


<DataTable<Article>
  service="articles"
  aria-label="Articles"
  pageSize={20}
  columns={[
    { id: "title", header: "Title", sortable: true },
    { id: "views", header: "Views", sortable: true },
  ]}
/>;
  • Column sort descriptors become $sort, pages become $skip/$limit, and visible columns become $select.
  • Built on shadcn’s aria Table (React Aria Table/Column), with sortable headers announced to screen readers.
  • Pagination controls appear automatically when the result is a Paginated<T> envelope.

View the source.