fix(Table): ensure colspan calc for loading and empty states
#4826
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR fixes a colspan calculation issue in the Table component for loading and empty states when dealing with grouped columns. The fix ensures that cells properly span across all visible columns instead of only top-level column groups.
- Updates
colspancalculation to usetableApi.getAllLeafColumns().lengthinstead ofcolumns?.length - Affects both loading state row and empty state row
- Ensures proper cell alignment when columns are grouped
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| <td :colspan="tableApi.getAllLeafColumns().length" :class="ui.loading({ class: props.ui?.loading })"> | ||
| <slot name="loading" /> | ||
| </td> | ||
| </tr> | ||
|
|
||
| <tr v-else> | ||
| <td :colspan="columns?.length" :class="ui.empty({ class: props.ui?.empty })"> | ||
| <td :colspan="tableApi.getAllLeafColumns().length" :class="ui.empty({ class: props.ui?.empty })"> |
There was a problem hiding this comment.
The tableApi.getAllLeafColumns().length call could potentially throw an error if tableApi is undefined or null. Consider adding a null check or providing a fallback value to prevent runtime errors.
Copilot uses AI. Check for mistakes.
| <td :colspan="tableApi.getAllLeafColumns().length" :class="ui.loading({ class: props.ui?.loading })"> | ||
| <slot name="loading" /> | ||
| </td> | ||
| </tr> | ||
|
|
||
| <tr v-else> | ||
| <td :colspan="columns?.length" :class="ui.empty({ class: props.ui?.empty })"> | ||
| <td :colspan="tableApi.getAllLeafColumns().length" :class="ui.empty({ class: props.ui?.empty })"> |
There was a problem hiding this comment.
The tableApi.getAllLeafColumns().length call could potentially throw an error if tableApi is undefined or null. Consider adding a null check or providing a fallback value to prevent runtime errors.
Copilot uses AI. Check for mistakes.
commit: |
|
Do you have a reproduction of the issue? I think this is correct but I'm wondering if we should use |
colspan issue with grouped columnscolspan calc for loading and empty states
|
Hi @benjamincanac,
I've set up the reproduction to demonstrate this exact issue:
That's a really sharp observation, and I'm glad you brought it up. I actually had the exact same thought at first! My initial impulse was to use Here’s what the docs say :
For the You're right that Using Hope this clarifies my reasoning. Let me know what you think! |
|
@fabianmerino Thanks a lot for the explanation 😊 |
🔗 Linked issue
❓ Type of change
📚 Description
This PR resolves an issue in the
Tablecomponent where thecolspancalculation was incorrect for grouped columns duringloadingandemptystates. The fix ensures proper alignment and behavior of cells spanning multiple columns in these scenarios.📝 Checklist