Multiple responsive design, Pagination support, Collapsible row, Easy Customization,
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.
-
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.
1.You can install react-cust-table via npm:
npm install react-cust-table
2.Create a table with minimal configuration:
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
/* 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 */
}
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. |