Basic Mantine React Table Example

Basic Example

Mantine React Table enables client-side sorting, filtering, search, pagination, column hiding, and more by default. These features can easily be disabled or customized further, but here is a showcase of their default behavior. Be sure to check out a more Advanced Example to see how more features can be customized.

Demo

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;

View Extra Storybook Examples