Mantine React Table

A fully featured Mantine V5 implementation of TanStack React Table V8, fork...

TableReact
KevinVandy/mantine-react-tablewww.mantine-react-table.com/mantine-react-table

README

Mantine React Table


View the Docs Site

A fork of Material React Table

V1 released July 18, 2023

About


_Quickly Create React Data Tables with Mantine_


### __Built with [Mantine V7](https://mantine.dev/) and [TanStack Table V8](https://tanstack.com/table/v8)__

MRT

Learn More


- Join the Discord server to join in on the development discussion or ask questions
- View the Docs Website
- See all Props, Options, and APIs

Quick Examples


- Basic Table (See Default Features)
- Minimal Table (Turn off Features like Pagination, Sorting, Filtering, and Toolbars)
- Advanced Table (See some of the Advanced Features)
- Aggregation/Grouping (Aggregation features such as Sum, Average, Count, etc.)
- Data Export Table (Export to CSV, Excel, etc.)
- Editing CRUD Table (Create, Edit, and Delete Rows)
- Remote Data (Server-side Pagination, Sorting, and Filtering)
- React Query (Server-side Pagination, Sorting, and Filtering, simplified)
- Virtualized Rows (10,000 rows at once!)
- Infinite Scrolling (Fetch data as you scroll)
- Localization (i18n) (Over a dozen languages built-in)

View additional storybook examples

Getting Started


Installation


View the full Installation Docs

1. Ensure that you have React 17 or later installed

2. Install Peer Dependencies (Mantine V6 and Tabler Icons)

  1. ```bash
  2. npm install @mantine/core @mantine/hooks @mantine/dates @emotion/react @tabler/icons-react dayjs
  3. ```

3. Install mantine-react-table

  1. ```bash
  2. npm install mantine-react-table
  3. ```

_@tanstack/react-table, @tanstack/react-virtual, @tanstack/match-sorter-utils,_ are internal dependencies, so you do NOT need to install them yourself.


Usage


Read the full usage docs here


  1. ```jsx
  2. import { useMemo, useState, useEffect } from 'react';
  3. import { MantineReactTable, useMantineReactTable } from 'mantine-react-table';

  5. const data = [
  6.   {
  7.     name: 'John',
  8.     age: 30,
  9.   },
  10.   {
  11.     name: 'Sara',
  12.     age: 25,
  13.   },
  14. ]

  16. export default function App() {
  17.   const columns = useMemo(
  18.     () => [
  19.       {
  20.         accessorKey: 'name', //simple recommended way to define a column
  21.         header: 'Name',
  22.         mantineTableHeadCellProps: { style: { color: 'green' } }, //optional custom props
  23.         Cell: ({ cell }) => <span>{cell.getValue()}</span>, //optional custom cell render
  24.       },
  25.       {
  26.         accessorFn: (row) => row.age, //alternate way
  27.         id: 'age', //id required if you use accessorFn instead of accessorKey
  28.         header: 'Age',
  29.         Header: () => <i>Age</i>, //optional custom header render
  30.       },
  31.     ],
  32.     [],
  33.   );

  35.   //optionally, you can manage any/all of the table state yourself
  36.   const [rowSelection, setRowSelection] = useState({});

  38.   useEffect(() => {
  39.     //do something when the row selection changes
  40.   }, [rowSelection]);

  42.   const table = useMantineReactTable({
  43.     columns,
  44.     data,
  45.     enableColumnOrdering: true, //enable some features
  46.     enableRowSelection: true,
  47.     enablePagination: false, //disable a default feature
  48.     onRowSelectionChange: setRowSelection, //hoist row selection state to your state
  49.     state: { rowSelection },
  50.   });
  51.   
  52.   return <MantineReactTable table={table} />;
  53. }
  54. ```

_Open in Code Sandbox_

Contributors



PRs are Welcome, but please discuss in GitHub Discussions or the Discord Server first if it is a large change!

Read the Contributing Guide to learn how to run this project locally.