Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?


Failed to load latest commit information.
Latest commit message
Commit time
September 18, 2023 10:03
September 28, 2023 19:15
January 14, 2022 19:36
October 10, 2023 23:30
August 12, 2023 18:20
December 24, 2022 20:14
February 11, 2022 15:05
December 24, 2022 20:14
October 20, 2023 10:53
October 25, 2023 16:33
April 16, 2023 14:19
October 20, 2023 20:48

Mantine React Table

View the Docs Site

A fork of Material React Table

V1 released July 18, 2023


Quickly Create React Data Tables with Mantine

Built with Mantine V7 and TanStack Table V8


Learn More

Quick Examples

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)

Getting Started


View the full Installation Docs

  1. Ensure that you have React 17 or later installed

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

npm install @mantine/core @mantine/hooks @mantine/dates @emotion/react @tabler/icons-react dayjs
  1. Install mantine-react-table
npm install mantine-react-table

@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';

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({
    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.