react-cust-table
Version:
> Multiple responsive design, Pagination support, Collapsible row, Easy Customization,
124 lines (102 loc) • 6.56 kB
Markdown
# react-cust-table
> Multiple responsive design, Pagination support, Collapsible row, Easy Customization,
[](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. |