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

API