@earnest-data/earnest-table v0.2.6

earnest-table

A customizable, responsive data table component for React with sorting, filtering, and pagination.

Table of Contents

• Prop Definitions
• Customization (classNames)
• Example Usage

Prop Definitions

Customization (classNames)

Example Usage

import React, { useState, useEffect, useCallback } from "react";
import { DataTable, DataTableColumn, ITabs } from "@earnest-data/earnest-table";
import styles from "./index.module.scss";

const pageSize = 10;

export interface OrderRecord {
  id: string;
  orderAmount: number;
  orderStatus: string;
  city: string;
  state: string;
  processed: boolean;
}

export default function Home() {
  const [data, setData] = useState<OrderRecord[]>([]);
  const [loading, setLoading] = useState(true);
  const [count, setCount] = useState(0);
  const [page, setPage] = useState(1);
  const [count, setCount] = useState(0);
  const [page, setPage] = useState(1);
  const [filters, setFilters] = useState<any>({});
  const [selectedRows, setSelectedRows] = useState<number[]>([]);

  const fetchData = useCallback(async () => {
    // API call to fetch data here
  }, []);

  useEffect(() => {
    fetchData();
  }, [fetchData]);

  const columns: DataTableColumn[] = [
    { header: "ID", accessorKey: "id" },
    { header: "Order Status", accessorKey: "orderStatus" },
    { header: "City", accessorKey: "city", size: 20 },
    { header: "Processed", accessorFn: (row) => (row.processed ? "Yes" : "No") },
  ];

  const orderData = useMemo(() => data, [data]);

  const handleApiDownload = async () => {
    // Make API call for downloading or use default download functionality
  };

  const filterOptions = useMemo(() => [
    {
      label: "Order Status",
      options: ["success", "inprogress", "pending", "failed", "paid"],
      id: "orderStatus",
      value: filters.orderStatus,
      onOptionChange: (value: any) => 
          setFilters((prev: any) => ({ ...prev, orderStatus: value })),,
    },
    {
      label: "Processed",
      id: "processed",
      options: ["true", "false"],
      value: filters.processed,
     onOptionChange: (value: any) =>
          setFilters((prev: any) => ({ ...prev, processed: value === "true" })),
    },
    {
      label: "City",
      id: "city",
      options: ["Delhi", "BOM", "Patna"],
      value: filters.city,
        onOptionChange: (value) =>
          setFilters((prev: any) => ({ ...prev, city: value })),
    },
  ], [filters]);

  const tabs: ITabs = [
    { label: "All", value: undefined },
    { label: "Processed", value: "true" },
    { label: "Not Processed", value: "false" },
  ];

  const onTabChange = (index: number, tab: any) => {
    setFilters((p: any) => ({ ...p, processed: tab.value }));
  };

  const handleRowSelect = (selectedIndices: any) => {
    setSelectedRows(selectedIndices);
  };

  const handleNext = () => {
    setPage((p) => p + 1);
  };

  const handlePrevious = () => {
    setPage((p) => Math.max(p - 1, 1));
  };

  const clearFilters = () => setFilters({});

   const handleDelete = () => {
    console.log("Deleting selected rows:", selectedRows);
  };

  const headerConfig: HeaderConfig = {
    headline: "My Data Table",
    label: "Company Orders",
    description: "Default description text comes here.",
  };

  return (
    <div>
      <DataTable
        columns={columns}
        data={orderData}
        onRowSelect={handleRowSelect}
        filterOptions={filterOptions}
        tabs={tabs}
        onDownload={handleApiDownload}
        onRowClick={(rowData, event) => {
          console.log("Row clicked:", rowData);
        }}
        clearFilters={clearFilters}
        onTabChange={onTabChange}
        onClickNext={handleNext}
        onClickPrevious={handlePrevious}
        page={page}
        totalCount={count}
        pageSize={pageSize}
        headerConfig={headerConfig}
        headerActions={<button>Add New</button>}
        classNames={{
          filterChip: styles.filterChip,
          filterChipIcon: styles.filterChipIcon,
          filterChipLabel: styles.filterChipLabel,
          tableWrapper: styles.tableWrapper,
          dataTable: styles.dataTable,
          tableHeaderCell: styles.tableHeaderCell,
          tableRow: styles.tableRow,
          tableRowCell: styles.tableRowCell,
          headerWrapper: styles.headerWrapper,
          headerActionsWrapper: styles.headerActionsWrapper,
          heading: styles.heading,
          subHeading: styles.subHeading,
          badge: styles.badge,
          downloadButton: styles.downloadButton,
          downloadButtonIcon: styles.downloadButtonIcon,
          toolbar: styles.toolbar,
          tabsWrapper: styles.tabsWrapper,
          tabsPanel: styles.tabsPanel,
          tabItem: styles.tabItem,
          selectedTab: styles.selectedTab,
          paginationWrapper: styles.paginationWrapper,
          paginationInfo: styles.paginationInfo,
          paginationButtonWrapper: styles.pagintaionButtonWrapper,
          paginationButtonPrevious: styles.paginationButtonPrevious,
          paginationButtonNext: styles.paginationButtonNext,
          filterChipDropdown: styles.filterChipDropdown,
          spinner: styles.spinner
        }}
        filterContent={
          selectedRows.length > 0 && (
            <button onClick={handleDelete} style={{ marginLeft: "auto" }}>
              Delete Selected
            </button>
          )
        }
        disablePagination={false}
        disableDownload={true}
        errorMessage="No data to display"
        showClearFiltersButton={false}
        showSearchInput={true}
        enableCheckboxSelection={true}
      />
    </div>
  );
}