Add row-number column to tables

frontend/src/components/Table/InsightsTable.tsx

@@ -1,9 +1,17 @@
 "use client";
 
-import React, { useState } from "react";
+import React, { useMemo, useState } from "react";
 import { CSVLink } from "react-csv";
 import { DebounceInput } from "react-debounce-input";
-import { MdAdd, MdClose, MdCloudDownload, MdColorLens, MdRemove, MdSearch } from "react-icons/md";
+import {
+  MdAdd,
+  MdClose,
+  MdCloudDownload,
+  MdColorLens,
+  MdFormatListNumbered,
+  MdRemove,
+  MdSearch,
+} from "react-icons/md";
 
 import { ColumnDef } from "@tanstack/react-table";
 
@@ -21,6 +29,7 @@ const InsightsTable = ({
   csvFilename,
   toggleDisableHighlight,
   includeKey = true,
+  defaultShowRowNumbers = true,
 }: {
   title: string;
   data: any[];
@@ -31,18 +40,26 @@ const InsightsTable = ({
   csvFilename: string;
   toggleDisableHighlight?: () => void;
   includeKey?: boolean;
+  defaultShowRowNumbers?: boolean;
 }) => {
   const [showSearch, setShowSearch] = useState(false);
   const [search, setSearch] = useState("");
+  const [showRowNumbers, setShowRowNumbers] = useState(defaultShowRowNumbers);
 
   const [expanded, setExpanded] = useState(false);
 
   const expandable = detailedData?.length > 0;
   const currData = expanded ? detailedData : data;
   const currColumns = expanded ? detailedColumns : columns;
 
-  const filteredData = currData.filter((row) =>
-    searchCols.some((col) => row[col].toString().toLowerCase().includes(search.toLowerCase()))
+  // Memoized so toggling display-only state (e.g. row numbers) does not hand
+  // TanStack a new data array, which would reset pagination to page 1.
+  const filteredData = useMemo(
+    () =>
+      currData.filter((row) =>
+        searchCols.some((col) => row[col].toString().toLowerCase().includes(search.toLowerCase()))
+      ),
+    [currData, search, searchCols]
   );
 
   const headerClassName = () => "border-b-2 border-gray-800";
@@ -86,6 +103,12 @@ const InsightsTable = ({
         <div className="tooltip" data-tip="Search">
           <MdSearch className="hover_icon ml-2" onClick={() => setShowSearch(!showSearch)} />
         </div>
+        <div className="tooltip" data-tip="Toggle Row Numbers">
+          <MdFormatListNumbered
+            className="hover_icon ml-2"
+            onClick={() => setShowRowNumbers(!showRowNumbers)}
+          />
+        </div>
         {toggleDisableHighlight && (
           <div className="tooltip" data-tip="Toggle Highlight">
             <MdColorLens className="hover_icon ml-2" onClick={toggleDisableHighlight} />
@@ -121,6 +144,7 @@ const InsightsTable = ({
           headerCellClassName={headerCellClassName}
           rowClassName={rowClassName}
           cellClassName={cellClassName}
+          showRowNumbers={showRowNumbers}
         />
       </div>
       {includeKey && <TableKey />}

frontend/src/components/Table/Table.tsx

@@ -23,6 +23,7 @@ const Table = ({
   headerCellClassName,
   rowClassName,
   cellClassName,
+  showRowNumbers = false,
 }: {
   data: any[];
   columns: ColumnDef<any, any>[];
@@ -31,6 +32,7 @@ const Table = ({
   headerCellClassName: (header: any) => string;
   rowClassName: (row: any) => string;
   cellClassName: (cell: any) => string;
+  showRowNumbers?: boolean;
 }) => {
   const [sorting, setSorting] = useState<SortingState>([]);
 
@@ -68,13 +70,22 @@ const Table = ({
     .slice(0, -1);
 
   const showColDividers = table.getHeaderGroups().length > 1;
+  const numHeaderRows = table.getHeaderGroups().length;
+
+  // Row numbers follow the current sort and filter, and continue across pages
+  const rowNumberClassName = "px-1 md:px-2 text-xs text-gray-500";
 
   return (
     <div className="text-sm">
       <table>
         <thead className={headerClassName()}>
           {table.getHeaderGroups().map((headerGroup, i) => (
             <tr key={headerGroup.id}>
+              {showRowNumbers && i === 0 && (
+                <th rowSpan={numHeaderRows} className={rowNumberClassName}>
+                  #
+                </th>
+              )}
               {headerGroup.headers.map((header, j) => {
                 return (
                   <th
@@ -113,8 +124,11 @@ const Table = ({
           ))}
         </thead>
         <tbody>
-          {table.getRowModel().rows.map((row) => (
+          {table.getRowModel().rows.map((row, i) => (
             <tr key={row.id} className={rowClassName(row)}>
+              {showRowNumbers && (
+                <td className={rowNumberClassName}>{pageIndex * pageSize + i + 1}</td>
+              )}
               {row.getVisibleCells().map((cell, j) => (
                 <td
                   key={cell.id}