数据表格基于原生 table 元素,支持排序、筛选、分页和编辑。定义好 columns,传入 rows,每个单元格就会按类型和语言环境格式化:数字、货币、日期、是或否,以及 enum 值的标签。

它的状态都保存在模型中,可以绑定、保存或发送到服务器:sort、filters、search、page、selected,以及记录用户设定的列宽、顺序、固定和隐藏列的 columnState。不分页时只渲染可见的行,因此十万行滚动起来也像十行一样流畅。

每个单元格都能通过键盘到达;每列的面板都可以对该列排序、筛选、固定、移动、自动调整列宽和隐藏。

搜索、排序与分页

输入文字即可搜索所有列。点击表头即可排序,按住 Shift 键点击可再加入第二个排序列。nuiGridCell 负责绘制状态,exportCsv() 则导出当前显示的内容。

行选择

selection="multiple" 会添加复选框,并绑定所选行的 key。按住 Shift 键点击可选择一个范围;表头的复选框会选中所有符合筛选条件的行。

编辑

双击单元格、按 Enter 键,或直接输入即可编辑。validate 会让编辑器保持打开并显示提示;提交的编辑会更新 rows 并发出 cellEdit。

十万行

不分页时只渲染可见的行。固定的列停留在两侧边缘,columnState 会保留用户调整后的布局。

服务器数据

在 server 模式下,表格按原样显示收到的行,并通过 queryChange 报告每次变化。获取数据期间请设置 loading。