feat(Table): add footer support to display column summary
#4194
Conversation
commit: |
|
@benjamincanac can you please have a look? I will update docs if the implementation is good enough. |
benjamincanac
changed the title
footer support to display column summary
|
@benjamincanac anything else you think needs changing? |
| @@ -25,6 +26,11 @@ export default (options: Required<ModuleOptions>) => ({ | |||
| thead: 'sticky top-0 inset-x-0 bg-default/75 z-[1] backdrop-blur' | |||
| } | |||
| }, | |||
| stickyFooter: { | |||
| true: { | |||
| tfoot: 'sticky bottom-0 inset-x-0 bg-default/75 z-[1] backdrop-blur' | |||
There was a problem hiding this comment.
I believe this should go inside sticky.true.tfoot!
There was a problem hiding this comment.
We need to control sticky footer and header individually, so table could have stuck header, but not footer or vice versa. I map prop.sticky to to separate variants on lines 209-210
| loading: props.loading, | ||
| loadingColor: props.loadingColor, | ||
| loadingAnimation: props.loadingAnimation | ||
| })) | ||
|
|
||
| const hasFooter = computed(() => { |
There was a problem hiding this comment.
Would you mind explaining the logic of this? Wouldn't it be simpler with columns.value.map? 🤔
There was a problem hiding this comment.
Columns can be multi-leveled to create few rows of table headers or footers. For example:
const columns = [
{
header: 'Level 1',
columns: [
{
header: 'Level 2'
}
]
}
]
This traverses the list of columns, if it finds a footer definition, it stops and returns true, if it finds sub columns, it adds them to the list it needs to check. Not sure, how to accomplish this with map considering we don't know the depth of the tree.
🔗 Linked issue
Resolves: #1025
❓ Type of change
📚 Description
This change enables the display of the table footer for any column.
It checks if any column definition includes a footer key, and if so, renders a element using TanStack Table’s getFooterGroups().
A new sticky-footer prop allows the footer to be fixed in place when scrolling. Footer columns can also be pinned.
Additional CSS removes padding from empty cells, so if all columns with footers are hidden, the footer won’t appear visually—even if it is rendered in the DOM.
📝 Checklist