多列排序 + 列重排：Shift+点击表头追加次级排序（徽标 = 优先级序号）；拖表头换位（影子 + 插入指示线），完成派 icen:table-column-reorder
行分组 + 聚合：按部门分组（组名 + 计数 + 聚合 chip），点击组头折叠派 icen:table-group-toggle，状态跨 setData 保持
单元格编辑：双击或 Enter 进入编辑——金额列数字校验（非法值抖动不提交），状态列下拉选择；提交派 icen:table-cell-edit，宿主调 updateCell 采纳
右冻结 + 汇总行：操作列右固定（sticky 偏移按列宽累计）；表尾合计行钉住不滚动，按筛选后数据实时重算
汇总行：summaryRow 逐列规格（sum/avg/count/min/max/label），true = 复用列 aggregate
键盘导航 + 复制：方向键移动焦点格（Home/End 行首末、PageUp/Down 翻屏跨页），Ctrl/Cmd+C 复制当前格或选中行集（TSV）
<div class="demo-col-wide" style="width:100%"> <p class="chart-cap">多列排序 + 列重排：Shift+点击表头追加次级排序（徽标 = 优先级序号）；拖表头换位（影子 + 插入指示线），完成派 icen:table-column-reorder</p> <div id="dtv-multisort"></div> <p class="chart-cap">行分组 + 聚合：按部门分组（组名 + 计数 + 聚合 chip），点击组头折叠派 icen:table-group-toggle，状态跨 setData 保持</p> <div id="dtv-group"></div> <p class="chart-cap">单元格编辑：双击或 Enter 进入编辑——金额列数字校验（非法值抖动不提交），状态列下拉选择；提交派 icen:table-cell-edit，宿主调 updateCell 采纳</p> <div id="dtv-edit"></div> <p class="chart-cap">右冻结 + 汇总行：操作列右固定（sticky 偏移按列宽累计）；表尾合计行钉住不滚动，按筛选后数据实时重算</p> <div id="dtv-frozen"></div> <p class="chart-cap">汇总行：summaryRow 逐列规格（sum/avg/count/min/max/label），true = 复用列 aggregate</p> <div id="dtv-summary"></div> <p class="chart-cap">键盘导航 + 复制：方向键移动焦点格（Home/End 行首末、PageUp/Down 翻屏跨页），Ctrl/Cmd+C 复制当前格或选中行集（TSV）</p> <div id="dtv-keys"></div></div>特性
- 排序：单列 / 多列排序——Shift+点击追加次级，徽标显示优先级
- 列：拖拽重排（冻结分区互不跨越）、显隐、列宽拖拽、左 / 右冻结
- 数据：搜索 / 筛选 / 多选 / 分页 / 虚拟滚动 / 行展开 / 行右键 / CSV 导出
- 分组：
groupBy行分组聚合，组头可折叠，状态跨setData保持 - 编辑：
text/number/select单元格编辑，事件 + 回调双通道 - 汇总：
summaryRow按筛选后数据实时重算（sum/avg/count等） - 键盘：roving tabindex 方向键导航，Ctrl/Cmd+C 复制当前格或选中行（TSV）
编辑提交派 icen:table-cell-edit，宿主调 updateCell 采纳或 setData 整体替换；管线缓存，零依赖。
接口
- 导出
-
createTable - 事件
-
icen:table-cell-editicen:table-column-reordericen:table-column-resizeicen:table-columns-changeicen:table-exporticen:table-filter-changeicen:table-group-toggleicen:table-page-changeicen:table-page-size-changeicen:table-row-clickicen:table-row-toggleicen:table-search-changeicen:table-selection-changeicen:table-sort-changedetail 契约见IcenEventMap - 类型
dist/behaviors/datatable.d.mts（随 npm 包发布，含全部 JSDoc 约束）
安装
bun add @icen.ai/uipnpm add @icen.ai/uinpm install @icen.ai/uiyarn add @icen.ai/ui一行引入该组件（CSS 与 behavior 自动带上，无需关心内部 CSS 文件名）：
import '@icen.ai/ui/kit/datatable';也可以用脚手架直接打印引入行：
bunx --bun @icen.ai/ui add datatable
Astro 项目注意：kit 入口里的 CSS import 在页面 <script> 里会被 Astro 的 client bundle 摇掉——请改在布局 frontmatter 里引 CSS（import '@icen.ai/ui/components/datatable.css';），JS 行为仍可走 kit。Vite SPA / webpack 项目无此问题。
用法
import { createTable } from '@icen.ai/ui/kit/datatable';const table = createTable(el, { columns: [ { key: 'name', title: '名称', sortable: true }, { key: 'dept', title: '部门', sortable: true, filterable: true }, { key: 'amount', title: '金额', sortable: true, editable: 'number', aggregate: 'sum' }, { key: 'status', title: '状态', editable: 'select', editOptions: ['todo', 'doing', 'done'] }, { key: 'ops', title: '操作', frozen: 'right', width: '120px' }, // 右冻结 ], data: rows, rowKey: 'id', multiSort: true, // Shift+点击追加次级排序；handle.getSorts()/setSorts() reorderable: true, // 表头拖拽换位（冻结分区互不跨越）；handle.moveColumn(key, toIndex) groupBy: 'dept', // 或 (row) => row.dept；组头聚合 chip 来自 column.aggregate summaryRow: { name: 'label', amount: 'sum', status: 'count' }, // 或 true selectable: true, searchable: true, columnVisibility: true, onCellEdit: (rowKey, field, value, row) => { // 与 icen:table-cell-edit 双通道；宿主决定是否采纳： table.updateCell(rowKey, field, value); // 或整体 table.setData(next) },});table.getSorts(); // [{ key, dir }][]——[0] 是主排序table.setSorts([{ key: 'amount', dir: 'desc' }, { key: 'name', dir: 'asc' }]);table.moveColumn('dept', 0); // 列重排（含冻结分区约束）table.updateCell('42', 'amount', 77.5); // 采纳编辑值table.setData(next); // 组折叠状态按组 key 保持// 行内次要动作：columns.render 返回 .icen-dt-actions 包裹的 .icen-dt-action 按钮，// 自动获得隐式显现（行悬停/聚焦）与触屏 44px 命中；可直接挂 data-icen-tooltip。