Table

Installation

import { Table } from "@olab/components";

Overview

資料表格：欄位標題可以排序，可以加一欄勾選框做多選，也可以分組或展開子列，底部可以接 Pagination。列與列之間沒有分隔線，分組時用交替的淡底區分。

表格列目前沒有 hover 效果（原始碼裡被關掉了），所以整列可以點時，要靠內容本身提示。

Interactive Demo

SORTABLE + SELECTABLE — click a header to cycle sort, tick rows to select

Market	Side	Amount	Price	Status
BTC > $100K EOY	Yes	10 shares	62¢	Open
Fed cuts in June	No	25 shares	38¢	Open
ETH > $5K Q2	Yes	100 shares	12¢	Filled
AAPL earnings beat	Yes	50 shares	71¢	Open
GPT-5 by year-end	No	8 shares	44¢	Cancelled

sort = {"column":"","direction":null} · selectedIndexes = []

State Matrix

HEADER · sortable hover (sim) — Market title in its hover colour

Market	Side	Amount	Price	Status
BTC > $100K EOY	Yes	10 shares	62¢	Open
Fed cuts in June	No	25 shares	38¢	Open
ETH > $5K Q2	Yes	100 shares	12¢	Filled

HEADER · sorted desc — Price

Market	Side	Amount	Price	Status
BTC > $100K EOY	Yes	10 shares	62¢	Open
Fed cuts in June	No	25 shares	38¢	Open
ETH > $5K Q2	Yes	100 shares	12¢	Filled

HEADER · sorted asc — Price

Market	Side	Amount	Price	Status
BTC > $100K EOY	Yes	10 shares	62¢	Open
Fed cuts in June	No	25 shares	38¢	Open
ETH > $5K Q2	Yes	100 shares	12¢	Filled

ROWS · selected (row 2) and all-selected header (indeterminate when partial)

Market	Side	Amount	Price	Status
BTC > $100K EOY	Yes	10 shares	62¢	Open
Fed cuts in June	No	25 shares	38¢	Open
ETH > $5K Q2	Yes	100 shares	12¢	Filled

ROWS · grouped — alternating group background

Market	Side	Amount	Price	Status
Crypto
BTC > $100K EOY	Yes	10 shares	62¢	Open
ETH > $5K Q2	Yes	100 shares	12¢	Filled
Macro
Fed cuts in June	No	25 shares	38¢	Open
Tech
AAPL earnings beat	Yes	50 shares	71¢	Open
GPT-5 by year-end	No	8 shares	44¢	Cancelled

ROWS · expanded parent with child rows

Market	Side	Amount	Price	Status
BTC > $100K EOY	Yes	10 shares	62¢	Open
↳ Fill #1	Yes	6 shares	61¢	Filled
↳ Fill #2	Yes	4 shares	63¢	Filled
Fed cuts in June	No	25 shares	38¢	Open

LOADING · refreshing (loading=true dims the table)

Market	Side	Amount	Price	Status
BTC > $100K EOY	Yes	10 shares	62¢	Open
Fed cuts in June	No	25 shares	38¢	Open
ETH > $5K Q2	Yes	100 shares	12¢	Filled

LOADING · first load (initialLoading=true shows skeleton rows)

Market	Side	Amount	Price	Status

EMPTY

Market	Side	Amount	Price	Status

No data yet.

Examples

WITH PAGINATION — pageSize=2

Market	Side	Amount	Price	Status
BTC > $100K EOY	Yes	10 shares	62¢	Open
Fed cuts in June	No	25 shares	38¢	Open
ETH > $5K Q2	Yes	100 shares	12¢	Filled
AAPL earnings beat	Yes	50 shares	71¢	Open
GPT-5 by year-end	No	8 shares	44¢	Cancelled

Spec

Part	Value	Source class
Header cell	上下 12px	py-3
Header text	14px regular	MediumText text-tertiary font-normal
Header · sortable hover	文字與排序圖示轉亮	group-hover:text-primary
Sort icon	12px	sort / sortAsc / sortDesc · size xs
Body cell	上下 8px	py-2
Body text	14px	MediumText text-primary
Cell padding · 首末欄	桌面 20px · 手機 12px	first:pl-3 last:pr-3 md:first:pl-5 md:last:pr-5
Cell padding · 欄與欄之間	4px	not-first:pl-1 not-last:pr-1
Row · grouped（隔組）/ expanded parent	淡底	bg-white-02
Row · child	較深的淡底	bg-white-05
Row · hover	沒有（原始碼已註解掉）
Checkbox column	24px，用 Checkbox sm	w-6
Loading	整張表 60% 透明度	opacity-60
First load	骨架列，每列高 28px	Skeleton h-7
Empty	高 180px，置中一行文字	h-45 · text-tertiary
Pagination	表格下方 16px	mt-4

數值為 2026-06-11 在 dark 模式下的實測（getComputedStyle）；source class 對照目前的元件原始碼，色票隨目前的 dark / light 模式即時解析。完整量測、狀態細節與已知不一致見 live-ds-spec/table.md。

Usage

多欄、需要比較或排序的資料用 Table：持倉、訂單、交易紀錄。
數字欄靠右對齊（align="right"），文字欄靠左。
第一次載入用 initialLoading（骨架列）；已經有資料、正在更新時用 loading（整張變淡）。
空的時候給一句具體的 emptyText，說明為什麼空、下一步可以做什麼。

Don't

不要拿 Table 排卡片式或一列多行的資料；那種情況用專用的列元件（例如 AssetRow）。
不要用 className 幫列加 hover 底色；元件目前沒有列 hover，要加應該在元件層決定。
不要把整列可點當成唯一的入口；列沒有 hover 提示，至少讓標題看起來可以點。