Doramagic Project Pack · Human Manual

mantine-datatable

Mantine DataTable

Overview & Quickstart

Related topics: Core API, Props & Component Architecture, Styling, Customization & Known Issues

Section Related Pages

Continue reading this section for the full explanation and source context.

Section Core Column Properties

Continue reading this section for the full explanation and source context.

Section Column Groups

Continue reading this section for the full explanation and source context.

Section Resizing

Continue reading this section for the full explanation and source context.

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/core package styles must be applied before mantine-datatable styles. 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:

PropertyTypePurpose
width`number \string`Desired column width
ellipsisbooleanTruncate overflowing content with (mutually exclusive with noWrap)
noWrapbooleanwhite-space: nowrap for the cell (mutually exclusive with ellipsis)
textAlign`'left' \'center' \'right'`Defaults to 'left'
hiddenbooleanHides 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.

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 useDataTableColumns hook has been reported to return new object references on every render, causing useEffect/useMemo to 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 columns or records array 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

Section Related Pages

Continue reading this section for the full explanation and source context.

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 fileResponsibility
DataTableProps.tsThe full, composed DataTableProps type passed to the component
DataTableColumn.tsShape of a single column, including accessors, renderers, pinning, visibility, and grouping
DataTableSortProps.tsSort-status shape and sort-callback signatures
DataTableSelectionProps.tsRow-selection state, controlled/uncontrolled modes, and selection callbacks
index.tsPublic 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 & columnsrecords, columns, idAccessor, and per-column definitions. A defaultColumnProps block can supply shared defaults such as textAlign, noWrap, ellipsis, width, hidden, and visibleMediaQuery.
  • Selection — controlled and uncontrolled modes for row selection. Community members have requested that internal sub-components such as DataTablePagination and its associated PaginationRenderContext type be exported so custom renderers can be type-safe.
  • Sorting — accepts a sortStatus and onSortStatusChange callback pair (or a defaultSortStatus for uncontrolled mode). Sort behavior is documented in DataTableSortProps.
  • Pagination — pages, page size, and a renderPagination escape 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 expansionrowExpansion config with trigger and content, plus controlled expanded state (recordIds + onRecordIdsChange). The content function is *lazily executed* to keep the DOM lean.
  • PinningpinFirstColumn and pinLastColumn shortcuts, plus per-column pinned: 'left' | 'right' | false to pin arbitrary columns. Left and right pinning can be combined with selection.
  • Styling — top-level striped, highlightOnHover, withTableBorder, withColumnBorders, and the Mantine-style classNames / styles overrides that target root, table, header, footer, and pagination slots individually.
  • Internationalizationdir and theme-level DirectionProvider integration 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 with noWrap).
  • noWrap: boolean — apply white-space: nowrap (mutually exclusive with ellipsis).
  • 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 width is provided.
  • Layout interactions — combining footer with 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 constructed columns array 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

Section Related Pages

Continue reading this section for the full explanation and source context.

Section Known reactivity pitfall

Continue reading this section for the full explanation and source context.

Section Per-column properties

Continue reading this section for the full explanation and source context.

Section Color and theme tokens

Continue reading this section for the full explanation and source context.

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.

HookResponsibilityTypical use
useDataTableColumnsBuild, sort, and persist a column descriptor listToolbar-driven column visibility/order
useDataTableColumnResizeTrack drag-to-resize handles and persist widthsUser-resizable tables
useDataTableColumnReorderTrack drag-to-reorder gesturesDrag-and-drop column arrangement
useDataTableColumnToggleShow/hide individual columnsPersisted hide/show state
useDataTableColumnPinningMark a column as left/right pinnedPer-column sticky behavior
useDataTablePinnedColumnsAggregate the set of pinned columnsCustom 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):

PropertyTypeEffect
width`number \string`Fixed or fluid column width
ellipsisbooleanTruncate with (mutually exclusive with noWrap)
noWrapbooleanPrevent wrapping (mutually exclusive with ellipsis)
textAlign`'left' \'center' \'right'`Cell text alignment (default 'left')
hiddenbooleanHide the column entirely
visiblebooleanSame 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.ts artifacts via tsup, plus processed CSS.
  • pnpm build:docs — build the documentation site.
  • pnpm lint — Biome static analysis plus a TypeScript --noEmit pass.
  • 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

Source: https://github.com/icflorescu/mantine-datatable / Human Manual

Styling, Customization & Known Issues

Related topics: Overview & Quickstart, Advanced Features, Hooks & Data Flow

Section Related Pages

Continue reading this section for the full explanation and source context.

Section Color Shortcut Properties

Continue reading this section for the full explanation and source context.

Section Column-Level Properties

Continue reading this section for the full explanation and source context.

Section Class Names

Continue reading this section for the full explanation and source context.

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:

PropertyScope
cText color of body, header, footer and pagination
backgroundColorBackground of body, header, footer and pagination
borderColorOuter table border, header bottom border, footer top border, pagination border
rowBorderColorBorders between rows
paginationActiveBackgroundColorBackground 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-actions workflow, 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 sticky behavior.
  • 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 width on the columns you do not want resized.
  • Resizable columns equal width (issue #736). When resizable: true is enabled without an explicit width, columns auto-size equally rather than fitting their content. Setting width per column resolves this.
  • Striped / highlightOnHover overridden (issue #707). Custom styles or classNames can unintentionally override the built-in striped and highlightOnHover props. The recommended approach is to layer overrides using a more specific CSS selector rather than the slot-level styles prop.
  • useDataTableColumns unstable references (issue #727). Values returned by useDataTableColumns can change identity on every render, which may cause Maximum update depth exceeded errors when used as useEffect/useMemo dependencies. 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-deps or wait for a release that relaxes the peer range.
  • Mantine 9 collapsible rows (issue #798). Mantine 9 renamed the Collapse in prop to expanded. 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 rowExpansion or customRowAttributes) can cause an infinite render loop. Stabilize callbacks with useCallback and avoid recreating object literals on every render.
  • Export internal components (issue #713). Components such as DataTablePagination are not exported from the package entry point. A custom renderPagination callback must be used today; the maintainer is considering an export in a future release. The rendered context type PaginationRenderContext is also not exported (issue #772).

Best Practices

  1. Start from the theme. Override MantineProvider before reaching for slot-level styles. Source: app/examples/overriding-the-default-styles/page.tsx.
  2. Use color props first. They cover the majority of use cases without touching CSS.
  3. Prefer classNames for structural changes, styles for inline tweaks. Mixing both at the same slot can produce conflicting cascades.
  4. Memoize column definitions and callbacks. This avoids both the resizing bugs and the render-loop issues reported above.
  5. 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.

high Installation risk requires verification

May increase setup, validation, or first-run risk for the user.

high Runtime risk requires verification

May increase setup, validation, or first-run risk for the user.

medium Installation risk requires verification

May increase setup, validation, or first-run risk for the user.

medium Installation risk requires verification

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.

Sources 12

Count of project-level external discussion links exposed on this manual page.

Use Review before install

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.

Source: Project Pack community evidence and pitfall evidence