[OodiTable] Implement aggregation/summary rows

Author: joonas-a

services/frontend/src/components/OodiTable/OodiTable.tsx

@@ -5,6 +5,7 @@ import TableContainer from '@mui/material/TableContainer'
 import TableHead from '@mui/material/TableHead'
 
 import { type Table as TableType } from '@tanstack/react-table'
+import { OodiTableAggregationRow } from './components/AggregationRow'
 import { OodiTableDataRow } from './components/Cell'
 import { OodiTableHeaderGroup } from './components/Header'
 import { OodiTablePagination } from './components/Pagination'
@@ -49,6 +50,7 @@ export const OodiTableContainer = <OTData,>({ table }: { table: TableType<OTData
               },
             }}
           >
+            {table.getAggregationRowModel().rows.map(OodiTableAggregationRow)}
             {table.getRowModel().rows.map(OodiTableDataRow)}
           </TableBody>
         </Table>

services/frontend/src/components/OodiTable/components/AggregationRow.tsx

@@ -0,0 +1,57 @@
+import TableCell, { type TableCellProps } from '@mui/material/TableCell'
+import TableRow from '@mui/material/TableRow'
+import Typography from '@mui/material/Typography'
+import { flexRender } from '@tanstack/react-table'
+
+import type { FC } from 'react'
+
+import { AggregationRow } from '../features/aggregationRows'
+import { getCommonPinningStyles } from '../styles'
+
+const OodiTableAggregationCell: FC<TableCellProps> = ({ children, ...props }) => {
+  return (
+    <TableCell
+      {...props}
+      sx={{
+        borderWidth: '0 1px 1px 0',
+        borderStyle: 'solid',
+        borderColor: 'grey.300',
+        padding: '0 1em',
+        height: '3em',
+        ...props?.sx,
+      }}
+    >
+      <Typography
+        sx={{
+          height: '100%',
+          width: '100%',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          whiteSpace: 'nowrap',
+        }}
+      >
+        {children}
+      </Typography>
+    </TableCell>
+  )
+}
+
+export const OodiTableAggregationRow = <OTData,>(row: AggregationRow<OTData>) => (
+  <TableRow key={row.id}>
+    {row.getVisibleCells().map(cell => {
+      const { maxSize } = cell.column.columnDef
+      return (
+        <OodiTableAggregationCell
+          key={cell.id}
+          sx={{
+            ...getCommonPinningStyles(cell.column),
+            maxWidth: maxSize !== Number.MAX_SAFE_INTEGER ? maxSize : '20em',
+          }}
+        >
+          {flexRender(cell.column.columnDef.aggregatedCell, cell.getContext())}
+        </OodiTableAggregationCell>
+      )
+    })}
+  </TableRow>
+)

services/frontend/src/components/OodiTable/components/Header.tsx

@@ -6,7 +6,7 @@ import { flexRender } from '@tanstack/react-table'
 import type { HeaderGroup } from '@tanstack/react-table'
 import type { FC, ReactNode } from 'react'
 
