From 91c7508e1b8e4bc3ff7559d73e92fa16bf03539c Mon Sep 17 00:00:00 2001
From: Trung-Tin Pham <60747384+AtelyPham@users.noreply.github.com>
Date: Tue, 11 Feb 2025 17:19:59 +0700
Subject: [PATCH] feat(webb-ui): Pass table to row click handler, add single
 row expand for vaults table

---
 apps/tangle-dapp/src/hooks/useVaultTableData.tsx       | 10 +++++++++-
 libs/webb-ui-components/src/components/Table/Table.tsx |  4 ++--
 libs/webb-ui-components/src/components/Table/types.ts  |  4 ++--
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/apps/tangle-dapp/src/hooks/useVaultTableData.tsx b/apps/tangle-dapp/src/hooks/useVaultTableData.tsx
index e1d6c6172..3891c7396 100644
--- a/apps/tangle-dapp/src/hooks/useVaultTableData.tsx
+++ b/apps/tangle-dapp/src/hooks/useVaultTableData.tsx
@@ -75,8 +75,16 @@ const useVaultTableData = ({
 
   const tableProps = useMemo<ComponentProps<typeof VaultsTable>['tableProps']>(
     () => ({
-      onRowClick(row) {
+      onRowClick(row, table) {
         if (!row.getCanExpand()) return;
+
+        // Close all other rows
+        table.getRowModel().rows.forEach((r) => {
+          if (r.id !== row.id && r.getIsExpanded()) {
+            r.toggleExpanded(false);
+          }
+        });
+
         return row.toggleExpanded();
       },
       getExpandedRowContent(row) {
diff --git a/libs/webb-ui-components/src/components/Table/Table.tsx b/libs/webb-ui-components/src/components/Table/Table.tsx
index 7f02ea921..63329fd88 100644
--- a/libs/webb-ui-components/src/components/Table/Table.tsx
+++ b/libs/webb-ui-components/src/components/Table/Table.tsx
@@ -99,10 +99,10 @@ export const Table = <T extends RowData>({
 
       return (eve: React.MouseEvent<HTMLTableRowElement>) => {
         eve.preventDefault();
-        onRowClick(row);
+        onRowClick(row, table);
       };
     },
-    [onRowClick],
+    [onRowClick, table],
   );
 
   return (
diff --git a/libs/webb-ui-components/src/components/Table/types.ts b/libs/webb-ui-components/src/components/Table/types.ts
index a22ead1c6..f5c90f661 100644
--- a/libs/webb-ui-components/src/components/Table/types.ts
+++ b/libs/webb-ui-components/src/components/Table/types.ts
@@ -1,4 +1,4 @@
-import type { Row, RowData, useReactTable } from '@tanstack/react-table';
+import type { Row, RowData, Table, useReactTable } from '@tanstack/react-table';
 import type {
   IWebbComponentBase,
   PropsOf,
@@ -82,7 +82,7 @@ export interface TableProps<T extends RowData, E extends HTMLElement>
   /**
    * Handle when the row is clicked
    */
-  onRowClick?: (row: Row<T>) => void;
+  onRowClick?: (row: Row<T>, table: Table<T>) => void;
 
   /**
    * The optional ref to forward to the table component