# Data tables for trading in React

> 9 Trading table components for React and Tailwind: open positions with liquidation price, holdings, a trade journal, a fills blotter and live feeds.

The tables a trading screen lives on. Open positions with entry, mark and liquidation price, holdings with weight bars, a trade journal, a blotter that streams fills, a watchlist, and a live feed that keeps your place while new rows arrive. Figures are tabular and right aligned, so columns stay still while prices move.

## Components

### Positions Table

An open positions table for futures and margin trading with entry, mark, liquidation price and unrealised P&L, plus hold to close.

```bash
npx shadcn@latest add @ssych/positions-table
```

Live preview: https://ssych.com/library/positions-table · Plain text: https://ssych.com/library/positions-table.md

### 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.

```bash
npx shadcn@latest add @ssych/holdings-table
```

Live preview: https://ssych.com/library/holdings-table · Plain text: https://ssych.com/library/holdings-table.md

### Trade 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.

```bash
npx shadcn@latest add @ssych/trade-journal-table
```

Live preview: https://ssych.com/library/trade-journal-table · Plain text: https://ssych.com/library/trade-journal-table.md

### Fills Blotter

A live order fills blotter for brokers and trading desks, streaming executions that land as working and resolve to filled or rejected.

```bash
npx shadcn@latest add @ssych/fills-blotter
```

Live preview: https://ssych.com/library/fills-blotter · Plain text: https://ssych.com/library/fills-blotter.md

### Order Book

A crypto exchange order book with bids, asks and depth bars, reading the cumulative size and value up to any price level.

```bash
npx shadcn@latest add @ssych/order-book
```

Live preview: https://ssych.com/library/order-book · Plain text: https://ssych.com/library/order-book.md

### Trade Tape

A live time and sales tape for trading terminals, streaming prints coloured by side and sized by volume, with block trades highlighted.

```bash
npx shadcn@latest add @ssych/trade-tape
```

Live preview: https://ssych.com/library/trade-tape · Plain text: https://ssych.com/library/trade-tape.md

### Watchlist Stack

A stock watchlist with an intraday sparkline, price and daily move per ticker, scrubbable for the price at any moment.

```bash
npx shadcn@latest add @ssych/watchlist-stack
```

Live preview: https://ssych.com/library/watchlist-stack · Plain text: https://ssych.com/library/watchlist-stack.md

### Market Event Feed

A market events feed grouped by day, each headline with its ticker, price and move, for stock research and trading dashboards.

```bash
npx shadcn@latest add @ssych/event-feed
```

Live preview: https://ssych.com/library/event-feed · Plain text: https://ssych.com/library/event-feed.md

### New Items Pill

A live trade feed that holds your place while new rows arrive and counts them into a pill, for tapes, alerts and activity feeds.

```bash
npx shadcn@latest add @ssych/new-items-pill
```

Live preview: https://ssych.com/library/new-items-pill · Plain text: https://ssych.com/library/new-items-pill.md


## Questions

### Do these tables virtualise long lists?

No. They are sized for the rows a trading screen shows at once. For tens of thousands of rows, a data grid fits better: the ReUI data grid virtualises rows, and AG Grid does too, with grouping and pivots in its paid Enterprise edition.

### Can I add my own columns?

Yes. The source lands in your project, so columns, formats and row actions are yours to change.

## Links

- This page: https://ssych.com/library/s/trading-tables
- All components: https://ssych.com/llms-full.txt