react-smart-table-component
v1.2.7
Published
An intelligent, dynamic React component, built entirely with TypeScript. This component is equipped with built-in features such as infinite scrolling, pagination, sorting and now includes the newly added search functionality. It provides a seamless user e
Downloads
105
Maintainers
rawasthi231Readme
react-smart-table-component
An intelligent, dynamic React component, built entirely with TypeScript. This component is equipped with built-in features such as infinite scrolling, pagination, search and now includes the newly added sorting functionality. It provides a seamless user experience for data-intensive applications, allowing for efficient navigation and organization of data.
Features
- Support of React 18, NextJS and Typescript
- Use custom types for headings and body
- Can use default CSS or add your customized styles
- Option for both Pagination and Infinite scroll feature (Default scroll and Upside down scroll)
- Scoped fields option to use custom JSX in any cell of the table
Installation
To install the latest stable version:
npm install --save react-smart-table-componentBasic usage:
import React from "react";
import ReactSmartTableComponent from "react-smart-table-component";
export default function Users({ loading, data }) {
return (
<ReactSmartTableComponent
items={data}
headings={[
{ fieldName: "name", title: "Name" },
{ fieldName: "email", title: "Email" },
{ fieldName: "phone", title: "Phone" },
{ fieldName: "address", title: "Address" },
{ fieldName: "company", title: "Company" },
]}
loading={loading}
scopedFields={{
address: (item) => (
<td>{`${item.address.street}, ${item.address.city}, ${item.address.state}, ${item.address.zipcode}`}</td>
),
company: (item) => (
<td>{`${item.company.name}, ${item.company.branch}`}</td>
),
}}
/>
);
}Sample code for Next.JS (TypeScript)
import Head from "next/head";
import Link from "next/link";
import dynamic from "next/dynamic";
import { UserInfo } from "@/typings";
const ReactSmartTableComponent = dynamic(
() => import("react-smart-table-component"),
{
ssr: false,
loading: () => <p>Loading...</p>,
}
);
export default function Users({ users }: { users: UserInfo[] }) {
return (
<>
<Head>
<title>Users List</title>
<meta name="description" content="Users Page" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
</Head>
<ReactSmartTableComponent
search
parentClass="container mt-5"
className="table table-responsive table-light table-striped"
items={users as UserInfo[]}
headings={[
{ fieldName: "id", title: "#" },
{ fieldName: "username", title: "Username", sortable: true },
{ fieldName: "name", title: "Name", sortable: true },
{ fieldName: "email", title: "Email", sortable: true },
{ fieldName: "phone", title: "Phone", sortable: true },
{ fieldName: "website", title: "Website", sortable: true },
{
fieldName: "address",
title: "Address",
colSpan: 3,
},
]}
scopedFields={{
id: (item) => <td>{item.id}.</td>,
username: (item) => (
<td style={{ color: "#00aaff" }}>
<Link href={`/users/${item.id}`}>{item.username}</Link>
</td>
),
address: (item) => (
<>
<td>{item.address.suite}</td>
<td>{item.address.street}</td>
<td>{`${item.address.city} ${item.address.zipcode}`}</td>
</>
),
}}
/>
</>
);
}
export async function getStaticProps() {
const response = await fetch("https://jsonplaceholder.typicode.com/users");
const data = await response.json();
return {
props: {
users: data,
},
};
}
Sample code for React.JS (Infinite Scroll)
import { useState, useEffect, useRef, useCallback } from "react";
import ReactSmartTableComponent from "react-smart-table-component";
import "react-smart-table-component/dist/styles.css";
export default function App() {
const [products, setProducts] = useState([]);
const [offset, setOffset] = useState(0);
const [hasMore, setHasMore] = useState(false);
const [loading, setLoading] = useState(false);
const offsetRef = useRef(offset);
const hasMoreRef = useRef(hasMore);
const productsRef = useRef(products);
useEffect(() => {
hasMoreRef.current = hasMore;
offsetRef.current = offset;
productsRef.current = products;
}, [offset, hasMore, products]);
const fetchProducts = useCallback(
async (firstLoad) => {
setLoading(true);
const data = await fetch(
`https://dummyjson.com/products?limit=10&skip=${offsetRef.current}&select=title,price,brand,category,thumbnail,rating,description`,
{ headers: { "Accept-Encoding": "gzip,deflate,compress" } }
).then((data) => data.json());
if (data && data.products) {
if (data.products.length < 10) setHasMore(false);
else setHasMore(true);
setOffset(firstLoad ? 10 : offsetRef.current + 10);
const records = firstLoad
? data.products
: [...productsRef.current, ...data.products];
setProducts(records);
}
setLoading(false);
},
[products, offsetRef, productsRef]
);
useEffect(() => {
fetchProducts(true);
}, []);
/**
* Load more records
*/
const loadMore = () => {
setTimeout(() => {
if (hasMoreRef.current) {
fetchProducts(false);
}
}, 500);
};
return (
<ReactSmartTableComponent
headings={[
{ fieldName: "thumbnail", title: "Thumbnail" },
{ fieldName: "title", title: "Title" },
{ fieldName: "price", title: "Price", sortable: true },
{ fieldName: "brand", title: "Brand" },
{ fieldName: "category", title: "Category" },
{ fieldName: "rating", title: "Rating", sortable: true },
{ fieldName: "description", title: "Description" },
{ fieldName: "action_1", title: "Action" },
]}
search
recordsView="infinite-Scroll"
className="theme-table"
items={products}
loading={loading}
loadMore={loadMore}
hasMoreRecords={hasMore}
scopedFields={{
thumbnail: (item) => (
<td>
<img
src={item.thumbnail}
alt="thumbnail"
height={100}
width={100}
/>{" "}
</td>
),
action_1: (item) => (
<td>
<button
onClick={() =>
alert(
`Item Name: ${item.title}\nItem Price: ${item.price}\nItem Brand: ${item.brand}\nItem Description: ${item.description}`
)
}
>
View More
</button>
</td>
),
}}
/>
);
}