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.
6 components, installable with the shadcn CLI.
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.
View componentTrade Journal Table
A trade journal table for crypto and stock traders, with the open position lit and every closed trade settled to a win or loss.
View componentFills Blotter
A live order fills blotter for brokers and trading desks, streaming executions that land as working and resolve to filled or rejected.
View componentAPI Request Log
An API request log for developer dashboards, with method, path, status and latency per call and the response body unfolding inline.
View componentTrade Tape
A live time and sales tape for trading terminals, streaming prints coloured by side and sized by volume, with block trades highlighted.
View componentNotification Inbox
A notification inbox for SaaS and trading apps, with unread markers that clear as you read and a mark all as read action.
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