Tables

[farski]

• Work for various number of columns/data density
• Some sortable columns
• Paging
• Responsive
• Item selection

[farski]

For very basic tables, meaning those with a single primary value and and perhaps some associated or derived value, the styling is stark and simple

Small formats have only a single value per column, and the sizing and spacing should collapse along with the screen real estate. There's no strict number of breakpoints, two or three for all small format is probably enough. There should always be enough space for the value columns and their titles, without feeling too cramped. If something needs to get truncated it should be the label of the dimension value.

At larger/desktop sizes, the value and a derived value would collapse to a single column (that's mainly to prevent cases on very wide screens from having the data spread way out in multiple columns. When it's possible to only have two columns in this way, the first (name) column width should be capped, and the second column can expand as necessary to fill the space).

On desktop some columns can be made sortable, so there's an indicator.

In most cases one column of data in the table corresponds to the data that is being displayed the chart; that column should be highlighted.

[farski]

For some data, there is additional data nested below rows displayed by default in the table (like in the case of the Countries table, where some countries have other geographic subregions).

On very small screens expanding the nested data is not supported.

On most modern mobile sizes, the rows can expand to show the next level of data. Only one nesting can be visible at a time (expanding a second collapses the first). Percentage values aren't displayed for nested data (since it'd confusing to explain what that's a percent of)

Desktop formats follow the same nesting behavior with the above desktop design. The disclosure controls are more obvious on the desktop, since there's more room to play with and it's a more obvious/useful interaction on larger screens.

[farski]

For tables with more data/columns, the format on desktop follows pretty much the same pattern, just with more columns! The charted column should still be highlighted.

For smaller screens, there's the option of breaking out of the table and collapsing down to multiline blocks, in order to retain all the data per "row". If enough data is considered unnecessary at smaller sizes, the columns could be hidden and "basic" layout from above could be used.

[sandikbarr]

@farski The percent values have a very low color contrast. I took a stab at setting up the grey colors from colors we have in the styleguide, and with the text at #a3a3a3 and background at #f0f0f0, the contrast ratio is 2.21. Even on white background, text that light only has a contrast ration of 2.5. For accessibility, and especially with text this small, we should be aiming for color contrast ratios of 4.5 or more.

[sandikbarr]

The right alignment of numeric values sees odd, so does the misalignment of the percentages when included in the same column.

[farski]

@sandikbarr I opened a ticket to reexamine the colors for accessibility. For now let's keep making progress with the design as-is, and we can prioritize the work to address those issues in future sprints.

Also opened a ticket for alignment