DOCSEARCHbyAlgolia
Submit Docs

Mantine DataTable

repository·main·Indexed 22 days ago

https://github.com/icflorescu/mantine-datatable

A lightweight, dependency-free, and dark-theme aware table component for Mantine UI applications. Version 9.4.0 features asynchronous data loading, pagination, column sorting, additive batch row selection, row expansion, nesting, and context menus. It includes specialized hooks for managing column resizing, pinning, reordering, and visibility, as well as the DataTableDraggableRow component for draggable rows.

Tokens
1.7K
Snippets
3
Records
15
Agent score
79%

What's inside mantine-datatable

  1. Mantine DataTable features overview

    main

    Mantine DataTable provides a wide range of features for data-rich applications:

    • Data Handling: Asynchronous data loading, pagination, and column sorting.
    • Customization: Fully customizable styles, custom cell data rendering, and column reordering, toggling, or resizing.
    • Interactivity: Row expansion, nesting (hierarchical data), row context menus, and drag-and-drop support (via @hello-pangea/dnd).
    • Selection: Additive batch rows selection (using the Shift key).
    • UX/UI: Dark-theme aware, automatically-scrollable or auto-height, AutoAnimate support, and comprehensive RTL support.

  2. Configure CSS layers for Mantine DataTable

    main

    To ensure styles are applied correctly and avoid specificity issues, import the necessary CSS files and use CSS layers. Apply Mantine core styles in the first layer and DataTable styles in the second layer.

    1. Import CSS files in your entry point:
    import '@mantine/core/styles.layer.css';
import 'mantine-datatable/styles.layer.css';
import './layout.css';
    1. Define the layers in your CSS file (e.g., layout.css):
    /* layout.css */
/* 👇 Apply Mantine core styles first, DataTable styles second */
@layer mantine, mantine-datatable;

  4. Basic usage of the DataTable component

    main

    The DataTable component requires a records array for data and a columns array to define the table structure. You can customize column appearance using title and textAlign, and use the render function for custom cell rendering. The onRowClick callback allows you to execute logic when a row is clicked.

    'use client';

import { Box } from '@mantine/core';
import { showNotification } from '@mantine/notifications';
import { DataTable } from 'mantine-datatable';

export function GettingStartedExample() {
  return (
    <DataTable
      withTableBorder
      borderRadius="sm"
      withColumnBorders
      striped
      highlightOnHover
      // 👇 provide data
      records={[
        { id: 1, name: 'Joe Biden', bornIn: 1942, party: 'Democratic' },
        // more records...
      ]}
      // 👇 define columns
      columns={[
        {
          accessor: 'id',
          // 👇 this column has a custom title
          title: '#',
          // 👇 right-align column
          textAlign: 'right',
        },
        { accessor: 'name' },
        {
          accessor: 'party',
          // 👇 this column has custom cell data rendering
          render: ({ party }) => (
            <Box fw={700} c={party === 'Democratic' ? 'blue' : 'red'}>
              {party.slice(0, 3).toUpperCase()}
            </Box>
          ),
        },
        { accessor: 'bornIn' },
      ]}
      // 👇 execute this callback when a row is clicked
      onRowClick={({ record: { name, party, bornIn } }) =>
        showNotification({
          title: `Clicked on ${name}`,
          message: `You clicked on ${name}, a ${party.toLowerCase()} president born in ${bornIn}`,
          withBorder: true,
        })
      }
    />
  );
}

  5. Use Mantine DataTable hooks

    main
    The mantine-datatable package provides a suite of specialized hooks for managing advanced DataTable features such as column resizing, pinning, reordering, row expansion, and media queries. These hooks are exported from the main hooks entrypoint and can be used to implement complex table behaviors manually or to extend the default DataTable functionality.

  6. Access DataTable hooks, types, and utilities

    main

    The package exports several utility hooks, type definitions, and helper functions to customize and manage the DataTable state and configuration.

    • useDataTableColumns: A hook for managing column definitions.
    • types: All core TypeScript interfaces and types used by the library.
    • utils: Helper functions for data manipulation and table logic.

  11. Handle media queries with useMediaQueries and useMediaQueryStringOrFunction

    main
    The library provides hooks for responsive design: useMediaQueries for multiple queries and useMediaQueryStringOrFunction (or useMediaQueriesStringOrFunction) for handling individual media query strings or functions that return boolean values based on viewport size.