Responding to changing width can be done in any of the following ways, alone or in combination:
Default: do nothing. if that’s not enough, implement the automated column visibility control described further down.
Horizontal scrolling
The simplest form of responsive behaviour is allowing horizontal overflow, and scrolling:
Column visibility control
Automated column visibility control
Defining whether a column is visible, and if yes, how wide, is a balancing act depending on a number of factors (minimum meaningful width of a column, importance relative to other columns in the table, ability to wrap or truncate in a way that makes sense given the data in question, etc.). Because of this, we need a way to pass that information to the table. It will be different for each instance.
One way this could be done is to pass the following information per column:
- Key: breakpoint at which a change occurs
- Value: a valid width percentage value or a “hide” flag
This would keep this functionality within the react component as opposed to local styles, but I think it would be very cumbersome.
Another way would be to pass in just class names to each column, as we currently do in maas, and handle the queries as local styles. This would allow us to avoid a lot of complexity and keep bespoke stuff locally.
The long term ideal scenario would be to do something similar to the microsoft office ribbon:
showing/hiding/rearranging elements within a cell to make best use of space, not confined to the available vanilla media queries.
One way I can imagine this happening would be to allow us to apply a class to any element within a cell. This way, outside of the component, we can determine complex behaviours using media queries, and apply them to one or more elements in the table by passing them the custom class. The advantage I see here is that the table itself doesn’t need to worry about setting css properties on elements within cells, just passing classes to them.
These are advanced behaviours, but are also things that would be needed to reimplement many maas tables, e.g. the machine listing, without sacrificing existing functionality.
A simple alternative would be to set the property table-layout to auto, which would make the browser distribute column widths as it deems fit. (In other words, pass the class ‘u-table-layout–auto’ to the react table).
Manual overrides to column visibility
Another way to deal with limited space would be to allow some level of manual control. In cases where we might want to do this, we would need to provide UI for it. The following screenshots explore what that might look like:
Rearrange into mobile table card
Although Vanilla framework provides a mobile table card pattern, using it out of the box could mean use of space that is not optimal, or excessive truncation of labels/values. The proposal is to implement the following behaviours:
- (default) consider alternative responsive behaviour recommended in these guidelines
- Implement a way for the modular react table to make use of external local templates at given breakpoints
A few hypothetical examples:
