MRT logoMantine React Table

Welcome To

Mantine React Table

Built with MantineV7 and TanStack TableV8

NPM VersionDownloadsBundle SizeGitHub Stars
npm i mantine-react-table@beta @mantine/core @mantine/hooks @mantine/dates @tabler/icons-react clsx dayjs

The Best of Both Worlds

Mui + React Table

Combine TanStack Table's Extensive API With Mantine's Awesome Pre-Built Components!

Efficiency Icon Efficient Bundle Size

33-47 KB depending on components imported.

Import the recommended MantineReactTable component, or optionally import lighter weight MRT sub-components that only include the UI you need.

Quality Icon Pre-Built or 100% Custom

Use the pre-built single component data grid with the <MantineReactTable /> component.

Or build your own markup from scratch using the useMantineReactTable hook.

All internal MRT components are exported for you to use as "lego blocks" to build your own custom tables.

Customizable Icon Easy Customization

Just about everything is customizable or overridable in Mantine React Table. Pass in custom props or styles to all internal components. Use simple enable* props to easily enable or disable features.

Quality Icon Powerful Features

Mantine React Table has most of the features you would expect from a modern table library including Pagination, Sorting, Filtering, Row Selection, Row Expansion, Column Resizing, Column Reordering, etc.

However, Mantine React Table also has advanced features that you may not find in other table libraries such as Virtualization, Aggregation and Grouping, Advanced Filter UIs, Fuzzy Search, Full Editing (CRUD), Column Pinning, Row Numbers, Click to Copy, and more.

30+ i18n Locales

The MRT Community has contributed over 30 Locales for everyone to import and use.

Popular Docs

Examples to Get You Started

First Name
Last Name
Address
City
State
ZacharyDavis261 Battle FordColumbusOhio
RobertSmith566 Brakus InletWestervilleWest Virginia
KevinYan7777 Kuhic KnollSouth LindaWest Virginia
JohnUpton722 Emie StreamHuntingtonWashington
NathanHarris1 Kuhic KnollOhiowaNebraska

Rows per page

1-5 of 5

import '@mantine/core/styles.css';
import '@mantine/dates/styles.css'; //if using mantine date picker features
import 'mantine-react-table/styles.css'; //make sure MRT styles were imported in your app root (once)
import { useMemo } from 'react';
import {
  MantineReactTable,
  useMantineReactTable,
  type MRT_ColumnDef,
} from 'mantine-react-table';

type Person = {
  name: {
    firstName: string;
    lastName: string;
  };
  address: string;
  city: string;
  state: string;
};

//nested data is ok, see accessorKeys in ColumnDef below
const data: Person[] = [
  {
    name: {
      firstName: 'Zachary',
      lastName: 'Davis',
    },
    address: '261 Battle Ford',
    city: 'Columbus',
    state: 'Ohio',
  },
  {
    name: {
      firstName: 'Robert',
      lastName: 'Smith',
    },
    address: '566 Brakus Inlet',
    city: 'Westerville',
    state: 'West Virginia',
  },
  {
    name: {
      firstName: 'Kevin',
      lastName: 'Yan',
    },
    address: '7777 Kuhic Knoll',
    city: 'South Linda',
    state: 'West Virginia',
  },
  {
    name: {
      firstName: 'John',
      lastName: 'Upton',
    },
    address: '722 Emie Stream',
    city: 'Huntington',
    state: 'Washington',
  },
  {
    name: {
      firstName: 'Nathan',
      lastName: 'Harris',
    },
    address: '1 Kuhic Knoll',
    city: 'Ohiowa',
    state: 'Nebraska',
  },
];

const Example = () => {
  //should be memoized or stable
  const columns = useMemo<MRT_ColumnDef<Person>[]>(
    () => [
      {
        accessorKey: 'name.firstName', //access nested data with dot notation
        header: 'First Name',
      },
      {
        accessorKey: 'name.lastName',
        header: 'Last Name',
      },
      {
        accessorKey: 'address', //normal accessorKey
        header: 'Address',
      },
      {
        accessorKey: 'city',
        header: 'City',
      },
      {
        accessorKey: 'state',
        header: 'State',
      },
    ],
    [],
  );

  const table = useMantineReactTable({
    columns,
    data, //must be memoized or stable (useState, useMemo, defined outside of this component, etc.)
  });

  return <MantineReactTable table={table} />;
};

export default Example;

Is <MantineReactTable /> Right For Your Project?

Let's Compare

Library
Free or Licensed
Bundle Size
Description
Mantine React TableFree MIT
45 KB45
Built on top of TanStack Table V8 and Mantine V6, Mantine React Table (MRT) is a batteries-included React table library that attempts to provide all the table features you need while trying to stay highly performant and relatively lightweight. Customization is treated as a top priority to let you override any styles you need to change. Mantine React Table was forked from Material React Table and is being built in 2023.
Mantine DataTableFree MIT
10 KB10
A very close to stock feeling Mantine Data Table component. It is a pretty lightweight library and is more so an extra wrapper for Mantine's built-in Table component, but with way more props, features, and styles built-in. Even though it is so lightweight, the filtering, pagination, sorting, and selection features that come with it might be enough for a lot of projects.
Mantine Data GridFree MIT
23 KB23
Mantine Data Grid is another project that is being built on top of both Mantine and TanStack Table. It seems to be a smaller project, and it is unclear if it will be as feature-rich or viable as other options on this list, but it is worth keeping an eye on.
TanStack Table (React Table)Free MIT
13 KB13
TanStack Table (formerly React Table) is a lightweight Headless UI library for building powerful tables and datagrids. No CSS or components included. You use logic from the useReactTable hook to build your own table components. No batteries included, but you get total control of your markup and styles (Mantine React Table is built on top of TanStack Table).
AG Grid Community/EnterpriseMIT or Paid License
271 KB271
If you are looking for the best data grid/table library possible, look no further than AG Grid. It may not exactly be lightweight or made from Mantine components, but it is the best of the best. It does have some drawbacks, as it has a very large bundle size and depending on your feature needs, it may require a paid license.

Feature Comparison

Feature
Mantine React Table
Mantine DataTable
Click to copy
Column Action Dropdown
Column Hiding
Column Ordering (DnD)
Column Pinning (Freezing)
Column Resizing
Column Spanning
Column Virtualization
Column/Row Grouping and Aggregation
Custom Icons
Customize Toolbars⚠️
Data Editing
Density Toggle
Detail Panels
Expanding Rows (Tree Data)
Export to CSV
Filter Modes
Filtering
Fullscreen Mode
Global Filtering Search
Header Groups and Footers
Localization (i18n)
Manage your own state
Pagination
Row Action Buttons
Row Context Menu
Row Numbers
Row Ordering (DnD)
Row Selection
Sorting
SSR Compatibility
Theming
Virtualization

*If you see any inaccuracies in this table, PRs are welcome!

Maintainers and Contributors