Organism

DataCluster

The canonical Sigma compositional pattern: MetricStrip + DataTable in a VStack. Every surface uses DataCluster as its primary content block. Emits div.ks-vstack.ks-data-cluster.

Knobs

Density

Locale

Live Preview

Holdings 5

Total Weight 100.0%

Average Gain 8.6%

Company

Sector

Weight

Gain

LVMH

Luxury

22.5%

12.3%

Apple

Technology

28.1%

18.7%

Roche

Healthcare

18.4%

-2.1%

Code (Katagami DSL)

DataCluster(
  metrics: [
    .init("Holdings", "5"),
    .init("Total Weight", "100.0%"),
    .init("Average Gain", "8.6%"),
  ],
  table: DataTable(
    columns: ["Company", "Sector", "Weight", "Gain"],
    rows: portfolio.holdings.map { $0.row }
  )
)

Props

Name	Type	Default	Description
metrics	[(label, value)]	[]	MetricStrip items
table	DataTable		Embedded DataTable component
density	Density	comfortable	comfortable \| compact \| dense
locale	Locale	en	en \| fr

Used In

PortfolioPro
FundsScreener