@kevalgangani/mantine-table

A fully featured Mantine V8 data table component built on Mantine and TanStack Table V8.

Based on Mantine React Table by Kevin Vandy.

About

Quickly Create React Data Tables with Mantine

Built with Mantine V8 and TanStack Table V8

Getting Started

Installation

1. Install peer dependencies (Mantine V8)

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

2. Install @kevalgangani/mantine-table

npm install @kevalgangani/mantine-table

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

Usage

import { useMemo } from 'react';
import {
  MantineReactTable,
  useMantineReactTable,
} from '@kevalgangani/mantine-table';
import '@kevalgangani/mantine-table/styles.css';

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

export default function App() {
  const columns = useMemo(
    () => [
      {
        accessorKey: 'name',
        header: 'Name',
      },
      {
        accessorKey: 'age',
        header: 'Age',
      },
    ],
    [],
  );

  const table = useMantineReactTable({
    columns,
    data,
    enableColumnOrdering: true,
    enableRowSelection: true,
    enablePagination: false,
  });

  return <MantineReactTable table={table} />;
}

Locales

Import locale files for i18n support (35+ languages):

import { MRT_Localization_ES } from '@kevalgangani/mantine-table/locales/es';

const table = useMantineReactTable({
  columns,
  data,
  localization: MRT_Localization_ES,
});

Features

• Advanced TypeScript Generics Support
• Aggregation and Grouping
• Click To Copy Cell Values
• Column Action Dropdown Menu
• Column Hiding, Ordering, Pinning, Resizing
• Data Editing (4 editing modes + IME support)
• Density Toggle
• Detail Panels (Expansion)
• Filtering (client-side and server-side)
• Filter Match Highlighting
• Full Screen Mode
• Global Filtering (ranked results)
• Header Groups & Footers
• Localization (i18n) — 35+ languages
• Mantine ScrollArea integration (withScrollArea)
• Pagination (client-side and server-side)
• Row Actions, Numbers, Ordering, Selection, Pinning
• SSR compatible
• Sorting (client-side and server-side)
• Theming (Mantine V8 theme)
• Toolbars (custom action buttons)
• Tree Data / Expanding Sub-rows
• Virtualization (@tanstack/react-virtual)

Peer Dependencies

| Package | Version | |---------|---------| | @mantine/core | ^8.0.0 | | @mantine/dates | ^8.0.0 | | @mantine/hooks | ^8.0.0 | | @tabler/icons-react | >=2.23.0 | | clsx | >=2 | | dayjs | >=1.11 | | react | >=18.0 | | react-dom | >=18.0 |

License

MIT