allow clicking table row to invoke callback

UoaWDCC · Jul 28, 2024 · 42e3966 · 42e3966
1 parent 59dfc14
commit 42e3966
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 6 deletions.
diff --git a/client/src/components/generic/ReusableTable/Table.story.tsx b/client/src/components/generic/ReusableTable/Table.story.tsx
@@ -13,25 +13,26 @@ type Story = StoryObj<typeof Table>
 export const FullTable: Story = {
   decorators: [(Story) => <Story />],
   args: {
+    onRowClick: (id) => console.log("table row clicked", id),
     data: [
       {
-        uid: "",
+        uid: "John",
         Name: "John Doe",
         Email: "[email protected]",
         Status: "Member",
         "Membership type": "UOA Student",
         "Date Joined": "12-7-22"
       },
       {
-        uid: "",
+        uid: "Straight Zhao",
         Name: "Ray Zhao",
         Email: "[email protected]",
         Status: "Superior Controller",
         "Membership type": "UOA Student",
         "Date Joined": "12-7-22"
       },
       {
-        uid: "",
+        uid: "Doeshin",
         Name: "Johnathan Doeshin",
         Email: "[email protected]",
         Status: "Member",
@@ -134,6 +135,7 @@ export const MultipleOperations = () => {
       <p>Last deleted id: {deleteMessage}</p>
       <Table<(typeof data)[0], "multiple-operations">
         data={data}
+        onRowClick={() => alert("Row Callback")}
         operationType="multiple-operations"
         rowOperations={[
           {

diff --git a/client/src/components/generic/ReusableTable/Table.tsx b/client/src/components/generic/ReusableTable/Table.tsx
@@ -32,6 +32,12 @@ interface ITable<
    * Pass in a callback for when the last page of the table is reached (i.e go to the next offset if paginating)
    */
   onPageChange?: (isLastPage: boolean) => void
+  /**
+   * **Optional** callback for when a row is clicked.
+   *
+   * @param uid the identifier for the row, typically an id associated with a user
+   */
+  onRowClick?: (uid: string) => void
   /**
    * decides if clicking on the row options will give multiple options or a single one
    */
@@ -154,6 +160,7 @@ const Table = <
   operationType = "none",
   rowOperations,
   onPageChange,
+  onRowClick,
   groupSameRows = false
 }: ITable<T & TableRowObjectWithIdentifier, S>) => {
   // Needs to be zero-indexed
@@ -220,12 +227,15 @@ const Table = <
         currentGroup % 2 === 0 ? "" : "text-dark-blue-100 font-bold"
 
       return (
-        <tr key={index} className="">
+        <tr key={index}>
           {dataKeys.map((key) => {
             return (
               <td
+                onClick={() => {
+                  onRowClick?.(obj[TABLE_ROW_IDENTIFIER_KEY])
+                }}
                 className={`break-keep pb-2 pl-4 pt-2 
-                    ${groupSameRows && rowClass}`}
+                    ${groupSameRows && rowClass} ${!!onRowClick && "cursor-pointer"}`}
                 key={key}
               >
                 {obj[key] || ""}
@@ -240,7 +250,14 @@ const Table = <
         </tr>
       )
     })
-  }, [operationType, rowOperations, dataKeys, currentDataSlice, groupSameRows])
+  }, [
+    operationType,
+    rowOperations,
+    dataKeys,
+    currentDataSlice,
+    groupSameRows,
+    onRowClick
+  ])
 
   return (
     <div className="border-gray-3 h-full w-full  overflow-y-visible rounded-t-sm border bg-white">