Getting Started

Start using @manikantsharma/react-datatable in your project

About @manikantsharma/react-datatable

A premium, lightweight, and highly customizable Datatable component for React built with @mui/material. It features sorting, pagination, column visibility persistence, and polished loading states.

Installation

Install the package using your preferred package manager:

npm

bash

1npm install @manikantsharma/react-datatable

yarn

bash

1yarn add @manikantsharma/react-datatable

Peer Dependencies

Make sure you have these peer dependencies installed:

bash

1npm install react react-dom @mui/material @emotion/react @emotion/styled

Quick Start

Import the DataTable component and start using it immediately:

tsx

1import { DataTable, type TableColumn } from "@manikantsharma/react-datatable";
2import React from "react";
3
4interface User {
5  id: number;
6  name: string;
7  role: string;
8  status: "Active" | "Inactive";
9}
10
11const columns: TableColumn<User>[] = [
12  { id: "id", label: "ID", numeric: true, sortable: true },
13  { id: "name", label: "Name", sortable: true },
14  { id: "role", label: "Role" },
15  {
16    id: "status",
17    label: "Status",
18    render: (value) => (
19      <span
20        style={{
21          color: value === "Active" ? "#10b981" : "#ef4444",
22          fontWeight: 600,
23        }}
24      >
25        {value}
26      </span>
27    ),
28  },
29];
30
31const data: User[] = [
32  { id: 1, name: "John Doe", role: "Admin", status: "Active" },
33  { id: 2, name: "Jane Smith", role: "User", status: "Inactive" },
34];
35
36export default function App() {
37  return (
38    <DataTable
39      data={data}
40      columns={columns}
41      tableId="user_management_table"
42      pagination={true}
43      filterColunm={true}
44    />
45  );
46}

Core Features

Zero Heavy Dependencies

Only depends on @mui/material and react. No external icon sets.

Column Management

Built-in menu to show/hide columns with persistent state using localStorage.

Smart Sorting

Supports nested object properties via dot notation out of the box.

Professional UI

Modern design with micro-interactions and smooth skeleton loading states.

Next Steps

Explore the detailed API reference for the DataTable component to unlock its full potential.

DataTable

The DataTable component is a feature-rich table component built on top of Material UI, designed for high-performance data display and interaction.

DataTable Props

Property	Type	Default	Description
data	T[]	-	Array of data objects to display.
columns	TableColumn<T>[]	-	Configuration for table columns.
tableId	string	-	Unique ID to persist column visibility in localStorage.
loading	boolean	false	Shows skeleton loader when true.
pagination	boolean	true	Enables pagination controls.
sortable	boolean	true	Enables sorting functionality globally.
totalCount	number	0	Total records for server-side pagination.
page	number	0	Current page number (controlled).
rowsPerPage	number	6	Number of rows per page.
onPageChange	(page: number) => void	-	Callback when page changes.
onRowClick	(row: T, index: number) => void	-	Callback when a row is clicked.
compact	boolean	false	Reduces padding for a dense view.
filterColunm	boolean	true	Shows the column management menu.
isPermission	boolean	true	If false, displays "Access Denied" UI.
stickyHeader	boolean	false	Enable sticky table header.

Column Configuration

Define your columns using the TableColumn interface.

tsx

1interface TableColumn<T> {
2  id: string; // Supports dot notation: 'user.profile.name'
3  label: string;
4  numeric?: boolean;
5  sortable?: boolean;
6  isVisible?: boolean;
7  hideable?: boolean; // Can user toggle visibility
8  render?: (value: any, row: T, index: number) => React.ReactNode;
9  styled?: React.CSSProperties;
10  width?: string | number;
11}

Advanced: Persistence

By providing a tableId, the component will automatically remember which columns the user has hidden or shown. This is saved in the browser's localStorage and persists across sessions.

Advanced: Permission Handling

Easily manage restricted data views using the isPermission and noAccessMessage props.

tsx

1<DataTable
2  data={data}
3  columns={columns}
4  isPermission={userHasAccess}
5  noAccessMessage="Contact admin for access to this data."
6/>

