Preview Updated 2026-05-10

Data grid

Heavy-duty table with column resize, double-click cell editing, and a sticky header. Built for back-office and data-maintenance workflows.

Basic usage

CfDataGrid extends Table’s column definition with column resizing, cell editing, and a sticky header. The minimal form — configure columns + rows + rowKey — is identical to Table.

ID	姓名	角色	等级
1	Alice Chen	前端	3
2	Bob Wang	后端	2
3	Carol Liu	设计	5
4	Dave Zhang	运维	1

<script setup lang="ts">
import { ref } from 'vue';
import { CfDataGrid, type DataGridColumn } from '@chufix-design/vue';

interface Row { id: string; name: string; role: string; level: number; }

const rows = ref<Row[]>([
{ id: '1', name: 'Alice Chen', role: 'Frontend', level: 3 },
// ...
]);
const columns: DataGridColumn<Row>[] = [
{ key: 'id', title: 'ID', width: 60, sortable: true },
{ key: 'name', title: 'Name', width: 140, sortable: true },
{ key: 'role', title: 'Role', width: 100 },
{ key: 'level', title: 'Level', width: 80, align: 'right', sortable: true },
];
</script>

<template>
<CfDataGrid :columns="columns" :rows="rows" row-key="id" />
</template>

import { CfDataGrid, type DataGridColumn } from '@chufix-design/react';

interface Row { id: string; name: string; role: string; level: number; }
const columns: DataGridColumn<Row>[] = [
{ key: 'id', title: 'ID', width: 60, sortable: true },
{ key: 'name', title: 'Name', width: 140, sortable: true },
{ key: 'role', title: 'Role', width: 100 },
{ key: 'level', title: 'Level', width: 80, align: 'right', sortable: true },
];

<CfDataGrid columns={columns} rows={rows} rowKey="id" />

Column resize

Set resizable: true on a column to let users drag its right edge to change the width. minWidth caps the lower bound so a column can’t be dragged out of sight. Each release fires the columnResize(col, width) event, which you can use to persist the user’s column-width preferences.

ID	姓名	邮箱	角色
1	Alice Chen	[email protected]	前端
2	Bob Wang	[email protected]	后端
3	Carol Liu	[email protected]	设计

把鼠标放到列头右边缘，光标变成 ↔ 即可拖拽。

const columns: DataGridColumn<Row>[] = [
{ key: 'id', title: 'ID', width: 60 },
{ key: 'name', title: 'Name', width: 140, resizable: true, minWidth: 80 },
{ key: 'email', title: 'Email', width: 220, resizable: true, minWidth: 120 },
{ key: 'role', title: 'Role', width: 100, resizable: true },
];

<CfDataGrid :columns="columns" :rows="rows" row-key="id" />

const columns: DataGridColumn<Row>[] = [
{ key: 'id', title: 'ID', width: 60 },
{ key: 'name', title: 'Name', width: 140, resizable: true, minWidth: 80 },
{ key: 'email', title: 'Email', width: 220, resizable: true, minWidth: 120 },
{ key: 'role', title: 'Role', width: 100, resizable: true },
];

<CfDataGrid columns={columns} rows={rows} rowKey="id" />

Cell editing

Set editable: true on a column to enable double-click-to-edit inline mode. Enter commits and fires cellEdit(edit); Esc cancels. The callback receives { row, column, value } so you can write the change back to the data source.

ID	姓名	角色	等级
1	Alice Chen	前端	3
2	Bob Wang	后端	2
3	Carol Liu	设计	5

双击任意单元格进入编辑，Enter 提交，Esc 取消。

function onEdit(edit: DataGridCellEdit<Row>) {
const target = rows.value.find((r) => r.id === edit.row.id);
if (!target) return;
const key = edit.column.dataIndex ?? edit.column.key;
(target as any)[key] = key === 'level' ? Number(edit.value) : edit.value;
}

<CfDataGrid :columns="columns" :rows="rows" row-key="id" @cell-edit="onEdit" />

function onEdit(edit: DataGridCellEdit<Row>) {
setRows((arr) =>
  arr.map((r) =>
    r.id === edit.row.id
      ? { ...r, [edit.column.dataIndex ?? edit.column.key]: edit.value }
      : r,
  ),
);
}

<CfDataGrid columns={columns} rows={rows} rowKey="id" onCellEdit={onEdit} />

Pass maxHeight to enable vertical scrolling — the header sticks to the top of the container. Combined with selectable="multiple", this works well for browsing large datasets.

ID	项目	状态
1	项目 001	进行中
2	项目 002	已完成
3	项目 003	待审核
4	项目 004	进行中
5	项目 005	已完成
6	项目 006	待审核
7	项目 007	进行中
8	项目 008	已完成
9	项目 009	待审核
10	项目 010	进行中
11	项目 011	已完成
12	项目 012	待审核
13	项目 013	进行中
14	项目 014	已完成
15	项目 015	待审核
16	项目 016	进行中
17	项目 017	已完成
18	项目 018	待审核
19	项目 019	进行中
20	项目 020	已完成
21	项目 021	待审核
22	项目 022	进行中
23	项目 023	已完成
24	项目 024	待审核
25	项目 025	进行中
26	项目 026	已完成
27	项目 027	待审核
28	项目 028	进行中
29	项目 029	已完成
30	项目 030	待审核

<CfDataGrid
:columns="columns"
:rows="rows"
row-key="id"
:max-height="280"
selectable="multiple"
/>

<CfDataGrid
columns={columns}
rows={rows}
rowKey="id"
maxHeight={280}
selectable="multiple"
/>

API · DataGrid

Inherits all column props from Table (title / width / align / sortable / dataIndex, etc.) and adds:

Prop	Type	Default	Description
`maxHeight`	`number \| string`	`—`	Container max height; enables sticky thead and vertical scroll
`onCellEdit` (React) / `cell-edit` (Vue)	`(edit) => void`	`—`	Cell edit commit callback
`onColumnResize` / `column-resize`	`(col, width) => void`	`—`	Column-width change callback

DataGridColumn adds to TableColumn:

Prop	Type	Description
`resizable`	`boolean`	Whether the column can be drag-resized
`minWidth`	`number`	Minimum drag width
`editable`	`boolean`	Whether to enable double-click inline editing

The current version does not bundle virtual scroll or column drag-reordering. For datasets larger than 1000 rows, paginate or slice in the layer above and feed the slice into rows.