feat(webb-ui): Pass table to row click handler, add single row expand…

… for vaults table
tangle-network · Feb 11, 2025 · 91c7508 · 91c7508
1 parent e883ce8
commit 91c7508
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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