Loading repository data…
icflorescu / repository
The table component for your Mantine data-rich applications, supporting asynchronous data loading, column sorting, custom cell data rendering, context menus, nesting, Gmail-style batch row selection, dark theme, and more.
[![NPM version][npm-image]][npm-url]
[![License][license-image]][license-url]
[![Stars][stars-image]][stars-url]
[![Last commit][last-commit-image]][repo-url]
[![Closed issues][closed-issues-image]][closed-issues-url]
[![Downloads][downloads-image]][npm-url]
[![Language][language-image]][repo-url]
[![Sponsor the author][sponsor-image]][sponsor-url]
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 expansion, nesting, context menus, and much more.
⚠️ Mantine DataTable V9.x is compatible with Mantine V9.x.
💡 If you're looking for the old version that works with Mantine V6, head over to Mantine DataTable V6.
Used by Microsoft in Agent Lightning.
Mantine DataTable is a great component that’s core to our web app - it saves us a ton of time and comes with great styling and features out of the box
Giovambattista Fazioli @ Namecheap (@gfazioli is also a valuable Mantine DataTable contributor):
Thank you for the wonderful, useful, and beautiful DataTable that has allowed me to create several applications without any problem 👏
Mantine DataTable is used by developers and companies around the world, from startups to S&P 500, such as: Microsoft, Namecheap, EasyWP, CodeParrot.AI, OmicsStudio, SegmentX, Aquarino, Dera, kapa.ai, 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 it to the list and on the documentation website.
Visit icflorescu.github.io/mantine-datatable to view the full documentation and learn how to use it by browsing a comprehensive list of examples.
Mantine DataTable AI Bot, kindly provided by CodeParrot.AI, will help you understand this repository better. You can ask for code examples, installation guide, debugging help and much more.
Create a new application with Mantine, make sure to have the clsx peer dependency installed,
then install the package with npm i mantine-datatable or yarn add mantine-datatable.
Import the necessary CSS files:
import '@mantine/core/styles.layer.css';
import 'mantine-datatable/styles.layer.css';
import './layout.css';
Make sure to apply the styles in the correct order:
/* layout.css */
/* 👇 Apply Mantine core styles first, DataTable styles second */
@layer mantine, mantine-datatable;
Use the component in your code:
'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,
})
}
/>
);
}
Make sure to browse the comprehensive list of usage examples to learn how to unleash the full power of Mantine DataTable.
Mantine DataTable works perfectly with Mantine Context Menu, a library built by the same author that enables you to enhance your UIs with desktop-grade, lightweight yet fully-featured context menus that respect the Mantine color scheme out of the box:
See the contributing guide in the documentation website or the repo CONTRIBUTING.md file for details.
💡 Most importantly, remember to make your PRs against the next branch.
Here's the list of people who have already contributed to Mantine DataTable:
Want to become a code contributor?
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, Mantine DataTable or Mantine ContextMenu in a commercial project, you can also hire my services.
If you can't afford to sponsor the project or hire my services, there are other ways you can support my work:
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.
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 m
Selected from shared topics, language and repository description—not editorial ratings.
icflorescu /
The table component for your Mantine data-rich applications, supporting asynchronous data loading, column sorting, custom cell data rendering, context menus, nesting, Gmail-style batch row selection, dark theme, and more.
DirectionProvider's settings, thanks to the outstanding work of Reem Assaf