Holdings Table

A fund holdings table with market value, price, YTD return and portfolio weight bars, sortable by any column, for ETF and wealth apps.

Holdings Table

A fund holdings table with market value, price, YTD return and portfolio weight bars, sortable by any column, for ETF and wealth apps.

When to use it

For position and allocation tables where weight is as important as value. The tick-comb bar makes relative weight scannable down the column, which right-aligned percentages alone do not.

Props · HoldingsTable

Prop	Type	Default
holdings?	Holding[]	DEFAULT_HOLDINGS
title?	string	"Top 10 holdings"
maxWeight?	numberWeight that fills the whole tick comb.	10
valueLabel?	stringColumn header over `marketValue`.	"Market value"
priceLabel?	stringColumn header over `price`.	"Current price"
returnLabel?	stringColumn header over the return pill — name the window the number covers.	"YTD returns"
weightLabel?	stringColumn header over the weight comb — name the base the share is taken of.	"Percentage of fund"

Generated from the component source. Run npm run props:extract after changing a signature.