Mantine React Table

This is the install guide for mantine-react-table V2 and @mantine/ packages V7. MRT V2 will not work with Mantine V6.

mantine-react-table V2 requires Mantine V7.3+ packages as dependencies in your project.

If you are already using Mantine, you probably already have most of these peer dependencies installed.

Just double-check that you have the following in your package.json, or use the full install commands below.

1. @mantine/core (^v7.3+)

2. @mantine/hooks (^v7.3+)

3. @mantine/dates (^v7.3+)

4. @tabler/icons-react (2.23.0+)

5. dayjs (v1.11+)

6. clsx (v2+)

7. react and react-dom (v18)

The Quick Install instructions here assume you already have Mantine V7 installed and correctly configured with postcss in your project.

npm i mantine-react-table@beta

pnpm add mantine-react-table@beta

yarn add mantine-react-table@beta

bun i mantine-react-table@beta

It is best to refer to the Mantine V7 installation guide for the most up-to-date instructions on how to install Mantine V7 for your specific React meta framework. (Next.js, Remix, Vite, etc.)

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

pnpm add mantine-react-table@beta @mantine/core @mantine/hooks @mantine/dates @tabler/icons-react clsx dayjs

yarn add mantine-react-table@beta @mantine/core @mantine/hooks @mantine/dates @tabler/icons-react clsx dayjs

bun i mantine-react-table@beta @mantine/core @mantine/hooks @mantine/dates @tabler/icons-react clsx dayjs

You do NOT need to install @tanstack/react-table, as it is already an internal dependency of mantine-react-table, and must use an exact version already specified internally.

All internal dependencies: @tanstack/react-table, @tanstack/react-virtual, and @tanstack/match-sorter-utils

If you are using Mantine V7, it is common to use CSS modules for advanced custom styling. You may want to install and configure PostCSS like down below, but it is not required if you are using a different styling solution.

npm i -D postcss postcss-preset-mantine postcss-simple-vars

pnpm add -D postcss postcss-preset-mantine postcss-simple-vars

yarn add -D postcss postcss-preset-mantine postcss-simple-vars

bun i -D postcss postcss-preset-mantine postcss-simple-vars

Create a postcss.config.cjs file in the root of your project with the following contents:

module.exports = {
  plugins: {
    'postcss-preset-mantine': {},
    'postcss-simple-vars': {
      variables: {
        'mantine-breakpoint-xs': '36em',
        'mantine-breakpoint-sm': '48em',
        'mantine-breakpoint-md': '62em',
        'mantine-breakpoint-lg': '75em',
        'mantine-breakpoint-xl': '88em',
      },
    },
  },
};

The Mantine V7 installation guide has much better instructions for how to set up your Mantine theme, but you should have something like this in your project:

import { MantineProvider, createTheme } from '@mantine/core';

const theme = createTheme({
  /** Put your mantine theme override here */
});

function Demo() {
  return (
    <MantineProvider theme={theme}>
      <App />
    </MantineProvider>
  );
}

After you install mantine-react-table, you will need to import the CSS styles from mantine-react-table/styles.css at the root of your project. (Where you import your other Mantine CSS styles.)

import '@mantine/core/styles.css'; //import Mantine V7 styles needed by MRT
import '@mantine/dates/styles.css'; //if using mantine date picker features
import 'mantine-react-table/styles.css'; //import MRT styles

If you don't see any styles applied to the mantine table components, you may have mismatching versions of mantine-react-table and @mantine/core. MRT v1 requires Mantine v6 and will not work with Mantine v7. MRT v2 will be released by the end of 2023 and will work with Mantine v7.

Also, if the Action Icon Buttons all have a filled color, that is a good sign that you simply forgot to import the MRT CSS file in the step above.

If you get an error like this:

"Error: Element type is invalid: expected a string (for built-in components)
or a class/function (for composite components) but got: undefined.
You likely forgot to export your component from the file it's defined in,
or you might have mixed up default and named imports.

You probably do not have the correct version of Mantine or Tabler Icons installed.

Make sure all mantine packages are at least v7.3.

Make sure that the @tabler/icons-react package is at least v2.23.0.

If you are using an older version of webpack or create-react-app and get an error like this:

./node_modules/@tanstack/virtual-core/build/lib/index.esm.js 147:92
Module parse failed: Unexpected token (147:92)
File was processed with these loaders:

Then try upgrading either webpack or react-scripts to the latest versions.