Modular table component

Modular table component

Introduction

  • Looked at existing tables considering functionality and interactions
    • MAAS
    • JAAS dashboard
    • Snapcraft (build)
    • RBAC
    • UA
    • Web pricing tables
    • Vanilla framework
    • Generic web table

Definition of the basic table and react component

  1. Vanilla static table

https://docs.vanillaframework.io/base/tables/

  • Layout
    • Headers
    • Single or multi-line rows
    • Visual style
      • Define hover, select and emphasis in vanilla
      • Standardize spacing between icon + text, checkbox + text
      • Table sortable
        • Default sort visualised
        • Sort icon in briefing with
        • Once grouping invoked, sorting within a group needs to be defined
        • Sorting AZ/ZA
  • Hierarchy
    • Headers
      • E.g. row height when one row and then two rows
    • Spacing
      • E.g. especially grouped ones
    • Checkboxes - nested
      • can we explore a different approach (e.g. GMAIL)?
  1. React component dynamic table

  • The react component uses the Vanilla table and adds:
  • Functionality
    • Interaction
    • Data value
    • Live data visualisation
    • Interactions in-table
  1. Modularity of the table

  • Table itself

    • Dynamic summary of table content (e.g. 302 models, 1043 units, 3420 machines)
    • Dynamic headers (showing the numbers of items, e.g. Machines (329) )
    • Selection of rows (checkboxes, select all)
    • Icons (offset positioning, visual meaning)
    • Actionable icons (delete, edit, switch on/off, …)
    • Colours (hover, highlighted, selection > links, background row, cell, something just updated animation)
    • Pin row (items on top) functionality
    • Drag & drop cells and rows
    • Expanding table
      • Cell, row
        • Both pushing content and floating on content
    • Multi-line row:
      • Multiline due to wrapping
      • Multi-line as a responsive behaviour: explore maximum number of lines (2?), define when to use and when to move to mobile table card
      • Multi-line as a non-responsive choice
      • Multi-line in the context of column resizing and column visibility control (provided we agree we want these)
  • Grouping

    • Multiple table groups
    • Hierarchy (indentation, children)
    • Toggle column content based on group type
    • Summary of items per grouped table (e.g. Error (230 models) )
    • Sort order of groups
      • Not necessarily A-Z, e.g.
      • Admin users first, then non-admins
      • Buckets of value, e.g. all the failures not the same as group by status
    • Grouping controls
      • Always make them explicit if possible, drop-down if necessary (needs to be consistent: MAAS, JAAS, RBAC are different at the moment)
      • Exploration: generate the grouping from the header (e.g. machine column > group)
      • Grouping examples by component vendors: telerik, devexpress
    • Grouping as a means of replicating data structure (?)
  • Pagination

    • Endless scroll
    • “Load more” CTA
    • Pagination
    • Pagination per grouping type
  • Filter and search

    • Different pattern based on JAAS exploration
  • Responsive behaviour

    • Hiding information is acceptable if it can be accessed elsewhere (e.g. machine details page)

    • When information doesn’t fit, 4 options:

      • Truncating, which works to a point
      • Horizontally scroll as in google analytics (do we want this as an option?)
      • Rearrange content, as in multiline rows or a mobile table card
      • Resize columns (as in this react demo)
      • Hide columns:
        • Based on predefined logic
        • Based on user input - is there a format which makes it clear what happens to selected columns when space is not enough, e.g. priority / weight per column
    • Optional interaction to choose visible columns