Getting Started

Start using @manikantsharma/react-datatable in your project

About @manikantsharma/react-datatable

A premium, lightweight, and highly customizable Datatable component for React built with @mui/material. It features sorting, pagination, column visibility persistence, and polished loading states.

Installation

Install the package using your preferred package manager:

npm

bash

1npm install @manikantsharma/react-datatable

yarn

bash

1yarn add @manikantsharma/react-datatable

Peer Dependencies

Make sure you have these peer dependencies installed:

bash

1npm install react react-dom @mui/material @emotion/react @emotion/styled

Quick Start

Import the DataTable component and start using it immediately:

tsx

1import { DataTable, type TableColumn } from "@manikantsharma/react-datatable";
2import React from "react";
3
4interface User {
5  id: number;
6  name: string;
7  role: string;
8  status: "Active" | "Inactive";
9}
10
11const columns: TableColumn<User>[] = [
12  { id: "id", label: "ID", numeric: true, sortable: true },
13  { id: "name", label: "Name", sortable: true },
14  { id: "role", label: "Role" },
15  {
16    id: "status",
17    label: "Status",
18    render: (value) => (
19      <span
20        style={{
21          color: value === "Active" ? "#10b981" : "#ef4444",
22          fontWeight: 600,
23        }}
24      >
25        {value}
26      </span>
27    ),
28  },
29];
30
31const data: User[] = [
32  { id: 1, name: "John Doe", role: "Admin", status: "Active" },
33  { id: 2, name: "Jane Smith", role: "User", status: "Inactive" },
34];
35
36export default function App() {
37  return (
38    <DataTable
39      data={data}
40      columns={columns}
41      tableId="user_management_table"
42      pagination={true}
43      filterColunm={true}
44    />
45  );
46}

Core Features

Zero Heavy Dependencies

Only depends on @mui/material and react. No external icon sets.

Column Management

Built-in menu to show/hide columns with persistent state using localStorage.

Smart Sorting

Supports nested object properties via dot notation out of the box.

Professional UI

Modern design with micro-interactions and smooth skeleton loading states.

Next Steps

Explore the detailed API reference for the DataTable component to unlock its full potential.

DataTable

The DataTable component is a feature-rich table component built on top of Material UI, designed for high-performance data display and interaction.

DataTable Props

Property	Type	Default	Description
data	T[]	-	Array of data objects to display.
columns	TableColumn<T>[]	-	Configuration for table columns.
tableId	string	-	Unique ID to persist column visibility in localStorage.
loading	boolean	false	Shows skeleton loader when true.
pagination	boolean	true	Enables pagination controls.
sortable	boolean	true	Enables sorting functionality globally.
totalCount	number	0	Total records for server-side pagination.
page	number	0	Current page number (controlled).
rowsPerPage	number	6	Number of rows per page.
onPageChange	(page: number) => void	-	Callback when page changes.
onRowClick	(row: T, index: number) => void	-	Callback when a row is clicked.
compact	boolean	false	Reduces padding for a dense view.
filterColunm	boolean	true	Shows the column management menu.
isPermission	boolean	true	If false, displays "Access Denied" UI.
stickyHeader	boolean	false	Enable sticky table header.

Column Configuration

Define your columns using the TableColumn interface.

tsx

1interface TableColumn<T> {
2  id: string; // Supports dot notation: 'user.profile.name'
3  label: string;
4  numeric?: boolean;
5  sortable?: boolean;
6  isVisible?: boolean;
7  hideable?: boolean; // Can user toggle visibility
8  render?: (value: any, row: T, index: number) => React.ReactNode;
9  styled?: React.CSSProperties;
10  width?: string | number;
11}

Advanced: Persistence

By providing a tableId, the component will automatically remember which columns the user has hidden or shown. This is saved in the browser's localStorage and persists across sessions.

Advanced: Permission Handling

Easily manage restricted data views using the isPermission and noAccessMessage props.

tsx

1<DataTable
2  data={data}
3  columns={columns}
4  isPermission={userHasAccess}
5  noAccessMessage="Contact admin for access to this data."
6/>