- 分组
- 技术 · 数据 · 一条查询和它返回的表
- 组件
ResultGrid·#result-grid- 交互
- 结果表是一个 build 步骤
适合
- 用一条查询带出一小张事实表
- 演示 SQL、API 查询返回什么
不适合
- 结果超过 7 行或 5 列：只留关键行
- 没有查询，只有表：用 CompareTable 或 SpecSheet
内容上限
| 1 | sql 2–6 行，每行 ≤ 40 个字符 |
| 2 | columns 2–5 列，每个 ≤ 14 个字符 |
| 3 | rows 3–7 行，每格 ≤ 14 个字符 |
| 4 | status ≤ 24 个字符 |
| 5 | note ≤ 60 字 |
字段
| 字段 | 类型 | |
|---|---|---|
kicker · 必填 | string | 标题上方的小节名，2–8 字 |
title · 必填 | string | string[] | 页面标题；传数组可手动断行，每项一行 |
lead | string | 一到两句导语，≤ 60 字 |
source | string | 事实出处；页面上有任何数据或事实时必填 |
hint | ReactNode | 页眉中间的操作提示，可用 <kbd> |
sql · 必填 | string[] | 查询，每项一行 |
columns · 必填 | string[] | 列名 |
rows · 必填 | string[][] | 结果行 |
mark | number | 强调色的列序号 |
hot | number[] | 加深底色的行 |
status | string | 表格底部状态行 |
note | string | 查询下方的一句解读 |
示例代码
<ResultGrid kicker="版本节奏" title="…" sql={['SELECT version, eol', ' FROM …']} columns={['version', 'eol']} rows={[['18', '2030-11-14'], …]} mark={1} status="(5 rows)" />