DEV Community

Cover image for Introducing Mantine DataTable
Ionut-Cristian Florescu
Ionut-Cristian Florescu

Posted on

3 1

Introducing Mantine DataTable

Mantine DataTable brings datagrid-like functionality to your data-rich user interfaces.

I've been working for a while with Mantine.dev and I believe that, at the moment, it is one of the best React UI frameworks out there. But it was missing a very useful functionality, which many people in the community kept asking about, and that was a data-table/data-grid component. So, being a keen supporter of open-source and the idea that we each should contribute to the development of beautiful, useful projects, I decided to build Mantine DataTable and release it under MIT license.

The entire codebase is written in TypeScript, component properties are well typed and documented with JSDoc, so you can build type safe applications with confidence. The component supports asynchronous data loading, pagination, multiple rows selection, column sorting, custom cell data rendering, row context menu, global application dark theme, and more.

Head over to the project's website for a quick start and to learn how to use it and configure it for various scenarios by browsing through the comprehensive list of examples.

Also, if you find the project useful, it would help a lot if you could star the GitHub repository, spread the word or hire my services to build front-end/full-stack stuff.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (2)

Collapse
 
badreddine profile image
Badr Eddine •

is there a way to add an HTML tag for every record, for example I want to add data-cy="equipment-item" to every item rendered by the DataTable component so that i can get it in cypress

Collapse
 
icflorescu profile image
Ionut-Cristian Florescu •

I believe there is; if I remember correctly, I added this feature at some point.
Though I feel I must warn you that, in general, adding data attributes may not be the best way to approach testing.

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more