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

• <input checked="" disabled="" type="checkbox"> < 44kb gzipped - Bundlephobia
• <input checked="" disabled="" type="checkbox"> Advanced TypeScript Generics Support (TypeScript Optional)
• <input checked="" disabled="" type="checkbox"> Aggregation and Grouping (Sum, Average, Count, etc.)
• <input checked="" disabled="" type="checkbox"> Click To Copy Cell Values
• <input checked="" disabled="" type="checkbox"> Column Action Dropdown Menu
• <input checked="" disabled="" type="checkbox"> Column Hiding
• <input checked="" disabled="" type="checkbox"> Column Ordering via Drag'n'Drop
• <input checked="" disabled="" type="checkbox"> Column Pinning (Freeze Columns)
• <input checked="" disabled="" type="checkbox"> Column Resizing
• <input checked="" disabled="" type="checkbox"> Customize Icons
• <input checked="" disabled="" type="checkbox"> Customize Styling of internal Mantine Components
• <input checked="" disabled="" type="checkbox"> Data Editing (4 different editing modes)
• <input checked="" disabled="" type="checkbox"> Density Toggle
• <input checked="" disabled="" type="checkbox"> Detail Panels (Expansion)
• <input checked="" disabled="" type="checkbox"> Filtering (supports client-side and server-side)
• <input checked="" disabled="" type="checkbox"> Filter Match Highlighting
• <input checked="" disabled="" type="checkbox"> Full Screen Mode
• <input checked="" disabled="" type="checkbox"> Global Filtering (Search across all columns, rank by best match)
• <input checked="" disabled="" type="checkbox"> Header Groups & Footers
• <input checked="" disabled="" type="checkbox"> Localization (i18n) support
• <input checked="" disabled="" type="checkbox"> Manage your own state or let the table manage it internally for you
• <input checked="" disabled="" type="checkbox"> Pagination (supports client-side and server-side)
• <input checked="" disabled="" type="checkbox"> Row Actions (Your Custom Action Buttons)
• <input checked="" disabled="" type="checkbox"> Row Numbers
• <input checked="" disabled="" type="checkbox"> Row Ordering via Drag'n'Drop
• <input checked="" disabled="" type="checkbox"> Row Selection (Checkboxes)
• <input checked="" disabled="" type="checkbox"> SSR compatible
• <input checked="" disabled="" type="checkbox"> Sorting (supports client-side and server-side)
• <input checked="" disabled="" type="checkbox"> Theming (Respects your Mantine Theme)
• <input checked="" disabled="" type="checkbox"> Toolbars (Add your own action buttons)
• <input checked="" disabled="" type="checkbox"> Tree Data / Expanding Sub-rows
• <input checked="" disabled="" type="checkbox"> Virtualization (@tanstack/react-virtual)

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)

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

1. 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: { sx: { 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.