@cyces-innovation-labs/lego-reactjs-table v1.0.2

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.

Table Properties

Defines the properties for the table component.