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.
- 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.
Install the package using npm:
npm install lego-react-table
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;
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;
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. |
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. |
Cyces Open Source Initiatives - https://cyces.co/open-source