Merge pull request #19 from Jing27540/pr-76

The pr looks good for me. We only update two files, another changes is made by the pr-76.

Author: Jing27540

public/assets/icons/copy-temp.png

@@ -8,19 +8,18 @@ import {
   getSortedRowModel,
   SortingState,
   useReactTable,
+  ExpandedState,
+  getExpandedRowModel,
 } from "@tanstack/react-table";
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import { Col, Container, Row, Table as BTable } from "react-bootstrap";
+import { BsChevronRight, BsChevronDown } from "react-icons/bs";
 import ColumnFilter from "./ColumnFilter";
 import GlobalFilter from "./GlobalFilter";
 import Pagination from "./Pagination";
 import RowSelectCheckBox from "./RowSelectCheckBox";
 import { FaSearch } from "react-icons/fa";
 
-/**
- * @author Ankur Mundra on May, 2023
- */
-
 interface TableProps {
   data: Record<string, any>[];
   columns: ColumnDef<any, any>[];
@@ -30,6 +29,9 @@ interface TableProps {
   tableSize?: { span: number; offset: number };
   columnVisibility?: Record<string, boolean>;
   onSelectionChange?: (selectedData: Record<any, any>[]) => void;
+  renderSubComponent?: (props: { row: any }) => React.ReactNode;
+  getRowCanExpand?: (row: any) => boolean;
+  disableGlobalFilter?: boolean; // Disable the Global Search
 }
 
 const Table: React.FC<TableProps> = ({
@@ -41,89 +43,104 @@ const Table: React.FC<TableProps> = ({
   onSelectionChange,
   columnVisibility = {},
   tableSize = { span: 12, offset: 0 },
+  renderSubComponent,
+  getRowCanExpand,
+  disableGlobalFilter = false, // // Disable the Global Search
 }) => {
-  const colsPlusSelectable = useMemo(() => {
-    const selectableColumn: any = {
-      id: "select",
-      header: ({ table }: any) => {
-        return (
-          <RowSelectCheckBox
-            {...{
-              checked: table.getIsAllRowsSelected(),
-              indeterminate: table.getIsSomeRowsSelected(),
-              onChange: table.getToggleAllRowsSelectedHandler(),
-            }}
-          />
-        );
-      },
-      cell: ({ row }: any) => {
-        return (
-          <RowSelectCheckBox
-            {...{
-              checked: row.getIsSelected(),
-              disabled: !row.getCanSelect(),
-              indeterminate: row.getIsSomeSelected(),
-              onChange: row.getToggleSelectedHandler(),
-            }}
-          />
-        );
-      },
-      enableSorting: false,
-      enableFilter: false,
-    };
-    return [selectableColumn, ...columns];
-  }, [columns]);
-
   const [rowSelection, setRowSelection] = useState({});
   const [sorting, setSorting] = useState<SortingState>([]);
   const [globalFilter, setGlobalFilter] = useState<string | number>("");
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
   const [columnVisibilityState, setColumnVisibilityState] = useState(columnVisibility);
-  const [isGlobalFilterVisible, setIsGlobalFilterVisible] = useState(showGlobalFilter); // State for global filter visibility
+  const [isGlobalFilterVisible, setIsGlobalFilterVisible] = useState(showGlobalFilter);
+  const [expanded, setExpanded] = useState<ExpandedState>({});
 
   const selectable = typeof onSelectionChange === "function";
   const onSelectionChangeRef = useRef<any>(onSelectionChange);
 
+  const colsPlusExpander = useMemo(() => {
+    if (!renderSubComponent) return columns;
+
+    const expanderColumn: ColumnDef<any, any> = {
+      id: "expander",
+      header: () => null,
+      cell: ({ row }) => {
+        if (getRowCanExpand ? !getRowCanExpand(row) : false) {
+          return null;
+        }
+        return (
+          <button
+            className="btn btn-link p-0"
+            onClick={(e) => {
+              e.stopPropagation();
+              row.toggleExpanded();
+            }}
+          >
+            {row.getIsExpanded() ? <BsChevronDown /> : <BsChevronRight />}
+          </button>
+        );
+      },
+      enableSorting: false,
+      enableColumnFilter: false,
+    };
+
+    const selectableColumn = selectable
+      ? [
+          {
+            id: "select",
+            header: ({ table }: any) => (
+              <RowSelectCheckBox
+                {...{
+                  checked: table.getIsAllRowsSelected(),
+                  indeterminate: table.getIsSomeRowsSelected(),
+                  onChange: table.getToggleAllRowsSelectedHandler(),
+                }}
+              />
+            ),
+            cell: ({ row }: any) => (
+              <RowSelectCheckBox
+                {...{
+                  checked: row.getIsSelected(),
+                  disabled: !row.getCanSelect(),
+                  indeterminate: row.getIsSomeSelected(),
+                  onChange: row.getToggleSelectedHandler(),
+                }}
+              />
+            ),
+            enableSorting: false,
+            enableFilter: false,
+          },
+        ]
+      : [];
+
+    return [...selectableColumn, expanderColumn, ...columns];
+  }, [columns, selectable, renderSubComponent, getRowCanExpand]);
+
   const table = useReactTable({
     data: initialData,
-    columns: selectable ? colsPlusSelectable : columns,
+    columns: colsPlusExpander,
     state: {
       sorting,
       globalFilter,
       columnFilters,
       rowSelection,
       columnVisibility: columnVisibilityState,
+      expanded,
     },
     onSortingChange: setSorting,
     onRowSelectionChange: setRowSelection,
     onGlobalFilterChange: setGlobalFilter,
     onColumnFiltersChange: setColumnFilters,
     onColumnVisibilityChange: setColumnVisibilityState,
+    onExpandedChange: setExpanded,
+    getRowCanExpand,
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
     getFilteredRowModel: getFilteredRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
+    getExpandedRowModel: getExpandedRowModel(),
   });
 
-  const {
-    getState,
-    getHeaderGroups,
-    getRowModel,
-    getCanNextPage,
-    getCanPreviousPage,
-    previousPage,
-    nextPage,
-    setPageIndex,
-    setPageSize,
-    getPageCount,
-  } = table;
-
-  // Used to return early from useEffect() on mount.
-  const firstRenderRef = useRef(true);
-  // This useEffect() watches flatRows such that on change it
-  // calls the onSelectionChange() prop. Technically, it calls
-  // the onSelectionChangeRef.current function if it exists.
-
   const flatRows = table.getSelectedRowModel().flatRows;
 
   useEffect(() => {
@@ -144,6 +161,8 @@ const Table: React.FC<TableProps> = ({
     setIsGlobalFilterVisible(!isGlobalFilterVisible);
   };
 
+  const firstRenderRef = useRef(true);
+
   return (
     <>
       <Container>
@@ -153,75 +172,80 @@ const Table: React.FC<TableProps> = ({
               <GlobalFilter filterValue={globalFilter} setFilterValue={setGlobalFilter} />
             )}
           </Col>
-          <span style={{ marginLeft: "5px" }} onClick={toggleGlobalFilter}>
-            <FaSearch style={{ cursor: "pointer" }} />
-            {isGlobalFilterVisible ? " Hide" : " Show"}
-          </span>{" "}
+          {!disableGlobalFilter && (
+            <span style={{ marginLeft: "5px" }} onClick={toggleGlobalFilter}>
+              <FaSearch style={{ cursor: "pointer" }} />
+              {isGlobalFilterVisible ? " Hide" : " Show"}
+            </span>
+          )}
         </Row>
       </Container>
       <Container>
         <Row>
           <Col md={tableSize}>
             <BTable striped hover responsive size="sm">
               <thead className="table-secondary">
-                {getHeaderGroups().map((headerGroup) => (
+                {table.getHeaderGroups().map((headerGroup) => (
                   <tr key={headerGroup.id}>
-                    {headerGroup.headers.map((header) => {
-                      return (
-                        <th key={header.id} colSpan={header.colSpan}>
-                          {header.isPlaceholder ? null : (
-                            <>
-                              <div
-                                {...{
-                                  className: header.column.getCanSort()
-                                    ? "cursor-pointer select-none"
-                                    : "",
-                                  onClick: header.column.getToggleSortingHandler(),
-                                }}
-                              >
-                                {flexRender(header.column.columnDef.header, header.getContext())}
-                                {{
-                                  asc: " 🔼",
-                                  desc: " 🔽",
-                                }[header.column.getIsSorted() as string] ?? null}
-                              </div>
-                              {showColumnFilter && header.column.getCanFilter() ? (
-                                <ColumnFilter column={header.column} />
-                              ) : null}
-                            </>
-                          )}
-                        </th>
-                      );
-                    })}
+                    {headerGroup.headers.map((header) => (
+                      <th key={header.id} colSpan={header.colSpan}>
+                        {header.isPlaceholder ? null : (
+                          <>
+                            <div
+                              {...{
+                                className: header.column.getCanSort()
+                                  ? "cursor-pointer select-none"
+                                  : "",
+                                onClick: header.column.getToggleSortingHandler(),
+                              }}
+                            >
+                              {flexRender(header.column.columnDef.header, header.getContext())}
+                              {{
+                                asc: " 🔼",
+                                desc: " 🔽",
+                              }[header.column.getIsSorted() as string] ?? null}
+                            </div>
+                            {showColumnFilter && header.column.getCanFilter() ? (
+                              <ColumnFilter column={header.column} />
+                            ) : null}
+                          </>
+                        )}
+                      </th>
+                    ))}
                   </tr>
                 ))}
               </thead>
               <tbody>
-                {getRowModel().rows.map((row) => {
-                  return (
-                    <tr key={row.id}>
-                      {row.getVisibleCells().map((cell) => {
-                        return (
-                          <td key={cell.id}>
-                            {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                          </td>
-                        );
-                      })}
+                {table.getRowModel().rows.map((row) => (
+                  <React.Fragment key={row.id}>
+                    <tr>
+                      {row.getVisibleCells().map((cell) => (
+                        <td key={cell.id}>
+                          {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                        </td>
+                      ))}
                     </tr>
-                  );
-                })}
+                    {row.getIsExpanded() && renderSubComponent && (
+                      <tr>
+                        <td colSpan={row.getVisibleCells().length}>
+                          {renderSubComponent({ row })}
+                        </td>
+                      </tr>
+                    )}
+                  </React.Fragment>
+                ))}
               </tbody>
             </BTable>
             {showPagination && (
               <Pagination
-                nextPage={nextPage}
-                previousPage={previousPage}
-                canNextPage={getCanNextPage}
-                canPreviousPage={getCanPreviousPage}
-                setPageIndex={setPageIndex}
-                setPageSize={setPageSize}
-                getPageCount={getPageCount}
-                getState={getState}
+                nextPage={table.nextPage}
+                previousPage={table.previousPage}
+                canNextPage={table.getCanNextPage}
+                canPreviousPage={table.getCanPreviousPage}
+                setPageIndex={table.setPageIndex}
+                setPageSize={table.setPageSize}
+                getPageCount={table.getPageCount}
+                getState={table.getState}
               />
             )}
           </Col>
@@ -231,4 +255,4 @@ const Table: React.FC<TableProps> = ({
   );
 };
 
-export default Table;
+export default Table;