ICEN UI 设计系统
搜索组件… ⌘K

数据表格

createTable 函数式 API：搜索 / 排序 / 筛选 / 多选（Shift 范围选）/ 分页 / 虚拟滚动（万级行）/ 行展开 / 列宽拖拽 / 列显隐 / 冻结列 / CSV 导出 / 行右键。管线缓存，零依赖。

全功能：搜索 / 排序 / 列筛选 / 多选 / 分页 / 行展开 / 列宽拖拽 / 列显隐 / 导出 / 冻结列 / 右键行

紧凑密度 + 行着色（rowClassName）

虚拟滚动：10,000 行（滚动试试）

<div class="demo-col-wide" style="width:100%">  <p class="chart-cap">全功能：搜索 / 排序 / 列筛选 / 多选 / 分页 / 行展开 / 列宽拖拽 / 列显隐 / 导出 / 冻结列 / 右键行</p>  <div id="dt-main"></div>  <p class="chart-cap" style="margin-top:20px">紧凑密度 + 行着色（rowClassName）</p>  <div id="dt-compact"></div>  <p class="chart-cap" style="margin-top:20px">虚拟滚动：10,000 行（滚动试试）</p>  <div id="dt-virtual"></div></div>

安装

bun 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, width: '160px', frozen: true },    { key: 'status', title: '状态', filterable: true,      render: (v) => pillNode(v) },            // 返回 Node = 嵌套任意组件    { key: 'updated', title: '更新', sortable: true },    { key: 'ops', title: '操作', render: (_v, row) => actionsNode(row) },  ],  data: rows,  rowKey: 'id',                               // 多选/展开跨页保持的依据  searchable: true,                           // 内置搜索（160ms 防抖）  selectable: true,                           // 多选 + 表头三态 + Shift 范围选  pagination: true, pageSize: 10,             // 分页；或 virtual: true 万级行虚拟滚动  resizable: true,                            // 列宽拖拽（默认开）  columnVisibility: true,                     // 工具栏列显隐开关  exportable: true,                           // 工具栏 CSV 导出按钮  density: 'compact',                         // 紧凑密度（可选）  rowClassName: (row) => row.status === '已停止' ? 'row-offline' : '',  expandable: (row) => detailNode(row),       // 行展开（虚拟模式外可用）  contextMenu: (row) => [                     // 行右键（复用 context-menu，kit 已带 menu.css）    { label: '重命名', shortcut: 'F2', onClick: () => toast.ok('重命名') },    { type: 'separator' },    { label: '停止服务', danger: true, onClick: () => toast.warn('已停止') },  ],  onSelectionChange: (rows) => console.log(rows.length),  onSortChange: (key, dir) => console.log(key, dir),}); table.setData(next);      // 换数据table.getData();          // 取当前管线数据（搜索→筛选→排序后）table.exportCSV('服务列表.csv'); // 导出table.showColumn('updated');    // 显示列table.hideColumn('ops');        // 隐藏列table.destroy();