fix expanded & sticky #1277
fix expanded & sticky #1277
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Walkthrough本次变更引入了一个可配置的 expandedRowOffset 属性，用于表格展开行的列偏移处理。相关类型定义、上下文、表体行和展开行组件均已适配此属性，并通过新增的文档和示例演示了其用法。未涉及其他控制流或错误处理调整。 Changes
Sequence Diagram(s)sequenceDiagram
participant 用户
participant Demo组件
participant Table
participant BodyRow
participant ExpandedRow
用户->>Demo组件: 渲染 Demo
Demo组件->>Table: 配置 expandedRowOffset 并渲染
Table->>BodyRow: 传递 expandedRowOffset
BodyRow->>ExpandedRow: 计算 offsetWidth 并传递
ExpandedRow-->>BodyRow: 渲染展开行内容（带偏移）
Suggested reviewers
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
docs/examples/expandedSticky.tsxOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the config "prettier" to extend from. Please check that the name of the config is correct. The config "prettier" was referenced from the config file in "/.eslintrc.js". If you still have problems, please stop by https://eslint.org/chat/help to chat with the team. Note ⚡️ AI Code Reviews for VS Code, Cursor, WindsurfCodeRabbit now has a plugin for VS Code, Cursor and Windsurf. This brings AI code reviews directly in the code editor. Each commit is reviewed immediately, finding bugs before the PR is raised. Seamless context handoff to your AI code agent ensures that you can easily incorporate review feedback. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (1)
✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
docs/examples/expandedSticky.tsx (1)
14-19: onCell回调与expandedRowKeys的结合使用这段代码展示了如何根据行是否展开来动态调整单元格的
rowSpan属性。这是一个高级用例，展示了新特性如何与现有功能（如单元格合并）结合使用。不过，有一个小建议：添加注释说明这里的逻辑，特别是条件判断
expandedRowKeys.includes('b')的含义，以便其他开发者更容易理解这段代码的目的。onCell: (_, index) => { const props: React.TdHTMLAttributes<HTMLTableCellElement> = {}; - if (index === 1) props.rowSpan = expandedRowKeys.includes('b') ? 3 : 2; - if (index === 2) props.rowSpan = 0; + // 根据是否展开行调整单元格rowSpan + if (index === 1) props.rowSpan = expandedRowKeys.includes('b') ? 3 : 2; // 如果b行展开，则跨3行，否则跨2行 + if (index === 2) props.rowSpan = 0; // 隐藏第3行单元格，因为被第2行覆盖 return props; },
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
docs/demo/expandedSticky.md(1 hunks)docs/examples/expandedSticky.tsx(1 hunks)src/Body/BodyRow.tsx(4 hunks)src/Body/index.tsx(3 hunks)src/Table.tsx(2 hunks)src/context/TableContext.tsx(2 hunks)src/interface.ts(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (3)
src/context/TableContext.tsx (1)
src/interface.ts (1)
ExpandableConfig(240-260)
src/Body/BodyRow.tsx (1)
src/interface.ts (1)
ExpandableConfig(240-260)
docs/examples/expandedSticky.tsx (2)
src/interface.ts (1)
Key(21-21)tests/FixedColumn-IE.spec.jsx (1)
columns(27-40)
🔇 Additional comments (15)
src/interface.ts (1)
259-259: 类型定义正确添加
expandedRowColSpan属性已正确添加到ExpandableConfig接口中，使表格组件能够支持自定义展开行的跨列数。这个改动与其他相关文件的变更一致。src/Body/index.tsx (3)
34-34: 正确从上下文中解构新属性
expandedRowColSpan属性已从TableContext中正确解构出来，使Body组件能够访问该配置项。
44-44: 依赖数组更新完整
expandedRowColSpan已添加到useContext的依赖数组中，确保当此属性变化时组件能够正确重新渲染。
79-79: 属性正确传递给子组件
expandedRowColSpan属性已正确传递给BodyRow组件，这样展开行的跨列数就可以在渲染时被正确应用。docs/demo/expandedSticky.md (1)
1-8: 文档结构清晰文档格式正确，提供了适当的标题和导航信息，并引用了示例代码。这个演示文档将帮助用户理解如何使用新添加的
expandedRowColSpan功能。src/context/TableContext.tsx (2)
6-6: 导入类型定义正确
ExpandableConfig类型已从接口文件中正确导入，这是在Context中使用该类型的必要准备。
56-56: 上下文属性定义完整
expandedRowColSpan属性已正确添加到TableContextProps接口中，并使用了索引访问类型来保持与原始定义的一致性。这确保了展开行跨列数的配置能够通过Context正确传递给子组件。src/Table.tsx (2)
847-847: 新增的expandedRowColSpan属性已正确添加到上下文中该更改正确地将
expandedRowColSpan属性从expandableConfig传递到表格上下文值中，使该属性可以被表格组件的其他部分访问。
898-898: 依赖数组更新确保上下文能响应expandedRowColSpan变化将
expandableConfig.expandedRowColSpan添加到useMemo依赖数组中，确保当这个属性变化时，上下文值会被重新计算。这是正确的做法。src/Body/BodyRow.tsx (4)
7-7: 正确导入ExpandableConfig类型添加了
ExpandableConfig类型的导入，用于定义expandedRowColSpan属性的类型。类型引用正确。
22-22: props接口中正确添加expandedRowColSpan属性在
BodyRowProps接口中添加了可选的expandedRowColSpan属性，并使用了正确的类型引用。
106-106: 解构props中的expandedRowColSpan从props中正确解构了
expandedRowColSpan属性，为后续使用做准备。
200-200: 实现expandedRowColSpan逻辑使用空值合并运算符(
??)优雅地实现了当expandedRowColSpan有值时使用该值，否则回退到原有的flattenColumns.length。这确保了向后兼容性，同时提供了自定义展开行列跨度的能力。docs/examples/expandedSticky.tsx (2)
1-51: 示例代码展示了expandedRowColSpan的使用这个示例很好地展示了如何使用新的
expandedRowColSpan属性来控制展开行的列跨度。示例同时演示了与sticky表头的结合使用，以及如何动态计算展开行应该跨越的列数（通过columns.length - 1）。代码组织清晰，功能实现完整，对用户理解新特性有很好的帮助。
39-39: expandedRowColSpan属性使用示例这里展示了
expandedRowColSpan的具体用法，设置为columns.length - 1表示展开行跨越除了展开控制列之外的所有列。这是一个常见的使用场景，示例选择得当。
| @@ -19,6 +19,7 @@ export interface BodyRowProps<RecordType> { | |||
| scopeCellComponent: CustomizeComponent; | |||
| indent?: number; | |||
| rowKey: React.Key; | |||
| expandedRowOffset?: ExpandableConfig<RecordType>['expandedRowOffset']; | |||
There was a problem hiding this comment.
那个 rowSpan 的挪过来？ expandedRowOffset 如果没有那个合并的能力，这里其实是个半吊子
There was a problem hiding this comment.
合也行，主要是另外哪个我还想做个模式，支持合并单元格是 + 1，还是分割
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## master #1277 +/- ##
==========================================
- Coverage 98.08% 98.04% -0.04%
==========================================
Files 77 77
Lines 7609 7624 +15
Branches 1164 1165 +1
==========================================
+ Hits 7463 7475 +12
- Misses 140 143 +3
Partials 6 6 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
src/Body/BodyRow.tsx (1)
25-25: 属性类型定义正确使用
ExpandableConfig<RecordType>['expandedRowOffset']确保了类型安全性和一致性。
🧹 Nitpick comments (1)
src/Body/BodyRow.tsx (1)
204-206: 添加测试覆盖静态分析工具指出这些行缺少测试覆盖。考虑到这是新增的偏移宽度计算逻辑，建议添加相应的单元测试。
这些行需要测试覆盖以确保在各种宽度配置下的正确性。你希望我帮助生成针对此功能的测试用例吗？
🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 204-206: src/Body/BodyRow.tsx#L204-L206
Added lines #L204 - L206 were not covered by tests
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/Body/BodyRow.tsx(5 hunks)src/Table.tsx(2 hunks)src/context/TableContext.tsx(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- src/context/TableContext.tsx
- src/Table.tsx
🧰 Additional context used
🧬 Code Graph Analysis (1)
src/Body/BodyRow.tsx (1)
src/interface.ts (1)
ExpandableConfig(240-260)
🪛 GitHub Check: codecov/patch
src/Body/BodyRow.tsx
[warning] 204-206: src/Body/BodyRow.tsx#L204-L206
Added lines #L204 - L206 were not covered by tests
🔇 Additional comments (3)
src/Body/BodyRow.tsx (3)
7-7: 类型导入正确添加正确引入了
ExpandableConfig类型，用于expandedRowOffset属性的类型定义。
111-111: 默认值设置合理将
expandedRowOffset默认值设为 0 是合理的选择，保证了向后兼容性。
220-221:✅ Verification successful
ExpandedRow 属性传递正确
正确地将计算出的
offsetWidth和调整后的colSpan传递给ExpandedRow组件，实现了展开行的列偏移功能。但需要注意，宽度计算的准确性依赖于上述提到的改进建议。
运行以下脚本验证 ExpandedRow 组件是否正确接收这些新属性：
🏁 Script executed:
#!/bin/bash # 验证 ExpandedRow 组件是否支持 offsetWidth 属性 ast-grep --pattern 'interface $_ { $$$ offsetWidth?: $_ $$$ }'Length of output: 639
验证通过：ExpandedRowProps 正确支持 offsetWidth 和 colSpan
已确认
src/Body/ExpandedRow.tsx中的ExpandedRowProps接口包含
offsetWidth?: numbercolSpan: number属性定义无误，确保了在
BodyRow.tsx中向ExpandedRow传递的offsetWidth与colSpan能够被正确接收，无需进一步修改。
| const offsetColumns = flattenColumns.filter((_, idx) => idx < expandedRowOffset); | ||
| let offsetWidth = 0; | ||
| offsetColumns.forEach(item => { | ||
| if (typeof item.width === 'number') { | ||
| offsetWidth = offsetWidth + (item.width ?? 0); | ||
| } | ||
| }); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
改进偏移宽度计算逻辑
当前的宽度计算实现存在几个问题：
- 只处理数字类型的宽度，忽略了字符串类型（如 "100px"）和百分比宽度
- 没有验证
expandedRowOffset是否在有效范围内 - 使用 forEach 而不是更简洁的 reduce 方法
建议改进为：
- const offsetColumns = flattenColumns.filter((_, idx) => idx < expandedRowOffset);
- let offsetWidth = 0;
- offsetColumns.forEach(item => {
- if (typeof item.width === 'number') {
- offsetWidth = offsetWidth + (item.width ?? 0);
- }
- });
+ // 验证偏移值的有效性
+ const validOffset = Math.min(Math.max(0, expandedRowOffset), flattenColumns.length);
+ const offsetColumns = flattenColumns.slice(0, validOffset);
+
+ const offsetWidth = offsetColumns.reduce((total, column) => {
+ if (typeof column.width === 'number') {
+ return total + column.width;
+ }
+ // 处理字符串宽度（可选：解析 px 值）
+ if (typeof column.width === 'string' && column.width.endsWith('px')) {
+ const numValue = parseInt(column.width, 10);
+ return isNaN(numValue) ? total : total + numValue;
+ }
+ return total;
+ }, 0);📝 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.
| const offsetColumns = flattenColumns.filter((_, idx) => idx < expandedRowOffset); | |
| let offsetWidth = 0; | |
| offsetColumns.forEach(item => { | |
| if (typeof item.width === 'number') { | |
| offsetWidth = offsetWidth + (item.width ?? 0); | |
| } | |
| }); | |
| // 验证偏移值的有效性 | |
| const validOffset = Math.min(Math.max(0, expandedRowOffset), flattenColumns.length); | |
| const offsetColumns = flattenColumns.slice(0, validOffset); | |
| const offsetWidth = offsetColumns.reduce((total, column) => { | |
| if (typeof column.width === 'number') { | |
| return total + column.width; | |
| } | |
| // 处理字符串宽度（可选：解析 px 值） | |
| if (typeof column.width === 'string' && column.width.endsWith('px')) { | |
| const numValue = parseInt(column.width, 10); | |
| return isNaN(numValue) ? total : total + numValue; | |
| } | |
| return total; | |
| }, 0); |
🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 204-206: src/Body/BodyRow.tsx#L204-L206
Added lines #L204 - L206 were not covered by tests
🤖 Prompt for AI Agents
In src/Body/BodyRow.tsx around lines 201 to 207, improve the offset width
calculation by first validating that expandedRowOffset is within the valid range
of flattenColumns indices. Then, replace the forEach loop with a reduce method
to accumulate the total width. Modify the logic to handle width values that are
numbers, strings with pixel units (e.g., "100px"), and percentage strings by
parsing and converting them appropriately before summing. This will make the
calculation more robust and concise.
Summary by CodeRabbit
新功能
文档