iter: d16 dataTable 落地列宽 width
This commit is contained in:
ui-arch-bot
@@ -176,6 +176,14 @@
|
||||
"acceptance": "packages/tools/cli/ua.manifest.json（type: tooling）描述 index/list/info/docs/style/verify/mcp 七个子命令与约定，索引包数变 5；AGENTS.md 与 ARCHITECTURE.md 的组件数改成 27；llms.txt / llms-full.txt 重新生成且 CLI 段落可读；npm run check 全绿",
|
||||
"status": "done",
|
||||
"notes": "tooling 类型在 ORDER 表外，排序自然落到末尾（??9 兜底），无需改 CLI 排序逻辑；CLI 清单 docs.components 留空，故不参与 verify 的组件级校验；顺带确认 docs 生成对无组件包不报错"
|
||||
},
|
||||
{
|
||||
"id": "d16",
|
||||
"title": "dataTable 落地内核已定义的列宽 width",
|
||||
"motivation": "table-core 的 ColumnDef 声明了 width?: number | 'flex'，但皮肤层从未消费，列宽完全靠浏览器猜；契约与实现脱节",
|
||||
"acceptance": "dataTable 渲染 colgroup：数字 width 落成固定像素 <col>，'flex' 或不设交给自适应，选择列固定 44px；demo 表格演示 name 160 / age 100 / city flex；manifest 列定义说明与手把手同步；npm run check 全绿",
|
||||
"status": "done",
|
||||
"notes": "用 colgroup 而非逐 th 设宽，保证表头与表体一致且不入侵单元格渲染；未开 table-layout:fixed（nowrap 内容会被裁），宽高仍由内容兜底；pinned 固定列仍未消费（多列 sticky 偏移需测量），留作后续条目"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
+3
-2
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"$schema": "ui-arch-registry-index/0.1",
|
||||
"generatedAt": "2026-10-23T08:57:12.133Z",
|
||||
"generatedAt": "2026-10-23T08:58:43.429Z",
|
||||
"repoRoot": ".",
|
||||
"packages": [
|
||||
{
|
||||
@@ -1223,7 +1223,7 @@
|
||||
"n": "columns",
|
||||
"t": "ColumnDef<T>[]",
|
||||
"r": 1,
|
||||
"d": "列定义：内核字段 { key, header?, sortable? } + 皮肤字段 { align?: left|center|right, format?: (value, row) => string }"
|
||||
"d": "列定义：内核字段 { key, header?, sortable?, width? } + 皮肤字段 { align?, format? }；width 数字为固定像素，'flex' 自适应"
|
||||
},
|
||||
{
|
||||
"n": "filterKey",
|
||||
@@ -1258,6 +1258,7 @@
|
||||
"准备行数据，确保每行有唯一 id（跨页选择与刷新不丢行靠它）",
|
||||
"定义 columns：sortable: true 的列表头可点击排序（升 → 降 → 取消循环），标记箭头 ↑↓↕",
|
||||
"列展示细节用皮肤字段：align 控制表头与单元格对齐，format(value, row) 返回纯文本（走 textContent，不需要转义）",
|
||||
"列宽用内核字段 width：数字（像素）固定该列，'flex' 或不设则按内容自适应",
|
||||
"selectable: true 开启行选择：表头全选框带 indeterminate 半选态，工具栏显示已选计数",
|
||||
"选中行用低视觉比重样式（淡色底 + 弱化文字），选择状态存 rowKey，跨页不丢失",
|
||||
"工具栏输入框即筛选，输入即时过滤并回第 1 页；无匹配时显示空状态行",
|
||||
|
||||
@@ -20,3 +20,4 @@
|
||||
{"time": "2026-10-23T16:55:55+08:00", "id": "d13", "result": "done", "summary": "dataTable 列定义新增皮肤层 TableColumn（align + format），内核 ColumnDef 不变；表头/单元格共用对齐类，format 走 textContent；demo/manifest/llms 同步，check 全绿"}
|
||||
{"time": "2026-10-23T16:56:36+08:00", "id": "d14", "result": "done", "summary": "新增抽屉 drawer：open 信号驱动侧滑、placement/width 可配、footer 操作区、遮罩/×/Esc 关闭并聚焦首元素；demo/manifest/llms 同步，check 全绿"}
|
||||
{"time": "2026-10-23T16:57:22+08:00", "id": "d15", "result": "done", "summary": "CLI 包补 ua.manifest.json（type: tooling，七个子命令 + 约定），注册表 5 包；修正 AGENTS/ARCHITECTURE 过期组件数 17→27；check 全绿"}
|
||||
{"time": "2026-10-23T16:58:51+08:00", "id": "d16", "result": "done", "summary": "dataTable 消费内核列宽 width：colgroup 固定像素 / flex 自适应，选择列 44px；demo 三列演示宽档；manifest/llms 同步，check 全绿"}
|
||||
|
||||
+3
-3
@@ -386,9 +386,9 @@ const content = h(
|
||||
selectable: true,
|
||||
loading: tableLoading,
|
||||
columns: [
|
||||
{ key: 'name', header: '姓名', sortable: true },
|
||||
{ key: 'age', header: '年龄', sortable: true, align: 'right', format: (v) => `${v} 岁` },
|
||||
{ key: 'city', header: '城市', align: 'center' },
|
||||
{ key: 'name', header: '姓名', sortable: true, width: 160 },
|
||||
{ key: 'age', header: '年龄', sortable: true, align: 'right', width: 100, format: (v) => `${v} 岁` },
|
||||
{ key: 'city', header: '城市', align: 'center', width: 'flex' },
|
||||
],
|
||||
pageSize: 5,
|
||||
}), h('div', { class: 'row' }, switchButton({ label: '加载态', checked: tableLoading }))),
|
||||
|
||||
+9
-8
@@ -1,6 +1,6 @@
|
||||
# @ui-arch 组件库 Agent 文档（无图形版）
|
||||
|
||||
> 自动生成于 2026-10-23T08:57:12.133Z，数据源：各包 ua.manifest.json，勿手改。人类版文档站：apps/docs/index.html。
|
||||
> 自动生成于 2026-10-23T08:58:43.429Z，数据源：各包 ua.manifest.json，勿手改。人类版文档站：apps/docs/index.html。
|
||||
> 组件 = 普通函数，传 props 返回 DOM；状态用 signal 双向绑定：读 signal() 写 signal(v)。
|
||||
|
||||
## 快速上手
|
||||
@@ -687,7 +687,7 @@ const name = signal(''); const f = form({ onSubmit: submit }, [formItem({ label:
|
||||
参数：
|
||||
|
||||
- data（必填）：T[] —— 全量行数据，每行须含 id 字段作 rowKey
|
||||
- columns（必填）：ColumnDef<T>[] —— 列定义：内核字段 { key, header?, sortable? } + 皮肤字段 { align?: left|center|right, format?: (value, row) => string }
|
||||
- columns（必填）：ColumnDef<T>[] —— 列定义：内核字段 { key, header?, sortable?, width? } + 皮肤字段 { align?, format? }；width 数字为固定像素，'flex' 自适应
|
||||
- filterKey：string —— 工具栏筛选的列；缺省取第一列
|
||||
- pageSize（默认 5）：number —— 每页行数；缺省 5
|
||||
- selectable（默认 false）：boolean —— 启用行选择列：全选三态（含半选）、行 checkbox、已选计数；缺省 false
|
||||
@@ -705,12 +705,13 @@ dataTable({ data: users, selectable: true, columns: [{ key: 'name', header: '姓
|
||||
1. 准备行数据，确保每行有唯一 id（跨页选择与刷新不丢行靠它）
|
||||
2. 定义 columns：sortable: true 的列表头可点击排序（升 → 降 → 取消循环），标记箭头 ↑↓↕
|
||||
3. 列展示细节用皮肤字段：align 控制表头与单元格对齐，format(value, row) 返回纯文本（走 textContent，不需要转义）
|
||||
4. selectable: true 开启行选择：表头全选框带 indeterminate 半选态，工具栏显示已选计数
|
||||
5. 选中行用低视觉比重样式（淡色底 + 弱化文字），选择状态存 rowKey，跨页不丢失
|
||||
6. 工具栏输入框即筛选，输入即时过滤并回第 1 页；无匹配时显示空状态行
|
||||
7. 表头粘性固定（滚动容器 max-height 420px），斑马纹 + 悬停高亮由 CSS 提供
|
||||
8. 数据在途时传 loading（布尔或信号）：表格体换成骨架行、筛选与翻页禁用，返回后置回 false 即恢复
|
||||
9. 需要独立分页器联动时传 page 信号：const page = signal(1)，dataTable({ page }) 与 pagination({ page }) 共用
|
||||
4. 列宽用内核字段 width：数字（像素）固定该列，'flex' 或不设则按内容自适应
|
||||
5. selectable: true 开启行选择：表头全选框带 indeterminate 半选态，工具栏显示已选计数
|
||||
6. 选中行用低视觉比重样式（淡色底 + 弱化文字），选择状态存 rowKey，跨页不丢失
|
||||
7. 工具栏输入框即筛选，输入即时过滤并回第 1 页；无匹配时显示空状态行
|
||||
8. 表头粘性固定（滚动容器 max-height 420px），斑马纹 + 悬停高亮由 CSS 提供
|
||||
9. 数据在途时传 loading（布尔或信号）：表格体换成骨架行、筛选与翻页禁用，返回后置回 false 即恢复
|
||||
10. 需要独立分页器联动时传 page 信号：const page = signal(1)，dataTable({ page }) 与 pagination({ page }) 共用
|
||||
|
||||
现场演示：apps/docs/demo.html#sec-table
|
||||
|
||||
|
||||
@@ -132,6 +132,14 @@ export function dataTable<T extends { id: RowKey }>(props: DataTableProps<T>): H
|
||||
});
|
||||
});
|
||||
|
||||
// —— 列宽：数字落成 <col> 固定宽度，'flex' 或未设置交给浏览器自适应 ——
|
||||
const colgroup = h(
|
||||
'colgroup',
|
||||
null,
|
||||
selectable ? h('col', { style: 'width:44px' }) : null,
|
||||
...props.columns.map((col) => (typeof col.width === 'number' ? h('col', { style: `width:${col.width}px` }) : h('col'))),
|
||||
);
|
||||
|
||||
const filterInput = textField({
|
||||
placeholder: `筛选 ${filterKey}…`,
|
||||
disabled: props.loading, // 加载中禁止筛选，避免与在途结果竞争
|
||||
@@ -150,7 +158,7 @@ export function dataTable<T extends { id: RowKey }>(props: DataTableProps<T>): H
|
||||
filterInput,
|
||||
selectable ? h('span', { class: 'ua-sel-count' }, () => (selectedCount() ? `已选 ${selectedCount()} 行` : '')) : null,
|
||||
),
|
||||
h('div', { class: 'ua-table-scroll' }, h('table', null, h('thead', null, h('tr', null, selectable ? headCheck : null, ...props.columns.map(th))), tbody)),
|
||||
h('div', { class: 'ua-table-scroll' }, h('table', null, colgroup, h('thead', null, h('tr', null, selectable ? headCheck : null, ...props.columns.map(th))), tbody)),
|
||||
h(
|
||||
'div',
|
||||
{ class: 'ua-pager' },
|
||||
|
||||
@@ -1094,7 +1094,7 @@
|
||||
"n": "columns",
|
||||
"t": "ColumnDef<T>[]",
|
||||
"r": 1,
|
||||
"d": "列定义：内核字段 { key, header?, sortable? } + 皮肤字段 { align?: left|center|right, format?: (value, row) => string }"
|
||||
"d": "列定义：内核字段 { key, header?, sortable?, width? } + 皮肤字段 { align?, format? }；width 数字为固定像素，'flex' 自适应"
|
||||
},
|
||||
{
|
||||
"n": "filterKey",
|
||||
@@ -1129,6 +1129,7 @@
|
||||
"准备行数据，确保每行有唯一 id（跨页选择与刷新不丢行靠它）",
|
||||
"定义 columns：sortable: true 的列表头可点击排序（升 → 降 → 取消循环），标记箭头 ↑↓↕",
|
||||
"列展示细节用皮肤字段：align 控制表头与单元格对齐，format(value, row) 返回纯文本（走 textContent，不需要转义）",
|
||||
"列宽用内核字段 width：数字（像素）固定该列，'flex' 或不设则按内容自适应",
|
||||
"selectable: true 开启行选择：表头全选框带 indeterminate 半选态，工具栏显示已选计数",
|
||||
"选中行用低视觉比重样式（淡色底 + 弱化文字），选择状态存 rowKey，跨页不丢失",
|
||||
"工具栏输入框即筛选，输入即时过滤并回第 1 页；无匹配时显示空状态行",
|
||||
|
||||
Reference in New Issue
Block a user