react-cust-table

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

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:

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

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