LLMs.txt

If you’re using AI assistants or coding agents (such as Claude, ChatGPT, Cursor or GitHub Copilot) to build your application, you can point them to the Mantine DataTable documentation in a format they can easily read, following the LLMs.txt standard.

Two files are generated from this website’s content every time it’s published:

llms.txt - a concise overview: the most important facts about using Mantine DataTable, followed by links to every documentation page and example;
llms-full.txt - the complete documentation in a single file, including all code examples and the full type definitions.

How to use them

Paste https://icflorescu.github.io/mantine-datatable/llms-full.txt in a chat with your AI assistant and ask it to read the file before answering your questions;
Add https://icflorescu.github.io/mantine-datatable/llms.txt as a documentation source in your AI-powered editor (for instance, with the @Docs feature in Cursor);
Tell your coding agent to fetch https://icflorescu.github.io/mantine-datatable/llms-full.txt, or download the file and reference it from your project’s agent instructions (CLAUDE.md, AGENTS.md, .cursor/rules etc.).

Tip

Use llms-full.txt when your tool can handle a larger context and you want the most accurate answers; use llms.txt when your tool can follow links and fetch only the pages it needs.

What’s inside LLMs.txt

# Mantine DataTable

> A fully-featured React data table/data grid component for Mantine UI, trusted by thousands of developers and companies around the world, including Microsoft. `mantine-datatable` is a lightweight, dependency-free, dark-theme aware table component for React applications built with Mantine (https://mantine.dev), supporting asynchronous data loading, pagination, sorting, Gmail-style batch row selection, custom cell rendering, column grouping, dragging, toggling, resizing and pinning, row expansion, nested tables, context menus, RTL layouts and more.

Key facts:

- Mantine DataTable V9.x is compatible with Mantine V9.x (the major version follows Mantine’s; use `mantine-datatable@8` with Mantine 8, `mantine-datatable@7` with Mantine 7). Peer dependencies are `@mantine/core`, `@mantine/hooks`, `clsx`, `react` and `react-dom` (React 19+). It has no other dependencies.
- Import `mantine-datatable/styles.layer.css` (or `mantine-datatable/styles.css`) **after** the Mantine core styles. When using the `styles.layer.css` files, declare `@layer mantine, mantine-datatable;` in your own CSS so Mantine core styles are applied first; otherwise the table may look broken (missing borders, wrong spacing, misplaced pinned columns).
- The package entry point is marked `'use client'`. Since `DataTable` props usually include functions (`render`, `onRowClick` etc.), render it from a client component (a file with the `'use client'` directive) in React Server Components environments such as the Next.js app router.
- `DataTable` is generic: the record type is inferred from `records`. When declaring columns outside the component, type them as `DataTableColumn<YourType>[]`.
- `records` is the array of rows to display; `columns` is an array of objects, each with an `accessor` (a record key, or a dot-notation path like `department.company.name`). A column without `render` displays the accessor value; when `title` is omitted, it is generated by "humanizing" the accessor (`firstName` → "First name"). An accessor doesn’t have to match a record key if the column has a `render` function. Use `groups` instead of `columns` to group columns under shared headers.
- Each record needs a unique key, read from its `id` property by default. Use `idAccessor` (a property name, a dot-notation path or a function `(record) => key`) when your records have a different unique identifier; the same key is used to compare records for selection and row expansion.
- The component does **not** paginate, sort or filter data for you. Pagination (`page`, `onPageChange`, `totalRecords`, `recordsPerPage`, with a 1-based `page`) expects `records` to contain only the current page. Sorting (`sortStatus: { columnAccessor, direction }`, `onSortStatusChange`, `sortable: true` on columns) only renders the indicators and reports changes: sort the records yourself. Filtering is done by passing a `filter` node to a column and filtering the records yourself.
- Selection is controlled: pass `selectedRecords` and `onSelectedRecordsChange` (optionally `isRecordSelectable`, `selectionTrigger: 'checkbox' | 'cell'`). Shift-click selects ranges, Gmail-style.
- Set `fetching` to show a loader overlay while loading data asynchronously; an empty `records` array shows a customizable empty state (`noRecordsText`, `emptyState`, `noRecordsIcon`).
- The table is vertically scrollable with a sticky header only when it has a restricted height (`height`, `maxHeight`, or a height-restricted parent); otherwise it grows with its content. It is always horizontally scrollable if its content is wider than its container.
- Column dragging, toggling and interactive pinning (`draggable`, `toggleable`, `pinnable` on columns) require a `storeColumnsKey` on the table and the `useDataTableColumns({ key, columns })` hook called with the same `key`: pass the returned `effectiveColumns` to `columns`. Their state is persisted in `localStorage`. Column resizing (`resizable: true`) also works without them, but then widths are not persisted.
- Row expansion is configured with the `rowExpansion` property (`content`, `trigger`, `allowMultiple`, controlled `expanded` state); nested tables are built by rendering another `DataTable` (with `noHeader`) inside the expansion content.
- Styling: use Mantine table props (`withTableBorder`, `withColumnBorders`, `striped`, `highlightOnHover`, `borderRadius`, `shadow`, `verticalSpacing`, `fz` etc.), color props (`c`, `backgroundColor`, `borderColor`, `rowBorderColor`, `stripedColor`, `highlightOnHoverColor`, `selectionColor`), `className`/`style`/`classNames`/`styles`, per-row `rowClassName`, `rowStyle`, `rowColor`, `rowBackgroundColor`, and per-column `cellsClassName`, `cellsStyle`. `createStyles` (Mantine V6) is not available.
- RTL layouts are supported automatically through Mantine’s `DirectionProvider`.

The complete documentation, including all code examples and type definitions, is available as a single file at https://icflorescu.github.io/mantine-datatable/llms-full.txt

## Docs

- [Getting started](https://icflorescu.github.io/mantine-datatable/getting-started/): Learn how to get started with Mantine DataTable
- [Styling](https://icflorescu.github.io/mantine-datatable/styling/): Learn how styling works in Mantine DataTable and how to make sure your styles are applied in the correct order
- [Type definitions](https://icflorescu.github.io/mantine-datatable/type-definitions/): Mantine DataTable is written in TypeScript and its properties are documented with JSDoc annotations

## Examples

- [Basic usage](https://icflorescu.github.io/mantine-datatable/examples/basic-usage/): basic usage of Mantine DataTable
- [Basic table properties](https://icflorescu.github.io/mantine-datatable/examples/basic-table-properties/): how to set the basic Mantine DataTable properties
- [Overriding the default styles](https://icflorescu.github.io/mantine-datatable/examples/overriding-the-default-styles/): how to override the default Mantine DataTable styles
- [Column properties and styling](https://icflorescu.github.io/mantine-datatable/examples/column-properties-and-styling/): setting Mantine DataTable column properties and customizing their styling
- [Column grouping](https://icflorescu.github.io/mantine-datatable/examples/column-grouping/): group multiple Mantine DataTable columns under a shared header
- [Default column properties](https://icflorescu.github.io/mantine-datatable/examples/default-column-properties/): using default column properties with Mantine DataTable
- [Default column render](https://icflorescu.github.io/mantine-datatable/examples/default-column-render/): using a default column render function with Mantine DataTable
- [Row styling](https://icflorescu.github.io/mantine-datatable/examples/row-styling/): styling Mantine DataTable rows based on their data
- [Non-standard record IDs](https://icflorescu.github.io/mantine-datatable/examples/non-standard-record-ids/): using non-standard record IDs with Mantine DataTable
- [Scrollable vs. auto-height](https://icflorescu.github.io/mantine-datatable/examples/scrollable-vs-auto-height/): how to make Mantine DataTable vertically scrollable
- [Scrolling a row into view](https://icflorescu.github.io/mantine-datatable/examples/scrolling-a-row-into-view/): how to scroll a Mantine DataTable row into view
- [Empty state](https://icflorescu.github.io/mantine-datatable/examples/empty-state/): Mantine DataTable shows a customizable empty state indicator when its records array is empty
- [Pagination](https://icflorescu.github.io/mantine-datatable/examples/pagination/): using paged data with Mantine DataTable
- [Sorting](https://icflorescu.github.io/mantine-datatable/examples/sorting/): sorting data with Mantine DataTable
- [Column dragging and toggling](https://icflorescu.github.io/mantine-datatable/examples/column-dragging-and-toggling/): dragging & toggling Mantine DataTable columns
- [Row dragging](https://icflorescu.github.io/mantine-datatable/examples/row-dragging/): dragging Mantine DataTable rows
- [Column resizing](https://icflorescu.github.io/mantine-datatable/examples/column-resizing/): resizing Mantine DataTable columns
- [Infinite scrolling](https://icflorescu.github.io/mantine-datatable/examples/infinite-scrolling/): how to implement infinite scrolling with Mantine DataTable
- [Searching and filtering](https://icflorescu.github.io/mantine-datatable/examples/searching-and-filtering/): searching and filtering data with Mantine DataTable
- [Records selection](https://icflorescu.github.io/mantine-datatable/examples/records-selection/): how to enable multiple records selection with Mantine DataTable
- [Handling row clicks](https://icflorescu.github.io/mantine-datatable/examples/handling-row-clicks/): handling row click events on Mantine DataTable
- [Handling cell clicks](https://icflorescu.github.io/mantine-datatable/examples/handling-cell-clicks/): handling cell click events on Mantine DataTable
- [Using with Mantine ContextMenu](https://icflorescu.github.io/mantine-datatable/examples/using-with-mantine-contextmenu/): how to use Mantine DataTable with Mantine ContextMenu
- [Expanding rows](https://icflorescu.github.io/mantine-datatable/examples/expanding-rows/): the row expansion feature of Mantine DataTable
- [Nested tables](https://icflorescu.github.io/mantine-datatable/examples/nested-tables/): how to implement nested tables with Mantine DataTable
- [Nested tables with async data loading](https://icflorescu.github.io/mantine-datatable/examples/nested-tables-with-async-data-loading/): how to implement nested tables with async data loading using Mantine DataTable
- [Nested tables with async data loading and sorting](https://icflorescu.github.io/mantine-datatable/examples/nested-tables-with-async-data-loading-and-sorting/): how to implement nested tables with async data loading and sorting using Mantine DataTable
- [Row actions cell](https://icflorescu.github.io/mantine-datatable/examples/row-actions-cell/): how to implement a row actions cell on Mantine DataTable
- [Pinning the last column](https://icflorescu.github.io/mantine-datatable/examples/pinning-the-last-column/): how to pin the last column on Mantine DataTable
- [Pinning the first column](https://icflorescu.github.io/mantine-datatable/examples/pinning-the-first-column/): how to pin the first column on Mantine DataTable
- [Pinning arbitrary columns](https://icflorescu.github.io/mantine-datatable/examples/pinning-arbitrary-columns/): how to pin arbitrary columns on Mantine DataTable
- [RTL support](https://icflorescu.github.io/mantine-datatable/examples/rtl-support/): Mantine DataTable supports right-to-left (RTL) languages such as Arabic, Hebrew and Persian
- [Links or buttons inside clickable rows or cells](https://icflorescu.github.io/mantine-datatable/examples/links-or-buttons-inside-clickable-rows-or-cells/): how to add links or buttons inside Mantine DataTable clickable rows or cells
- [Disabling text selection](https://icflorescu.github.io/mantine-datatable/examples/disabling-text-selection/): disabling text selection on Mantine DataTable
- [Asynchronous data loading](https://icflorescu.github.io/mantine-datatable/examples/asynchronous-data-loading/): loading data asynchronously with Mantine DataTable and customizing the loader
- [Custom row or cell attributes](https://icflorescu.github.io/mantine-datatable/examples/custom-row-or-cell-attributes/): how to add custom attributes to Mantine DataTable rows or cells
- [Using bodyRef with AutoAnimate](https://icflorescu.github.io/mantine-datatable/examples/using-with-auto-animate/): how to use the Mantine DataTable bodyRef property with AutoAnimate
- [Complex usage scenario](https://icflorescu.github.io/mantine-datatable/examples/complex-usage-scenario/): a complex usage scenario for Mantine DataTable with TanStack Query data loading, sorting, pagination, custom cell rendering, row selection and more

## Optional

- [Mantine V6 support](https://icflorescu.github.io/mantine-datatable/mantine-v6-support/): Mantine DataTable V7+ requires Mantine V7 or newer; if you're still using Mantine V6, please check the old documentation website
- [Contribute and support](https://icflorescu.github.io/mantine-datatable/contribute-and-support/): Support Mantine DataTable by sponsoring or hiring its author, starring the repo, reporting issues, suggesting ideas or opening pull requests
- [Hire the author](https://icflorescu.github.io/mantine-datatable/hire-the-author/): Hire Ionut-Cristian Florescu, the author of Mantine DataTable, a hands-on fractional CTO and product builder with 25+ years of experience
- [Changelog](https://github.com/icflorescu/mantine-datatable/blob/main/CHANGELOG.md): Notable changes in each Mantine DataTable version
- [Source code](https://github.com/icflorescu/mantine-datatable): GitHub repository
- [Mantine ContextMenu](https://icflorescu.github.io/mantine-contextmenu/): Context menu component for Mantine, by the same author (its own LLM-friendly docs: https://icflorescu.github.io/mantine-contextmenu/llms.txt)

Go back

Type definitions

Up next

Mantine V6 support

Mantine DataTable is used and trusted by

Pachtop

Ganymede

Pipedash

COH3 Stats

ccrentals.org