Table Component row

[Porlin]

Hi there,

For Flex Real time Insights, we have a table view of all the queues in a contact centre. As part of a customer requirement we are looking to add a Total (roll-up) view at the bottom row of the table. We want to have the last row stand out as it shows the aggregated score across the row.

I have two mockup on this Figma link if you are able to feedback on what we can do with the treatment here?

We want to have this row floating, so if the user has a heavy populated table and scrolls down it will always be within their view.

Many thanks,
Porlin

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Sorry, I don't know how to help with that.

I did do a search though, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Accessibility in Flex Insight UI (updated: 04/26/2024, similarity score: 86%)
• Review of Navigation, Accessibility and Hierarchy for Queue monitoring (updated: 01/16/2025, similarity score: 85%)
• Table Count (updated: 04/30/2024, similarity score: 84%)

[krisantrobus]

Hi @Porlin, thank you for signing up to office hours for this. We've also discussed this and have some feedback. You are still welcome to join office hours but if this answers your question just let us know so we can open that slot back up.

We agree that the first option in your exploration looks the best. We have some style recommendations for you, styling the bottom row to match the header row. Here is the Figma for this.

We also think that if you are making the totals/bottom row sticky then the header should also remain sticky so users can understand what the totals are for when scrolling the table.

[Porlin]

Thanks for this @krisantrobus I will remove the office hours slot for thursday - fyi

[Porlin]

Hi @krisantrobus if they team are unable to make the Total row sticky, do you have any recommendation on the height of the table to be fixed?

[krisantrobus]

Hi @Porlin, I tested the ability to add sticky to the bottom row. I would suggest using TableFooter and then you can apply the following styles.

position: "sticky",
bottom: "0"

Sticky footer is not currently supported but we will be adding this in. I know with Flex you will not be able to use it, can you give me more engineering details about how you implement this component so I can get a working example to share with you.

[Porlin]

I will loop you in with the engineers @krisantrobus