数据网格
可配置 columns / data 的电子表格：编辑、筛选、导出。
续约表、库存表等场景共用同一 DataGrid：传入 data、columns、getRowId、onDataChange 即可，不要复制演示行数据。
Renewals
安装
npx @joyui/cli add data-grid --yes或通过 JoyUI MCP / CLI 安装。
应用场景
销售续约工作台：列定义来自 CRM 字段，行数据来自 API；编辑后经 onDataChange 写回。
<DataGrid
aria-label="Renewals"
data={rows}
columns={columns}
getRowId={(row) => row.id}
onDataChange={setRows}
height={520}
exportFileName="renewals.csv"
/>API
DataGrid
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| data | 行数据。 | T[] | — | — |
| columns | 列定义。 | DataGridColumn<T>[] | — | — |
| getRowId | 行键。 | (row) => string | — | — |
| onDataChange | 编辑回写。 | (next) => void | — | — |
| height | 可视高度。 | number | — | — |
| className | 合并到根节点的额外类名。 | string | — | — |
DataGridColumn
| 字段 | 说明 | 类型 | 必填 | 示例 |
|---|---|---|---|---|
| key | 字段。 | string | 是 | "account" |
| header | 表头。 | string | 是 | "Account" |
| width | 列宽。 | number | 否 | 180 |
| type | 编辑类型。 | "text"|"number"|"select" | 否 | "select" |
| options | select 选项。 | string[] | 否 | ["EU"] |