jenish-data-table v2.0.0

DataTable Component

A reusable, customizable data table component built using Material-UI, designed to support sorting, pagination, and search functionality.

Installation

To install the component, run:

npm i jenish-data-table

usage

import React, { useState } from "react";
import DataTable from "your-package-name";

const App = () => {
  const [page, setPage] = useState(0);
  const [rowsPerPage, setRowsPerPage] = useState(5);
  const [searchValue, setSearchValue] = useState("");

  const headCols = [
    {
      id: "name",
      name: "Name",
      sorting: true,
      sortingName: "name",
      order: "asc",
      width: "25%",
    },
    {
      id: "age",
      name: "Age",
      sorting: true,
      sortingName: "age",
      order: "desc",
      width: "25%",
    },
    { id: "address", name: "Address", width: "50%" },
  ];

  const rows = [
    ["John Doe", "30", "1234 Elm Street"],
    ["Jane Doe", "25", "5678 Oak Street"],
  ];

  const totalRecords = 100;

  const handleChangePage = (event, newPage) => {
    setPage(newPage - 1);
  };

  const handleChangeRowsPerPage = (event) => {
    setRowsPerPage(parseInt(event.target.value, 10));
  };

  const handleSearch = (event) => {
    setSearchValue(event.target.value);
    // Add search functionality here
  };

  const handleSortBy = (colName) => {
    // Handle sort logic here
  };

  const handleOrder = (order) => {
    // Handle order change here
  };

  return (
    <DataTable
      headCols={headCols}
      rows={rows}
      page={page}
      rowsPerPage={rowsPerPage}
      totalRecords={totalRecords}
      handleChangePage={handleChangePage}
      handleChangeRowsPerPage={handleChangeRowsPerPage}
      searchRecord={handleSearch}
      searchValue={searchValue}
      changeSortBy={handleSortBy}
      changeOrder={handleOrder}
      isLoading={false}
      searchPlaceholder="Search records..."
    />
  );
};

export default App;

Props

Features

• Sorting: Allows sorting of columns by ascending or descending order.
• Pagination: Supports pagination with customizable rows per page.
• Search: Includes a search bar to filter rows.
• Loading State: Displays a loading spinner when data is being fetched.