Holdings Table
Fund-holdings register — a coin, tabular money columns, YTD returns in a green pill, and the fund weight trailed by a tick-comb bar.
Holdings Table
Fund-holdings register — a coin, tabular money columns, YTD returns in a green pill, and the fund weight trailed by a tick-comb bar.
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.
Install
Adds Holdings Table and its dependencies to your project through the shadcn CLI.
$ npx shadcn@latest add https://ssych.com/r/holdings-table.jsonProps · 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.