CompactTable

stable

High-density data table for treasury positions, risk matrices, and compliance grids

import { CompactTable } from "@nodus/design-system/finance"

Loading demo…

Props

Prop	Type	Default	Description
`columns`req	`CompactTableColumn<T>[]`	—	Column definitions with header, key, render function, and alignment
`data`req	`T[]`	—	Row data array
`rowKey`req	`(row: T) => string`	—	Unique key extractor for each row
`density`	`'default' \| 'compact'`	compact	Display density — compact is the finance default
`striped`	`boolean`	true	Zebra striping for readability
`stickyHeader`	`boolean`	true	Sticky header for scrollable tables

columnsrequired

Type CompactTableColumn<T>[]Default —

Column definitions with header, key, render function, and alignment

datarequired

Type T[]Default —

Row data array

rowKeyrequired

Type (row: T) => stringDefault —

Unique key extractor for each row

density

Type 'default' | 'compact'Default compact

Display density — compact is the finance default

striped

Type booleanDefault true

Zebra striping for readability

stickyHeader

Type booleanDefault true

Sticky header for scrollable tables

MobileTouch Target

Row tap targets must be ≥44px tall. Table activates horizontal scroll on narrow viewports — wrap in overflow-x-auto.

Design Rationale

This component was designed to express:

Formatted number display with tabular alignment for financial tables

Change/delta display with severity-based coloring for P&L and returns

Was this helpful?