A table component for your Mantine data-rich applications, supporting asynchronous data loading, column sorting, custom cell data rendering, row context menus, dark theme, and more.

Overview

Mantine DataTable

NPM version License Stars Last commit Closed issues Downloads Language

A "dark-theme aware" table component for your Mantine UI data-rich applications, featuring asynchronous data loading support, pagination, multiple rows selection, column sorting, custom cell data rendering, row context menu, and more.

Mantine DataTable

Full documentation and examples

Visit icflorescu.github.io/mantine-datatable to view the full documentation and learn how to use it.

Quickstart

Install the package and its dependencies:

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

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}.`)
      }
    />
  );
}

Also see the getting started page in the documentation.

Code contributors

Contributors list

Want to become a code contributor?

Supporting the author

If you find this package useful, please star the repository, tweet about it, and endorse me on LinkedIn.

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.

License

The MIT License.

Comments
  • Implement #28

    Implement #28

    Here is my first stab at implementing the functionality discussed in #28. Allows the consumer to pass in any custom component. That custom component is passed to the new DataTableRowParent wrappers around each DataTableRow and will be rendered beneath the row if isExpanded is set. isExpanded is calculated in the DataTable itself. The custom component is wrapped in a Collapse component from @mantine/core. The expansion animation behaviour can be customized via the expandedRow.collapseProps property.

    Please let me know what you think. Should there be more features added? Fewer?

    Also please note that this is untested and unlinted. The build and dev scripts wouldn't work for me - I suspect that may be because I'm on Windows, but I haven't had much of a chance yet to troubleshoot.

    enhancement 
    opened by otobot1 25
  • Try to get rid of lodash peer dependency

    Try to get rid of lodash peer dependency

    Mantine DataTable is using some utility functions from lodash and bundling it would be crazy, thus the peer dependency. However, as somebody kindly pointed out on Mantine's Discord channel, there are some compatibility issues with lodash & Vite.

    Maybe we could simply replace the functions we're using and get rid of lodash altogether?

    enhancement help wanted 
    opened by icflorescu 11
  • Add a display rows per page dropdown or textbox with pagination

    Add a display rows per page dropdown or textbox with pagination

    Is your feature request related to a problem? Please describe. It would be nice to add a dropdown to select how many rows user wants to show per page like this image

    Describe the solution you'd like I think the prop recordPerPage should show the dropdown so that both dropdown and page info can be sync

    Describe alternatives you've considered An alternative can be to add a withLimitDropdown prop to table which if it is true it should show the limit dropdown and get the value from recordsPerPage state

    <DataTable
      recordsPerPage="10"
      withLimitDropdown
    />
    
    enhancement help wanted 
    opened by Muhammad-Arsalan31 10
  • When I give empty data, an empty row appears

    When I give empty data, an empty row appears

    Describe the bug When I give empty data, an empty row appears

    Screenshots Screen Shot 2022-11-30 at 17 58 14

    Screen Shot 2022-11-30 at 17 58 54

    Desktop (please complete the following information):

    • OS: [e.g. macOs]
    • Browser [chrome]

    Thanks for helps.

    invalid needs more info 
    opened by arifsygl 8
  • is there a way to add an HTML attribute for every record ❓

    is there a way to add an HTML attribute for every record ❓

    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 without having to set the render function and return custom component for every column object

    documentation enhancement good first issue 
    opened by BadrEddineMoufid 5
  • Having Extra line on Table

    Having Extra line on Table

    Screen Shot 2022-10-03 at 8 24 52 PM

                <DataTable
                  minHeight={150}
                  withBorder
                  columns={[
                    { accessor: 'name', width: 100 },
                    { accessor: 'streetAddress', width: 100 },
                    { accessor: 'city', width: 100 },
                    { accessor: 'state', width: 100 },
                  ]}
                  // records={records}
                  records={[]}
                  totalRecords={companies.length}
                  recordsPerPage={PAGE_SIZE}
                  page={page}
                  onPageChange={(p) => setPage(p)}
                  noRecordsText="No records to show"
                  sx={{
                    marginRight: 50,
                    borderRadius: 5,
                  }}
                />
    
    needs more info 
    opened by mcamendoza1 5
  • Expanded rows should be controllable

    Expanded rows should be controllable

    As requested here.

    Gist:

    The rowExpansion property object should also include:

    • records → currently expanded records
    • onChange → callback fired when currently expanded records change: onChange: (records: T[]) => void
    enhancement 
    opened by icflorescu 5
  • Pagination bar not responsive friendly and disappeared in horizontal scroll

    Pagination bar not responsive friendly and disappeared in horizontal scroll

    Describe the bug The pagination bar is not sticky and adjust to screen width when added more column added / screen size change and horizontal scroll shown. image needed to do horizontal scroll to the end of the table image

    To Reproduce Steps to reproduce the behavior:

    1. Zoom out the screen/ add more column to datatable to make it horizontal scroll

    Expected behavior A clear and concise description of what you expected to happen. Should be like this, the pagination bar is not effect by the screen size and column count image

    invalid 
    opened by roychung96 4
  • First Column of Table Missing bottom border

    First Column of Table Missing bottom border

    Describe the bug If you look at the pagination example, you'll notice that the first column is missing a bottom border: image

    I'm able to reproduce this locally as well with a new table.

    Was this intended? I originally assumed it was due to default sorting, but the first column does not look to be sorted in the pagination example.

    bug help wanted good first issue 
    opened by luffespresso 4
  • Unable to select row text with row selection enabled.

    Unable to select row text with row selection enabled.

    Describe the bug Enabling row selection results in column text being unselectable.

    To Reproduce Steps to reproduce the behavior:

    1. Enable row selection on a table
    2. Try to select text in the table

    Expected behavior Text to be selectable with row selection.

    Desktop (please complete the following information):

    • OS: Windows 11
    • Browser: Chrome
    • Version: 104.0.5112.102

    Additional context It seems like maybe clicking a row would select the whole row, but nothing happens instead. Being able to still select text would be extremely useful.

    question 
    opened by Daxble 4
  • FEATURE REQUEST: Add hovers for default column titles

    FEATURE REQUEST: Add hovers for default column titles

    Is your feature request related to a problem? Please describe. Not being able to read title of a column "Q..." like this

    image

    Describe the solution you'd like display who name of column on hover

    Describe alternatives you've considered I could implement this myself, but would be better if Datatable had it by default

    Additional context

    enhancement good first issue 
    opened by capaj 3
  • Filtering on individual columns

    Filtering on individual columns

    Is your feature request related to a problem? Please describe. There doesn't appear to be a way to add a filter button to the column title. Here is an example https://ant.design/components/table#components-table-demo-head where the columns have sort and filter buttons.

    Describe the solution you'd like If a column is marked as filterable, it should be able to provide simple filtering options based on the data type of the column, or allow one to provide a ReactNode that would be rendered in the overlay when the filter button is clicked.

    Describe alternatives you've considered I could not find a way to achieve this, but I suspect that by providing a ReactNode as the title, I could sneak in a filter button there. Its placement and functionality would still have to be manually defined though, rather than a convenient built-in solution.

    documentation enhancement 
    opened by khalibloo 1
  • Row grouping

    Row grouping

    Is your feature request related to a problem? Please describe. Feature request.

    Describe the solution you'd like image

    Describe alternatives you've considered https://www.ag-grid.com/angular-data-grid/grouping-group-rows/, but this is enterprise

    Additional context I can help with the implementation, but i need guidance. I am using mantine for this [0] awesome project.

    [0] - https://github.com/odpi/egeria-ui

    enhancement 
    opened by sarbull 1
  • Selecting single record

    Selecting single record

    Is your feature request related to a problem? Please describe. Currently, the way of selecting records allows for multiple record selection. Is there out-of-the-box way to restrict selection to single record only?

    question 
    opened by shahns 6
  • Row inline edits

    Row inline edits

    Is your feature request related to a problem? Please describe. The DataTable component does not support inline row edits. Inline edits are more desirable for enterprise-based applications. We can currently use the render props for each field separately. This is a length and code repetition that cannot be avoided. We always need to find an index to edit a row and update the state based on the current implementation.

    Describe the solution you'd like I would like to request a pattern where we can provide a RowComponent that implements the conditional logic if the row is being edited and renders the editable Row otherwise renders the default UI. It will be also best if we can get the row indexes as well with all event handlers so that we do not always iterate over the rows to find indexes.

    Describe alternatives you've considered Currently using render props to render editable UI vs Fixed UI.

    enhancement 
    opened by zeestack 10
Owner
Ionut-Cristian Florescu
Building web and mobile apps and sometimes writing about technology and its impact on human behaviour. React, Next.js & Node.js geek. Owner of swapp.ro.
Ionut-Cristian Florescu
A free JavaScript plugin to create custom right click context menus.

CtxMenu (Javascript) A modern, light weight, object oriented solution for adding right click context menus for your website. demo Installation Downloa

Nils Söderman 18 Oct 13, 2022
Sorting visualizer to introduce students to different sorting algorithms, how they work, and how to apply them

sorting-visualizer Sorting visualizer to introduce students to different sorting algorithms, how they work, and how to apply them Iteration 1 Demo: ht

Aditya Malik 1 Nov 14, 2022
My XFCE dotties - The GTK theme as well as the kvantume theme used here are forks of the Matcha GTK/kvantum theme

DOTFILES OF MY XFCE SETUP The GTK theme as well as the kvantume theme used here

Mehedi Rahman Mahi 201 Dec 31, 2022
Minimal Next.js template with Mantine

Mantine Next Template Get started with Mantine + Next with just a few button clicks. Click Use this template button at the header of repository or fol

Mantine 19 Dec 15, 2022
A mesh network that connects remote communities to emergency responders without relying on internet, cell towers, or satellites

A mesh network that connects remote communities to emergency responders without relying on internet, cell towers, or satellites. Winner of Hack the North 2022. ??

Alice Cai 4 Sep 23, 2022
Theme Redone is a custom WordPress theme starter/framework with its own Gutenberg blocks solution and a CLI that speeds up the block creation process.

Theme Redone The Framework for Developing Custom WordPress Themes with its own Gutenberg Blocks creation solution. Theme Redone is a custom WordPress

null 103 Dec 30, 2022
Phaser is a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers, supporting Canvas and WebGL rendering.

Phaser - HTML5 Game Framework Phaser is a fast, free, and fun open source HTML5 game framework that offers WebGL and Canvas rendering across desktop a

Richard Davey 33.4k Jan 7, 2023
JavaScript client-side HTML table sorting library with no dependencies required.

TABLE-SORT-JS. Description: A JavaScript client-side HTML table sorting library with no dependencies required. Demo Documentation. (work in progress)

Lee Wannacott 32 Dec 14, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
MDN-Dark-Mode - Simple extension to add a dark mode with different themes to the MDN Web Docs website

MDN-Dark-Mode Information Chrome and Firefox extension that adds a dark mode wit

Santiago Galán Barlo 2 Mar 18, 2022
logseq custom.js and custom.css utilities : resize query table columns, hide namespaces...

logseq-custom-files custom.js and custom.css utilities for Logseq. current version v20220331 query table view : add handles on the query table headers

null 44 Dec 7, 2022
A custom Chakra UI component that adds ready-made styles for rendering remote HTML content.

Chakra UI Prose Prose is a Chakra UI component that adds a ready-made typography styles when rendering remote HTML. Installation yarn add @nikolovlaza

Lazar Nikolov 50 Jan 3, 2023
✏️ A small jQuery extension to turn a static HTML table into an editable one. For quickly populating a small table with JSON data, letting the user modify it with validation, and then getting JSON data back out.

jquery-editable-table A small jQuery extension to turn an HTML table editable for fast data entry and validation Demo ?? https://jsfiddle.net/torrobin

Tor 7 Jul 31, 2022
Fast and lightweight dependency-free vanilla JavaScript polyfill for native lazy loading / the awesome loading='lazy'-attribute.

loading="lazy" attribute polyfill Fast and lightweight vanilla JavaScript polyfill for native lazy loading, meaning the behaviour to load elements rig

Maximilian Franzke 571 Dec 30, 2022
Import flow for Excel (.xlsx) and CSV file with automated column matching and validation.

RSI react-spreadsheet-import ⚡️ A component used for importing XLS / XLSX / CSV documents built with Chakra UI. Import flow combines: ?? Uploader ⚙️ P

Ugnis 123 Dec 24, 2022