feat: collapsible transaction table (#80)

Author: PatrickDinh

src/assets/icons/chevron-down.svg

@@ -73,7 +73,7 @@ export function BlockDetails({ block }: Props) {
       <Card className={cn('p-4')}>
         <CardContent className={cn('text-sm space-y-2')}>
           <h1 className={cn('text-2xl text-primary font-bold')}>{transactionsLabel}</h1>
-          <TransactionsTable transactions={block.transactions} columns={transactionsTableColumnsWithoutRound} />
+          <TransactionsTable transactions={block.transactions} columns={transactionsTableColumnsWithoutRound} subRowsExpanded={false} />
         </CardContent>
       </Card>
     </div>

src/features/blocks/components/block-details.tsx

@@ -1,27 +1,43 @@
-import { ColumnDef, flexRender, getCoreRowModel, useReactTable, getPaginationRowModel, getExpandedRowModel } from '@tanstack/react-table'
+import {
+  ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+  getPaginationRowModel,
+  getExpandedRowModel,
+  ExpandedState,
+} from '@tanstack/react-table'
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/features/common/components/table'
 import { DataTablePagination } from './data-table-pagination'
+import { useEffect, useState } from 'react'
 
 interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[]
   data: TData[]
   getSubRows?: (row: TData) => TData[]
+  subRowsExpanded?: boolean
 }
 
-export function DataTable<TData, TValue>({ columns, data, getSubRows }: DataTableProps<TData, TValue>) {
+export function DataTable<TData, TValue>({ columns, data, getSubRows, subRowsExpanded }: DataTableProps<TData, TValue>) {
+  const [expanded, setExpanded] = useState<ExpandedState>({})
   const table = useReactTable({
     data,
     paginateExpandedRows: false,
     state: {
-      expanded: true,
+      expanded: expanded,
     },
+    onExpandedChange: setExpanded,
     getSubRows: getSubRows,
     columns,
     getCoreRowModel: getCoreRowModel(),
     getExpandedRowModel: getExpandedRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
   })
 
+  useEffect(() => {
+    table.toggleAllRowsExpanded(subRowsExpanded ?? false)
+  }, [subRowsExpanded, table])
+
   return (
     <div>
       <div className="grid rounded-md border">

src/features/common/components/data-table.tsx

@@ -0,0 +1,7 @@
+import type { SVGProps } from 'react'
+const SvgChevronDown = (props: SVGProps<SVGSVGElement>) => (
+  <svg width="1em" height="1em" viewBox="4 4 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M6 9L12 15L18 9" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+)
+export default SvgChevronDown

src/features/common/components/icons/chevron-down.tsx

@@ -1,6 +1,6 @@
-import { ColumnDef, flexRender, getCoreRowModel, getExpandedRowModel, useReactTable } from '@tanstack/react-table'
+import { ColumnDef, ExpandedState, flexRender, getCoreRowModel, getExpandedRowModel, useReactTable } from '@tanstack/react-table'
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/features/common/components/table'
-import { useCallback, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import { LazyLoadDataTablePagination } from './lazy-load-data-table-pagination'
 import { Loader2 as Loader } from 'lucide-react'
 import { Loadable } from 'jotai/vanilla/utils/loadable'
@@ -10,14 +10,15 @@ interface Props<TData, TValue> {
   columns: ColumnDef<TData, TValue>[]
   createLoadablePage: (pageSize: number) => (pageNumber: number) => Loadable<Promise<ViewModelPage<TData>>>
   getSubRows?: (row: TData) => TData[]
+  subRowsExpanded?: boolean
 }
 
-export function LazyLoadDataTable<TData, TValue>({ columns, createLoadablePage, getSubRows }: Props<TData, TValue>) {
+export function LazyLoadDataTable<TData, TValue>({ columns, createLoadablePage, getSubRows, subRowsExpanded }: Props<TData, TValue>) {
   const [pageSize, setPageSize] = useState(10)
   const useLoadablePage = useMemo(() => createLoadablePage(pageSize), [createLoadablePage, pageSize])
   const [currentPage, setCurrentPage] = useState<number>(1)
   const loadablePage = useLoadablePage(currentPage)
-
+  const [expanded, setExpanded] = useState<ExpandedState>({})
   const nextPage = useCallback(() => {
     setCurrentPage((prev) => prev + 1)
   }, [])
@@ -36,15 +37,20 @@ export function LazyLoadDataTable<TData, TValue>({ columns, createLoadablePage,
   const table = useReactTable({
     data: page?.items ?? [],
     state: {
-      expanded: true,
+      expanded: expanded,
     },
+    onExpandedChange: setExpanded,
     getSubRows: getSubRows,
     columns,
     getCoreRowModel: getCoreRowModel(),
     getExpandedRowModel: getExpandedRowModel(),
     manualPagination: true,
   })
 
+  useEffect(() => {
+    table.toggleAllRowsExpanded(subRowsExpanded ?? false)
+  }, [subRowsExpanded, table])
+
   return (
     <div>
       <div className="grid rounded-md border">

src/features/common/components/lazy-load-data-table/lazy-load-data-table.tsx

@@ -30,7 +30,7 @@ export function GroupTransactionsViewTabs({ group }: Props) {
         <TransactionsGraph transactions={group.transactions} />
       </OverflowAutoTabsContent>
       <OverflowAutoTabsContent value={tableTabId}>
-        <TransactionsTable transactions={group.transactions} columns={transactionsTableColumnsWithoutRound} />
+        <TransactionsTable transactions={group.transactions} columns={transactionsTableColumnsWithoutRound} subRowsExpanded={false} />
       </OverflowAutoTabsContent>
     </Tabs>
   )

src/features/groups/components/group-transactions-view-tabs.tsx

@@ -123,9 +123,6 @@ describe('group-page', () => {
               {
                 cells: ['INDQXWQ...', '/oRSr2u...', 'AACC...EN4A', '1201559522', 'Application Call', ''],
               },
-              {
-                cells: ['Inner 1', 'aWpPwlo...', 'AACC...EN4A', '2PIF...RNMM', 'Payment', '2.770045'],
-              },
             ],
           })
         }

src/features/groups/pages/group-page.test.tsx

@@ -1,7 +1,7 @@
-import { ColumnDef, flexRender, getCoreRowModel, getExpandedRowModel, useReactTable } from '@tanstack/react-table'
+import { ColumnDef, ExpandedState, flexRender, getCoreRowModel, getExpandedRowModel, useReactTable } from '@tanstack/react-table'
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/features/common/components/table'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../common/components/select'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { InnerTransaction, Transaction } from '@/features/transactions/models'
 import { TransactionResult } from '@algorandfoundation/algokit-utils/types/indexer'
 import { useLiveTransactions } from '../data/live-transaction'
@@ -13,6 +13,7 @@ interface Props {
 }
 
 export function LiveTransactionsTable({ filter, columns, getSubRows }: Props) {
+  const [expanded, setExpanded] = useState<ExpandedState>({})
   const [maxRows, setMaxRows] = useState(10)
   const transactions = useLiveTransactions(filter, maxRows)
 
@@ -24,10 +25,15 @@ export function LiveTransactionsTable({ filter, columns, getSubRows }: Props) {
     getSubRows: getSubRows,
     getExpandedRowModel: getExpandedRowModel(),
     state: {
-      expanded: true,
+      expanded: expanded,
     },
+    onExpandedChange: setExpanded,
   })
 
+  useEffect(() => {
+    table.toggleAllRowsExpanded(true)
+  }, [table])
+
   return (
     <div>
       <div className="grid rounded-md border">

src/features/transactions/components/live-transactions-table.tsx

@@ -36,7 +36,7 @@ export function TransactionViewTabs({ transaction }: Props) {
         <TransactionsGraph transactions={[transaction]} />
       </OverflowAutoTabsContent>
       <OverflowAutoTabsContent value={transactionVisualTableTabId}>
-        <TransactionsTable transactions={[transaction]} columns={transactionsTableColumnsWithoutRound} />
+        <TransactionsTable transactions={[transaction]} columns={transactionsTableColumnsWithoutRound} subRowsExpanded={true} />
       </OverflowAutoTabsContent>
     </Tabs>
   )

src/features/transactions/components/transaction-view-tabs.tsx

@@ -8,6 +8,8 @@ import { asTo } from '@/features/common/mappers/to'
 import { InnerTransactionLink } from '@/features/transactions/components/inner-transaction-link'
 import { DisplayAssetAmount } from '@/features/common/components/display-asset-amount'
 import { GroupLink } from '@/features/groups/components/group-link'
+import SvgChevronDown from '@/features/common/components/icons/chevron-down'
+import SvgChevronRight from '@/features/common/components/icons/chevron-right'
 
 const indentationWidth = 20
 
@@ -28,6 +30,11 @@ export const transactionsTableColumns: ColumnDef<Transaction | InnerTransaction>
             marginLeft: `${indentationWidth * row.depth}px`,
           }}
         >
+          <div className={cn('inline-block min-w-6')}>
+            {row.getCanExpand() ? (
+              <button onClick={row.getToggleExpandedHandler()}>{row.getIsExpanded() ? <SvgChevronDown /> : <SvgChevronRight />}</button>
+            ) : null}
+          </div>
           {'innerId' in transaction ? (
             <InnerTransactionLink transactionId={transaction.networkTransactionId} innerTransactionId={transaction.innerId} />
           ) : (