Using Sort-Column with custom compare function


I’m using vaadin-grid-column with a custom renderer (displaying two information at once). Now i want to add sort functionality by introducing vaadin-grid-sort-column but the only way i see is using the path attribute which only allows me to sort by one information. Is there a way to provide a custom compare-function to the sort column i didn’t see?

The point is that you will get the sort properties in the GridDataProviderParams parameter. And then you can sort as you like. Don’t you use an endpoint to get and sort the data?

In case i use dataprovider i will send the sort order to the server, sort there m having no problem. But in this special case i already have all data on the client and use the .items property instead

Based on the documentation there is no way to use a comparator: Vaadin web components

too bad, ok have to look for a workaround

You could use the dataProvider API. The params contains the sort orders and you can then sort the array as you wish in TS

That said, if you are binding to an in-memory array, you don’t have to implement the logic yourself, you can use the built-in sorters.

<vaadin-grid .items=${this.shoppingList} multi-sort>
  <vaadin-grid-sort-column path="quantity"></vaadin-grid-sort-column>
  <vaadin-grid-sort-column path="product"></vaadin-grid-sort-column>

The multi-sort attribute enables sorting by multiple columns

@secure-leopard Thanks for the suggestion. I think i will go the dataprovider route. Using the builtin sorters wont work i my case i think, because i have one column (with a custom renderer) showing two timestamps and when the user wants to sort by this column i have to sort by both timestamps.