数据表格基于原生 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。