# react-cust-table

> Multiple responsive design, Pagination support, Collapsible row, Easy Customization,

[![npm version](https://badge.fury.io/js/easy-table.svg)](https://badge.fury.io/js/easy-table)

## Description

react-cust-table is a custom lightweight npm package that simplifies the process of writing tables with minimal lines of code. It provides a responsive design, built-in pagination based on the specified page size and support for collapsible rows.

## Features

- **Quick Table Creation**: Easily create tables with minimal lines of code, reducing development time.
- **Responsive Design**: Tables are designed to seamlessly adapt to various screen sizes, ensuring optimal display on both desktop and mobile devices.
- **Pagination Support**: Built-in pagination functionality allows users to navigate through large datasets efficiently. Customize the page size to control the number of items displayed per page.
- **Customization**: Pass classNames and styles to individual columns for fine-grained customization. This feature enables developers to apply specific styling to each column, enhancing visual appeal and usability.
- **Easy Integration**: Effortlessly integrate Easy-Table into existing projects without major modifications. Compatible with popular frontend frameworks such as React.

- **Collapsible Row** : Enable rows to be collapsible, allowing users to expand and collapse row content for better data organization.

## Usage

1.You can install react-cust-table via npm:

```bash
npm install react-cust-table
```

2.Create a table with minimal configuration:

```bash
const data = [
  { id: 1, name: 'John Doe', age: 30 },
  { id: 2, name: 'Jane Smith', age: 25 },
  // Add more data as needed
];

const columns = [
  {
    header: "S.No.",
    accessor: (e, idx, srNo) => srNo,
    width: "3rem",
    headingClassName: "header",
    style: { color: "red" }, // style is only applicable for column cells
  },
  {
    header: "Name",
    accessor: (e) => e.name || "-",
  },
  {
    header: "Age",
    accessor: (e) => e.age || "-",
  },
];

<Table
    data={data}
    columns={columns}
    isPaginated // mandatory for pagination
    pageNo={currentPage} // should be greater than 0
    totalPages={totalPages} // should be greater than 0
    setPageNo={setCurrentPage}
    tableClassName = {"table"}
    isCollapse // for collapsible table
    isMultiCollapse // Multiple row collapsible
    responsiveType = "card",
    CollapseChild={StudentBooks} // should be a React component
    collapseRowClass={"collapseRow"}
    pageSize={pageSize}
    prevBtnLabel="Previous" // Customize the label for the previous button
    nextBtnLabel="Next" // Customize the label for the next button
/>

```

3.Styling

Define your styling as below in your root css file

```bash
/* Root CSS file */

:root {
  --table-bg: #fff; /* Background color for the main table */
  --table-thead-bg: #fff; /* Background color for the table header */
  --table-error-color: #ff3632; /* Color for error rows in the table */
  --table-cell-fs: 0.875rem; /* Font size for table cells */
  --table-cell-color: #5f6d7e; /* Color for table cell text */
  --table-cell-fw: 500; /* Font weight for table cells */
  --table-heading-color: #5f6d7e; /* Color for table heading text */
  --table-heading-fw: 700; /* Font weight for table headings */
  --table-cell-line-height: 1.125rem; /* Line height for table cells */
  --table-pagination-bg: #fff; /* Table pagination background color */
  --pagination-btn-active-bg: #909090; /* Background color for active pagination items */
  --pagination-btn-bg: none; /* Default background color for pagination buttons */
  --pagination-btn-font-color: #000; /* Default font color for pagination buttons */
  --pagination-disabled: #ccc; /* Default font color for disabled pagination buttons */
  --pagination-numb-fc: #ccc; /* Default font color for pagination numbers */
  --pagination-numb-active-fc: #000; /* Default active pagination font color */
  --pagination-numb-curve: 50%; /* Default border radius for pagination numbers */
  --pagination-numb-bg: #fff; /* Default background color for pagination numbers */
}
```

## Props

| Prop Name        | Type                      | Default       | Description                                                              |
| :--------------- | :------------------------ | :------------ | :----------------------------------------------------------------------- |
| data             | `Array`                   | `[]`          | The data array to be displayed in the table.                             |
| columns          | `Array`                   | `[]`          | The column definitions, including header, accessor, and optional styles. |
| isPaginated      | `boolean`                 | `false`       | Enables pagination for the table.                                        |
| pageNo           | `number`                  | `1`           | The current page number (1-based index).                                 |
| totalPages       | `number`                  | `1`           | The total number of pages available.                                     |
| setPageNo        | `function`                | `null`        | Callback function to set the current page number.                        |
| tableClassName   | `string`                  | `''`          | Class name for the table element.                                        |
| isCollapse       | `boolean`                 | `false`       | Enables collapsible rows.                                                |
| isMultiCollapse  | `boolean`                 | `false`       | Allows multiple rows to be collapsible at the same time.                 |
| responsiveType   | `string (scroll \| card)` | `scroll`      | Type of responsive behavior (eg. scroll \| card).                        |
| CollapseChild    | `function`                | `null`        | React component to render as the collapsible content.                    |
| collapseRowClass | `string`                  | `null`        | Class name for the collapsible rows.                                     |
| pageSize         | `number`                  | `data.length` | Number of items to display per page.                                     |
| prevBtnLabel     | `string`                  | `'Previous'`  | Label for the previous page button.                                      |
| nextBtnLabel     | `string`                  | `'Next'`      | Label for the next page button.                                          |