react-mantine-table

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

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