Material Custom Table Component

CustomTable is a React component designed to display tabular data with customizable columns, pagination, and styling using Material-UI (MUI) components.

Installation

You can easily install rc-material-table via your packeage manager.

npm install rc-material-table
yarn add rc-material-table

Usage

import CustomTable from "rc-material-table";
const columns = [
  { accessorKey: "id", header: "ID", style: { width: "100px" } },
  { accessorKey: "name", header: "Name", style: { width: "200px" } },
  { accessorKey: "age", header: "Age", style: { width: "80px" }, cell : (ele,obj)=> },
];

const data = [
  { id: 1, name: "John Doe", age: 30 },
  { id: 2, name: "Jane Smith", age: 25 },
  // Add more data...
];

const pagination = {
  rowsPerPageOptions: [5, 10, 20],
  rowsPerPage: 5,
  page: 0,
  count: data.length,
  component: "div",
  onPageChange: (event, newPage) => {
    // Handle page change
  },
  onRowsPerPageChange: (event) => {
    // Handle rows per page change
  },
};
return (
  <CustomTable
    columns={columns}
    data={data}
    pagination={pagination}
    sx={{ marginTop: "20px" }}
    tableProps={{ size: "small" }}
  />
);

Props

columns : (Array): An array of objects defining the table columns. accessorKey: (string): The key in the data array corresponding to the column value. accessorKey: (string): The header text of the column. accessorKey: style (object): Custom styles to apply to the column header (sx prop).

data: (Array): An array of objects representing the table rows. pagination: (Object): Configuration object for pagination. rowsPerPageOptions: (Array): Array of numbers specifying the available rows per page options. rowsPerPage: (number): Number of rows per page. page: (number): Current page index. count: (number): Total number of rows. component: (string): The component used to render pagination controls. onPageChange: (function): Callback function triggered when the page changes. onRowsPerPageChange: (function): Callback function triggered when rows per page changes.