Multi-sort for data tables

[DBD324]

Summary

Multi-sort provides the user with the ability to sort by multiple columns at once. With the data sorted intially by the primary sort, then secondarily by the secondary sort.

💰 User value

Provides additional ability to sort data to ease location and comparison.

📚 User Stories

If relevant, describe the high-level functionality as user stories.

As an ICDS user: I need to be able to apply multi-sort to columns in a data table So that I can better control the data within a table.

An an ICDS User I need to be able to add multiple concurrent sorts, and see which sort is ordered where, So that I have better control over my data.

📝 Acceptance Criteria

If relevant, describe in full detail the different interactions and edge cases that the component or patterns needs to fulfil.

Multi-sort Given that one column is already sorted When clicking on another column and holding down the sort key (windows=ctrl, mac=cmd, or shift on either) Then the new sort is added and each columns sort is identified by a numbered badge.

✏ Designs

If there's a Figma design file (or other mock-up), include it here.

 🧾 Guidance

If there's written guidance or documentation, include it here.

[DBD324]

Extends functionality applied in ticket #790 . Ticket is dependent on 790.

[DBD324]

Relates to ticket #76

[DBD324]

Need to consider how multi-sort is applied without use of keyboard shortcut. Possible dependency on contextual menus that are accessed via right-click to add sort.

[GCHQ-Developer-741]

Couple of notes for a potential technical implementation of this:

1. How to sort multiple fields in javascript (https://www.benmvp.com/blog/quick-way-sort-javascript-array-multiple-fields/)
2. Currently state values called sortedColumn & sortedColumnOrder. Could convert sortedColumn to sortedColumns with type

   {
   columnKey: string;
   sortOrder: IcDataTableSortOrderOptions;
   }[]

   which would combine both states into one object and allow us to add more when we need to.

3. For the adding of a badge, simply check if sortedColumns.length > 1, and if so then show the badge with the sortedColumns' index + 1 as the label.

[GCHQ-Developer-741]

Couple of questions for some functionality:

• Do we want to offer the ability to customise the key that the user holds to apply multi-sort? If so, should this be its own prop, or include as part of the existing sortOptions prop?
• Do we want to offer the ability to turn this functionality off? As in, it would be enabled by default but with a prop that could disable this behaviour.

[MI6-255]

Back to design for how the key would work, and if we even need it as it adds complication