# https://github.com/icflorescu/mantine-datatable Project Manual

Generated at: 2026-06-05 17:15:08 UTC

## Table of Contents

- [Overview & Quickstart](#page-1)
- [Core API, Props & Component Architecture](#page-2)
- [Advanced Features, Hooks & Data Flow](#page-3)
- [Styling, Customization & Known Issues](#page-4)

<a id='page-1'></a>

## Overview & Quickstart

### Related Pages

Related topics: [Core API, Props & Component Architecture](#page-2), [Styling, Customization & Known Issues](#page-4)

<details>
<summary>Related Source Files</summary>

The following source files were used to generate this page:

- [README.md](https://github.com/icflorescu/mantine-datatable/blob/main/README.md)
- [app/getting-started/page.tsx](https://github.com/icflorescu/mantine-datatable/blob/main/app/getting-started/page.tsx)
- [app/config.ts](https://github.com/icflorescu/mantine-datatable/blob/main/app/config.ts)
- [app/examples/column-properties-and-styling/page.tsx](https://github.com/icflorescu/mantine-datatable/blob/main/app/examples/column-properties-and-styling/page.tsx)
- [app/examples/column-grouping/page.tsx](https://github.com/icflorescu/mantine-datatable/blob/main/app/examples/column-grouping/page.tsx)
- [app/examples/expanding-rows/page.tsx](https://github.com/icflorescu/mantine-datatable/blob/main/app/examples/expanding-rows/page.tsx)
- [app/examples/pinning-arbitrary-columns/page.tsx](https://github.com/icflorescu/mantine-datatable/blob/main/app/examples/pinning-arbitrary-columns/page.tsx)
- [app/examples/pagination/page.tsx](https://github.com/icflorescu/mantine-datatable/blob/main/app/examples/pagination/page.tsx)
- [app/examples/overriding-the-default-styles/page.tsx](https://github.com/icflorescu/mantine-datatable/blob/main/app/examples/overriding-the-default-styles/page.tsx)
- [app/examples/default-column-properties/DefaultColumnPropertiesExample.tsx](https://github.com/icflorescu/mantine-datatable/blob/main/app/examples/default-column-properties/DefaultColumnPropertiesExample.tsx)
- [app/contribute-and-support/page.tsx](https://github.com/icflorescu/mantine-datatable/blob/main/app/contribute-and-support/page.tsx)
</details>

# Overview & Quickstart

## Purpose and Scope

`mantine-datatable` is a data-rich table component built on top of the [Mantine](https://mantine.dev/) 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](https://github.com/icflorescu/mantine-datatable/blob/main/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](https://github.com/icflorescu/mantine-datatable/blob/main/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](https://github.com/icflorescu/mantine-datatable/blob/main/app/getting-started/page.tsx)):

```bash
# 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](https://github.com/icflorescu/mantine-datatable/blob/main/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](https://github.com/icflorescu/mantine-datatable/issues/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](https://github.com/icflorescu/mantine-datatable/issues/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](https://github.com/icflorescu/mantine-datatable/blob/main/app/examples/default-column-properties/DefaultColumnPropertiesExample.tsx)) — illustrates a typical setup:

```tsx
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](https://github.com/icflorescu/mantine-datatable/blob/main/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](https://github.com/icflorescu/mantine-datatable/blob/main/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](https://github.com/icflorescu/mantine-datatable/issues/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](https://github.com/icflorescu/mantine-datatable/issues/778). A related bug — initial widths being equalized instead of auto-fitting content — was tracked in [issue #736](https://github.com/icflorescu/mantine-datatable/issues/736).

### Pagination, Selection, and Footer Scrollbars

Combining `footer` content with row `selection` can produce an unwanted vertical scrollbar ([issue #743](https://github.com/icflorescu/mantine-datatable/issues/743)). Similarly, when the table has a fixed `height` and a sticky footer, the scrollbars can be obscured by the footer ([issue #808](https://github.com/icflorescu/mantine-datatable/issues/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](https://github.com/icflorescu/mantine-datatable/issues/772), [app/examples/pagination/page.tsx](https://github.com/icflorescu/mantine-datatable/blob/main/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](https://github.com/icflorescu/mantine-datatable/issues/727) and the column-order side effect in [issue #759](https://github.com/icflorescu/mantine-datatable/issues/759).
- "Infinite loop" reports ([issue #605](https://github.com/icflorescu/mantine-datatable/issues/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](https://github.com/icflorescu/mantine-datatable/issues/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](https://github.com/icflorescu/mantine-datatable/blob/main/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

```mermaid
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](https://github.com/icflorescu/mantine-datatable/blob/main/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](https://github.com/icflorescu/mantine-datatable/blob/main/app/examples/pinning-arbitrary-columns/page.tsx)).

## See Also

- [Styling guide](./styling.html) — order of CSS imports and theme overrides
- [Column properties and styling](./examples/column-properties-and-styling.html)
- [Column grouping](./examples/column-grouping.html)
- [Pagination](./examples/pagination.html)
- [Row expansion](./examples/expanding-rows.html)
- [Pinning arbitrary columns](./examples/pinning-arbitrary-columns.html)
- [Overriding the default styles](./examples/overriding-the-default-styles.html)
- [Contribute and support](./contribute-and-support.html)

---

<a id='page-2'></a>

## Core API, Props & Component Architecture

### Related Pages

Related topics: [Overview & Quickstart](#page-1), [Advanced Features, Hooks & Data Flow](#page-3)

<details>
<summary>Related Source Files</summary>

The following source files were used to generate this page:

- [package/DataTable.tsx](https://github.com/icflorescu/mantine-datatable/blob/main/package/DataTable.tsx)
- [package/types/DataTableProps.ts](https://github.com/icflorescu/mantine-datatable/blob/main/package/types/DataTableProps.ts)
- [package/types/DataTableColumn.ts](https://github.com/icflorescu/mantine-datatable/blob/main/package/types/DataTableColumn.ts)
- [package/types/index.ts](https://github.com/icflorescu/mantine-datatable/blob/main/package/types/index.ts)
- [package/types/DataTableSortProps.ts](https://github.com/icflorescu/mantine-datatable/blob/main/package/types/DataTableSortProps.ts)
- [package/types/DataTableSelectionProps.ts](https://github.com/icflorescu/mantine-datatable/blob/main/package/types/DataTableSelectionProps.ts)
- [package.json](https://github.com/icflorescu/mantine-datatable/blob/main/package.json)
- [app/getting-started/page.tsx](https://github.com/icflorescu/mantine-datatable/blob/main/app/getting-started/page.tsx)
- [app/examples/column-properties-and-styling/page.tsx](https://github.com/icflorescu/mantine-datatable/blob/main/app/examples/column-properties-and-styling/page.tsx)
- [app/examples/expanding-rows/page.tsx](https://github.com/icflorescu/mantine-datatable/blob/main/app/examples/expanding-rows/page.tsx)
- [app/examples/pinning-arbitrary-columns/page.tsx](https://github.com/icflorescu/mantine-datatable/blob/main/app/examples/pinning-arbitrary-columns/page.tsx)
- [app/examples/column-grouping/page.tsx](https://github.com/icflorescu/mantine-datatable/blob/main/app/examples/column-grouping/page.tsx)
- [app/examples/rtl-support/RTLSupportExample.tsx](https://github.com/icflorescu/mantine-datatable/blob/main/app/examples/rtl-support/RTLSupportExample.tsx)
- [app/examples/complex-usage-scenario/page.tsx](https://github.com/icflorescu/mantine-datatable/blob/main/app/examples/complex-usage-scenario/page.tsx)
</details>

# 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](https://github.com/icflorescu/mantine-datatable/blob/main/package.json)
Source: [app/getting-started/page.tsx](https://github.com/icflorescu/mantine-datatable/blob/main/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](https://github.com/icflorescu/mantine-datatable/blob/main/package/types/DataTableProps.ts)
Source: [package/types/DataTableColumn.ts](https://github.com/icflorescu/mantine-datatable/blob/main/package/types/DataTableColumn.ts)
Source: [package/types/DataTableSortProps.ts](https://github.com/icflorescu/mantine-datatable/blob/main/package/types/DataTableSortProps.ts)
Source: [package/types/DataTableSelectionProps.ts](https://github.com/icflorescu/mantine-datatable/blob/main/package/types/DataTableSelectionProps.ts)
Source: [package/types/index.ts](https://github.com/icflorescu/mantine-datatable/blob/main/package/types/index.ts)

```mermaid
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:

- **Data & columns** — `records`, `columns`, `idAccessor`, and per-column definitions. A `defaultColumnProps` block can supply shared defaults such as `textAlign`, `noWrap`, `ellipsis`, `width`, `hidden`, and `visibleMediaQuery`.
Source: [app/examples/column-properties-and-styling/page.tsx](https://github.com/icflorescu/mantine-datatable/blob/main/app/examples/column-properties-and-styling/page.tsx)
- **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.
Source: [package/types/DataTableSelectionProps.ts](https://github.com/icflorescu/mantine-datatable/blob/main/package/types/DataTableSelectionProps.ts)
- **Sorting** — accepts a `sortStatus` and `onSortStatusChange` callback pair (or a `defaultSortStatus` for uncontrolled mode). Sort behavior is documented in `DataTableSortProps`.
Source: [package/types/DataTableSortProps.ts](https://github.com/icflorescu/mantine-datatable/blob/main/package/types/DataTableSortProps.ts)
- **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 expansion** — `rowExpansion` config with `trigger` and `content`, plus controlled `expanded` state (`recordIds` + `onRecordIdsChange`). The `content` function is *lazily executed* to keep the DOM lean.
Source: [app/examples/expanding-rows/page.tsx](https://github.com/icflorescu/mantine-datatable/blob/main/app/examples/expanding-rows/page.tsx)
- **Pinning** — `pinFirstColumn` and `pinLastColumn` shortcuts, plus per-column `pinned: 'left' | 'right' | false` to pin arbitrary columns. Left and right pinning can be combined with selection.
Source: [app/examples/pinning-arbitrary-columns/page.tsx](https://github.com/icflorescu/mantine-datatable/blob/main/app/examples/pinning-arbitrary-columns/page.tsx)
- **Styling** — top-level `striped`, `highlightOnHover`, `withTableBorder`, `withColumnBorders`, and the Mantine-style `classNames` / `styles` overrides that target root, table, header, footer, and pagination slots individually.
- **Internationalization** — `dir` and theme-level `DirectionProvider` integration for full RTL support, including with pinned columns, selection, sorting, pagination, and resizing.
Source: [app/examples/rtl-support/RTLSupportExample.tsx](https://github.com/icflorescu/mantine-datatable/blob/main/app/examples/rtl-support/RTLSupportExample.tsx)

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](https://github.com/icflorescu/mantine-datatable/blob/main/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](https://github.com/icflorescu/mantine-datatable/blob/main/app/examples/column-properties-and-styling/page.tsx)
Source: [app/examples/default-column-properties/DefaultColumnPropertiesExample.tsx](https://github.com/icflorescu/mantine-datatable/blob/main/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](https://github.com/icflorescu/mantine-datatable/blob/main/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

- [Getting Started](https://icflorescu.github.io/mantine-datatable/getting-started)
- [Column Properties & Styling](https://icflorescu.github.io/mantine-datatable/examples/column-properties-and-styling)
- [Row Expansion](https://icflorescu.github.io/mantine-datatable/examples/expanding-rows)
- [Pinning Arbitrary Columns](https://icflorescu.github.io/mantine-datatable/examples/pinning-arbitrary-columns)
- [Column Grouping](https://icflorescu.github.io/mantine-datatable/examples/column-grouping)
- [Complex Usage Scenario](https://icflorescu.github.io/mantine-datatable/examples/complex-usage-scenario)
- [RTL Support](https://icflorescu.github.io/mantine-datatable/examples/rtl-support)

---

<a id='page-3'></a>

## Advanced Features, Hooks & Data Flow

### Related Pages

Related topics: [Core API, Props & Component Architecture](#page-2), [Styling, Customization & Known Issues](#page-4)

<details>
<summary>Related Source Files</summary>

The following source files were used to generate this page:

- [package/hooks/useDataTableColumns.ts](https://github.com/icflorescu/mantine-datatable/blob/main/package/hooks/useDataTableColumns.ts)
- [package/hooks/useDataTableColumnResize.ts](https://github.com/icflorescu/mantine-datatable/blob/main/package/hooks/useDataTableColumnResize.ts)
- [package/hooks/useDataTableColumnReorder.ts](https://github.com/icflorescu/mantine-datatable/blob/main/package/hooks/useDataTableColumnReorder.ts)
- [package/hooks/useDataTableColumnToggle.ts](https://github.com/icflorescu/mantine-datatable/blob/main/package/hooks/useDataTableColumnToggle.ts)
- [package/hooks/useDataTableColumnPinning.ts](https://github.com/icflorescu/mantine-datatable/blob/main/package/hooks/useDataTableColumnPinning.ts)
- [package/hooks/useDataTablePinnedColumns.ts](https://github.com/icflorescu/mantine-datatable/blob/main/package/hooks/useDataTablePinnedColumns.ts)
- [app/examples/expanding-rows/page.tsx](https://github.com/icflorescu/mantine-datatable/blob/main/app/examples/expanding-rows/page.tsx)
- [app/examples/pinning-arbitrary-columns/page.tsx](https://github.com/icflorescu/mantine-datatable/blob/main/app/examples/pinning-arbitrary-columns/page.tsx)
- [app/examples/column-properties-and-styling/page.tsx](https://github.com/icflorescu/mantine-datatable/blob/main/app/examples/column-properties-and-styling/page.tsx)
- [app/examples/overriding-the-default-styles/page.tsx](https://github.com/icflorescu/mantine-datatable/blob/main/app/examples/overriding-the-default-styles/page.tsx)
- [app/examples/rtl-support/RTLSupportExample.tsx](https://github.com/icflorescu/mantine-datatable/blob/main/app/examples/rtl-support/RTLSupportExample.tsx)
- [app/getting-started/page.tsx](https://github.com/icflorescu/mantine-datatable/blob/main/app/getting-started/page.tsx)
- [package.json](https://github.com/icflorescu/mantine-datatable/blob/main/package.json)
- [README.md](https://github.com/icflorescu/mantine-datatable/blob/main/README.md)
</details>

# 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](https://github.com/icflorescu/mantine-datatable/blob/main/package/hooks/useDataTableColumns.ts) · [package/hooks/useDataTableColumnResize.ts](https://github.com/icflorescu/mantine-datatable/blob/main/package/hooks/useDataTableColumnResize.ts) · [package/hooks/useDataTableColumnReorder.ts](https://github.com/icflorescu/mantine-datatable/blob/main/package/hooks/useDataTableColumnReorder.ts) · [package/hooks/useDataTableColumnToggle.ts](https://github.com/icflorescu/mantine-datatable/blob/main/package/hooks/useDataTableColumnToggle.ts) · [package/hooks/useDataTableColumnPinning.ts](https://github.com/icflorescu/mantine-datatable/blob/main/package/hooks/useDataTableColumnPinning.ts) · [package/hooks/useDataTablePinnedColumns.ts](https://github.com/icflorescu/mantine-datatable/blob/main/package/hooks/useDataTablePinnedColumns.ts)

### Known reactivity pitfall

A recurring community report ([#727](https://github.com/icflorescu/mantine-datatable/issues/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](https://github.com/icflorescu/mantine-datatable/issues/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](https://github.com/icflorescu/mantine-datatable/blob/main/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](https://github.com/icflorescu/mantine-datatable/blob/main/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](https://github.com/icflorescu/mantine-datatable/blob/main/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](https://github.com/icflorescu/mantine-datatable/blob/main/app/examples/expanding-rows/page.tsx)

### Pagination and the `PaginationRenderContext` type

A user-reported limitation ([#772](https://github.com/icflorescu/mantine-datatable/issues/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](https://github.com/icflorescu/mantine-datatable/issues/778) — it is easy to lose a column's width after several resizes. A separate bug report ([#736](https://github.com/icflorescu/mantine-datatable/issues/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.

```mermaid
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](https://github.com/icflorescu/mantine-datatable/blob/main/app/examples/rtl-support/RTLSupportExample.tsx)

### Peer-dependency alignment

A community thread ([#737](https://github.com/icflorescu/mantine-datatable/issues/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](https://github.com/icflorescu/mantine-datatable/issues/814) and [discussion #813](https://github.com/icflorescu/mantine-datatable/discussions/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](https://github.com/icflorescu/mantine-datatable/blob/main/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](https://github.com/icflorescu/mantine-datatable/blob/main/app/contribute-and-support/page.tsx).

## See Also

- [Getting Started](https://icflorescu.github.io/mantine-datatable/getting-started) — installation and CSS ordering
- [Column Properties and Styling](https://icflorescu.github.io/mantine-datatable/examples/column-properties-and-styling) — full column API
- [Pinning Arbitrary Columns](https://icflorescu.github.io/mantine-datatable/examples/pinning-arbitrary-columns) — per-column pinning
- [Expanding Rows](https://icflorescu.github.io/mantine-datatable/examples/expanding-rows) — controlled expansion and lazy content
- [RTL Support](https://icflorescu.github.io/mantine-datatable/examples/rtl-support) — bidirectional layout
- [Overriding the Default Styles](https://icflorescu.github.io/mantine-datatable/examples/overriding-the-default-styles) — color and class-name overrides
- [Contribute and Support](https://icflorescu.github.io/mantine-datatable/contribute-and-support) — branching policy and review process

---

<a id='page-4'></a>

## Styling, Customization & Known Issues

### Related Pages

Related topics: [Overview & Quickstart](#page-1), [Advanced Features, Hooks & Data Flow](#page-3)

<details>
<summary>Related Source Files</summary>

The following source files were used to generate this page:

- [app/examples/overriding-the-default-styles/page.tsx](https://github.com/icflorescu/mantine-datatable/blob/main/app/examples/overriding-the-default-styles/page.tsx)
- [app/examples/column-properties-and-styling/page.tsx](https://github.com/icflorescu/mantine-datatable/blob/main/app/examples/column-properties-and-styling/page.tsx)
- [app/getting-started/page.tsx](https://github.com/icflorescu/mantine-datatable/blob/main/app/getting-started/page.tsx)
- [app/config.ts](https://github.com/icflorescu/mantine-datatable/blob/main/app/config.ts)
- [README.md](https://github.com/icflorescu/mantine-datatable/blob/main/README.md)
- [app/examples/expanding-rows/page.tsx](https://github.com/icflorescu/mantine-datatable/blob/main/app/examples/expanding-rows/page.tsx)
- [app/examples/pagination/page.tsx](https://github.com/icflorescu/mantine-datatable/blob/main/app/examples/pagination/page.tsx)
- [app/examples/pinning-arbitrary-columns/page.tsx](https://github.com/icflorescu/mantine-datatable/blob/main/app/examples/pinning-arbitrary-columns/page.tsx)
- [app/examples/using-with-mantine-contextmenu/page.tsx](https://github.com/icflorescu/mantine-datatable/blob/main/app/examples/using-with-mantine-contextmenu/page.tsx)
- [app/examples/rtl-support/RTLSupportExample.tsx](https://github.com/icflorescu/mantine-datatable/blob/main/app/examples/rtl-support/RTLSupportExample.tsx)
</details>

# 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](https://github.com/icflorescu/mantine-datatable/blob/main/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](https://github.com/icflorescu/mantine-datatable/blob/main/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](https://icflorescu.github.io/mantine-datatable/styling) make this the recommended baseline.

Source: [app/examples/overriding-the-default-styles/page.tsx](https://github.com/icflorescu/mantine-datatable/blob/main/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](https://github.com/icflorescu/mantine-datatable/blob/main/app/examples/overriding-the-default-styles/page.tsx) and [app/examples/pagination/page.tsx](https://github.com/icflorescu/mantine-datatable/blob/main/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](https://github.com/icflorescu/mantine-datatable/blob/main/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](https://github.com/icflorescu/mantine-datatable/blob/main/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](https://github.com/icflorescu/mantine-datatable/blob/main/app/examples/overriding-the-default-styles/page.tsx) (`StylingWithStyleObjectsAndFunctionsExample`).

```tsx
<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](https://github.com/icflorescu/mantine-datatable/issues/814) and [discussion #813](https://github.com/icflorescu/mantine-datatable/discussions/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](https://github.com/icflorescu/mantine-datatable/blob/main/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](https://github.com/icflorescu/mantine-datatable/blob/main/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

- [Getting Started](https://icflorescu.github.io/mantine-datatable/getting-started)
- [Column properties and styling](https://icflorescu.github.io/mantine-datatable/examples/column-properties-and-styling)
- [Overriding the default styles](https://icflorescu.github.io/mantine-datatable/examples/overriding-the-default-styles)
- [Pagination](https://icflorescu.github.io/mantine-datatable/examples/pagination)
- [Expanding rows](https://icflorescu.github.io/mantine-datatable/examples/expanding-rows)
- [Pinning arbitrary columns](https://icflorescu.github.io/mantine-datatable/examples/pinning-arbitrary-columns)
- [RTL support](https://icflorescu.github.io/mantine-datatable/examples/rtl-support)

---

<!-- evidence_pipeline_checked: true -->
<!-- evidence_injected: true -->

---

## Pitfall Log

Project: icflorescu/mantine-datatable

Summary: 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
- Evidence strength: source_linked
- 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.
- Evidence: community_evidence:github | https://github.com/icflorescu/mantine-datatable/issues/778

## 2. Runtime risk - Runtime risk requires verification

- Severity: high
- Evidence strength: source_linked
- 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.
- Evidence: community_evidence:github | https://github.com/icflorescu/mantine-datatable/issues/759

## 3. Installation risk - Installation risk requires verification

- Severity: medium
- Evidence strength: source_linked
- 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.
- Evidence: community_evidence:github | https://github.com/icflorescu/mantine-datatable/issues/737

## 4. Installation risk - Installation risk requires verification

- Severity: medium
- Evidence strength: source_linked
- 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.
- Evidence: community_evidence:github | https://github.com/icflorescu/mantine-datatable/issues/651

## 5. Configuration risk - Configuration risk requires verification

- Severity: medium
- Evidence strength: source_linked
- 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.
- Evidence: community_evidence:github | https://github.com/icflorescu/mantine-datatable/issues/818

## 6. Configuration risk - Configuration risk requires verification

- Severity: medium
- Evidence strength: source_linked
- 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.
- Evidence: community_evidence:github | https://github.com/icflorescu/mantine-datatable/issues/736

## 7. Configuration risk - Configuration risk requires verification

- Severity: medium
- Evidence strength: source_linked
- 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.
- Evidence: community_evidence:github | https://github.com/icflorescu/mantine-datatable/issues/727

## 8. Capability evidence risk - Capability evidence risk requires verification

- Severity: medium
- Evidence strength: source_linked
- Finding: README/documentation is current enough for a first validation pass.
- User impact: May increase setup, validation, or first-run risk for the user.
- Evidence: capability.assumptions | https://news.ycombinator.com/item?id=48414978

## 9. Runtime risk - Runtime risk requires verification

- Severity: medium
- Evidence strength: source_linked
- 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.
- Evidence: community_evidence:github | https://github.com/icflorescu/mantine-datatable/issues/790

## 10. Maintenance risk - Maintenance risk requires verification

- Severity: medium
- Evidence strength: source_linked
- 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.
- Evidence: community_evidence:github | https://github.com/icflorescu/mantine-datatable/issues/743

## 11. Maintenance risk - Maintenance risk requires verification

- Severity: medium
- Evidence strength: source_linked
- 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.
- Evidence: community_evidence:github | https://github.com/icflorescu/mantine-datatable/issues/808

## 12. Maintenance risk - Maintenance risk requires verification

- Severity: medium
- Evidence strength: source_linked
- 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.
- Evidence: community_evidence:github | https://github.com/icflorescu/mantine-datatable/issues/707

## 13. Maintenance risk - Maintenance risk requires verification

- Severity: medium
- Evidence strength: source_linked
- 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.
- Evidence: evidence.maintainer_signals | https://news.ycombinator.com/item?id=48414978

## 14. Security or permission risk - Security or permission risk requires verification

- Severity: medium
- Evidence strength: source_linked
- Finding: no_demo
- User impact: May increase setup, validation, or first-run risk for the user.
- Evidence: downstream_validation.risk_items | https://news.ycombinator.com/item?id=48414978

## 15. Security or permission risk - Security or permission risk requires verification

- Severity: medium
- Evidence strength: source_linked
- Finding: no_demo
- User impact: May increase setup, validation, or first-run risk for the user.
- Evidence: risks.scoring_risks | https://news.ycombinator.com/item?id=48414978

## 16. Security or permission risk - Security or permission risk requires verification

- Severity: medium
- Evidence strength: source_linked
- Finding: Project evidence flags a security or permission risk. Review the linked source before relying on this workflow.
- User impact: May increase setup, validation, or first-run risk for the user.
- Evidence: community_evidence:github | https://github.com/icflorescu/mantine-datatable/issues/814

## 17. Maintenance risk - Maintenance risk requires verification

- Severity: low
- Evidence strength: source_linked
- Finding: issue_or_pr_quality=unknown。
- User impact: May increase setup, validation, or first-run risk for the user.
- Evidence: evidence.maintainer_signals | https://news.ycombinator.com/item?id=48414978

## 18. Maintenance risk - Maintenance risk requires verification

- Severity: low
- Evidence strength: source_linked
- Finding: release_recency=unknown。
- User impact: May increase setup, validation, or first-run risk for the user.
- Evidence: evidence.maintainer_signals | https://news.ycombinator.com/item?id=48414978

<!-- canonical_name: icflorescu/mantine-datatable; human_manual_source: deepwiki_human_wiki -->