Mantine React Table V2 for Mantine V7 is currently in development. See v2.mantine-react-table.com for more info.

Welcome To
Mantine React Table ^V1

Built with Mantine^V6 and TanStack Table^V8

npm i mantine-react-table @mantine/core@6.0.21 @mantine/hooks@6.0.21 @mantine/dates@6.0.21 @emotion/react @tabler/icons-react dayjs

The Best of Both Worlds

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

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.

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.

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.

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
Zachary	Davis	261 Battle Ford	Columbus	Ohio
Robert	Smith	566 Brakus Inlet	Westerville	West Virginia
Kevin	Yan	7777 Kuhic Knoll	South Linda	West Virginia
John	Upton	722 Emie Stream	Huntington	Washington
Nathan	Harris	1 Kuhic Knoll	Ohiowa	Nebraska

Rows per page

1-5 of 5

1
import { useMemo } from 'react';
2
import {
3
  MantineReactTable,
4
  useMantineReactTable,
5
  type MRT_ColumnDef,
6
} from 'mantine-react-table';
7

8
type Person = {
9
  name: {
10
    firstName: string;
11
    lastName: string;
12
  };
13
  address: string;
14
  city: string;
15
  state: string;
16
};
17

18
//nested data is ok, see accessorKeys in ColumnDef below
19
const data: Person[] = [
20
  {
21
    name: {
22
      firstName: 'Zachary',
23
      lastName: 'Davis',
24
    },
25
    address: '261 Battle Ford',
26
    city: 'Columbus',
27
    state: 'Ohio',
28
  },
29
  {
30
    name: {
31
      firstName: 'Robert',
32
      lastName: 'Smith',
33
    },
34
    address: '566 Brakus Inlet',
35
    city: 'Westerville',
36
    state: 'West Virginia',
37
  },
38
  {
39
    name: {
40
      firstName: 'Kevin',
41
      lastName: 'Yan',
42
    },
43
    address: '7777 Kuhic Knoll',
44
    city: 'South Linda',
45
    state: 'West Virginia',
46
  },
47
  {
48
    name: {
49
      firstName: 'John',
50
      lastName: 'Upton',
51
    },
52
    address: '722 Emie Stream',
53
    city: 'Huntington',
54
    state: 'Washington',
55
  },
56
  {
57
    name: {
58
      firstName: 'Nathan',
59
      lastName: 'Harris',
60
    },
61
    address: '1 Kuhic Knoll',
62
    city: 'Ohiowa',
63
    state: 'Nebraska',
64
  },
65
];
66

67
const Example = () => {
68
  //should be memoized or stable
69
  const columns = useMemo<MRT_ColumnDef<Person>[]>(
70
    () => [
71
      {
72
        accessorKey: 'name.firstName', //access nested data with dot notation
73
        header: 'First Name',
74
      },
75
      {
76
        accessorKey: 'name.lastName',
77
        header: 'Last Name',
78
      },
79
      {
80
        accessorKey: 'address', //normal accessorKey
81
        header: 'Address',
82
      },
83
      {
84
        accessorKey: 'city',
85
        header: 'City',
86
      },
87
      {
88
        accessorKey: 'state',
89
        header: 'State',
90
      },
91
    ],
92
    [],
93
  );
94

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

100
  return <MantineReactTable table={table} />;
101
};
102

103
export default Example;

1
import { useMemo } from 'react';
2
import { MantineReactTable, useMantineReactTable } from 'mantine-react-table';
3

4
//nested data is ok, see accessorKeys in ColumnDef below
5
const data = [
6
  {
7
    name: {
8
      firstName: 'Zachary',
9
      lastName: 'Davis',
10
    },
11
    address: '261 Battle Ford',
12
    city: 'Columbus',
13
    state: 'Ohio',
14
  },
15
  {
16
    name: {
17
      firstName: 'Robert',
18
      lastName: 'Smith',
19
    },
20
    address: '566 Brakus Inlet',
21
    city: 'Westerville',
22
    state: 'West Virginia',
23
  },
24
  {
25
    name: {
26
      firstName: 'Kevin',
27
      lastName: 'Yan',
28
    },
29
    address: '7777 Kuhic Knoll',
30
    city: 'South Linda',
31
    state: 'West Virginia',
32
  },
33
  {
34
    name: {
35
      firstName: 'John',
36
      lastName: 'Upton',
37
    },
38
    address: '722 Emie Stream',
39
    city: 'Huntington',
40
    state: 'Washington',
41
  },
42
  {
43
    name: {
44
      firstName: 'Nathan',
45
      lastName: 'Harris',
46
    },
47
    address: '1 Kuhic Knoll',
48
    city: 'Ohiowa',
49
    state: 'Nebraska',
50
  },
51
];
52

