react-mkx-datatable

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

Features

• Zero Heavy Dependencies: Only depends on @mui/material and react. No external icon sets.
• Premium UI: Modern design with subtle micro-interactions, smooth transitions, and glassmorphism elements.
• Column Management: Built-in menu to show/hide columns with persistent state.
• Persistence: Automatically saves column visibility preferences to localStorage using a tableId.
• Smart Sorting: Built-in sorting supporting nested object properties via dot notation.
• Pagination: Seamless integration with MUI Pagination, supporting both client and server modes.
• Loading States: Professional skeleton loading for a better user experience.
• Permission Support: Built-in handling for access-denied or restricted data states.
• TypeScript: Full type safety out of the box with generic data support.

Installation

npm install react-mkx-datatable
# or
yarn add react-mkx-datatable
# or
pnpm add react-mkx-datatable

Peer Dependencies

Make sure you have these peer dependencies installed:

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

Quick Start

import { DataTable, type TableColumn } from "react-mkx-datatable";
import React from "react";

interface User {
  id: number;
  name: string;
  role: string;
  status: "Active" | "Inactive";
}

const columns: TableColumn<User>[] = [
  { id: "id", label: "ID", numeric: true, sortable: true },
  { id: "name", label: "Name", sortable: true },
  { id: "role", label: "Role" },
  {
    id: "status",
    label: "Status",
    render: (value) => (
      <span
        style={{
          color: value === "Active" ? "#10b981" : "#ef4444",
          fontWeight: 600,
        }}
      >
        {value}
      </span>
    ),
  },
];

const data: User[] = [
  { id: 1, name: "John Doe", role: "Admin", status: "Active" },
  { id: 2, name: "Jane Smith", role: "User", status: "Inactive" },
];

export default function App() {
  return (
    <DataTable
      data={data}
      columns={columns}
      tableId="user_management_table"
      pagination={true}
      filterColunm={true}
    />
  );
}

API Reference

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

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

Advanced Features

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.

Permission Handling

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

<DataTable
  data={data}
  columns={columns}
  isPermission={userHasAccess}
  noAccessMessage="Contact admin for access to this data."
/>

Browser Support

Latest	Latest	Latest	Latest	Latest

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

MIT - Mani Kant Sharma

Author

Mani Kant Sharma

Changelog

v1.0.0

• Initial release
• Modularized architecture
• LocalStorage persistence for column visibility
• Professional JSDoc documentation
• Zero-dependency icons and assets