@cyces/lego-reactjs-table
TypeScript icon, indicating that this package has built-in type declarations

1.0.5 • Public • Published

lego-react-table

lego-react-table is a highly customizable and feature-rich React table component designed to handle large datasets efficiently. It includes various functionalities such as pagination, sorting, searching, row selection, and custom rendering.

Features

  • Sticky Header: Option to keep the header fixed while scrolling.
  • Pagination: Supports both client-side and server-side pagination.
  • Row Selection: Allows selecting multiple rows with checkboxes.
  • Sorting: Enable sorting on specified columns.
  • Search: Built-in search functionality.
  • Custom No Data Component: Render a custom component when there's no data.
  • Filtering: Integrate custom filter components.
  • Fully Customizable: Customize styles and behaviors with extensive props.

Installation

Install the package using npm:

npm install lego-react-table

Quick Start

Here's a simple example to get you started with Table:

import React, { useState } from 'react';
import Table from 'lego-react-table';

const App = () => {
  const [page, setPage] = useState(0);
  const [rowsPerPage, setRowsPerPage] = useState(10);
  const [selectedRows, setSelectedRows] = useState([]);

// Note: To access values from nested objects, use double underscores "__" in the column id.
  const columns = [
    { id: "name", label: "Name" },
    { id: "age", label: "Age" },
    { id: "address__city", label: "City" },
  ];

  const rows = [
    { id: 1, name: "John Doe", age: 25, address: { city: "New York" } },
    { id: 2, name: "Jane Doe", age: 30, address: { city: "San Francisco" } },
    // More rows...
  ];

  return (
    <Table
      columns={columns}
      rows={rows}
      page={page}
      setPage={setPage}
      rowsPerPage={rowsPerPage}
      setRowsPerPage={setRowsPerPage}
      selectedRows={selectedRows}
      setSelectedRows={setSelectedRows}
      enableStickyHeader
      enablePagination
      enableRowSelection
      enableSorting
      enableSearch
       // Note: To search values from nested objects, use double underscores "__" in the searchkey.
      searchkey="address__city"
    />
  );
};

export default App;

Integration with External API Example

import { useEffect, useState } from "react";
import Table from 'lego-react-table';

function App() {
  const [list, setList] = useState({});
  const [page, setPage] = useState(0);
  const [rowsPerPage, setRowsPerPage] = useState(5);
  const [selectedRows, setSelectedRows] = useState([]);
  const [searchValue, setSearchValue] = useState();

  useEffect(() => {
    fetch(
      `https://api.artic.edu/api/v1/artworks/search?q=${searchValue}&page=${
        page + 1
      }&limit=${rowsPerPage}`
    )
      .then((response) => response.json())
      .then((json) =>
        setList({
          ...json,
        })
      );
  }, [page, searchValue, rowsPerPage]);

  // Note: To access values from nested objects, use double underscores "__" in the column id.
  const columns = [
    { id: "id", label: "Id" },
    {
      id: "title",
      label: "Title",
      width: 300,
      truncate: {
        enable: true,
        length: 40,
      },
    },
    {
      id: "thumbnail__alt_text",
      label: "Description",
      width: 300,
      truncate: {
        enable: true,
        length: 40,
      },
    },
    {
      id: "api_model",
      label: "Model",
      render: (row: any) => {
        return (
          <span>
            {row?.api_model?.[0]?.toUpperCase() + row?.api_model?.slice(1)}
          </span>
        );
      },
    },
    {
      id: "_score",
      label: "Score",
    },
  ];

  const searchHandleChange = (value) => {
    setSearchValue(value);
  };

  return (
      <Table
        rows={list?.data || []}
        columns={columns}
        enableClientSidePagination={false}
        count={list?.pagination?.total}
        page={page}
        setPage={setPage}
        rowsPerPage={rowsPerPage}
        setRowsPerPage={setRowsPerPage}
        rowsOptions={[5, 10]}
        selectedRows={selectedRows}
        setSelectedRows={setSelectedRows}
        searchHandleChange={searchHandleChange}
      />
  );
}

export default App;

Column Configuration

Defines the configuration for each column in the table.

Property Type Description
id string The column identifier. It's used to map with row values.
label string Display name for the column.
width number The width of the column.
truncate object Truncation configuration for the column text.
  enable boolean Enable or disable text truncation.
  length number Number of characters to show before truncation.
render (row: any) => ReactNode Custom render function for the column content.

Table Properties

Defines the properties for the table component.

Property Type Description
rows any[] The data rows to be displayed in the table.
columns Column[] The configuration of the columns in the table.
tableWidth string The width of the table.
tableHeight string The height of the table.
containerSx CSSProperties Styles for the container.
tableContainerSx CSSProperties Styles for the table container.
tableHeaderSx CSSProperties Styles for the table header.
tableFooterSx CSSProperties Styles for the table footer.
checkboxSx CSSProperties Styles for the checkbox component.
tableCellSx CSSProperties Styles for the table cell.
enableStickyHeader boolean Enable sticky headers for the table.
enablePagination boolean Show pagination for the table.
enableClientSidePagination boolean Enable client-side pagination.
count number The total count of rows.
page number The current page number.
setPage Dispatch<number> Function to update the current page number state.
enableRowSelection boolean Enable row selection functionality.
selectedRows Array<string | number> The array of selected rows.
setSelectedRows Dispatch<Array<string | number>> Function to update the selected rows state.
enableSorting boolean Enable column sorting functionality.
enableRowsPerPage boolean Enable selection of rows per page.
rowsPerPage number The number of rows per page.
setRowsPerPage Dispatch<number> Function to update the number of rows per page state.
rowsOptions number[] The options for the number of rows per page.
enableCustomNoDataComponent boolean Enable custom "No Data" component.
customNoDataComponent () => ReactNode A custom component to display when there is no data.
enableFilter boolean Enable filtering functionality.
filterComponent () => ReactNode A custom component for filtering the data.
filterContainerSx CSSProperties Styles for the filter container.
cancelButtonSx CSSProperties Styles for the cancel button in the filter.
submitButtonSx CSSProperties Styles for the submit button in the filter.
filterCancelHandler () => void Function to handle filter cancel.
filterSubmitHandler () => void Function to handle filter submit.
enableSearch boolean Enable search functionality.
formControlSx CSSProperties Styles for the form control.
inputSx CSSProperties Styles for the input component.
searchKey string The search key for filtering rows.
searchHandleChange (value: string) => void Function to handle changes in the search input.

Credits

Cyces Open Source Initiatives - https://cyces.co/open-source

Package Sidebar

Install

npm i @cyces/lego-reactjs-table

Weekly Downloads

0

Version

1.0.5

License

MIT

Unpacked Size

16.8 kB

Total Files

3

Last publish

Collaborators

  • cyces