Table - data truncation of long unique ids, component for number of rows, pagination

[ishah-twilio]

We are adding new log for IP Commands log feature.

Questions and feedback we like on

1. Rows per page - What component can we use to allow user to change number of rows displayed on a list page?
2. Export CSV - What component can we use for export CSV download feature? Primary vs. secondary Button?
3. Table data -- we have 3 unique id that users like information about in the data table. Though at same it overwhelming for user to see long similar looking IDs in the data columns. We like to truncate long unique ids and only show the unique section of the IDs in data table. Any guidance?
4. Pagination - components usage - guidance. I have seen few styles in different recommendations. Was hoping to verify which one is more accurate.
5. Any other feedback on the table and data presented in attached screen.

[serifluous]

Hey @ishah-twilio !

1. Rows per page - What component can we use to allow user to change number of rows displayed on a list page?

You'll most likely want to use a Select for this.

Export CSV - What component can we use for export CSV download feature? Primary vs. secondary Button?

It'll depend on the priority of the Export action on this screen (see guidelines here). @johannaweintraub and @sang-yeo are working on a Download/Export pattern, so I'd suggest reaching out to them, too. See Discussion #1207

Edited: You might actually have to use an Anchor here instead for a file download. See Discussion #848

Table data -- we have 3 unique id that users like information about in the data table. Though at same it overwhelming for user to see long similar looking IDs in the data columns. We like to truncate long unique ids and only show the unique section of the IDs in data table. Any guidance?

I'd definitely rely more on your expertise of how customers are identifying IDs in the product. We don't have specific guidance right now around SIDs or other IDs. @johannaweintraub might have good insight here, too.

Our Truncate component only truncates the end of a text block right now. If you decide you do need to truncate the beginning or middle of a line of text, let us know, so we can improve our component!

The difference between the Command SIDs and SIM SIDs are a little hard to grok for me (fwiw it might be much clearer to your customers than to me). Making the distinction clearer could help, either by adding more clarity about what the IDs are, what they're for, etc., or even by making each cell of the first column a row header. Row headers are bolded (though you could leave the timestamp unbolded) and can help focus attention on the main value in each row. Using row headers is generally good practice also.

Pagination - components usage - guidance. I have seen few styles in different recommendations. Was hoping to verify which one is more accurate.

We're still ironing out the final details for this component. For now, the anchor component you're using with the left/right icon is directionally right. The anchors shouldn't be inside the Table footer, but should sit outside separate from the Table instead. I'd recommend aligning with what you've done over the past few months in other parts of the IoT products.

Any other feedback on the table and data presented in attached screen.

• For the text "Command history is preserved for 30 days", I'd suggest using normal paragraph text, and not weak text, since you've already got a pretty clear hierarchy distinction with the heading.
• For the dates and times, follow the Date and Time capitalization guidelines.

[serifluous]

^ edited with revised guidance on the Export action