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 (
     (
          {`${item.address.street}, ${item.address.city}, ${item.address.state}, ${item.address.zipcode}`}
        ),
        company: (item) => (
          {`${item.company.name}, ${item.company.branch}`}
        ),
      }}
    />
  );
}

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: () =&gt; <p>Loading...</p>,
  }
);

export default function Users({ users }: { users: UserInfo[] }) {
  return (
    &lt;&gt;
      
        <title>Users List</title>
        
        
        
      

       {item.id}.,
          username: (item) =&gt; (
            
              {item.username}
            
          ),
          address: (item) =&gt; (
            &lt;&gt;
              {item.address.suite}
              {item.address.street}
              {`${item.address.city} ${item.address.zipcode}`}
            
          ),
        }}
      /&gt;
    
  );
}

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 (
     (
          
            <img width="{100}" height="{100}" alt="thumbnail" src="{item.thumbnail}">{" "}
          
        ),
        action_1: (item) =&gt; (
          
            <button>
                alert(
                  `Item Name: ${item.title}\nItem Price: ${item.price}\nItem Brand: ${item.brand}\nItem Description: ${item.description}`
                )
              }
            &gt;
              View More
            </button>
          
        ),
      }}
    /&gt;
  );
}

API