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 and TanStack Table ^V8

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

Features

All features can easily be enabled/disabled

Fully Fleshed out Docs are available for all features

Getting Started

Installation

View the full Installation Docs

Ensure that you have React 17 or later installed
Install Peer Dependencies (Mantine V6 and Tabler Icons)

npm install @mantine/core @mantine/hooks @mantine/dates @emotion/react @tabler/icons-react dayjs

Install mantine-react-table

npm install mantine-react-table

@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

import { useMemo, useState, useEffect } from 'react';
import { MantineReactTable, useMantineReactTable } from 'mantine-react-table';

const data = [
  {
    name: 'John',
    age: 30,
  },
  {
    name: 'Sara',
    age: 25,
  },
]

export default function App() {
  const columns = useMemo(
    () => [
      {
        accessorKey: 'name', //simple recommended way to define a column
        header: 'Name',
        mantineTableHeadCellProps: { style: { color: 'green' } }, //optional custom props
        Cell: ({ cell }) => <span>{cell.getValue()}</span>, //optional custom cell render
      },
      {
        accessorFn: (row) => row.age, //alternate way
        id: 'age', //id required if you use accessorFn instead of accessorKey
        header: 'Age',
        Header: () => <i>Age</i>, //optional custom header render
      },
    ],
    [],
  );

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

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

  const table = useMantineReactTable({
    columns,
    data,
    enableColumnOrdering: true, //enable some features
    enableRowSelection: true,
    enablePagination: false, //disable a default feature
    onRowSelectionChange: setRowSelection, //hoist row selection state to your state
    state: { rowSelection },
  });
  
  return <MantineReactTable table={table} />;
}

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.

danicc097/mantine-react-table