Skip to content

Kuechlin/mantine-data-grid

Folders and files

NameName
Last commit message
Last commit date
May 25, 2023
Jul 28, 2022
Jul 28, 2022
May 25, 2023
May 25, 2023
Jun 9, 2023
Jul 28, 2022
Jul 28, 2022
Jul 28, 2022
Oct 14, 2022
Jul 21, 2022
Jul 28, 2022
Aug 3, 2022
Jul 28, 2022
Jul 28, 2022
Jul 26, 2022
Dec 16, 2022
Jul 28, 2022
Jun 9, 2023
Jun 9, 2023
Jul 28, 2022
Jul 28, 2022
Jul 28, 2022
May 25, 2023

Repository files navigation

Mantine Data Grid

Version

Data Grid component with Mantine UI and react-table v8.

Component is in alpha stage, there might be bugs and component api could change.

Mantine Data Grid discussion

Install

With npm

npm i mantine-data-grid @mantine/core @mantine/dates @mantine/hooks dayjs

With pnpm

pnpm add mantine-data-grid @mantine/core @mantine/dates @mantine/hooks dayjs

Usage

import { DataGrid, stringFilterFn, numberFilterFn, dateFilterFn } from 'mantine-data-grid';

function Demo() {
  return (
    <DataGrid
      data={/* data source */}
      size="md"
      withGlobalFilter
      columns={[
        {
          accessorKey: 'text',
          header: 'Text that is too long for a Header',
          filterFn: stringFilterFn,
        },
        {
          header: 'Animal',
          columns: [
            { accessorKey: 'cat', filterFn: stringFilterFn },
            {
              accessorKey: 'fish',
              filterFn: stringFilterFn,
            },
          ],
        },
        {
          accessorKey: 'city',
          filterFn: stringFilterFn,
        },
        { accessorKey: 'value', filterFn: numberFilterFn },
        {
          accessorKey: 'date',
          cell: (cell) => cell.getValue()?.toLocaleDateString(),
          filterFn: dateFilterFn,
        },
      ]}
    />
  );
}

Contributing

Contribution to this project is welcom, feel free to submit a Pull Request.

Run locally

pnpm i

pnpm dev

Roadmap

  • Simple Data Grid
  • Virualized Data Grid
  • Global Filter
  • Column Filter
    • string filter
    • number filter
    • date filter
    • boolean filter
    • custom fitler
  • Column Sizing
  • Column sorting
  • Scrolling
    • Fixed Header
    • Column pinning
  • Column Ordering
  • Row Selection
  • Row Expanding
  • Pagination
  • Styles Api
  • Component Overrides
  • Docs
  • Create npm package
  • Add tests