-import { getCommonPinningStyles, getVerticalStyles } from '../styles'
+import { getCommonPinningStyles, verticalStyles } from '../styles'
 import { OodiTableSortIcons } from './SortIcons'
 
 const OodiTableHeader: FC<TableCellProps & { children?: ReactNode }> = ({ children, ...props }) => {
@@ -44,7 +44,7 @@ export const OodiTableHeaderGroup = <OTData,>(headerGroup: HeaderGroup<OTData>,
 
       const sx = {
         cursor: header.column.getCanSort() ? 'pointer' : 'inherit',
-        ...(isVertical && getVerticalStyles()),
+        ...(isVertical && verticalStyles),
         ...getCommonPinningStyles(header.column),
       }
 

services/frontend/src/components/OodiTable/features/aggregationRows.ts

@@ -0,0 +1,160 @@
+import { Cell, CellContext, Column, Row, Table, TableFeature } from '@tanstack/react-table'
+
+/**
+ * This doesn't implement all the features of Row, so be aware of that
+ */
+export interface AggregationRow<TData> extends Row<TData> {
+  getIsAggregationRow: () => true
+}
+
+type AggregationRowValueFn<TData, TValue = unknown> = (ctx: {
+  table: Table<TData>
+  rowId: string
+  column: Column<TData, TValue>
+}) => TValue
+
+interface AggregationRowCellDef<TData, TValue = unknown> {
+  id: string
+  value: TValue | AggregationRowValueFn<TData, TValue>
+}
+
+export type AggregationRowsInput<TData, TValue = unknown> =
+  | AggregationRowCellDef<TData, TValue>[]
+  | ((ctx: { table: Table<TData>; column: Column<TData> }) => AggregationRowCellDef<TData, TValue>[])
+
+export interface AggregationRowModel<TData> {
+  rows: AggregationRow<TData>[]
+  flatRows: AggregationRow<TData>[]
+  rowsById: Record<string, AggregationRow<TData>>
+}
+
+const resolveAggregationRowsArray = <TData, TValue>(
+  table: Table<TData>,
+  column: Column<TData, TValue>
+): AggregationRowCellDef<TData, TValue>[] => {
+  const input = column.columnDef.aggregationRows
+  if (!input) return []
+  return typeof input === 'function' ? (input({ table, column }) ?? []) : input
+}
+
+const collectAggregationRowIds = <TData>(table: Table<TData>): string[] => {
+  const seen: string[] = []
+  const set = new Set<string>()
+
+  table.getAllLeafColumns().forEach(col => {
+    const defs = resolveAggregationRowsArray(table, col)
+    if (!defs) return
+    for (const def of defs) {
+      if (!set.has(def.id)) {
+        set.add(def.id)
+        seen.push(def.id)
+      }
+    }
+  })
+  return seen
+}
+
+const resolveAggregationCellValue = <TData, TValue>(
+  table: Table<TData>,
+  column: Column<TData, unknown>,
+  aggRowId: string
+): TValue | undefined => {
+  const defs = resolveAggregationRowsArray(table, column)
+  const def = defs.find(def => def.id === aggRowId)
+  if (!def) return undefined
+  const { value } = def
+  if (typeof value === 'function') {
+    return (value as AggregationRowValueFn<TData>)({
+      table,
+      rowId: aggRowId,
+      column,
+    }) as TValue
+  }
+  return value as TValue
+}
+
+const buildAggregationRowModel = <TData>(table: Table<TData>): AggregationRowModel<TData> => {
+  const aggRowIds = collectAggregationRowIds(table)
+
+  if (!aggRowIds.length) {
+    return {
+      rows: [],
+      flatRows: [],
+      rowsById: {},
+    } as unknown as AggregationRowModel<TData>
+  }
+
+  const visibleLeafColumns =
+    table.getVisibleLeafColumns?.() ?? table.getAllLeafColumns().filter((col: any) => col.getIsVisible?.() ?? true)
+
+  const rowsById: Record<string, AggregationRow<TData>> = {}
+  const rows: AggregationRow<TData>[] = []
+  const flatRows: AggregationRow<TData>[] = []
+
+  aggRowIds.forEach((aggRowId, index) => {
+    const row: AggregationRow<TData> = {
+      id: aggRowId,
+      index,
+      depth: 0,
+      original: undefined as any,
+      parentId: undefined,
+      _valuesCache: {},
+      _uniqueValuesCache: {},
+      _groupingValuesCache: {},
+      getValue: <TValue>(columnId: string): TValue => {
+        const column = table.getColumn(columnId)
+        return column
+          ? (resolveAggregationCellValue<TData, TValue>(table, column, aggRowId) as TValue)
+          : (undefined as TValue)
+      },
+
+      getVisibleCells: () => {
+        if (!(row as any)._cells) {
+          ;(row as any)._cells = visibleLeafColumns.map(column => {
+            const cell: Cell<TData, unknown> = {
+              id: `${column.id}_${row.id}`,
+              row,
+              column,
+              getValue: () => row.getValue(column.id),
+              getContext: () =>
+                ({
+                  table,
+                  column,
+                  row,
+                  cell,
+                  getValue: cell.getValue,
+                  renderValue: cell.getValue(),
+                }) as CellContext<TData, unknown>,
+              renderValue: () => cell.getValue(),
+            } as Cell<TData, unknown>
+            return cell
+          })
+        }
+        return (row as any)._cells as Cell<TData, unknown>[]
+      },
+
+      /** Unimplemented and redundant, use getVisibleCells instead */
+      getAllCells: () => undefined,
+      getLeafRows: () => [row],
+      getParentRow: () => undefined,
+      subRows: [],
+      getIsAggregationRow: () => true,
+    } as unknown as AggregationRow<TData>
+
+    rows.push(row)
+    flatRows.push(row)
+    rowsById[row.id] = row
+  })
+
+  return { rows, flatRows, rowsById }
+}
+
+export const AggregationRowFeature: TableFeature<any> = {
+  createTable: <TData>(table: Table<TData>) => {
+    table.getAllAggregationRowIds = () => collectAggregationRowIds(table)
+
+    table.hasAggregationRows = () => collectAggregationRowIds(table).length > 0
+
+    table.getAggregationRowModel = () => buildAggregationRowModel(table)
+  },
+}

services/frontend/src/components/OodiTable/features/declarations.d.ts

@@ -0,0 +1,38 @@
+/* eslint-disable import-x/no-unused-modules */
+export {}
+
+import '@tanstack/react-table'
+
+import { AggregationRowModel, AggregationRowsInput } from './aggregationRows'
+import { VerticalHeaders } from './verticalHeader'
+
+declare module '@tanstack/react-table' {
+  interface TableState extends VerticalHeaders {}
+
+  interface ColumnDefBase<TData, TValue = unknown> {
+    /**
+     * Accepts two kinds of inputs:
+     *
+     * 1. An array directly `{ id: String, value: T }[]`
+     * 2. A function `({ table, column }) => {id: String, value:T}[]`
+     *
+     * `id` is used for grouping
+     *
+     * Use same `id` on multiple rows to supply data to the same aggregation row,
+     * or different `id` to create multiple rows.
+     *
+     * Order matters and is based on the first occurence of id.
+     */
+    aggregationRows?: AggregationRowsInput<TData, TValue>
+  }
+
+  interface Table<TData> {
+    getAggregationRowModel: () => AggregationRowModel<TData>
+    getAllAggregationRowIds: () => string[]
+    hasAggregationRows: () => boolean
+  }
+
+  interface Row {
+    getIsAggregationRow?: () => boolean
+  }
+}

services/frontend/src/components/OodiTable/features/index.ts

@@ -0,0 +1,2 @@
+export { VerticalHeaderFeature } from './verticalHeader'
+export { AggregationRowFeature } from './aggregationRows'

services/frontend/src/components/OodiTable/features/verticalHeader.ts

@@ -0,0 +1,14 @@
+import { TableFeature } from '@tanstack/react-table'
+
+export interface VerticalHeaders {
+  useVerticalHeaders: string[]
+}
+
+export const VerticalHeaderFeature: TableFeature<unknown> = {
+  getInitialState: (state): VerticalHeaders => {
+    return {
+      useVerticalHeaders: [],
+      ...state,
+    }
+  },
+}

services/frontend/src/components/OodiTable/index.tsx

@@ -1,28 +1,10 @@
-// 03-07-2025 summer hackathon never forget
-
-import type { ColumnDef, TableFeature, TableOptions } from '@tanstack/react-table'
+import type { ColumnDef, TableOptions } from '@tanstack/react-table'
 import { useReactTable, getCoreRowModel, getPaginationRowModel, getSortedRowModel } from '@tanstack/react-table'
 import { useState } from 'react'
 
+import { AggregationRowFeature, VerticalHeaderFeature } from './features'
 import { OodiTableContainer } from './OodiTable'
 
-interface VerticalHeaders {
-  useVerticalHeaders: string[]
-}
-
-const VerticalHeaderFeature: TableFeature<unknown> = {
-  getInitialState: (state): VerticalHeaders => {
-    return {
-      useVerticalHeaders: [],
-      ...state,
-    }
-  },
-}
-
-declare module '@tanstack/react-table' {
-  interface TableState extends VerticalHeaders {}
-}
-
 /**
  * In loving memory of SortableTable
  *
@@ -54,7 +36,7 @@ export const OodiTable = <TData,>({
   }
 
   const table = useReactTable<TData>({
-    _features: [VerticalHeaderFeature],
+    _features: [VerticalHeaderFeature, AggregationRowFeature],
     data,
     columns,
     getCoreRowModel: getCoreRowModel(),

services/frontend/src/components/OodiTable/styles.ts

@@ -20,10 +20,10 @@ export const getCommonPinningStyles = <TData>(column: Column<TData>): SxProps<Th
     : {}
 }
 
-export const getVerticalStyles = (): SxProps<Theme> => ({
+export const verticalStyles: SxProps<Theme> = {
   overflow: 'visible',
   borderWidth: '1px 1px 1px 0',
   borderStyle: 'solid',
   borderColor: 'grey.300',
-  padding: '0.1em',
-})
+  padding: '0.5em',
+}