React Mantine Table

Table component for React/Next Projects built using Mantine UI.

##### (With TypeScript Support)

!Logo

$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
2. Demo
3. Features
4. Screenshots
5. Table Props
6. Tech Stack
7. Usage
8. Example
9. Dependencies
10. 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.

$3

React Mantine Table Website

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
!Code Snipper
!Light Mode
!Features

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 (
columns={columns}
data={data}
tableName="User"
tableOptions={{
enableRowSelection: true,
}}
/>
);
};

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 (
columns={columns}
data={data}
tableName="Product" // Provide a table name
isLoading={isLoading} // Set isLoading to true when data is loading
crudOptions={{
tableRowObject: userData,
setTableRowObject: setUserData,
onCreateRow: addUserApi,
onEditSaveRow: updatedUserApi,
onDeleteRow: deleteUserApi,
}}
// tableRowObject: State for holding the edited row data
// setTableRowObject: Setter Function to set the edited row data
// Add your CRUD API functions for products here (onCreateRow, onEditSaveRow, onDeleteRow, etc.)
// Add any other table options as needed (enableRowActions, enableColumnActions, etc.)
// Add your custom renderDetailPanel function to render the row detail panel
/>
);
};

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
columns={columns}
data={usersData} // Your data source
tableName='User'
tableOptions={tableOptions}
/>
``