Mantine DataTable

Mantine DataTable fills the gap Mantine’s core library leaves open: a full-featured data table component. It provides asynchronous data loading, pagination, Gmail-style additive row selection, column sorting, custom cell rendering, row expansion and nesting, context menus, drag-and-drop, and column reordering/resizing — all styled to automatically match the host app’s Mantine theme, including dark mode. It ships with zero external runtime dependencies beyond the optional drag-and-drop integration, keeping bundle size small for a component this feature-rich.

What You Get

• Asynchronous data loading with a built-in loading-indicator state for remote API-backed tables
• Pagination, multi-column sorting, and Gmail-style shift-click additive row selection
• Custom cell rendering, row expansion, and nested tables for hierarchical data
• Row context menus, column reordering, toggling, and resizing, plus optional drag-and-drop
• Automatic dark-theme awareness and full RTL support that follow the host app’s Mantine settings

Common Use Cases

• Building admin dashboards and back-office tools that need sortable, paginated data grids
• Displaying API-backed lists with async loading states without writing custom fetch/loading glue
• Presenting hierarchical or nested data (e.g. orders with line items) via expandable/nested rows
• Adding bulk row-selection workflows like batch delete or bulk-export actions

Under The Hood

Architecture The library is organized around a single DataTable React component plus supporting hooks and utils (lib/utils.ts, lib/code.ts) that manage column definitions, sorting/selection state, and Mantine theme integration; the docs/examples app in the repo doubles as an integration test bed. Tech Stack Built in TypeScript on top of Mantine’s styling primitives, with an optional peer dependency on @hello-pangea/dnd for drag-and-drop and clsx for class composition; the project uses pnpm workspaces, Biome for linting/formatting, and Next.js to build its documentation site. Code Quality The repo maintains a CHANGELOG.md with detailed per-version notes, Biome enforces consistent formatting, and the maintainer actively triages issues and PRs from a large external contributor base. API Design The component follows Mantine’s own prop-based styling conventions closely, so developers already familiar with Mantine can adopt it with minimal new concepts, and the hosted example site covers most real-world configurations with copy-pasteable code.