fix(grid): fix align prop not working on table body columns (#4230) - #4262
fix(grid): fix align prop not working on table body columns (#4230)#4262Georgyhongbo wants to merge 1 commit into
Conversation
…#4230) The align prop was only applied to header columns via CSS. Body and footer columns were missing the col__center and col__right CSS rules, causing the align attribute to have no effect on data cells. This fix adds justify-content alignment rules for body and footer columns, and includes body columns in the flex layout selector to ensure the alignment classes take effect.
WalkthroughUpdated grid table LESS selectors so center/right alignment targets the intended cell class and shared flex styling applies to both header and body columns, excluding selection columns. ChangesTable column alignment styling
Estimated code review effort: 1 (Trivial) | ~5 minutes Possibly related PRs
Suggested labels: Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/theme/src/grid/table.less`:
- Around line 595-596: Extend the flex-layout selector covering
`&-header__column` and `&-body__column` to also include `&-footer__column`,
while preserving the existing exclusion for `.col__selection` so footer
alignment modes receive the same flex-container behavior.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 9c212624-81b8-43c2-b268-d4b0d8a17304
📒 Files selected for processing (1)
packages/theme/src/grid/table.less
| & &-header__column:not(.col__selection), | ||
| & &-body__column:not(.col__selection) { |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
Include footer columns in the flex-layout selector.
The preceding block applies justify-content to both body and footer cells, but this selector only makes header and body cells flex containers. Footer align="center"/align="right" can therefore remain ineffective unless another stylesheet supplies display: flex.
Proposed fix
& &-header__column:not(.col__selection),
- & &-body__column:not(.col__selection) {
+ & &-body__column:not(.col__selection),
+ & &-footer__column:not(.col__selection) {📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| & &-header__column:not(.col__selection), | |
| & &-body__column:not(.col__selection) { | |
| & &-header__column:not(.col__selection), | |
| & &-body__column:not(.col__selection), | |
| & &-footer__column:not(.col__selection) { |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/theme/src/grid/table.less` around lines 595 - 596, Extend the
flex-layout selector covering `&-header__column` and `&-body__column` to also
include `&-footer__column`, while preserving the existing exclusion for
`.col__selection` so footer alignment modes receive the same flex-container
behavior.
|
看文档 表格/对齐方式，有 header-align 与 footer-align 专门用来控制表头，表脚的对齐方式。 你再确认一下是不是你需要的功能。 稍后我会关闭本次pr |
Looking at the documentation, there are header-align and footer-align specifically used to control the alignment of the header and footer. Please confirm again whether it is the function you need. I will close this PR later |
shenjunjian
added
invalid
3 participants
The align prop was only applied to header columns via CSS. Body and footer columns were missing the
col__centerandcol__rightCSS rules, causing the align attribute to have no effect on data cells.This fix adds
justify-contentalignment rules for body and footer columns, and includes body columns in the flex layout selector to ensure the alignment classes take effect.PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
When using
<tiny-grid-column align="center">oralign="right", the alignment only takes effect on header columns. Body and footer columns remain left-aligned regardless of thealignprop value.Issue Number: #4230
What is the new behavior?
The
alignprop now works correctly on all columns — header, body, and footer. Body and footer cells respectalign="center"andalign="right"just like header cells do.Does this PR introduce a breaking change?
Other information
Only CSS changes in
packages/theme/src/grid/table.less. The fix mirrors the existing header column alignment pattern for body and footer columns.Summary by CodeRabbit