react-lite-table
is a flexible, lightweight, and feature-rich React component for displaying tabular data. It includes functionalities such as sorting, searching, pagination, and row selection, making it suitable for a variety of use cases.
- Pagination: Divide your data into pages to handle large datasets efficiently.
- Sorting: Organize your table data by sorting columns in ascending or descending order.
- Row Selection: Select individual rows or all rows on the current page.
- Search: Includes a search box to filter table data, with support for nested data and automatic delay to improve performance.
- Custom No Data Message: Displays a custom message or component when there's no data to show.
- Fully Customizable: Customize styles and behaviors with extensive props.
- Responsive Design: Adapts to different screen sizes.
Install the package using npm:
npm install react-lite-table
Here’s a simple example of how to use Table
:
import React, { useState } from "react";
import Table from "react-lite-table";
const App = () => {
const [currentPage, setCurrentPage] = useState(1);
const [rowsPerPage, setRowsPerPage] = useState(5);
const [selectedRows, setSelectedRows] = useState([]);
const [searchValue, setSearchValue] = 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: "Smith", age: 30, address: { city: "San Francisco" } },
{ id: 3, name: "David", age: 31, address: { city: "San Francisco" } },
{ id: 4, name: "Miller", age: 32, address: { city: "San Francisco" } },
{ id: 5, name: "Parker", age: 27, address: { city: "San Francisco" } },
{ id: 6, name: "William", age: 24, address: { city: "San Francisco" } },
{ id: 7, name: "Johny", age: 32, address: { city: "San Francisco" } },
{ id: 8, name: "Peter", age: 30, address: { city: "San Francisco" } },
{ id: 9, name: "Jack", age: 19, address: { city: "San Francisco" } },
{ id: 10, name: "Johnson", age: 24, address: { city: "San Francisco" } },
// More rows...
];
const searchHandleChange = (value) => {
setSearchValue(value);
};
return (
<div
style={{
display: "flex",
alignItems: "center",
justifyContent: "center",
padding: "24px",
}}
>
<Table
columns={columns}
rows={rows || []}
tableWidth="100%"
tableHeight="70vh"
enableClientSidePagination={true}
count={rows.length}
currentPage={currentPage}
setCurrentPage={setCurrentPage}
rowsPerPage={rowsPerPage}
setRowsPerPage={setRowsPerPage}
selectedRows={selectedRows}
setSelectedRows={setSelectedRows}
searchKey="name"
searchValue={searchValue}
searchHandleChange={searchHandleChange}
enableCustomNoDataComponent
customNoDataComponent={() => {
return (
<img
style={{ width: "240px", height: "240px", objectFit: "cover" }}
src="https://static.vecteezy.com/system/resources/previews/009/007/126/non_2x/document-file-not-found-search-no-result-concept-illustration-flat-design-eps10-modern-graphic-element-for-landing-page-empty-state-ui-infographic-icon-vector.jpg"
/>
);
}}
/>
</div>
);
};
export default App;
Here’s an example of how to integrate Table
with an API to fetch data:
import React, { useEffect, useState } from "react";
import Table from "react-lite-table";
const App: React.FC = () => {
const [list, setList] = useState({});
const [currentPage, setCurrentPage] = useState(1);
const [rowsPerPage, setRowsPerPage] = useState(20);
const [selectedRow, setSelectedRow] = useState(null);
const [selectedRows, setSelectedRows] = useState([]);
const [searchValue, setSearchValue] = useState("");
const actions = [
{
label: "Edit",
onClick: (values: any) => {
console.log("edit", values);
},
},
{
label: "Delete",
onClick: (values: any) => {
console.log("delete", values);
},
},
{
label: "View",
onClick: (values: any) => {
console.log("view", values);
},
},
];
const columns = [
{ id: "id", label: "Id" },
{
id: "title",
label: "Title",
truncate: {
enable: true,
length: 40,
},
},
{
id: "thumbnail__alt_text",
label: "Description",
truncate: {
enable: true,
length: 40,
},
},
{
id: "api_model",
label: "Model",
},
{
id: "_score",
label: "Score",
},
{
id: "action",
label: "Action",
render: (values: any) => {
const isOpen = selectedRow?.id === values.id;
return (
<div style={{ position: "relative" }}>
<div
onClick={() => {
setSelectedRow(isOpen ? null : values);
}}
style={{ cursor: "pointer" }}
>
<svg
xmlns="http://www.w3.org/2000/svg"
height="20px" // Adjusting the height
viewBox="0 96 960 960"
width="20px" // Adjusting the width
>
<path d="M480 856q-25 0-42.5-17.5T420 796q0-25 17.5-42.5T480 736q25 0 42.5 17.5T540 796q0 25-17.5 42.5T480 856Zm0-240q-25 0-42.5-17.5T420 556q0-25 17.5-42.5T480 496q25 0 42.5 17.5T540 556q0 25-17.5 42.5T480 616Zm0-240q-25 0-42.5-17.5T420 316q0-25 17.5-42.5T480 256q25 0 42.5 17.5T540 316q0 25-17.5 42.5T480 376Z" />
</svg>
</div>
{isOpen && (
<div
style={{
position: "absolute",
background: "#fff",
border: "1px solid #ccc",
boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
padding: "10px",
zIndex: 99,
marginTop: "5px",
borderRadius: "5px",
transition: "opacity 0.3s ease",
}}
>
<div
style={{
display: "flex",
flexDirection: "column",
gap: "6px",
}}
>
{actions.map((action) => (
<span
key={action.label}
onClick={() => action.onClick(values)}
style={{ fontSize: "12px", cursor: "pointer" }}
>
{action.label}
</span>
))}
</div>
</div>
)}
</div>
);
},
},
];
useEffect(() => {
fetch(
`https://api.artic.edu/api/v1/artworks/search?q=&limit=${rowsPerPage}&page=${currentPage}&q=${searchValue}`
)
.then((response) => response.json())
.then((json) =>
setList({
...json,
pagination: {
...json.pagination,
total: 100,
},
})
);
}, [currentPage, rowsPerPage, searchValue]);
const searchHandleChange = (value: string) => {
setSearchValue(value);
};
return (
<div
style={{
display: "flex",
alignItems: "center",
justifyContent: "center",
padding: "24px",
}}
>
<Table
columns={columns}
rows={list?.data || []}
tableWidth="100%"
tableHeight="70vh"
enableClientSidePagination={false}
count={list?.pagination?.total}
currentPage={currentPage}
setCurrentPage={setCurrentPage}
rowsPerPage={rowsPerPage}
setRowsPerPage={setRowsPerPage}
selectedRows={selectedRows}
setSelectedRows={setSelectedRows}
rowsPerPageOptions={[20]}
searchKey="thumbnail__alt_text"
searchValue={searchValue}
searchHandleChange={searchHandleChange}
/>
</div>
);
};
export default App;
-
Type:
any[]
-
Default:
[]
- Description: The data to display in the table. Each item is an object representing a row.
-
Type:
{ id: string; label: string; truncate?: { enable: boolean; length: number; }; render?: (row: any) => any; }[]
-
Default:
[]
-
Description: Defines the columns of the table. Each column object should include
id
,label
,truncate
, andrender
properties.
-
Type:
string
-
Default:
100%
- Description: Width of the table container.
-
Type:
string
-
Default:
70vh
- Description: Height of the table container.
-
Type:
CSSProperties
-
Default:
{}
- Description: Custom styles for the table container.
-
Type:
CSSProperties
-
Default:
{}
- Description: Custom styles for the table header.
-
Type:
CSSProperties
-
Default:
{}
- Description: Custom styles for the table footer.
-
Type:
boolean
-
Default:
true
- Description: Whether to keep the table header fixed while scrolling.
-
Type:
boolean
-
Default:
true
- Description: Whether to enable pagination controls.
-
Type:
boolean
-
Default:
true
- Description: Whether to handle pagination on the client side.
-
Type:
number
-
Default:
0
- Description: Total number of rows, used for server-side pagination.
-
Type:
number
-
Default:
1
- Description: The current page number for pagination.
-
Type:
Dispatch<number>
- Description: Function to update the current page number.
-
Type:
boolean
-
Default:
true
- Description: Whether to enable the option to select rows per page.
-
Type:
number
-
Default:
20
- Description: Number of rows per page.
-
Type:
React.Dispatch<React.SetStateAction<number>>
- Description: Function to update the number of rows per page.
-
Type:
number[]
-
Default:
[]
- Description: Options for selecting the number of rows per page.
-
Type:
boolean
-
Default:
true
- Description: Whether to enable row selection.
-
Type:
Array<string | number>
-
Default:
[]
- Description: Array of selected row IDs.
-
Type:
React.Dispatch<React.SetStateAction<Array<string | number>>>
-
Default:
() => {}
- Description: Function to update the selected rows.
-
Type:
boolean
-
Default:
true
- Description: Whether to enable column sorting.
-
Type:
boolean
-
Default:
true
- Description: Whether to display the search box.
-
Type:
string
-
Default:
""
-
Description: Key for nested search (use
__
for nested fields).
-
Type:
string
-
Default:
""
- Description: The current value of the search input.
-
Type:
(value: string) => void
- Description: Function to handle changes in the search input.
-
Type:
boolean
-
Default:
false
- Description: Whether to use a custom component when there is no data.
-
Type:
() => ReactNode
-
Default:
() => <></>
- Description: Function to render a custom no data component.