Doramagic Project Pack · Human Manual
mantine-datatable
Mantine DataTable
Overview & Quickstart
Related topics: Core API, Props & Component Architecture, Styling, Customization & Known Issues
Continue reading this section for the full explanation and source context.
Continue reading this section for the full explanation and source context.
Continue reading this section for the full explanation and source context.
Continue reading this section for the full explanation and source context.
Related Pages
Related topics: Core API, Props & Component Architecture, Styling, Customization & Known Issues
Overview & Quickstart
Purpose and Scope
mantine-datatable is a data-rich table component built on top of the Mantine UI library. It is designed for React applications that need to display large sets of records with built-in support for sorting, pagination, selection, column resizing, row expansion, RTL, and contextual menus. The project also hosts the documentation site you are reading — both the npm package and the docs site live in the same repository, managed with pnpm (app/contribute-and-support/page.tsx).
The component is targeted at developers who already use Mantine (@mantine/core, @mantine/hooks) and want a batteries-included grid experience without assembling it from lower-level primitives. The README positions the project as a way to "build data-rich React applications" with a single composable component (README.md).
Installation and Dependencies
The library declares three runtime dependencies: @mantine/core, @mantine/hooks, and clsx. The installation guide explicitly shows the command using three popular package managers (app/getting-started/page.tsx):
# yarn
yarn add mantine-datatable clsx
# npm
npm i mantine-datatable clsx
# pnpm
pnpm i mantine-datatable clsx
Very important — The@mantine/corepackage styles must be applied beforemantine-datatablestyles. Skipping this order is the most common cause of broken-looking tables. The getting-started page points readers to the dedicated styling guide for details (app/getting-started/page.tsx).
A recurring community concern is peer-dependency compatibility: the package currently requires React 19, while Mantine 8 still supports React 18. If you are locked to React 18, you will need to pin to an older mantine-datatable release or remain on Mantine 7 (see issue #737). The same theme recurs for Mantine 9 — the upstream Collapse component changed its in prop to expanded, which breaks collapsible rows (see issue #798).
Quickstart: From Zero to a Table
The minimal data table needs a records array, a columns array, and (optionally) idAccessor. The example below — adapted from the default-column-properties demo (app/examples/default-column-properties/DefaultColumnPropertiesExample.tsx) — illustrates a typical setup:
import { DataTable } from 'mantine-datatable';
import { records } from './records';
export default function Demo() {
return (
<DataTable
withTableBorder
withColumnBorders
striped
records={records}
columns={[
{ accessor: 'bookTitle', width: '100%', textAlign: 'left' },
{ accessor: 'published', render: ({ published }) => dayjs(published).fromNow() },
{ accessor: 'pages', textAlign: 'right' },
{ accessor: 'chapters', textAlign: 'right' },
]}
/>
);
}
Core Column Properties
Each column definition supports a rich set of styling and behavior flags. The most commonly used ones, listed in the column-properties example (app/examples/column-properties-and-styling/page.tsx), are summarized below:
| Property | Type | Purpose | ||
|---|---|---|---|---|
width | `number \ | string` | Desired column width | |
ellipsis | boolean | Truncate overflowing content with … (mutually exclusive with noWrap) | ||
noWrap | boolean | white-space: nowrap for the cell (mutually exclusive with ellipsis) | ||
textAlign | `'left' \ | 'center' \ | 'right'` | Defaults to 'left' |
hidden | boolean | Hides the column without removing it from the data model |
Column Groups
For closely related columns, the component accepts a groups prop in place of columns. Each group must have a unique id and a nested columns array, and may optionally carry a title rendered inside the header cell (app/examples/column-grouping/page.tsx). If no title is supplied, a humanized version of the id is used — a feature requested by the community in issue #207.
Common Patterns and Known Gotchas
Resizing
Column resizing preserves the table's overall width, so resizing one column will redistribute width across its neighbors. This has been reported as confusing in issue #778. A related bug — initial widths being equalized instead of auto-fitting content — was tracked in issue #736.
Pagination, Selection, and Footer Scrollbars
Combining footer content with row selection can produce an unwanted vertical scrollbar (issue #743). Similarly, when the table has a fixed height and a sticky footer, the scrollbars can be obscured by the footer (issue #808). For power users, the custom pagination example documents a renderPagination prop and the PaginationRenderContext type — the latter is a frequent export request (issue #772, app/examples/pagination/page.tsx).
Rendering Loops and Unnecessary Updates
Two long-standing traps deserve attention:
- The
useDataTableColumnshook has been reported to return new object references on every render, causinguseEffect/useMemoto re-evaluate. The maintainer has tracked the fix path in issue #727 and the column-order side effect in issue #759. - "Infinite loop" reports (issue #605) often turn out to be a parent component re-creating the
columnsorrecordsarray on every render. Memoizing those arrays at the call site is the recommended mitigation.
Styling Overrides
The striped and highlightOnHover visual variants are not always respected when consumers apply their own CSS (issue #707). The overriding-the-default-styles guide demonstrates three safe ways to customize: color props (c, backgroundColor, borderColor, rowBorderColor), a classNames object, or a styles object/function (app/examples/overriding-the-default-styles/page.tsx). The maintainer's recommendation is to override visuals through a top-level MantineProvider theme rather than at the table level.
Architecture at a Glance
flowchart LR A[Records array] --> D[DataTable] B[Columns / Groups] --> D C[Props: sortStatus, selectedRecords, page, etc.] --> D D --> E[Header] D --> F[Body] D --> G[Footer] D --> H[Pagination] D --> I[ContextMenu integration] D --> J[Styling layer: classNames / styles / theme]
The diagram above is a high-level mental model: the DataTable component consumes a records array and either a flat columns array or a groups array, and fans out rendering to header, body, footer, pagination, and integration points (context menus, row expansion, pinned columns). Row expansion is a first-class feature with both uncontrolled and controlled modes — the latter is enabled by passing recordIds and onRecordIdsChange (app/examples/expanding-rows/page.tsx). Arbitrary column pinning on the left/right is documented separately from pinFirstColumn / pinLastColumn (app/examples/pinning-arbitrary-columns/page.tsx).
See Also
- Styling guide — order of CSS imports and theme overrides
- Column properties and styling
- Column grouping
- Pagination
- Row expansion
- Pinning arbitrary columns
- Overriding the default styles
- Contribute and support
Source: https://github.com/icflorescu/mantine-datatable / Human Manual
Core API, Props & Component Architecture
Related topics: Overview & Quickstart, Advanced Features, Hooks & Data Flow
Continue reading this section for the full explanation and source context.
Related Pages
Related topics: Overview & Quickstart, Advanced Features, Hooks & Data Flow
Core API, Props & Component Architecture
Overview
mantine-datatable is a lightweight, dependency-lean data table component for the Mantine ecosystem. It exposes a single primary React component, DataTable, that delivers rich functionality — sorting, pagination, selection, row expansion, column pinning, column grouping, async data loading, and RTL support — through a typed, prop-driven API.
The package depends on @mantine/core, @mantine/hooks, and clsx, and is shipped as both ESM and CJS bundles plus a TypeScript declaration file (./dist/index.d.ts) and pre-built stylesheets (styles.css, styles.layer.css). Source: package.json Source: app/getting-started/page.tsx
Component Architecture
The top-level entry point is the DataTable component defined in package/DataTable.tsx. It composes several internal sub-components (header, footer, body, pagination, row expansion slot, etc.) and consumes a fully typed prop bag whose shape is split across the package/types/ directory.
The type system is the architectural backbone of the library. Distinct prop groups live in dedicated files and are composed into the main DataTableProps shape:
| Type file | Responsibility |
|---|---|
DataTableProps.ts | The full, composed DataTableProps type passed to the component |
DataTableColumn.ts | Shape of a single column, including accessors, renderers, pinning, visibility, and grouping |
DataTableSortProps.ts | Sort-status shape and sort-callback signatures |
DataTableSelectionProps.ts | Row-selection state, controlled/uncontrolled modes, and selection callbacks |
index.ts | Public type re-exports for consumers |
Source: package/types/DataTableProps.ts Source: package/types/DataTableColumn.ts Source: package/types/DataTableSortProps.ts Source: package/types/DataTableSelectionProps.ts Source: package/types/index.ts
flowchart TB DT[DataTable.tsx] --> Props[DataTableProps] Props --> Col[DataTableColumn] Props --> Sort[DataTableSortProps] Props --> Sel[DataTableSelectionProps] Props --> Extras[Pagination, Expansion, Pinning, Groups] Col --> ColProps[width, ellipsis, noWrap, textAlign, hidden, visibleMediaQuery, pinned, title, render] Extras --> Internal[Internal sub-components] Internal --> CSS[styles.css / styles.layer.css]
Core Props API
The DataTableProps interface accepts two required data inputs — records and columns — and a long list of optional flags that toggle features or override defaults. Major groups include:
Source: app/examples/column-properties-and-styling/page.tsx
Source: package/types/DataTableSelectionProps.ts
Source: package/types/DataTableSortProps.ts
Source: app/examples/expanding-rows/page.tsx
Source: app/examples/pinning-arbitrary-columns/page.tsx
Source: app/examples/rtl-support/RTLSupportExample.tsx
- Data & columns —
records,columns,idAccessor, and per-column definitions. AdefaultColumnPropsblock can supply shared defaults such astextAlign,noWrap,ellipsis,width,hidden, andvisibleMediaQuery. - Selection — controlled and uncontrolled modes for row selection. Community members have requested that internal sub-components such as
DataTablePaginationand its associatedPaginationRenderContexttype be exported so custom renderers can be type-safe. - Sorting — accepts a
sortStatusandonSortStatusChangecallback pair (or adefaultSortStatusfor uncontrolled mode). Sort behavior is documented inDataTableSortProps. - Pagination — pages, page size, and a
renderPaginationescape hatch. When both footer and selection are enabled, an abnormal vertical scrollbar may appear; this is a known interaction documented in the issue tracker. - Row expansion —
rowExpansionconfig withtriggerandcontent, plus controlledexpandedstate (recordIds+onRecordIdsChange). Thecontentfunction is *lazily executed* to keep the DOM lean. - Pinning —
pinFirstColumnandpinLastColumnshortcuts, plus per-columnpinned: 'left' | 'right' | falseto pin arbitrary columns. Left and right pinning can be combined with selection. - Styling — top-level
striped,highlightOnHover,withTableBorder,withColumnBorders, and the Mantine-styleclassNames/stylesoverrides that target root, table, header, footer, and pagination slots individually. - Internationalization —
dirand theme-levelDirectionProviderintegration for full RTL support, including with pinned columns, selection, sorting, pagination, and resizing.
A representative "kitchen-sink" configuration is demonstrated in the complex-usage example, which composes async loading via TanStack Query, sorting, pagination, custom cell rendering, multiple row selection, row expansion, action cells, and the optional mantine-contextmenu integration. Source: app/examples/complex-usage-scenario/page.tsx
Column Definition
A DataTableColumn<T> is the smallest unit of configuration. In addition to the required accessor (and optional title for header text), each column accepts a wide set of optional properties used to control presentation, visibility, and interaction:
width: number | string— desired column width.ellipsis: boolean— truncate cell content with an ellipsis (mutually exclusive withnoWrap).noWrap: boolean— applywhite-space: nowrap(mutually exclusive withellipsis).textAlign: 'left' | 'center' | 'right'— defaults to'left'.hidden: boolean— hide the column entirely.visibleMediaQuery— responsive visibility.pinned: 'left' | 'right' | false— column-level pinning.render— a function that receives the row record and returns a custom cell node.cellsClassName,cellsStyle,titleClassName,titleStyle— fine-grained styling hooks.
Source: app/examples/column-properties-and-styling/page.tsx Source: app/examples/default-column-properties/DefaultColumnPropertiesExample.tsx
Columns can also be organized into groups. A group accepts id, optional title (a ReactNode, defaulting to a humanized id), textAlign, className, and style. Groups are hidden automatically when none of their member columns are visible — useful when responsive visibleMediaQuery rules hide every member. Source: app/examples/column-grouping/page.tsx
Known Constraints & Community Notes
Several issues reported by users shape how the public API should be used in practice:
- React peer dependency — the package tracks Mantine's major versions; consumers on React 18 must remain on a Mantine-7-compatible release line. A formal request to align React peer dependencies has been filed.
- Resizing behavior — dragging a column's resize handle also resizes a sibling column to preserve total width, which can be unexpected with many resizable columns. Initial width calculation can also produce evenly spaced columns instead of auto-fit widths when no explicit
widthis provided. - Layout interactions — combining
footerwith selection columns may introduce an abnormal vertical scrollbar; a sticky footer on a fixed-height table can hide horizontal scrollbars. - Render loops — when using
useDataTableColumns, passing a freshly constructedcolumnsarray on every render can trigger infinite re-renders. The hook's returned values must be memoized upstream. - TypeScript performance — in very large files, the prop inference can feel slow in editors; this is reported as a typing-pipeline concern, not a runtime issue.
These notes do not change the API contract but are essential context for anyone integrating the component in a production codebase.
See Also
Source: https://github.com/icflorescu/mantine-datatable / Human Manual
Advanced Features, Hooks & Data Flow
Related topics: Core API, Props & Component Architecture, Styling, Customization & Known Issues
Continue reading this section for the full explanation and source context.
Continue reading this section for the full explanation and source context.
Continue reading this section for the full explanation and source context.
Continue reading this section for the full explanation and source context.
Related Pages
Related topics: Core API, Props & Component Architecture, Styling, Customization & Known Issues
Advanced Features, Hooks & Data Flow
This page documents the advanced programmable surface of mantine-datatable: the headless-style hooks that ship alongside the <DataTable /> component, the column/data-flow contracts they implement, and the behavioral quirks reported by the community. It complements the basic usage guide by focusing on the pieces developers reach for when they need full control over columns, pagination, expansion, and layout direction.
Hook Ecosystem Overview
The package exposes a family of composable hooks under package/hooks/. They are designed to be used independently of the table component, so a developer can build custom UIs (e.g. a column-picker drawer) that share the same state model as the table.
| Hook | Responsibility | Typical use |
|---|---|---|
useDataTableColumns | Build, sort, and persist a column descriptor list | Toolbar-driven column visibility/order |
useDataTableColumnResize | Track drag-to-resize handles and persist widths | User-resizable tables |
useDataTableColumnReorder | Track drag-to-reorder gestures | Drag-and-drop column arrangement |
useDataTableColumnToggle | Show/hide individual columns | Persisted hide/show state |
useDataTableColumnPinning | Mark a column as left/right pinned | Per-column sticky behavior |
useDataTablePinnedColumns | Aggregate the set of pinned columns | Custom sticky-layout CSS |
Source: package/hooks/useDataTableColumns.ts · package/hooks/useDataTableColumnResize.ts · package/hooks/useDataTableColumnReorder.ts · package/hooks/useDataTableColumnToggle.ts · package/hooks/useDataTableColumnPinning.ts · package/hooks/useDataTablePinnedColumns.ts
Known reactivity pitfall
A recurring community report (#727) is that the object returned by useDataTableColumns produces a new reference on every render. Consumers that use it as a useEffect / useMemo dependency end up re-running their effects on every parent re-render, which can surface as a "Maximum update depth exceeded" error. The recommended pattern is to depend on the *individual fields* you actually need, or to memoize the hook's return value at the call site. A related report (#759) notes that mutating the base columns array can also cause render loops; the hook expects a stable, non-mutated input.
Data Flow and Column Configuration
The data flow inside <DataTable /> is unidirectional: a parent component owns records and a columns array, passes them to the table, and the table applies the active sort, pagination, selection, and expansion state on top. Column configuration is the primary extension point.
Per-column properties
A column descriptor accepts the following properties (in addition to accessor and title):
| Property | Type | Effect | ||
|---|---|---|---|---|
width | `number \ | string` | Fixed or fluid column width | |
ellipsis | boolean | Truncate with … (mutually exclusive with noWrap) | ||
noWrap | boolean | Prevent wrapping (mutually exclusive with ellipsis) | ||
textAlign | `'left' \ | 'center' \ | 'right'` | Cell text alignment (default 'left') |
hidden | boolean | Hide the column entirely | ||
visible | boolean | Same intent as hidden, alternate name |
Source: app/examples/column-properties-and-styling/page.tsx
Color and theme tokens
The <DataTable /> root accepts c, backgroundColor, borderColor, and rowBorderColor. Each accepts a MantineColor or a { dark, light } object, and is forwarded to the table body, header, footer, and (where present) the pagination component. This is the recommended escape hatch for theming; for a cohesive look the maintainer guide suggests setting those values on the top-level <MantineProvider> instead. Source: app/examples/overriding-the-default-styles/page.tsx
Pinning columns
Beyond the convenience pinFirstColumn / pinLastColumn props, any column can be pinned by setting pinned: 'left' or pinned: 'right' on its definition. Multiple columns may be pinned to the same side, and pinning works in combination with sorting, selection, pagination, and resizing. Source: app/examples/pinning-arbitrary-columns/page.tsx
Row Expansion, Pagination, and Resize
Controlled row expansion
Row expansion is exposed as a controlled API. The rowExpansion prop accepts an object with:
recordIds— an array of currently expanded record IDs;onRecordIdsChange— a callback invoked when the user expands or collapses a row.
The content callback is lazily executed — it is only invoked when a row is actually expanded, which means it is safe to do expensive work such as lazy-loading related data, or mounting a heavy inline editor, without paying the cost for collapsed rows. Source: app/examples/expanding-rows/page.tsx
Pagination and the `PaginationRenderContext` type
A user-reported limitation (#772) is that the PaginationRenderContext type is consumed through the renderPagination prop but is not currently re-exported from the package entry point, which prevents strongly-typed custom pagination components. Consumers typically work around this by inferring the argument type of renderPagination directly.
Resize and reorder caveats
Resize behavior is intentionally "table-width preserving": dragging one column's edge reduces an adjacent column rather than overflowing the container. The community has flagged this as surprising in #778 — it is easy to lose a column's width after several resizes. A separate bug report (#736) describes a scenario in which resizable columns initially render at equal width rather than fitting their content; the documented fix is to supply explicit width values on the column descriptors.
flowchart LR A[Parent owns records + columns] --> B[DataTable] H[useDataTableColumns] --> B R[useDataTableColumnResize] --> B O[useDataTableColumnReorder] --> B T[useDataTableColumnToggle] --> B P[useDataTableColumnPinning] --> B B --> S[Sort + Paginate + Select + Expand] S --> UI[Rendered rows] UI -- onChange --> A
Layout Direction, Security, and Release Hygiene
Right-to-left (RTL) support
The table layout mirrors cleanly when wrapped in a DirectionProvider and the host element is given a dir="rtl" (or "ltr") attribute. Selection checkboxes, sort affordances, sticky headers, pinned columns, pagination, and resizable handles all flip accordingly. Source: app/examples/rtl-support/RTLSupportExample.tsx
Peer-dependency alignment
A community thread (#737) notes that mantine-datatable's react peer range is intentionally aligned with the currently supported Mantine major. Projects pinned to React 18 will need to either upgrade or remain on a matching older release. The official package.json exposes the current constraints.
Security incident and supply-chain hygiene
A documented incident in 2024–2025 (tracked in #814 and discussion #813) involved malicious commits injected via a compromised GitHub Actions workflow. The maintainer's account was locked for over 20 hours. Consumers should pin to a known-good release and review the changelog before upgrading across the affected window.
Build, lint, and test scripts
The repository ships a small set of standard scripts. From package.json:
pnpm dev— start the documentation site (Next.js).pnpm build:package— produce ESM, CJS, and.d.tsartifacts viatsup, plus processed CSS.pnpm build:docs— build the documentation site.pnpm lint— Biome static analysis plus a TypeScript--noEmitpass.pnpm format— auto-format with Biome.pnpm test— run the project test harness (setup performed via.github/setup.js).
Contributors are instructed to target the next branch; PRs against main trigger the deployment workflow and are rejected. Source: app/contribute-and-support/page.tsx.
See Also
- Getting Started — installation and CSS ordering
- Column Properties and Styling — full column API
- Pinning Arbitrary Columns — per-column pinning
- Expanding Rows — controlled expansion and lazy content
- RTL Support — bidirectional layout
- Overriding the Default Styles — color and class-name overrides
- Contribute and Support — branching policy and review process
Source: https://github.com/icflorescu/mantine-datatable / Human Manual
Styling, Customization & Known Issues
Related topics: Overview & Quickstart, Advanced Features, Hooks & Data Flow
Continue reading this section for the full explanation and source context.
Continue reading this section for the full explanation and source context.
Continue reading this section for the full explanation and source context.
Continue reading this section for the full explanation and source context.
Related Pages
Related topics: Overview & Quickstart, Advanced Features, Hooks & Data Flow
Styling, Customization & Known Issues
This page consolidates the documented styling and customization surface of Mantine DataTable, the recommended workflow for applying or overriding styles, and a curated list of known issues and limitations reported by the community. It is meant to be read alongside the dedicated example pages (linked throughout) and the project's README.md.
Styling System Overview
Mantine DataTable is a component library built on top of @mantine/core, @mantine/hooks and clsx. Because of this dependency stack, the styling system has two layers: the consumer's Mantine theme and the DataTable's own stylesheet. The library's package ships pre-built CSS that must be imported after Mantine's own styles so the cascade resolves correctly.
Source: app/getting-started/page.tsx (installation instructions and CSS ordering warning).
The official guidance is unambiguous: if you want a consistent look across the whole application, you should provide a custom theme to the top-level MantineProvider rather than overriding individual component styles. The README and the styling guide make this the recommended baseline.
Source: app/examples/overriding-the-default-styles/page.tsx (warning block advising theme-level customization).
Customization Approaches
When theme-level customization is not enough, Mantine DataTable exposes four progressively granular mechanisms.
Color Shortcut Properties
The simplest customization surface consists of color props accepted directly on the DataTable component:
| Property | Scope |
|---|---|
c | Text color of body, header, footer and pagination |
backgroundColor | Background of body, header, footer and pagination |
borderColor | Outer table border, header bottom border, footer top border, pagination border |
rowBorderColor | Borders between rows |
paginationActiveBackgroundColor | Background of the active page button |
Each property accepts either a MantineColor (a theme key or a CSS string) or an object { light, dark } so values can be tuned per color scheme. Source: app/examples/overriding-the-default-styles/page.tsx and app/examples/pagination/page.tsx.
Column-Level Properties
Individual column definitions support styling fields such as width, ellipsis, noWrap, textAlign, hidden, visibleMediaQuery and pinned. These properties cannot be combined arbitrarily: for example, ellipsis and noWrap are mutually exclusive at the cell level. Source: app/examples/column-properties-and-styling/page.tsx.
Class Names
The component supports a classNames prop that can target the component root, the inner table, the header, the footer and the pagination. This is the recommended approach when you want to use CSS modules or global stylesheets. Source: app/examples/overriding-the-default-styles/page.tsx (the StylingWithClassNamesExample).
Style Objects and Functions
For inline or theme-aware styling, the styles prop mirrors the classNames targets (root, table, header, footer, pagination) and accepts either a plain object or a function receiving the current MantineTheme. Source: app/examples/overriding-the-default-styles/page.tsx (StylingWithStyleObjectsAndFunctionsExample).
<DataTable
styles={(theme) => ({
header: { backgroundColor: theme.colors.blue[0] },
})}
/* ... */
/>
Known Issues and Limitations
The community has reported several recurring issues. The most important are summarized below; the linked discussions track current status and workarounds.
- Security incident (issue #814). Malicious commits were injected through a compromised
github-actionsworkflow, locking the maintainer out of GitHub for more than 20 hours. Consumers should pin to a known-good version and review recent changes before upgrading. Source: issue #814 and discussion #813.
- Scrollbars hidden by sticky footer (issue #808). When a fixed-height table renders a sticky footer, the horizontal and vertical scrollbars are obscured by the footer. Workarounds include reserving padding for the footer or disabling
stickybehavior.
- Vertical scrollbar with footer + selection (issue #743). Combining a footer with row selection can produce an extra vertical scrollbar; consumers typically hide it with a CSS override on the relevant container class.
- Nested tables lose their last border (issue #790). When a DataTable is rendered as the row expansion of another DataTable, the bottom border of the last row may be missing. This is purely a styling/visual issue and is generally fixed by injecting an explicit border style on the inner table.
- Resizing redistributes width (issue #778). Resizing one column also resizes a sibling column to keep the overall table width constant, which can be confusing when many columns are present. A common workaround is to set a deterministic
widthon the columns you do not want resized.
- Resizable columns equal width (issue #736). When
resizable: trueis enabled without an explicitwidth, columns auto-size equally rather than fitting their content. Settingwidthper column resolves this.
- Striped / highlightOnHover overridden (issue #707). Custom
stylesorclassNamescan unintentionally override the built-instripedandhighlightOnHoverprops. The recommended approach is to layer overrides using a more specific CSS selector rather than the slot-levelstylesprop.
- useDataTableColumns unstable references (issue #727). Values returned by
useDataTableColumnscan change identity on every render, which may causeMaximum update depth exceedederrors when used asuseEffect/useMemodependencies. Memoize the columns array at the call site.
- React peer dependency mismatch (issue #737). Mantine DataTable currently declares
react >=19, while Mantine 8 itself still supports React 18. Consumers on React 18 need to use--legacy-peer-depsor wait for a release that relaxes the peer range.
- Mantine 9 collapsible rows (issue #798). Mantine 9 renamed the
Collapseinprop toexpanded. Row expansion examples built against Mantine 8 may need adjustments when upgrading; the relevant code path is documented in app/examples/expanding-rows/page.tsx.
- Static typing slowness (issue #651). TypeScript can become slow on files that import the DataTable, especially with complex generic record types. Narrowing the record type and avoiding deep generic instantiation helps.
- Infinite render loop (issue #605). Certain prop combinations (typically unstable function references passed as
rowExpansionorcustomRowAttributes) can cause an infinite render loop. Stabilize callbacks withuseCallbackand avoid recreating object literals on every render.
- Export internal components (issue #713). Components such as
DataTablePaginationare not exported from the package entry point. A customrenderPaginationcallback must be used today; the maintainer is considering an export in a future release. The rendered context typePaginationRenderContextis also not exported (issue #772).
Best Practices
- Start from the theme. Override
MantineProviderbefore reaching for slot-level styles. Source: app/examples/overriding-the-default-styles/page.tsx. - Use color props first. They cover the majority of use cases without touching CSS.
- Prefer
classNamesfor structural changes,stylesfor inline tweaks. Mixing both at the same slot can produce conflicting cascades. - Memoize column definitions and callbacks. This avoids both the resizing bugs and the render-loop issues reported above.
- Pin versions during security-sensitive windows and review the changelog before upgrading after a security incident.
See Also
Source: https://github.com/icflorescu/mantine-datatable / Human Manual
Doramagic Pitfall Log
Source-linked risks stay visible on the manual page so the preview does not read like a recommendation.
May increase setup, validation, or first-run risk for the user.
May increase setup, validation, or first-run risk for the user.
May increase setup, validation, or first-run risk for the user.
May increase setup, validation, or first-run risk for the user.
Doramagic Pitfall Log
Found 18 structured pitfall item(s), including 2 high/blocking item(s). Top priority: Installation risk - Installation risk requires verification.
1. Installation risk: Installation risk requires verification
- Severity: high
- Finding: Project evidence flags a installation risk. Review the linked source before relying on this workflow.
- User impact: May increase setup, validation, or first-run risk for the user.
- Recommended check: Reproduce the official install and quickstart path in an isolated environment.
- Evidence: community_evidence:github | https://github.com/icflorescu/mantine-datatable/issues/778
2. Runtime risk: Runtime risk requires verification
- Severity: high
- Finding: Project evidence flags a runtime risk. Review the linked source before relying on this workflow.
- User impact: May increase setup, validation, or first-run risk for the user.
- Recommended check: Reproduce the official install and quickstart path in an isolated environment.
- Evidence: community_evidence:github | https://github.com/icflorescu/mantine-datatable/issues/759
3. Installation risk: Installation risk requires verification
- Severity: medium
- Finding: Project evidence flags a installation risk. Review the linked source before relying on this workflow.
- User impact: May increase setup, validation, or first-run risk for the user.
- Recommended check: Reproduce the official install and quickstart path in an isolated environment.
- Evidence: community_evidence:github | https://github.com/icflorescu/mantine-datatable/issues/737
4. Installation risk: Installation risk requires verification
- Severity: medium
- Finding: Project evidence flags a installation risk. Review the linked source before relying on this workflow.
- User impact: May increase setup, validation, or first-run risk for the user.
- Recommended check: Reproduce the official install and quickstart path in an isolated environment.
- Evidence: community_evidence:github | https://github.com/icflorescu/mantine-datatable/issues/651
5. Configuration risk: Configuration risk requires verification
- Severity: medium
- Finding: Project evidence flags a configuration risk. Review the linked source before relying on this workflow.
- User impact: May increase setup, validation, or first-run risk for the user.
- Recommended check: Reproduce the official install and quickstart path in an isolated environment.
- Evidence: community_evidence:github | https://github.com/icflorescu/mantine-datatable/issues/818
6. Configuration risk: Configuration risk requires verification
- Severity: medium
- Finding: Project evidence flags a configuration risk. Review the linked source before relying on this workflow.
- User impact: May increase setup, validation, or first-run risk for the user.
- Recommended check: Reproduce the official install and quickstart path in an isolated environment.
- Evidence: community_evidence:github | https://github.com/icflorescu/mantine-datatable/issues/736
7. Configuration risk: Configuration risk requires verification
- Severity: medium
- Finding: Project evidence flags a configuration risk. Review the linked source before relying on this workflow.
- User impact: May increase setup, validation, or first-run risk for the user.
- Recommended check: Reproduce the official install and quickstart path in an isolated environment.
- Evidence: community_evidence:github | https://github.com/icflorescu/mantine-datatable/issues/727
8. Capability evidence risk: Capability evidence risk requires verification
- Severity: medium
- Finding: README/documentation is current enough for a first validation pass.
- User impact: May increase setup, validation, or first-run risk for the user.
- Recommended check: Reproduce the official install and quickstart path in an isolated environment.
- Evidence: capability.assumptions | https://news.ycombinator.com/item?id=48414978
9. Runtime risk: Runtime risk requires verification
- Severity: medium
- Finding: Project evidence flags a runtime risk. Review the linked source before relying on this workflow.
- User impact: May increase setup, validation, or first-run risk for the user.
- Recommended check: Reproduce the official install and quickstart path in an isolated environment.
- Evidence: community_evidence:github | https://github.com/icflorescu/mantine-datatable/issues/790
10. Maintenance risk: Maintenance risk requires verification
- Severity: medium
- Finding: Project evidence flags a maintenance risk. Review the linked source before relying on this workflow.
- User impact: May increase setup, validation, or first-run risk for the user.
- Recommended check: Reproduce the official install and quickstart path in an isolated environment.
- Evidence: community_evidence:github | https://github.com/icflorescu/mantine-datatable/issues/743
11. Maintenance risk: Maintenance risk requires verification
- Severity: medium
- Finding: Project evidence flags a maintenance risk. Review the linked source before relying on this workflow.
- User impact: May increase setup, validation, or first-run risk for the user.
- Recommended check: Reproduce the official install and quickstart path in an isolated environment.
- Evidence: community_evidence:github | https://github.com/icflorescu/mantine-datatable/issues/808
12. Maintenance risk: Maintenance risk requires verification
- Severity: medium
- Finding: Project evidence flags a maintenance risk. Review the linked source before relying on this workflow.
- User impact: May increase setup, validation, or first-run risk for the user.
- Recommended check: Reproduce the official install and quickstart path in an isolated environment.
- Evidence: community_evidence:github | https://github.com/icflorescu/mantine-datatable/issues/707
Source: Doramagic discovery, validation, and Project Pack records
Community Discussion Evidence
These external discussion links are review inputs, not standalone proof that the project is production-ready.
Count of project-level external discussion links exposed on this manual page.
Open the linked issues or discussions before treating the pack as ready for your environment.
Community Discussion Evidence
Doramagic exposes project-level community discussion separately from official documentation. Review these links before using mantine-datatable with real data or production workflows.
- DataTable crashes when invalid persisted column state is received via lo - github / github_issue
- ⚠️ Security incident: malicious commits injected via github-actions -- m - github / github_issue
- Repo is compromised - github / github_issue
- Resizing behaviour - github / github_issue
- Abnormal vertical scroll bar When using both footer and selection at the - github / github_issue
- Nested tables, missing row border on last element - github / github_issue
- ScrollBars are hidden behind sticky footer - github / github_issue
- PaginationRenderContext as exported type - github / github_issue
- Changing base table columns causes rendering loop - github / github_issue
- Installation risk requires verification - GitHub / issue
- Installation risk requires verification - GitHub / issue
- Configuration risk requires verification - GitHub / issue
Source: Project Pack community evidence and pitfall evidence