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 and built-in pagination based on the specified page size.
-
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, Vue.js, and Angular.
1.You can install react-cust-table via npm:
npm install react-cust-table2.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
/>