Mantine DataTable

The lightweight, dependency-free, "dark-theme aware" table component for your Mantine UI data-rich applications, featuring asynchronous data loading support, pagination, intuitive Gmail-style additive batch rows selection, column sorting, custom cell data rendering, row context menu, row expansion, nesting, and more.

Features

Lightweight - no external dependencies, no bloat
Dark theme aware - works out of the box with Mantine's dark theme
Fully customizable - you can customize the look and feel of the table and its components
Asynchronous data loading - load data from a remote API endpoint and show a loading indicator while waiting for the response
Pagination - split large data sets into pages
Column sorting - sort data by one or more columns
Custom cell data rendering - render cell data using custom components
Row context menu - show a context menu when right-clicking on a row
Row expansion - expand a row to show additional details
Nesting - nest tables to show hierarchical data
Additive batch rows selection - select or deselect ranges of rows using the Shift key
Automatically-scrollable - automatically scrollable or auto-height
AutoAnimate support - animate row sorting, addition and removal
More - check out the full documentation

Trusted by the community

Mantine DataTable is used by developers and startups around the world, including: exdatis.ai, teachfloor, MARKUP, BookieBase, zipline, Pachtop, Ganymede, COH3 Stats, Culver City Rental Registry and many more.

If you're using Mantine DataTable in your project, please drop me a line at the email address listed in my GitHub profile and I'll be happy to add your project to the list and on the documentation website.

Full documentation and examples

Visit icflorescu.github.io/mantine-datatable to view the full documentation and learn how to use it by browsing a comprehensive list of examples.

Quickstart

Install the package and its dependencies:

npm i @mantine/core @mantine/hooks @emotion/react mantine-datatable

If you're using Next.js, Vite, CRA, Remix or Gatsby, you might need to install additional dependencies. Please refer to Mantine's getting started page for more details.

Use it in your code:

import { Text } from '@mantine/core';
import { DataTable } from 'mantine-datatable';

export default function GettingStartedExample() {
  return (
    <DataTable
      withBorder
      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
          textAlignment: 'right',
        },
        { accessor: 'name' },
        {
          accessor: 'party',
          // this column has custom cell data rendering
          render: ({ party }) => (
            <Text weight={700} color={party === 'Democratic' ? 'blue' : 'red'}>
              {party.slice(0, 3).toUpperCase()}
            </Text>
          ),
        },
        { accessor: 'bornIn' },
      ]}
      // execute this callback when a row is clicked
      onRowClick={({ name, party, bornIn }) =>
        alert(`You clicked on ${name}, a ${party.toLowerCase()} president born in ${bornIn}.`)
      }
    />
  );
}

Make sure to browse the comprehensive list of usage examples to learn how to unleash the full power of Mantine DataTable.

Other useful resources

Mantine DataTable had the context-menu functionality baked in since its early days. If you're looking to use a context menu in other parts of your application, you might want to check out Mantine Context Menu.

Code contributors

Want to become a code contributor?

Sponsor the project

If you find this package useful, please consider ❤️ sponsoring my work. Your sponsorship will help me dedicate more time to maintaining the project and will encourage me to add new features and fix existing bugs. If you're a company using Mantine DataTable in a commercial project, you can also hire my services.

Other means of support

If you find this package useful, please 🙏 star the repository, 💕 tweet about it, 👍 endorse me on LinkedIn or consider hiring my services.

The more stars this repository gets, the more visibility it gains among the Mantine users community. The more users it gets, the more chances that some of those users will become active code contributors willing to put their effort into bringing new features to life and/or fixing bugs.

As the repository gain awareness, my chances of getting hired to work on Mantine-based projects will increase, which in turn will help maintain my vested interest in keeping the project alive.

Hiring the author

If you want to hire my services, don’t hesitate to drop me a line at the email address listed in my GitHub profile. I’m currently getting a constant flow of approaches, some of them relevant, others not so relevant. Mentioning “Mantine DataTable” in your text would help me prioritize your message.

Acknowledgements

🙏 Special thanks to Ani Ravi for being the first person to sponsor my work on this project!

License

The MIT License.

AimWhy / mantine-datatable