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['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 = ({ return (eve: React.MouseEvent) => { 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 /** * Handle when the row is clicked */ - onRowClick?: (row: Row) => void; + onRowClick?: (row: Row, table: Table) => void; /** * The optional ref to forward to the table component