react-cust-table v1.0.12

react-cust-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 and built-in pagination based on the specified page size.

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, Vue.js, and Angular.

Usage

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
/>