Table 表格 - Docs - Artefact

Table 表格

Data Display

智能自动检测

简介

用于展示表格数据的灵活组件。

用法

Product Inventory
Name	Category	Price
Laptop	Electronics	$999.00
Coffee Mug	Home & Kitchen	$15.00

import { Table } from "../components/ui";

export default function MyPage() {
  const columns = [
    { header: "Name", key: "name" },
    { header: "Category", key: "category" },
    { header: "Price", key: "price", align: "end" },
  ];

  const rows = [
    { name: "Laptop", category: "Electronics", price: "$999.00" },
    { name: "Coffee Mug", category: "Home & Kitchen", price: "$15.00" },
  ];

  return (
    <Table
      variant="plain"
      caption="Product Inventory"
      columns={columns}
      rows={rows}
      footer={
        <tr>
          <td colSpan={2}>Total</td>
          <td style={{ textAlign: "end" }}>$1,014.00</td>
        </tr>
      }
    />
  );
}

CMS 页面构建器

该组件可作为 table 区块在页面构建器（content/pages/*.json）中使用。由于行数据无法拥有固定的 CMS 结构，rows 是一个 JSON 编码的字符串字段，在渲染时解析：

{
  "type": "table",
  "columns": [
    { "header": "Room", "key": "room" },
    { "header": "Price", "key": "price", "align": "end" }
  ],
  "rows": "[{\"room\": \"Cabin Loft\", \"price\": \"$180/night\"}, {\"room\": \"Cabin Suite\", \"price\": \"$240/night\"}]",
  "variant": "plain",
  "striped": true
}

属性

属性	类型	说明
`columns`	`TableColumn[]`	表格列的配置。
`rows`	`any[]`	要在表格中显示的数据。

| footer | JSX.Element | 可选的页脚内容。 |

TableColumn

属性	类型	说明