MRT logoMantine React Table

On This Page
    This is the install guide for mantine-react-table V1 and @mantine/ packages V6. MRT V1 will not work with Mantine V7. MRT V2 will be released by the end of 2023 and will work with Mantine V7.

    Installation

    mantine-react-table V1 requires Mantine V6.0+ 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 (^v6.0)
    2. @mantine/hooks (^v6.0)
    3. @mantine/dates (^v6.0)
    4. @tabler/icons-react (2.23.0+)
    5. @emotion/react (v11)
    6. dayjs (v1.11+)
    7. react and react-dom (v18)

    Quick Install

    npm i mantine-react-table

    Install With Required Peer Dependencies (Recommended)

    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
    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

    Common Errors

    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.
    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 v6.
    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.
    If you are using the Next.js App Directory and get an error like this:
    Attempted import error: 'useState' is not exported from 'react'
    Mantine itself does not work with React Server components and will require "use-client" on all components from both Mantine and MRT. The creator of Mantine recommends not using Mantine in the Next.js App Directory at all. Mantine V7 and MRT V2 should address this issue by the end of 2023.

    FAQs

    You can help make these docs better! PRs are Welcome
    Using Material-UI instead of Mantine?
    Check out Material React Table