MRT logoMantine React Table

Minimal Example

Mantine React Table gives you a lot out of the box, but it's also easy to turn off any features that you do not need.

Every feature has an enable... prop that let's you turn it on or off.

Also, you can choose to not import the entire <MantineReactTable /> component and instead import a smaller sub-component like <MRT_TableContainer /> or <MRT_Table />. These imports do not include all of the extra toolbar components and only include the React code for the table itself.

First Name
Last Name
WavaHoppe4456 Towne EstatesEdmondNew Jersey
KamrenKemmer237 Reinger ViewKesslermouthNew Jersey
DillonHackett79266 Cronin RestConroylandColorado
WilberVon4162 Della RoadsChampaignIdaho
RonnyLowe4057 Burley ExtensionsSiennasteadAlaska
LaviniaKreiger24310 Aufderhar UnionCeceliachesterKentucky
TracyWilkinson7204 Claudine SummitFort MelanychesterTennessee
import '@mantine/core/styles.css';
import '@mantine/dates/styles.css'; //if using mantine date picker features
import 'mantine-react-table/styles.css'; //make sure MRT styles were imported in your app root (once)
import classes from './CSS.module.css';
import clsx from 'clsx';
import { useMemo } from 'react';
import {
  type MRT_ColumnDef,
} from 'mantine-react-table';
import { useMantineColorScheme } from '@mantine/core';
import { data, type Person } from './makeData';

export const Example = () => {
  const { colorScheme } = useMantineColorScheme();

  const columns = useMemo<MRT_ColumnDef<Person>[]>(
    () => [
        accessorKey: 'firstName',
        header: 'First Name',
        accessorKey: 'lastName',
        header: 'Last Name',
        accessorKey: 'address',
        header: 'Address',
        accessorKey: 'city',
        header: 'City',
        accessorKey: 'state',
        header: 'State',

  const table = useMantineReactTable({
    enableColumnActions: false,
    enableColumnFilters: false,
    enablePagination: false,
    enableSorting: false,
    mantineTableProps: {
      className: clsx(classes.table),
      highlightOnHover: false,
      striped: 'odd',
      withColumnBorders: true,
      withRowBorders: true,
      withTableBorder: true,

  //using MRT_Table instead of MantineReactTable if we do not want any of the toolbar features
  return <MRT_Table table={table} />;

export default Example;

View Extra Storybook Examples