TableComponent

A reusable and customizable React table component built with Material-UI, designed for dynamic data display with features like pagination, editable rows, and actionable items.

Features

1. Dynamic Table Display: Automatically generates columns based on the keys of the data array.
2. Customizable Columns: Hide specific columns with the hiddenKeys prop.
3. Action Buttons: Include "Edit", "Delete", and "View More" functionality.
4. Pagination: Supports pagination for large datasets.
5. Responsive Design: Table adjusts dynamically to fit different screen sizes.

Installation

Install the package using npm:

npm install table-component-reusable

Install MUI packages

npm install @mui/material @emotion/react @emotion/styled
npm install @mui/material @mui/styled-engine-sc styled-components

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
/>

Usage

import {TableComponent} from "table-component-reusable";

const data = [
  { id: 1, name: "John Doe", age: 28 },
  { id: 2, name: "Jane Smith", age: 32 },
];

const App = () => {
  const handleEdit = (item) => {
    console.log("Edit item:", item);
  };

  const handleDelete = (item) => {
    console.log("Delete item:", item);
  };

  return (
    <TableComponent
      title="User Data"
      data={data}
      enableActions={true}
      enableViewMore={true}
      onEdit={handleEdit}
      onDelete={handleDelete}
      hiddenKeys={["id"]}
    />
  );
};

export default App;

Props

Required Props

| Prop | Type | Description | Default | |----------|----------|------------------------------------------------|-------------| | title | string | The title displayed above the table. | "" | | data | array | An array of objects representing the table data. | [] |

Optional Props

| Prop | Type | Description | Default | |--------------------|------------|--------------------------------------------------------------------|-------------| | hiddenKeys | array | An array of keys to hide from the table display. | [] | | enableActions | boolean | Whether to display action buttons (Edit, Delete, View More). | false | | enableViewMore | boolean | Whether to enable the "View More" button functionality. | false | | editTitle | string | The title used in the "View More" modal. | "" | | hideinViewMore | array | An array of keys to hide in the "View More" modal. | [] | | onEdit | function | Callback function triggered when the Edit button is clicked. | null | | onDelete | function | Callback function triggered when the Delete button is clicked. | null | | renderPagination | boolean | Whether to display pagination when the number of rows exceeds 10. | false |