Mantine Datatable
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.
Overview
Mantine DataTable is a lightweight, dependency-free, dark-theme aware table component designed for data-rich applications. It offers a variety of features including asynchronous data loading, pagination, column sorting, custom cell data rendering, row expansion, nesting, context menus, and more.
Features
- Lightweight: No external dependencies or bloat.
- Dark-theme aware: Automatically adapts to the current Mantine color scheme.
- Fully customizable: Allows customization of the table and its components.
- Asynchronous data loading: Can load data from a remote API endpoint and display a loading indicator.
- Pagination: Enables splitting large data sets into pages.
- Column sorting: Allows sorting data by one or more columns.
- Custom cell data rendering: Supports rendering cell data using custom components.
- Row context menu: Displays a context menu when right-clicking on a row.
- Row expansion: Expands a row to show additional details.
- Nesting: Supports nesting tables to show hierarchical data.
- Additive batch rows selection: Enables selecting or deselecting ranges of rows using the Shift key.
- Automatically-scrollable: Can be set to automatically scroll or adjust its height based on content.
- AutoAnimate support: Supports animation for row sorting, addition, and removal.
- Column reordering, toggling, and resizing: Provides functionality for column reordering, toggling, and resizing.
- More: Full documentation and examples available.
- Next.js
Next.js is a React-based web framework that enables server-side rendering, static site generation, and other powerful features for building modern web applications.
- React
React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components
- Mantine UI
A fully featured React components library. 100+ components, 50+ hooks.
- Dark Mode
Dark mode is a user interface option that uses a dark color scheme instead of light. It reduces eye strain and improves visibility in low-light conditions. Implementing dark mode in a website or application involves updating the styles and color palette to support both light and dark modes.
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- Postcss
PostCSS is a popular open-source tool that enables web developers to transform CSS styles with JavaScript plugins. It allows for efficient processing of CSS styles, from applying vendor prefixes to improving browser compatibility, ultimately resulting in cleaner, faster, and more maintainable code.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.
- Webpack
Webpack is a popular open-source module bundler for JavaScript applications that bundles and optimizes the code and its dependencies for production-ready deployment. It can also be used to transform other types of assets such as CSS, images, and fonts.
