Pajamas Component update - sorting: table header sorting

Problem

Today we have a sorting component defined primarily for lists.

While sorting for tables is alluded to in the Sorting "dos" section, the table sorting component has not yet been defined.

Sorting can occur in tables and in lists. While sorting in lists relies on the sorting component described on this page, sorting within a table happens in the table header.

Our current sorting controls are fit for purpose when it comes to sorting lists. However, it becomes more challenging when you are sorting a table multiple times across many columns. Going back and forth to a dropdown in the top right of the table becomes laborious, and a more contextual sorting control becomes necessary. Header sorting of table columns based on an icon in the table header will help to:

  • Streamline sorting through data and dimension-heavy tables
  • Copy familiar patterns in other types of analytics products (e.g. Excel)

Solution

Screenshot_2020-01-13_at_19.03.54

Update sorting component with the following text and demo (and reference to it in Table component)

New content

Table header sorting

See Table documentation updates

See Figma Prototype

Other Example(s)

IBM Carbon Salesforce Lightning Google Material
Screenshot_2019-12-11_at_09.52.30 Screenshot_2019-12-11_at_09.55.34 Screenshot_2019-12-11_at_09.58.24
https://www.carbondesignsystem.com/components/data-table/code#expandable-data-table https://www.lightningdesignsystem.com/components/data-tables/ https://material.io/components/data-tables/#sorting

Checklist

Make sure these are completed before closing the issue, with a link to the relevant commit or issue, if applicable. Get familiar with the Sketch UI Kit documentation which has information on updating files, structure, fonts, and symbols.

  1. Author: Create a Sketch file in your progress folder with the changes required for this issue. Try to use existing symbols, layer styles, and text styles.
  2. Author: Ask another Product Designer to review your personal Sketch file, linking them to your latest commit so they know where to find it. If they have the capacity, they should assign themselves to this issue. If not, try pinging another person.
  3. Reviewer: Review and approve author's changes in their personal Sketch file, according to the workflow.
  4. Author: Add your changes to the GitLab Sketch UI Kit (pattern library and/or instance sheet), following this step-by-step process.
  5. Author: Ask the reviewer to review your changes to the Sketch UI Kit files.
  6. Reviewer: Review and approve author's changes to the Sketch UI Kit files, according to the workflow.
  7. Author: Create an issue in the Design System to update the design specs and documentation. Mark it as related to this issue.
  8. Author: Add a read only (FYI) agenda item to the next UX weekly call to inform everyone of these changes, linking to this issue.
Edited by Nick Post