[WIP] Add column align property to Table component - #36
Conversation
Co-authored-by: zhaifanhua <106963561+zhaifanhua@users.noreply.github.com>
Co-authored-by: zhaifanhua <106963561+zhaifanhua@users.noreply.github.com>
Agent-Logs-Url: https://github.com/XiHanFun/XiHan.UI/sessions/92e776df-9cda-4082-a7b3-4b55c670644b Co-authored-by: zhaifanhua <106963561+zhaifanhua@users.noreply.github.com>
There was a problem hiding this comment.
Copilot review overview
🟡 Changes recommended
The new align→data-align behavior ships without any headless or conformance-suite test coverage, unlike sibling column attributes, and the PR is still marked [WIP].
Review effort: Balanced
Findings: 1
Open (1)
What changed in this PR
This PR implements the feature requested in issue #35: a per-column align property on the Table component so authors can align column content to start, center, or end. It follows the repo's layered architecture — the Headless connect layer projects the column-def value onto a data-align attribute for both the column header and data cells, and the shared CSS skin consumes that attribute to set text-align/justify-content. No adapter changes are needed because align is a field inside the existing columns prop, so all three adapters pass it through unchanged.
Changes:
- Add
align?: 'start' | 'center' | 'end'toTableColumnDefand emitdata-alignfromgetColumnHeaderProps/getCellProps. - Add
[data-align]rules (start/center/end) totable.css, plus doc and changeset updates. - Bump the gate-verified
data-*pair counts indocs/guide/versioning.md(component×attr 1977→1978, skin×attr 1122→1123).
| File | Description |
|---|---|
| ui/packages/engine/headless/src/table/table.types.ts | Adds the optional align field to the column definition contract. |
| ui/packages/engine/headless/src/table/table.connect.ts | Projects def?.align onto data-align for column headers and cells. |
| ui/packages/design/styles/css/table.css | Adds start/center/end alignment rules keyed on data-align. |
| ui/packages/engine/headless/src/table/table.doc.md | Documents the new align behavior and data-align hook. |
| ui/.changeset/table-column-align.md | Minor changeset for @xihan-ui/headless and @xihan-ui/styles. |
| docs/guide/versioning.md | Updates the data-* pairing counts consumed by the docs gate. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
| // 两个属性都不带位移——被拖的列原地不动，冻结列的吸附才不会被祖先 transform 打死 | ||
| 'data-dragging': dataAttr(draggingColumn === column.value), | ||
| 'data-drop': dropSide(column.value), | ||
| 'data-align': def?.align, |
TableColumnDef中添加align?: 'start' | 'center' | 'end'属性table.connect.ts的getColumnHeaderProps和getCellProps中输出data-align属性table.css中添加[data-align]相关样式规则table.doc.md文档描述docs/guide/versioning.md中的计数