跳到內容
調色盤星雲光譜
選擇版面配色

即時套用,保留目前的亮暗模式。

Table (am-table)

am-table 將可序列化的 columns 與 rows 渲染成原生 <table>,包含 caption、column headers、可選 row headers,以及可用鍵盤聚焦的水平 scrolling region。

<Table
caption="Recent deployments"
striped
stickyHeader
columns={[
{ key: "project", label: "Project", rowHeader: true },
{ key: "status", label: "Status" },
{ key: "updated", label: "Updated", align: "end" },
]}
rows={[
{ project: "Astromer docs", status: "Ready", updated: "2 min ago" },
{ project: "Playground", status: "Review", updated: "18 min ago" },
]}
/>

caption 同時作為 overflow region 的 accessible name;窄螢幕會保留 table 可讀寬度並提供水平滾動。排序、分頁、查詢、row actions 與資料權限由 consumer 控制。