React Mantine Table

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

(With TypeScript Support)

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

Installation
Demo
Features
Screenshots
Table Props
Tech Stack
Usage
Example
Dependencies
Table Options

Installation

You can install the React Mantine Table component using npm or yarn.

Using npm:

npm install react-mantine-table

Using yarn:

yarn add react-mantine-table

Table Demo + Code Snippets

Please visit this page to explore the demo examples alongwith their code reference.

Table Demo

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 Props (API)

Prop Name	Type	Default Value	Description	Required
`columns`	`ColumnDef<T>[]`		An array of column definitions for the table.	Yes
`data`	`TableOption<T>[]`		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<T>`		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<T>) => 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<TableOptions<T>>`		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

columns: Definition for columns
data: Data to display
tableName: Name of Table. (Eg. User, Product, Order etc)

Here's an example of how to use it:

import React, { useMemo, useState } from 'react';
import { ColumnDef, Table } from 'react-mantine-table';

// Define your columns
const columns = useMemo<ColumnDef<UserData>[]>(
  () => [
    {
      accessorKey: "name",
      header: "Name",
    },
    {
      accessorKey: "email",
      header: "Email Id",
      enableClickToCopy: true,
      Cell: ({ cell }) => (
        <Text>{cell.getValue<string>().toLowerCase()}</Text>
      ),
    },
    {
      accessorKey: "country",
      header: "Country",
    },
  ],
  []
);

// Your data source (usersApiData or productsApiData)
const data = // Your data source;

const UserList = () => {
  return (
    <Table
        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:

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 (
    <Table
      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.

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