Molecule

DataTable

Composed: DataTableHeader + multiple DataTableRows in a VStack. The canonical Sigma data grid. Emits div.ks-vstack.ks-data-table.

Knobs

Density

Locale

Live Preview

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)

DataTable(
  columns: ["Company", "Sector", "Weight", "Gain"],
  rows: [
    ["LVMH",  "Luxury",     "22.5%", "12.3%"],
    ["Apple", "Technology", "28.1%", "18.7%"],
    ["Roche", "Healthcare", "18.4%", "-2.1%"],
  ]
)

Props

Name	Type	Default	Description
columns	[String]	[]	Column header labels
rows	[[String]]	[]	Row data (each row = array of cell values)
density	Density	comfortable	comfortable \| compact \| dense
locale	Locale	en	en \| fr

Used In

PortfolioPro
StrategyGrids
FundsScreener