# react-mantine-table > React Table component built using Mantine UI Latest version **1.3.4** (published 2024-02-24) · MIT license · 0 weekly downloads ## Install ```sh npm install react-mantine-table pnpm add react-mantine-table yarn add react-mantine-table bun add react-mantine-table ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities. Warnings: low downloads. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.3.4 | | Published | 2024-02-24 | | First published | 2023-07-25 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 17 | | Unpacked size | 1 MB | | Known vulnerabilities | 0 | | Install scripts | no | | Maintainers | rushi.patel | | Keywords | react, table, mantine, next, component, UI | ## Links - npm: https://www.npmjs.com/package/react-mantine-table - Homepage: https://react-mantine-table.vercel.app/ - npm.io page: https://npm.io/package/react-mantine-table ## Dependencies (17) - [axios](https://npm.io/package/axios.md) ^1.4.0 - [dayjs](https://npm.io/package/dayjs.md) ^1.11.8 - [react](https://npm.io/package/react.md) ^18.2.0 - [slugify](https://npm.io/package/slugify.md) ^1.6.6 - [react-dom](https://npm.io/package/react-dom.md) ^18.2.0 - [@mantine/core](https://npm.io/package/@mantine/core.md) ^6.0.17 - [@emotion/react](https://npm.io/package/@emotion/react.md) ^11.11.0 - [@mantine/dates](https://npm.io/package/@mantine/dates.md) ^6.0.13 - [@mantine/hooks](https://npm.io/package/@mantine/hooks.md) ^6.0.17 - [@mantine/prism](https://npm.io/package/@mantine/prism.md) ^6.0.17 - [@mantine/modals](https://npm.io/package/@mantine/modals.md) ^6.0.17 - [@mantine/styles](https://npm.io/package/@mantine/styles.md) ^6.0.10 - [vite-plugin-dts](https://npm.io/package/vite-plugin-dts.md) ^3.7.2 - [@tabler/icons-react](https://npm.io/package/@tabler/icons-react.md) ^2.23.0 - [mantine-react-table](https://npm.io/package/mantine-react-table.md) ^1.3.0 - [@mantine/notifications](https://npm.io/package/@mantine/notifications.md) ^6.0.17 - [export-to-csv-fix-source-map](https://npm.io/package/export-to-csv-fix-source-map.md) ^0.2.1 ## Alternatives - [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads - [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads - [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads - [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads - [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads ## Recent versions - 1.3.4 (latest) — 2024-02-24 - 1.3.3 — 2024-02-22 - 1.3.2 — 2024-02-16 - 1.3.1 — 2024-02-16 - 1.3.0 — 2024-02-07 - 1.2.7 — 2024-02-07 - 1.2.6 — 2024-02-07 - 1.2.5 — 2024-01-26 - 1.2.4 — 2024-01-26 - 1.2.3 — 2024-01-26 - 1.2.2 — 2024-01-26 - 1.2.1 — 2024-01-17 - 1.2.0 — 2023-12-08 - 1.1.1 — 2023-11-22 - 1.1.0 — 2023-11-02 - … 33 more at https://npm.io/package/react-mantine-table/versions ## README # React Mantine Table ## Table component for React/Next Projects built using Mantine UI. ##### (With TypeScript Support)

