查询与结果 <ResultGrid />
左边深色代码窗放查询，右边数据表放结果，可把一列标成强调色、把某几行底色加深，底部一行状态。
Template and style descriptions are currently available in Chinese only.
- Group
- 技术 · 数据 · 一条查询和它返回的表
- Component
ResultGrid·#result-grid- Interaction
- 结果表是一个 build 步骤
Good for
- 用一条查询带出一小张事实表
- 演示 SQL、API 查询返回什么
Avoid when
- 结果超过 7 行或 5 列：只留关键行
- 没有查询，只有表：用 CompareTable 或 SpecSheet
Content limits
| 1 | sql 2–6 行，每行 ≤ 40 个字符 |
| 2 | columns 2–5 列，每个 ≤ 14 个字符 |
| 3 | rows 3–7 行，每格 ≤ 14 个字符 |
| 4 | status ≤ 24 个字符 |
| 5 | note ≤ 60 字 |
Fields
| Field | Type | |
|---|---|---|
kicker · required | string | 标题上方的小节名，2–8 字 |
title · required | string | string[] | 页面标题；传数组可手动断行，每项一行 |
lead | string | 一到两句导语，≤ 60 字 |
source | string | 事实出处；页面上有任何数据或事实时必填 |
hint | ReactNode | 页眉中间的操作提示，可用 <kbd> |
sql · required | string[] | 查询，每项一行 |
columns · required | string[] | 列名 |
rows · required | string[][] | 结果行 |
mark | number | 强调色的列序号 |
hot | number[] | 加深底色的行 |
status | string | 表格底部状态行 |
note | string | 查询下方的一句解读 |
Example
<ResultGrid kicker="版本节奏" title="…" sql={['SELECT version, eol', ' FROM …']} columns={['version', 'eol']} rows={[['18', '2030-11-14'], …]} mark={1} status="(5 rows)" />