Sage
FlatTable to have additional "FlatTableFooter" component
Desired behaviour
We have FLatTableHeader but no FlatTableFooter. Can this be added?
Current behaviour
No ability to use Carbon components to add footer to a FlatTable.
Suggested Solution
new component: FlatTableFooter which will wrap around FlatTableRow in a similar way to native
usageCodeSandbox or Storybook URL
No response
Anything else we should know?
Confidentiality
- [X] I confirm there is no confidential or commercially sensitive information included.
For future triage, currently we support a footer prop for FlatTable, which renders any passed node within a <div> inside the table. This allows us to render text or other components such as Pager just fine, but causes a visual bug when other FlatTable subcomponents like FlatTableCell or FlatTableHeader are passed. Support for these subcomponents would be useful to allow for patterns such as summary rows.
Creating a dedicated FlatTableFooter would be better for consistency with the other FlatTable subcomponents, but we need to clarify if Design System would want to restrict the content placed in the table footer.
@Parsium Would you be able to render a FlatTableFooter AND the Pager at the same time? It looks like that could be a requirement.
Hi @clairedenning 👋🏼 I suppose you mean something like in the following image, where we could have pagination and custom content in the table footer?
We would be able to render anything in the footer, but we need to decide what kind of content to allow for - if we want to limit it to just summary rows and pagination, or if there is other content we would like to support.
I think for now, we're proposing just a summary row, and pagination. But that's not to say that in the future there might be a need for customised content.
Lisa Ying has added a grey "table footer row" to the table in Figma. The table can also have Pagination at the bottom.
https://www.figma.com/file/Tau6qv5iyr8wthWNqYktej/DS-Official-Components?type=design&node-id=31496%3A156711&t=HEEr4vsJdZKHoAlS-1
Thanks for this @designerlisa @clairedenning! I'll go ahead and create a ticket for us then to implement this into Carbon 👍🏼