React MUI Dynamic Table

A dynamic and customizable Material UI table for React.
This library is designed to simplify the creation of feature-rich tables in React applications by providing ready-to-use functionality such as sorting, search, pagination, row selection, and actions while still giving developers full flexibility to customize styles and cell renderers.

🎯 Purpose

Building complex tables with Material UI often requires rewriting the same logic (sorting, search, pagination, row selection, etc.).
This library solves that problem by offering a reusable, dynamic table component that you can drop into any React project, customize via props, and save development time.

📦 Installation

npm install @react-lib-tech/react-mui-dynamic-table

or with yarn:

yarn add @react-lib-tech/react-mui-dynamic-table

🚀 Usage Example

import React from "react";
import DynamicTable from "@react-lib-tech/react-mui-dynamic-table";
import { Chip } from "@mui/material";
import EmailIcon from "@mui/icons-material/Email";
import BadgeIcon from "@mui/icons-material/Badge";
import PersonIcon from "@mui/icons-material/Person";
import DownloadIcon from "@mui/icons-material/Download";

function App() {
  const columns = [
    { key: "id", label: "ID", icon: <BadgeIcon fontSize="small" /> },
    { key: "name", label: "Name", icon: <PersonIcon fontSize="small" /> },
    { key: "email", label: "Email", icon: <EmailIcon fontSize="small" /> },
    {
      key: "status",
      label: "Status",
      render: (row) => (
        <Chip
          label={row.status}
          color={row.status === "Active" ? "success" : "default"}
          size="small"
        />
      ),
    },
  ];

  const rows = [
    { id: 1, name: "Abhishek Singh", email: "[email protected]", status: "Active" },
    { id: 2, name: "Ravi Kumar", email: "[email protected]", status: "Inactive" },
    { id: 3, name: "Pooja Sharma", email: "[email protected]", status: "Active" },
  ];

  const actions = [
    { type: "view" },
    { type: "edit" },
    { type: "delete" },
    {
      label: "Download",
      icon: <DownloadIcon fontSize="small" color="primary" />,
      onClick: (row) => console.log("Download row:", row),
    },
  ];

  return (
    <MuiDynamicTable
      columns={columns}
      data={rows}
      actions={actions}
      multiSelect={true}
      onRowAction={(action, row) => console.log("Action:", action, row)}
      onSelectionChange={(selected) => console.log("Selected rows:", selected)}
      onRowClick={(row) => console.log("Row clicked:", row)}
      totalCount={totalCount ?? rows.length}
      initialRowsPerPage={10}
        rowsPerPageOptions={[10, 25, 100]} // 👈 custom
        onPageChange={(p) => console.log("Page:", p)}
        onRowsPerPageChange={(r) => console.log("Rows per page:", r)}
        onSortChange={({ order, orderBy }) =>
          console.log("Sort:", order, "by", orderBy)
        }
    />
  );
}

export default App;

📝 License

MIT © Abhishek Kumar Singh