Mantine React Table Fork

Before you adopt this fork: the maintainers of the original mantine-react-table are deprecating it, and their advice is to build your own table components on TanStack Table v9. We think that advice is right. This fork keeps compatibility with new Mantine versions so existing apps are not stranded, but we expect to stop maintaining it in 2027. If you are starting a new project, start with TanStack directly.

Unofficial fork of mantine-react-table that provides support for Mantine V8 & V9.

View the Docs Site

Two release lines are maintained. The package major no longer tracks Mantine's major version — both current lines target Mantine V9.

The v10 line is ESM-only and requires Node >= 20; it ships a v8 compatibility layer, so most v8-era table APIs keep working.

• Join the Discord server to join in on the development discussion or ask questions
• View the Docs Website
• See all Props, Options, and APIs

• Basic Table (See Default Features)
• Minimal Table (Turn off Features like Pagination, Sorting, Filtering, and Toolbars)
• Advanced Table (See some of the Advanced Features)
• Aggregation/Grouping (Aggregation features such as Sum, Average, Count, etc.)
• Data Export Table (Export to CSV, Excel, etc.)
• Editing CRUD Table (Create, Edit, and Delete Rows)
• Remote Data (Server-side Pagination, Sorting, and Filtering)
• React Query (Server-side Pagination, Sorting, and Filtering, simplified)
• Virtualized Rows (10,000 rows at once!)
• Infinite Scrolling (Fetch data as you scroll)
• Localization (i18n) (Over a dozen languages built-in)

View additional storybook examples

All features can easily be enabled/disabled

Fully Fleshed out Docs are available for all features

• < 44kb gzipped - Bundlephobia
• Advanced TypeScript Generics Support (TypeScript Optional)
• Aggregation and Grouping (Sum, Average, Count, etc.)
• Click To Copy Cell Values
• Column Action Dropdown Menu
• Column Hiding
• Column Ordering via Drag'n'Drop
• Column Pinning (Freeze Columns)
• Column Resizing
• Customize Icons
• Customize Styling of internal Mantine Components
• Data Editing (4 different editing modes)
• Density Toggle
• Detail Panels (Expansion)
• Filtering (supports client-side and server-side)
• Filter Match Highlighting
• Full Screen Mode
• Global Filtering (Search across all columns, rank by best match)
• Header Groups & Footers
• Localization (i18n) support
• Manage your own state or let the table manage it internally for you
• Pagination (supports client-side and server-side)
• Row Actions (Your Custom Action Buttons)
• Row Numbers
• Row Ordering via Drag'n'Drop
• Row Selection (Checkboxes)
• SSR compatible
• Sorting (supports client-side and server-side)
• Theming (Respects your Mantine Theme)
• Toolbars (Add your own action buttons)
• Tree Data / Expanding Sub-rows
• Virtualization (@tanstack/react-virtual)

View the full Installation Docs

1. Ensure that you have React 19 or later installed

2. Install Peer Dependencies (Mantine V9 and Tabler Icons)

npm install @mantine/core @mantine/hooks @mantine/dates @tabler/icons-react dayjs

3. Install mantine-react-table-open

npm install mantine-react-table-open

1. Ensure that you have React 18 or later installed

2. Install Peer Dependencies (Mantine V8 and Tabler Icons)

npm install @mantine/core@8 @mantine/hooks@8 @mantine/dates@8 @tabler/icons-react dayjs

3. Install mantine-react-table-open v8

npm install mantine-react-table-open@^8

@tanstack/react-table, @tanstack/react-virtual, @tanstack/match-sorter-utils, are internal dependencies, so you do NOT need to install them yourself.

Read the full usage docs here

import { useMemo, useState, useEffect } from 'react';
import { MantineReactTable, useMantineReactTable } from 'mantine-react-table-open';

const data = [
  {
    name: 'John',
    age: 30,
  },
  {
    name: 'Sara',
    age: 25,
  },
]

export default function App() {
  const columns = useMemo(
    () => [
      {
        accessorKey: 'name', //simple recommended way to define a column
        header: 'Name',
        mantineTableHeadCellProps: { style: { color: 'green' } }, //optional custom props
        Cell: ({ cell }) => <span>{cell.getValue()}</span>, //optional custom cell render
      },
      {
        accessorFn: (row) => row.age, //alternate way
        id: 'age', //id required if you use accessorFn instead of accessorKey
        header: 'Age',
        Header: () => <i>Age</i>, //optional custom header render
      },
    ],
    [],
  );

  //optionally, you can manage any/all of the table state yourself
  const [rowSelection, setRowSelection] = useState({});

  useEffect(() => {
    //do something when the row selection changes
  }, [rowSelection]);

  const table = useMantineReactTable({
    columns,
    data,
    enableColumnOrdering: true, //enable some features
    enableRowSelection: true,
    enablePagination: false, //disable a default feature
    onRowSelectionChange: setRowSelection, //hoist row selection state to your state
    state: { rowSelection },
  });
  
  return <MantineReactTable table={table} />;
}

Open in Code Sandbox

PRs are Welcome, but please discuss in GitHub Discussions or the Discord Server first if it is a large change!

Read the Contributing Guide to learn how to run this project locally.