Summary of items per grouped table
A group summary consists of a string of text styled to be less conspicuous than the title. It is layout agnostic, and follows the layout of the parent container.
Sort order of groups [zeplin link]
Aside for the column by which a table is grouped, the rest of the content can be sorted by cycling through the available modes (e.g. Ascending, Descending, restore default) (full size images in zeplin):
Sorting the groups themselves may require more options: In addition to alphabetical, sometimes a predefined order might make sense. For example, MAAS “group by status” orders failed machines first, the rest by lifecycle.
Additionally, control over the sort order may be given to the user with respective sorting UI, as illustrated below.
Default: Option A, simple cycling through available states. (In some cases, we may want to prevent certain sort orders, so the available orders should be specifiable by the UX designer )
Future version: Option B, with additional contextual menu controls for advanced sorting.
Sorting groups:
Grouping controls
Default: Display “group by” options in a dropdown. When embedded in a control area, the dropdown’s border may be omitted.
When there is sufficient space to display all options, consider displaying them as a row of radio buttons, which saves a click:
Example of how that might look on jaas.ai/models:
Multi-level grouping [this is put on hold, further explorations to be planned at a later date]
- Is there appetite for this? Workshop with people from maas, jaas, rbac to validate if it improves anything
In some cases, recursive grouping might make sense. For example, you might want to look at all broken machines with the same owner in the maas machine listing with 20,000 machines.
This would require a more complex set of grouping controls, where the user can add/remove/reorder multiple levels of grouping. TBD.
Grouping headers
Grouping in the modular table borrows the best parts of grouping in MAAS and RBAC. (For a detailed comparison of grouping in RBAC, MAAS and JAAS, see this zeplin section and the ones preceding it).
The grouping header may can contain the following information:
- Group name [mandatory]
- Checkboxes [optional]
- Icons [optional]
- Group metadata [optional] (number of items in the group, group summary)
- expand/collapse functionality
Responsive grouping header
Depending on available space, the group header can be displayed as either a column (the default) or a row (when there is no room for a column).
-
Small and medium screens : the grouping header is displayed as a row. Items that don’t fit for lack of space may be omitted
-
Large screen default: The grouping header is displayed as a column e.g. “Status” column in the image below
-
Large screen compromise: The grouping header is displayed as a double row, as in the second example in the image below
-
Switch from row to column as soon as space becomes sufficient (specified as an argument when creating a table instance). This would be a different screen width for every table, as it depends on how many other columns there are
Rules:
- Default: Provided there’s enough horizontal space to fit all content without truncation, position group headers as the first column in a table (as RBAC currently does).
- When table content becomes wider than the available horizontal space, switch to group header rows (as in MAAS). This can be a responsive change, or in cases like the maas machines listing, it could persist into the large screen breakpoint.
- Depending on the case, columns or values in cells that become redundant can be omitted. E.g. “owner” column when grouped by “owner”. This can mean hiding subsequent values as in RBAC, hiding entire columns as in JAAS, or keeping columns, but removing repetitive values, as in MAAS
- Consider placing any group expand / collapse controls in the first column. Allow for flexibility, as the presence of checkbox columns or icon columns may require a different arrangement