Skip to content

install.mdx

Latest commit

 

History

History
200 lines (160 loc) · 7.64 KB

install.mdx

File metadata and controls

200 lines (160 loc) · 7.64 KB

import Head from 'next/head'; import { InstallCommand } from '../../../components/mdx/InstallCommand'; import { FAQs } from '../../../components/mdx/FAQs'; import { Alert } from '@mantine/core'; import { IconInfoCircle } from '@tabler/icons-react';

<title>{'Installation - Mantine React Table Docs V2'}</title>

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

<Alert variant="light" color="orange" icon={}> Mantine React Table V2 is still a work in progress, but we are making good progress every day.

Installation

mantine-react-table V3 requires Mantine V8.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 (^v8.0+)
  2. @mantine/hooks (^v8.0+)
  3. @mantine/dates (^v8.0+)
  4. @tabler/icons-react (2.23.0+)
  5. dayjs (v1.11+)
  6. clsx (v2+)
  7. react and react-dom (v18)

Quick Install

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

Install With Required Peer Dependencies (Recommended)

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

Install Mantine React Table with Mantine required peer dependencies:


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

Install PostCSS dev dependencies (Optional)

If you are using Mantine V8, 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.


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',
      },
    },
  },
};

Setup Mantine Theme

The Mantine V8 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>
  );
}

Import CSS Styles

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 V8 styles needed by MRT
import '@mantine/dates/styles.css'; //if using mantine date picker features
import 'mantine-react-table/styles.css'; //import MRT styles

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 v3 now targets Mantine v8.

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 v8.0.

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.

FAQs

<FAQs faqStructuredData={{ '@context': 'https://schema.org', '@type': 'FAQPage', mainEntity: [ { '@type': 'Question', name: 'Does Mantine V5 Work with Mantine React Table?', acceptedAnswer: { '@type': 'Answer', text: 'The last version of MRT that worked with Mantine V5 was v0.9.5. You can try it out, but it is not recommended as v0 will receive no further updates. Many features and bugfixes are only present in MRT v1. MRT v1 requires Mantine V6.', }, }, { '@type': 'Question', name: 'Does Mantine V7 Work with Mantine React Table?', acceptedAnswer: { '@type': 'Answer', text: 'MRT v2 will be completely rewritten to use Mantine v7. This should be available by the end of 2023.', }, }, { '@type': 'Question', name: 'Does Mantine V8 Work with Mantine React Table?', acceptedAnswer: { '@type': 'Answer', text: 'MRT v3 will be completely rewritten to use Mantine v8.', }, }, { '@type': 'Question', name: 'What is the difference between Mantine React Table and Material React Table?', acceptedAnswer: { '@type': 'Answer', text: 'Mantine React Table and Material React Table are sister libraries. Mantine React Table was forked from Material React Table after its initial success. Mantine React Table uses Mantine instead of Material UI.', }, }, { '@type': 'Question', name: "Should I install '@tanstack/react-table' in my package.json for Mantine React Table?", acceptedAnswer: { '@type': 'Answer', text: "

No, you do not need to install TanStack Table in your project manually, as the latest TanStack Table version automatically gets installed under the hood by MRT itself as an internal dependency. You can import s and functions from '@tanstack/react-table' too.

", }, }, { '@type': 'Question', name: 'Is TypeScript required to use Mantine React Table?', acceptedAnswer: { '@type': 'Answer', text: '

No, TypeScript is not required to use Mantine React Table, but it is a whole lot easier to use Mantine React Table with TypeScript, especially when defining columns. If you do use TypeScript, try to keep the latest TypeScript version installed, or at least TS version 4.8 or higher.

', }, }, ], }} />