Mantine React Table

https://mantine-react-table.com
Admin
Mantine React Table is a feature-rich data grid library for React applications that combines...
Tokens:1,017
Snippets:6
Trust Score:9.6
Update:9 months ago
Show doc for...
Tokens:
Raw
### Install Mantine React Table and Peer Dependencies

Source: https://mantine-react-table.com/package/mantine-react-table-open

This command installs the necessary Mantine React Table package along with its peer dependencies, including Mantine core components, hooks, date pickers, emotion, Tabler Icons, and Day.js. These are essential for the table's functionality and styling.

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

--------------------------------

### Basic Mantine React Table Usage

Source: https://mantine-react-table.com/package/mantine-react-table-open

This example demonstrates the fundamental usage of Mantine React Table in a React component. It includes defining columns with accessor keys and custom cell rendering, setting up basic table state for row selection, and enabling/disabling specific table features like column ordering and pagination.

```javascript
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} />;
}
```
Tokens:
Raw