Sticky Header/Footer Feature Guide - Mantine React Table Docs

Sticky Header and Footer Feature Guide

The sticky header and footer feature allows you to keep the header and footer of the table visible while scrolling through the table. This is useful when you have a large table and want to keep the header and footer visible at all times.

Relevant Table Options

#	Type	More Info Links
1	boolean

2	boolean

3	BoxProps \| ({ table }) => BoxProps	Mantine Box Docs

Enable Sticky Header

Enabling the sticky header is as simple as setting the enableStickyHeader table option to true. This will make the header of the table stick to the top and remain visible while scrolling through the table.

When the sticky header is enabled, you will probably also want to give the table a maxHeight so that the table can scroll vertically, and keep the header visible. You can do this by styling the table container with the mantineTableContainerProps table option.

If no maxHeight is specified, the table container will default to a 100vh maxHeight when enableStickyHeader is enabled.

const table = useMantineReactTable({
  columns,
  data,
  enableStickyHeader: true,
  mantineTableContainerProps: { sx: { maxHeight: '500px' } },
});

Enable Sticky Footer

Similarly, enabling the sticky footer is as simple as setting the enableStickyFooter table option to true. This will make the footer of the table stick to the bottom of the table and always be visible, even before the table is scrolled to the bottom.

const table = useMantineReactTable({
  columns,
  data,
  enableStickyFooter: true,
});

Enable Sticky Header and Footer Demo

Demo

First Name	Last Name	Email	City
Dylan	Murray	dmurray@yopmail.com	East Daphne
Raquel	Kohler	rkholer33@yopmail.com	Columbus
Ervin	Reinger	ereinger@mailinator.com	South Linda
Brittany	McCullough	bmccullough44@mailinator.com	Lincoln
Branson	Frami	bframi@yopmain.com	New York
Kevin	Klein	kklien@mailinator.com	Nebraska
First Name	Last Name	Email	City

Rows per page

1-6 of 6

1
import { useMemo } from 'react';
2
import { MantineReactTable, type MRT_ColumnDef } from 'mantine-react-table';
3
import { data, type Person } from './makeData';
4

5
const Example = () => {
6
  const columns = useMemo<MRT_ColumnDef<Person>[]>(
7
    () => [
8
      {
9
        accessorKey: 'firstName',
10
        header: 'First Name',
11
        footer: 'First Name',
12
      },
13
      {
14
        accessorKey: 'lastName',
15
        header: 'Last Name',
16
        footer: 'Last Name',
17
      },
18
      {
19
        accessorKey: 'email',
20
        header: 'Email',
21
        footer: 'Email',
22
      },
23
      {
24
        accessorKey: 'city',
25
        header: 'City',
26
        footer: 'City',
27
      },
28
    ],
29
    [],
30
  );
31

32
  return (
33
    <MantineReactTable
34
      columns={columns}
35
      data={data}
36
      enableStickyHeader
37
      enableStickyFooter
38
      mantineTableContainerProps={{ sx: { maxHeight: '300px' } }}
39
    />
40
  );
41
};
42

43
export default Example;

1
import { useMemo } from 'react';
2
import { MantineReactTable } from 'mantine-react-table';
3
import { data } from './makeData';
4

5
const Example = () => {
6
  const columns = useMemo(
7
    () => [
8
      {
9
        accessorKey: 'firstName',
10
        header: 'First Name',
11
        footer: 'First Name',
12
      },
13
      {
14
        accessorKey: 'lastName',
15
        header: 'Last Name',
16
        footer: 'Last Name',
17
      },
18
      {
19
        accessorKey: 'email',
20
        header: 'Email',
21
        footer: 'Email',
22
      },
23
      {
24
        accessorKey: 'city',
25
        header: 'City',
26
        footer: 'City',
27
      },
28
    ],
29
    [],
30
  );
31

32
  return (
33
    <MantineReactTable
34
      columns={columns}
35
      data={data}
36
      enableStickyHeader
37
      enableStickyFooter
38
      mantineTableContainerProps={{ sx: { maxHeight: '300px' } }}
39
    />
40
  );
41
};
42

43
export default Example;

View Extra Storybook Examples