![Logo](https://i.ibb.co/YdxBPKD/Documentation-Social-Preview-Image-1.png)
### Releases (last 3) - v1.0.2 - v1 Release 2 - v1.0.1 - Stable Release v1 (24 Sept 2023) - v0.2.21 - Beta Release 21 - v0.2.20 - Beta Release 20 ## Table of Contents 1. [Installation](#installation) 2. [Demo](#demo) 3. [Features](#features) 4. [Screenshots](#screenshots) 5. [Table Props](#table-props) 6. [Tech Stack](#tech-stack) 7. [Usage](#usage) 8. [Example](#example) 9. [Dependencies](#dependencies) 10. [Table Options](#table-options) ## Installation You can install the React Mantine Table component using npm or yarn. Using npm: ```bash npm install react-mantine-table ``` Using yarn: ```bash yarn add react-mantine-table ``` ## Table Demo + Code Snippets Please visit this page to explore the demo examples alongwith their code reference. ### [Table Demo](https://react-mantine-table.vercel.app/) [React Mantine Table Website](https://react-mantine-table.vercel.app/) ## Features The React Mantine Table component offers the following features: - Customizable columns with various properties - Editing capabilities for each cell - Aggregations for specific columns - Filtering and Sorting options - Row selection and actions - Expanding rows with detail panels - Dragging and resizing columns and rows - CRUD Operations of each row - Pagination module - Complete control over the table - Show/Hide Columns - Loading State and Empty State - In-built feature to handle CRUD Operations - Custom Pagination - Light & Dark Theme Support - and much more... ## Screenshots ![Table](https://i.ibb.co/XyFkbt1/table-1.png) ![Code Snipper](https://i.ibb.co/zsT60B5/snippet.png) ![Light Mode](https://i.ibb.co/y5j82Kw/table-light-mode.png) ![Features](https://i.ibb.co/vvByvZn/features-light-mode.png)
## Table Props (API) | Prop Name | Type | Default Value | Description | Required | | --------------------- | -------------------------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------- | -------- | | `columns` | `ColumnDef[]` | | An array of column definitions for the table. | **Yes** | | `data` | `TableOption[]` | | An array of data rows to display in the table. | **Yes** | | `tableName` | `string` | | A unique name for the table. | **Yes** | | `disableCrud` | `boolean` | `false` | Disable CRUD (Create, Read, Update, Delete) operations on the table. Explicitly add this to disable CRUD operations. | No | | `crudOptions` | `CrudOptions` | | Props related to CRUD operations on the table. (Please refer to below snippet for more details of its types.) | No | | `disablePagination` | `boolean` | `false` | Disables pagination for the table. | No | | `setTableConfig` | `(values: TableConfigData) => void` | | A function to set table configuration values. You have to pass this to the table if you have to do manual pagination. | No | | `totalRecords` | `number` | | The total number of records in the table (manualPagination is enabled). | No | | `renderDetailPanel` | `(row: T) => ReactNode` | | A function to render a detail panel for a row in the table. | No | | `rowActionsPosition` | `start` or `end` | `"end"` | Position of row actions in the table (start or end). | No | | `hideOuterBorder` | `boolean` | `false` | Flag to Hide the outer border of the table. | No | | `tableOptions` | `Partial>` | | Additional options for configuring the table appearance and behavior. | No | | `isLoading` | `boolean` | `false` | Indicates whether the table is in a loading state. | No | | `reloadFn` | `() => void` | | A function to reload or refresh the table data. | No | | `EmptyStateComponent` | `ReactNode` | | A custom component to display when the table is empty. | No | | `debugRows` | `boolean` | `false` | Enable debugging mode for table rows. It will print the table data to console. | No | ## Tech Stack - **Frontend:** React - **UI:** Mantine UI - **Deployment:** Vercel ## Usage To use the React Mantine Table component, import it into your React component and pass the necessary props. You must have to pass three props for table to show up 1. `columns`: Definition for columns 2. `data`: Data to display 3. `tableName`: Name of Table. (Eg. User, Product, Order etc) Here's an example of how to use it: ```jsx import React, { useMemo, useState } from 'react'; import { ColumnDef, Table } from 'react-mantine-table'; // Define your columns const columns = useMemo[]>( () => [ { accessorKey: "name", header: "Name", }, { accessorKey: "email", header: "Email Id", enableClickToCopy: true, Cell: ({ cell }) => ( {cell.getValue().toLowerCase()} ), }, { accessorKey: "country", header: "Country", }, ], [] ); // Your data source (usersApiData or productsApiData) const data = // Your data source; const UserList = () => { return ( ); }; export default UserList; ``` ## Example Here's a more advanced example of using the React Mantine Table component with users data: ```jsx import React, { useMemo, useState } from 'react'; import { Table } from 'react-mantine-table'; // Define your product columns const columns = useMemo( () => [ // Define your product columns here (column configuration) // ... ], // Dependencies array ); // Your product data source (productsApiData) const data = // Your product data source; // Your table options for products (optional) const tableOptions = // Your table options; const YourProductComponent = () => { const [tableRowObject, setTableRowObject] = useState({}); // Add your CRUD API functions for products here (addProductApi, updatedProductApi, addProductApi, deleteProductApi, etc.) return (
); }; export default YourProductComponent; ``` ## Dependencies This table is built on top of Mantine UI so it will depend of mantine packages. Some of the core packages are listed here. These all will be installed alongwith this package, so no need to install them manually. - `@mantine/core` - `@mantine/styles` - `@tabler/icons-react` - `dayjs` - `mantine-react-table` ## Table Options Here is a code snippet demonstrating various table options available that you can configure and make your table as per your requirements. NOTE: These options are OPTIONAL. You can pass these options to enable/disable the features for your table. ```jsx const tableOptions={ enableRowActions: true, // row actions menu enableRowSelection: true, // row selection checkbox enableColumnActions: true, // colummn level actions enableExpanding: true, // expand rows to display more details enableRowNumbers: true, enableColumnDragging: true, // column dragging & ordering enableColumnOrdering: true, enableColumnResizing: true, // adjust column width enableRowDragging: true, // enableRowOrdering: true, } // Usage
``` --- _Source: https://npm.io/package/react-mantine-table · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._