axa-table-sortable: alternative sort value

[francescoRovetto]

This feature request is a result out of discussions about the bug report: https://github.com/axa-ch-webhub-cloud/pattern-library/issues/2219 - Raphael Lückl agreed on opening an feature request for this issue.

Wir verwenden die react-intl Library für die Internationalisierung von Beträgen. Unsere Kunden haben den Anspruch, dass das zum Land passende Tausender- Trennzeichen angezeigt wird.

Der gewünschte Wert für die Sortierung einer Spalte kann oft abweichen vom angezeigten Wert. Beispielsweise muss es auch möglich sein, PLZ Ort (8180 Bülach) in einer Spalte anzeigen zu können aber nur nach Ort zu sortieren(Bülach)

Im Fall von Zahlen trifft dies ebenfalls zu. Formatierte Beträge werden aktuell nicht als Zahlen erkannt (1'000'000 oder 1 000 000 oder 1.000.000) wenn darüber sortiert wird. Dies behindert die Verwendung der Sort Tabelle für Geldbeträge.

Ein Beispiel, wie die Sortierung funktionieren könnte, wenn ein bestimmter sortValue angegeben wird:

document.querySelector("#root > div > axa-table-sortable").setAttribute('model', JSON.stringify({
  thead: [
    { html: 'Title 0', sort: 'ASC' },
  ],
  tbody: [
    [
      { html: '1’000’000',
        sortValue: 1000000 },
    ],
    [
      { html: '50’000',
       sortValue: 50000 },
    ],
    [
      { html: '100’000',
       sortValue: 100000 },
    ],
    [
      { html: '800’000',
       sortValue: 800000 },
    ],
  ],
}))

Im Falle einer gewünschten Sortierung über Ortschaftsnamen:

document.querySelector("#root > div > axa-table-sortable").setAttribute('model', JSON.stringify({
  thead: [
    { html: 'Title 0', sort: 'ASC' },
  ],
  tbody: [
    [
      { html: '8180 Bülach',
        sortValue: 'Bülach'},
    ],
    [
      { html: '8038 Zürich',
       sortValue: 'Zürich'},
    ],
    [
      { html: '8197 Rafz',
       sortValue: 'Rafz'},
    ],
    [
      { html: '8193 Eglisau',
       sortValue: 'Eglisau'},
    ],
  ],
}))

[raphaellueckl]

The requirement for this is, that they values are either "raw" and we sort upon.

e.g.:

{
  key: 'Bülach',
  text: '9245 {} - CH'
} // output: 9245 Bülach - CH

Or we allow for custom sorters on each column. Something like this:

const onSortCol = (a, b) => {
  return a.search(/d*./).compareTo(b.search(/d*./))
}

Second idea would probably be a bit more error prone, but it's probably easier to apply for a user that just wants to put the data into the table without first converting everything just to match our sorting structure.

[francescoRovetto]

Hi Raphael

I understand - both solutions should work for us, I think. :-)

[raphaellueckl]

[Discussion] We will go with the custom comparator approach. Reason: For a good UX, all sort values can be derived from the display values that the user sees. The separate sort value is therefore redundant, the custom comparator will derive the sort value and compare it internally. We are aware that this restricts the new feature to scenarios where we can set properties using javascript on the component.

[francescoRovetto]

Hi Raphael, do you know about a time window for this feature request?

[selinagahlinger]

Jira Ticket erstellt, wird nicht mehr im PI#27 umgesetzt. Wird voraussichtlich für PI#28 eingeplant: https://jira.axa.com/jira/browse/WEBHUB-1291

[MKaHead]

@francescoRovetto I am back and have time to implement this feature request. It will rather be option 3 mixture of both proposals.

It works via a sort key, which determines on which data is sorted. It looks after your example quite simply like this:

const model = {
  thead: [
    { html: 'Title 0', sort: 'ASC' },
    { html: 'Title 1', sort: 'ASC' },
    { html: 'Title 3', sort: 'DESC' },
    { html: 'Title 2' },
    { html: 'Place', key: 'placeName', sort: 'ASC' },
  ],
  tbody: [
    [
      // Use 'html' to insert html to the table.
      { html: '<span>11 Test</span>' },
      // Use 'text' to display sanitized html.
      { text: '<span>Hello</span>' },
      { html: '<span>Cell 2</span>' },
      { html: 'A' },
      { html: '8180 Bülach', placeName: 'Bülach' },
    ],
    [
      { html: '<span>1 Test</span>' },
      { html: '<span>Z Hello 2</span>' },
      { html: '<span>Cell 2</span>' },
      { html: 'B' },
      { html: '8038 Zürich', placeName: 'Zürich' },
    ],
    [
      { html: '<span>2 Test</span>' },
      { html: '<span>A Hello 3</span>' },
      { html: '<span>Cell 2</span>' },
      { html: '8197 Rafz', placeName: 'Rafz' },
    ],
  ],
};

Maybe in the future we will rewrite the whole API of the table sortable to simplify the component completely.