Set initial sort params

[joegaudet]

Would be handy when providing pre-sorted data, or data that comes from an async source to define the initial sorting in some way. Especially for routing query parameters to the yeti table.

[cah-brian-gantzler]

<header.column @prop="points" @sort="asc" as |column|>
  Points
</header.column>

This is hardcoded as the initial sort, but you could use a variable if you like.

https://miguelcobain.github.io/ember-yeti-table/docs/sorting

[arthur5005]

Yeah, we saw that, but having to do this work on every column definition is a bit arduous.

We ended up extending the table and and overwriting the registerColumn method to set the column's initial state. This example assumes you can only sort 1 column at a time and it follows the prop\-prop way of defining ascending and descending (as a string).

  registerColumn(column) {
    if (this.sort && this.sort.includes(column.prop)) {
      column.set('sort', this.sort.includes('-') ? 'desc' : 'asc');
    }

    super.registerColumn(column);
  }

A sorting event would also be helpful for setting the QP after the interaction from the user.

Not sure what a more general version of this might look like, but happy to contribute, really like the ergonomics of this table component.

[miguelcobain]

Yeah, we saw that, but having to do this work on every column definition is a bit arduous.

I don't quite follow. You just have to do this for one column. The one you want sorted. How is that different from specifying a @sort argument on the table?

Wait, do you need to sort based on a query parameter?

[arthur5005]

Yes, we are driving the state of the table via Ember query parameters for both sort and pagination. This makes it easy for our users to share links and see exactly the same thing (after sort and pagination).

We could, as you said, on a per column definition basis, set the sort state based on the query parameter variable, using a template helper, but it feels like a lot of plumbing, I think that's all we're trying to say.

[miguelcobain]

I see. I think an optional global @sort argument + @onSortChanged action would make sense.

[arthur5005]

Yeah, us too. We're trying to understand what the API of the @sort property looks like more generically. Does YetiTable support or is intending to support multiple sorts?

[miguelcobain]

YetiTable does support multiple sorts, etc. So this api would have to account for that.

The first idea that comes to mind is to use a comma separated string with all the props in some format. Either prepending - or appending :asc/:desc.

Simple single sort:

@sort="firstName:asc"

if no direction is provided, asc is the default, so the above is functionally equivalent to:

@sort="firstName"

This would sort by firstName ascending first and then by lastName descending:

@sort="firstName:asc,lastName:desc"

after splitting the string by ,, we need to trim it, so that this also becomes a valid @sort value:

@sort="    firstName:asc   ,   lastName:desc  "

It makes sense to also support the array itself, especially with the introduction of the ember's array helper:

@sort={{array "firstName" "lastName:desc"}}

Using the - prefix, the above examples would become:

@sort="firstName"

@sort="firstName,-lastName"

@sort="    firstName   ,   -lastName  "

@sort={{array "firstName" "-lastName"}}

I really like the ergonomics of the - prefix. However the first format seems more in line with the existing api on the columns. 🤔

<header.column @prop="points" @sort="asc">
  Points
</header.column>

Any thoughts?

[joegaudet]

My vote would be for the - prefix as that's consistent with JSON:API (the whole value of this feature is piping query params to an API call).

.joe

On Tue, Aug 11, 2020 at 3:53 PM Miguel Andrade notifications@github.com wrote:

YetiTable does support multiple sorts, etc. So this api would have to account for that.

The first idea that comes to mind is to use a comma separated string with all the props in some format. Either prepending - or appending :asc/:desc.

Simple single sort:

@sort="firstName:asc"

if no direction is provided, asc is the default, so the above is functionally equivalent to:

@sort="firstName"

This would sort by firstName ascending first and then by lastName descending:

@sort="firstName:asc,lastName:desc"

after splitting the string by ,, we need to trim it, so that this also becomes a valid @sort value:

@sort=" firstName:asc , lastName:desc "

It makes sense to also support the array itself, especially with the introduction of the ember's array helper:

@sort={{array "firstName" "lastName:desc"}}

Using the - prefix, the above examples would become:

@sort="firstName"

@sort="firstName,-lastName"

@sort=" firstName , -lastName "

@sort={{array "firstName" "-lastName"}}

I really like the ergonomics of the - prefix. However the first format seems more in line with the existing api on the columns. 🤔

<header.column @prop="points" @sort="asc">

Points

</header.column>

Any thoughts?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/miguelcobain/ember-yeti-table/issues/284#issuecomment-672336631, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAA6IB4W4PRLIEMKJ5REK4LSAHDVFANCNFSM4PYCDVGA .

[cah-brian-gantzler]

So we actually ran a direct need for this and so better understand the issue. We created some custom code to handle this. We did use the - prefix.

Once I am done converting the components to glimmer, will make a PR that would make this easier.