[Component amendment]: Table

[eliman11]

Component/pattern to amend

Tables

Visual

Context

I was reviewing this PR for /kubernetes/compare and I'm not sure the way the table resizes into cards is the easiest way for users to compare the features. At the same time, horizontal scrolling might be difficult for a table that's this text-heavy. Maybe a possible solution could be a drop down to select which feature to compare, and then displaying the values for the feature in a table format? Or allow multiple select to compare select features?

[syncronize-issues-to-jira]

Thank you for reporting your feedback to us!

The internal ticket has been created: https://warthogs.atlassian.net/browse/WD-18355.

This message was autogenerated

[danielmutis]

Review:

• @lyubomir-popov to provide examples of how this has been solved in the table spec.
• Adrian: we can't assume that side-scroll is available to users
• Guidance on responsive behaviour (and possibly alternative views for the same content) and how to use it as a designer (strategies to solve this)

Priority: Medium
Tier: Global

[lyubomir-popov]

modular table spec - responsive behavior suggestions:
https://discourse.ubuntu.com/t/responsive-behaviours/19855

some alternative suggestions we haven't explored, courtesy of chatgpt (excuse the title case):

1. Table Cards (Row as a Card)
   Convert each row of the table into a vertically stacked card.
   Display key information at the top, with less important details below.
   Use groupings, icons, or labels to maintain clarity.
   Best for: Tables with a few key columns that are easy to map into a linear format.
   Example: Bank transaction lists.

2. Priority Columns (Show Important Data First)
   Display only the most critical columns, with an option to tap for additional details in an overlay or dropdown.
   Use icons or labels to hint at hidden data.
   Best for: Tables where not all data is equally important.

3. Accordion Rows
   Show only key data by default.
   Tap on a row to reveal additional data beneath it in an accordion style.
   Best for: Data where contextual information is important but can be hidden until needed.

4. Stacked Data in Sections
   Divide table rows into vertical sections for each key category.
   Show one section at a time (swipeable or collapsible).
   Best for: Data that logically groups into distinct categories.

5. Compact Table with Column Swiping
   Allow users to swipe horizontally through columns rather than scrolling the entire table.
   Keep headers fixed for easy navigation.
   Best for: Tables where all rows need to be viewed at once but columns can be navigated.

6. Pivot to a List with Headers
   Instead of rows and columns, format the table as a list with column headers as item labels.
   Best for: Tables with a small number of rows where column headers add clarity.

[gerwitz]

I'm not sure ChatGPT listed an old favorite of mine, so maybe it's number 7: multiline rows that wrap cells to make a single data item use multiple visual lines. Often with a key "cell" that spans and intra-table borders to prevent visual confusion.

(I guess you could call those full-width cards, conceptually. But You could call an ordinary table that, too.)