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