53
const Example = () => {
54
  //should be memoized or stable
55
  const columns = useMemo(
56
    () => [
57
      {
58
        accessorKey: 'name.firstName', //access nested data with dot notation
59
        header: 'First Name',
60
      },
61
      {
62
        accessorKey: 'name.lastName',
63
        header: 'Last Name',
64
      },
65
      {
66
        accessorKey: 'address', //normal accessorKey
67
        header: 'Address',
68
      },
69
      {
70
        accessorKey: 'city',
71
        header: 'City',
72
      },
73
      {
74
        accessorKey: 'state',
75
        header: 'State',
76
      },
77
    ],
78
    [],
79
  );
80

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

86
  return <MantineReactTable table={table} />;
87
};
88

89
export default Example;

1
import { useMemo } from 'react';
2
import { MantineReactTable, type MRT_ColumnDef } from 'mantine-react-table';
3

4
type Person = {
5
  name: {
6
    firstName: string;
7
    lastName: string;
8
  };
9
  address: string;
10
  city: string;
11
  state: string;
12
};
13

14
//nested data is ok, see accessorKeys in ColumnDef below
15
const data: Person[] = [
16
  {
17
    name: {
18
      firstName: 'Zachary',
19
      lastName: 'Davis',
20
    },
21
    address: '261 Battle Ford',
22
    city: 'Columbus',
23
    state: 'Ohio',
24
  },
25
  {
26
    name: {
27
      firstName: 'Robert',
28
      lastName: 'Smith',
29
    },
30
    address: '566 Brakus Inlet',
31
    city: 'Westerville',
32
    state: 'West Virginia',
33
  },
34
  {
35
    name: {
36
      firstName: 'Kevin',
37
      lastName: 'Yan',
38
    },
39
    address: '7777 Kuhic Knoll',
40
    city: 'South Linda',
41
    state: 'West Virginia',
42
  },
43
  {
44
    name: {
45
      firstName: 'John',
46
      lastName: 'Upton',
47
    },
48
    address: '722 Emie Stream',
49
    city: 'Huntington',
50
    state: 'Washington',
51
  },
52
  {
53
    name: {
54
      firstName: 'Nathan',
55
      lastName: 'Harris',
56
    },
57
    address: '1 Kuhic Knoll',
58
    city: 'Ohiowa',
59
    state: 'Nebraska',
60
  },
61
];
62

63
const Example = () => {
64
  //should be memoized or stable
65
  const columns = useMemo<MRT_ColumnDef<Person>[]>(
66
    () => [
67
      {
68
        accessorKey: 'name.firstName', //access nested data with dot notation
69
        header: 'First Name',
70
      },
71
      {
72
        accessorKey: 'name.lastName',
73
        header: 'Last Name',
74
      },
75
      {
76
        accessorKey: 'address', //normal accessorKey
77
        header: 'Address',
78
      },
79
      {
80
        accessorKey: 'city',
81
        header: 'City',
82
      },
83
      {
84
        accessorKey: 'state',
85
        header: 'State',
86
      },
87
    ],
88
    [],
89
  );
90

91
  return <MantineReactTable columns={columns} data={data} />;
92
};
93

94
export default Example;

Is
<MantineReactTable />
Right For Your Project?

Let's Compare

Library	Free or Licensed	Bundle Size	Description
Mantine React Table	Free MIT	45 KB	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 DataTable	Free MIT	10 KB	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 Grid	Free MIT	23 KB	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 KB	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/Enterprise	MIT or Paid License	271 KB	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	✅	❌