React-smart-table-component NPM

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.

CodeSandbox

Live Demo

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-component

Basic 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>
        ),
      }}
    />
  );
}