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

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:

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

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:

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}
/>