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.