React-smart-table-component NPM

react-smart-table-component

A smart and fully dynamic React Component purely build with TypeScript which has inbuilt functionality of infinite scroll and pagination.

CodeSandbox

Features

Support of React 18 and Typescript
Generic types for table info such as Headings and Body
No CSS included, Add your customized styles
Infinite scroll feature (Default scroll and UpSide Down Scroll)
Pagination feature
Scoped fields feature

Installation

To install the latest stable version:

npm install --save react-smart-table-component

Sample code for infinite scroll

import { useState, useEffect, useRef, useCallback } from "react";

import ReactSmartTableComponent from "react-smart-table-component";

import "./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
      items={products}
      headings={[
        { fieldName: "thumbnail", title: "Thumbnail" },
        { fieldName: "title", title: "Title" },
        { fieldName: "price", title: "Price" },
        { fieldName: "brand", title: "Brand" },
        { fieldName: "category", title: "Category" },
        { fieldName: "rating", title: "Rating" },
        { fieldName: "description", title: "Description" },
        { fieldName: "action_1", title: "Action" }
      ]}
      loading={loading}
      recordsView="infinite-Scroll"
      className="theme-table"
      hasMoreRecords={hasMore}
      loadMore={loadMore}
      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>
        )
      }}
    />
  );
}

Basic usage:

As class component

import React, { Component } from "react";
import SmartTable from "react-smart-table-component";

export default class App extends Component {
  state = { users: [], hasMore: true };

  loadMore = () => {
    this.setState({
      users: this.state.users.concat([...moreData]),
    });
  };

  render() {
    return (
      <SmartTable
        items={this.state.users}
        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}`}</td>,
          company: (item) => <td>{`${item.company.name}`}</td>,
        }}
        loadMore={this.loadMore}
        hasMoreRecords={this.state.hasMore}
      />
    );
  }
}

As functional component with hooks

import React, { useState } from "react";
import SmartTable from "react-smart-table-component";
export default function Users() {
  const [users, setUsers] = useState([]);
  const [hasMore, setHasMore] = useState(false);

  const loadMore = () => {
    setUsers([...users, ...moreData]);
    setHasMore(true);
  };

  return (
    <SmartTable
      items={users}
      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}`}</td>,
        company: (item) => <td>{`${item.company.name}`}</td>,
      }}
      loadMore={loadMore}
      hasMoreRecords={hasMore}
    />
  );
}