# @kevalgangani/mantine-table

A fully featured Mantine V8 data table component built on [Mantine](https://mantine.dev/) and [TanStack Table V8](https://tanstack.com/table/v8).

Based on [Mantine React Table](https://www.mantine-react-table.com/) by Kevin Vandy.

## About

### _Quickly Create React Data Tables with Mantine_

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

## Getting Started

### Installation

1. Install peer dependencies (Mantine V8)

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

2. Install @kevalgangani/mantine-table

```bash
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

```tsx
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):

```tsx
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