Dense data table components for React
Tables that hold up with hundreds of rows on screen. Numbers are tabular and right aligned, headers stay put, and the row treatments are quiet enough that the data leads. These come out of trading and infrastructure screens, where the table is the product rather than a section of it.
7 components, installable with the shadcn CLI.
Holdings Table
A fund-holdings register with money columns, YTD pills, and weight bars.
View componentTrade Journal Table
A trade log where the open position is lit and closed ones settle to win or loss pills.
View componentFills Blotter
A streaming fills table. New fills land as working, then resolve to filled or rejected.
View componentRequest Log
An API log with status pills and paths. Click a row to unfold its response body.
View componentTrade Tape
Live time and sales. Prints stream in, side-coloured and sized by magnitude.
View componentComb Rows
A comparison where every row is a ruler of ticks and the cursor tick stands tallest.
View componentInbox
A notification inbox where unread dots dissolve on read and mark-all clears the column.
View component
Questions
- Do they handle sorting and long lists?
- They ship with sorting and the layout holds at long row counts. Virtualisation is left to you, since the right approach depends on your data source.
- Can I change the columns?
- Yes. You install the source into your project, so columns, formatting and row actions are yours to edit.
Browse by type
Install one in a minute
Every component here installs with the shadcn CLI and lands in your project as source you own.
Read the install guide