Here is a brief overview of how to use Mantine React Table. These are very simple examples and will not cover all features of the library, but should be a great starting point.
To start using MantineReactTable, you first need to install
mantine-react-tableand the necessary Mantine dependencies.
There are additional steps and customizations you can do with your Mantine Theme, if you have not set it up in your application already. Check out the Mantine docs for more information.
If you need to change the colors of the table components, advanced Mantine Theming is covered in the Customize Components guide.
Import MantineReactTable and useMantineReactTable
Once you have everything installed, you can import from
MantineReactTableis the main component that you will use to render your table.
useMantineReactTableis the React hook that you will use to define all the columns, data, and other options for your table.
Your data must be an array of objects that have properties matching the accessors in your column definitions. The objects themselves can theoretically be in any shape, but it will be easier to set up your columns if your data is already in a flat object format like the example below, but it is not required.
Simple Data Example
Your data does NOT have to be created statically like this, of course. More than likely, your data is being fetched from a backend API. Check out the Remote Data example to see how you can use a remote data source.
There are several different ways to define columns, depending on your needs. Let's create some basic "data" columns. That is, columns that connect to our data. Since we defined our data in a flat object format, we can simply use the
accessorKeyproperty to access the data.
Simple Column Definition Example
Full Simple Example
Put it all together, and you have a basic table! You can also play around and enable some features, either per column in the column definitions, or as props passed to
Note: It is very important that the columns and data definitions are memoized or stable. Otherwise, the entire table will be re-rendered during every react re-render in your application, which can lead to performance issues. To make a variable stable, store it in
useState, wrap it in
useMemo, or define it outside of a component so it does not get recreated on every render.
Live Code Sandbox Example
There are numerous ways you can customize the behavior and look and feel of your Mantine React Table. View some of the examples to see how you can customize your table, and visit the props page to see all the props that you can use to turn features on and off and customize the look and feel of your table.