数据表格
createTable 函数式 API：内置搜索 / 列排序 / 列筛选 / 多选 / 分页 / 虚拟滚动（万级行）/ 行展开 / 单元格嵌套任意组件 / 行右键菜单（复用 context-menu）。零依赖，数据驱动，handle 可编程控制。
全功能：搜索 / 排序 / 列筛选 / 多选 / 分页 / 行展开 / 右键行
虚拟滚动：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">虚拟滚动：10,000 行（滚动试试）</p> <div id="dt-virtual"></div></div>安装
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, width: '160px' }, { key: 'status', title: '状态', filterable: true, render: (v) => pillNode(v) }, // 返回 Node = 嵌套任意组件；string 走 textContent { key: 'updated', title: '更新', sortable: true }, { key: 'ops', title: '操作', render: (_v, row) => actionsNode(row) }, ], data: rows, rowKey: 'id', // 多选/展开跨页保持的依据 searchable: true, // 内置搜索（160ms 防抖） selectable: true, // 多选 + 表头三态 pagination: true, pageSize: 10, // 分页；或 virtual: true 万级行虚拟滚动 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),}); table.setData(next); // 换数据table.getSelected(); // 取选中行table.setSearch('网关'); // 编程搜索table.setFilter('status', ['运行中']);table.setSort('updated', 'desc');table.destroy();