📊 Data Table Material

A highly customizable and reusable Material UI-based table component built with TypeScript and React. Supports features like dynamic columns, pagination, row actions, expandable rows, and more.

🚀 Features

• ✅ Customizable columns and rows
• 🔢 Optional serial number column
• 📄 Expandable row support
• ➕ Additional action columns (switch, delete)
• 📜 Pagination with external control
• 🎯 Row click handling
• 🎨 Theme-aware styling using MUI sx props
• ⚡ Visible/hidden column control
• 📏 Resizable headers

📦 Installation

npm install data-table-material
# or
yarn add data-table-material

✨ Usage

import DataTable from "data-table-material";

const columns = [
  { _key: "name", label: "Name" },
  { _key: "email", label: "Email" },
];

const rows = [
  { name: "John Doe", email: "[email protected]" },
  { name: "Jane Doe", email: "[email protected]" },
];

export default function App() {
  return <DataTable rows={rows} columns={columns} />;
}

🧩 Props

IDataTable.Props<T>

| Prop | Type | Description | Default | | -------------------------- | ------------------------------------- | ------------------------------------------------ | ------------ | | rows | T[] | Array of row data | Required | | columns | Column<T>[] | Array of column definitions | Required | | serialNumber | boolean | Show serial number column | false | | pagination | boolean | Enable pagination | false | | paginationData | Pagination | Current pagination state | - | | onChangePaginationData | (data: Partial<Pagination>) => void | Triggered when pagination changes | - | | additionalColumns | AdditionalColumn<T>[] | Additional action columns (e.g., delete, switch) | - | | onRowClick | (row: T) => void | Row click handler | - | | containerStyle | SxProps | Custom style for container | {} | | paperStyle | SxProps | Custom style for paper | {} | | visibleColumns | string[] | Filter which columns are visible | - | | getExpandableTableConfig | (row: T) => ReactNode | Expandable row renderer | - | | size | "small" \| "medium" | MUI Table size | "small" | | ...rest | TableProps | All other native Table props | - |

🏗️ Column Definition

interface Column<T> {
  _key: keyof T | string;
  label: string;
  renderCell?: (row: T) => ReactNode;
  width?: number | string;
  hidden?: boolean;
  sx?: SxProps;
  title?: string;
}

➕ Additional Columns

Use these for actions like toggles or delete buttons.

interface AdditionalColumn<T> {
  _key: keyof T | string;
  label: string;
  onClick: (row: T) => void;
  type: "switch" | "deleteButton";
  hidden?: boolean;
  width?: number;
  hasPermission?: (row: T) => boolean;
}

🔄 Pagination Structure

interface Pagination {
  pageNo: number;
  pageSize: number;
  total: number;
  totalRecords: number;
}

Use paginationData to pass current pagination info and onChangePaginationData to update it.

🧰 Utilities

• ✅ Resizable: For resizable columns
• 🧩 RenderRow: Custom row renderer
• 📌 AdditonalColumnHeaders: Handles header rendering for additional columns
• 📚 CustomPagination: External pagination component

🖼️ Screenshots

Coming soon! Feel free to contribute UI previews!

🧪 Example

<DataTable
  rows={data}
  columns={columns}
  serialNumber
  pagination
  paginationData={paginationState}
  onChangePaginationData={setPaginationState}
  additionalColumns={[
    {
      _key: "delete",
      label: "Delete",
      type: "deleteButton",
      onClick: handleDelete,
    },
  ]}
  onRowClick={(row) => console.log("Clicked row", row)}
/>

📁 Folder Structure

data-table-material/
├── components/
│   ├── DataTable.tsx
│   ├── RenderRow.tsx
│   ├── Resizable.tsx
│   ├── CustomPagination.tsx
│   └── AdditonalColumnHeaders.tsx
├── types/
│   └── index.ts
├── style.css
└── README.md

🧱 Built With

• React
• TypeScript
• Material UI

🧑‍💻 Contributing

Contributions are welcome! Please open issues or submit PRs to help improve the component.

📝 License

MIT License

💬 Feedback

Found a bug or want a feature? Feel free to open an issue.