# @fabiendeborde/mantine-datagrid > A mantine wrapper around react-table Latest version **0.1.6** (published 2022-08-05) · ISC license · 0 weekly downloads ## Install ```sh npm install @fabiendeborde/mantine-datagrid pnpm add @fabiendeborde/mantine-datagrid yarn add @fabiendeborde/mantine-datagrid bun add @fabiendeborde/mantine-datagrid ``` ## Health **Score 30/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities; high quality score. Warnings: low downloads; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.1.6 | | Published | 2022-08-05 | | First published | 2022-08-03 | | Weekly downloads | 0 | | License | ISC | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Node | >=16 | | Dependencies | 4 | | Unpacked size | 1 MB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 1 | | Author | Fabien Deborde | | Maintainers | fabiendeborde | ## Links - npm: https://www.npmjs.com/package/@fabiendeborde/mantine-datagrid - Repository: https://github.com/FabienDeborde/mantine-datagrid - Homepage: https://github.com/FabienDeborde/mantine-datagrid#readme - Issues: https://github.com/FabienDeborde/mantine-datagrid/issues - npm.io page: https://npm.io/package/@fabiendeborde/mantine-datagrid ## Dependencies (4) - [dayjs](https://npm.io/package/dayjs.md) ^1.11.4 - [react-virtual](https://npm.io/package/react-virtual.md) 2.10.4 - [tabler-icons-react](https://npm.io/package/tabler-icons-react.md) ^1.54.0 - [@tanstack/react-table](https://npm.io/package/@tanstack/react-table.md) 8.5.2 ## Recent versions - 0.1.6 (latest) — 2022-08-05 - 0.1.5 — 2022-08-04 - 0.1.4 — 2022-08-04 - 0.1.3 — 2022-08-04 - 0.1.2 — 2022-08-04 - 0.1.1 — 2022-08-04 - 0.1.0 — 2022-08-03 ## README # Mantine Datagrid [![GitHub release](https://img.shields.io/github/v/release/FabienDeborde/mantine-datagrid)](https://github.com/FabienDeborde/mantine-datagrid/releases/) ![Size](https://img.shields.io/github/languages/code-size/FabienDeborde/mantine-datagrid) [![GitHub license](https://img.shields.io/github/license/Naereen/StrapDown.js.svg)](https://github.com/FabienDeborde/mantine-datagrid/blob/master/LICENSE.md) A wrapper around React Table ([TanStack Table v8](https://tanstack.com/table/v8/docs/guide/introduction)) using [Mantine](https://mantine.dev/). This library requires the following packages: `@emotion/react`, `@mantine/core`, `@mantine/hooks`, `@mantine/dates` and it exposes this package: `@tanstack/react-table`.\ It was heavily inspired by the work of Yannick Küchlin ([GitHub repository](https://github.com/Kuechlin/mantine-data-grid)) and Milan Jain([CodeSandbox](https://codesandbox.io/s/react-table-datagrid-eojw8)) from this [discussion](https://github.com/mantinedev/mantine/discussions/1057). I do not plan to really maintain or update this library except if it is needed by other private projects, but feel free to leave suggestions or bug reports, I'll try my best to check them as soon as I can. # Setup ``` npm i @fabiendeborde/mantine-datagrid ``` ``` yarn add @fabiendeborde/mantine-datagrid ``` # Props | name | type | default | description | | ------------- | ------------- | ------------- | ------------- | | data *-required-* | T[] | - | Table data | | columns *-required-* | ColumnDef[] | - | Table columns definitions | | loading | boolean | false | Show a loader on loading (LoadingOverlay) | | debug | boolean | false | Enable React Table debug logging | | containerProps | ScrollAreaProps | undefined | Table container props (https://mantine.dev/core/scroll-area/) | | containerStyle | CSSProperties | undefined | Table container style | | containerRef | MutableRefObject | undefined | Table container ref | | containerMaxHeight | number | undefined | Table container max height in pixel | | onRowClick | (row: T) => void | undefined | Callback on Table row click (with row values) | | withRowSelection | boolean | false | Enable Row selection | | onRowSelection | (selection: RowSelectionState) => void | undefined | Callback on row selection (with selection state) | | withPagination | boolean | undefined | Enable pagination | | withTopPagination | boolean | false | Enable pagination above the Table | | manualPagination | boolean | undefined | Enables manual pagination | | paginationOptions | object | undefined | Pagination options | | ・paginationOptions.initialPageIndex | number | 0 | Initial page index | | ・paginationOptions.initialPageSize | number | 10 | Initial page size (rows per page) | | ・paginationOptions.pageIndex | number | 0 | Controlled page index (only used when manual pagination is `true) | | ・paginationOptions.pageSize | number | 10 | Controlled page size (rows per page) (only used when manual pagination is `true) | | ・paginationOptions.pageSizes | string[] | ["10", "25", "50", "100"] | Sets of string for page size (rows per page) selections. | | ・paginationOptions.position | GroupPosition | undefined | Pagination position | | ・paginationOptions.rowsCount | number | undefined | Set data total rows (only used when manual pagination is `true`) | | ・paginationOptions.pageCount | number | undefined | Set data total pages (only used when manual pagination is `true`) | | paginationRef | MutableRefObject | undefined | Table pagination ref | | onPaginationChange | (filter: PaginationState) => void | undefined | Callback on pagination change (with pagination state) | | withGlobalFilter | boolean | false | Enable global filter (not recommanded in manual mode, as the global filter will only work on the current page) | | onColumnFilterChange | (filter: ColumnFiltersState) => void | undefined | Ccallback on column filter change (with column fiter state) | | onSortingChange | (sort: SortingState) => void | undefined | Callback on column sort change (with column sorting state) | | striped | boolean | false | If true every odd row of table will have gray background color | | highlightOnHover | boolean | false | If true row will have hover color | | horizontalSpacing | MantineNumberSize | 'xs' | Horizontal cells spacing from theme.spacing or number to set value in px | | verticalSpacing | MantineNumberSize | 'xs' | Vertical cells spacing from theme.spacing or number to set value in px | | fontSize | MantineNumberSize | 'sm' | Sets font size of all text inside table | | withVirtualizedRows | boolean | false | Enable Virtualized Rows | | virtualizedRowOverscan | number | undefined | The amount of items to load both behind and ahead of the current window range | | gridState | GridState {
　pagination?: PaginationState;
　sorting?: SortingState;
　columnFilters?: ColumnFiltersState;
} | undefined | Grid State used for controlled pagination & filters | # Usage ```tsx loading={false} debug={false} columns={columns} data={data} withPagination withTopPagination={false} paginationOptions={{ initialPageIndex: 0, initialPageSize: 10, pageSizes: ['10', '25', '50', '100', '250', '1000'], position: 'right' }} withGlobalFilter withVirtualizedRows virtualizedRowOverscan={25} /> ``` # License Distributed under the ISC license. See [LICENSE](https://github.com/FabienDeborde/react-simple-qr-scanner/blob/master/LICENSE) for more information. # TODO [] update readme [] add tests [] add autocomplete in string filter (use mantine component, withAutocomplete props?) [] improve example project (use real API?) --- _Source: https://npm.io/package/@fabiendeborde/mantine-datagrid · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._