q-table - please add "sort direction" param to column definition

[Daemach]

Here's a video describing the problem: https://www.screencast.com/t/GtHFyqLMA

It would be wonderful if I could add an attribute as below that would set the default sort direction at the column level, rather than just once for the initial load in the pagination object:

{
  name: "globalblacklist",
  align: "center",
  label: "GBL",
  field: "globalblacklist",
  sortable: true,
  **sortDir: 'desc' || descending: true  //defines initial sort when column header is clicked**
},

Numeric columns are nearly always more useful sorted desc initially, whereas alpha columns are better sorted asc. This is the case whether the data comes from an array of objects or from an ajax call.

And since I'm stuck on Q1 at the moment, backporting it there would be great. Although having it in Q2 might be enough for me to make the switch...

[Daemach]

I just wanted to mention that I know I can pass a custom sort function, but the asc/desc icons are problematic. When there is an asc icon (arrow pointing up) but the sort is desc, it looks broken. Visual cues are important, and consistency is perceived as quality in the financial services industry as everyone is very detail oriented.

[rstoenescu]

Will be available in Quasar v2.0.0-beta.13 & Quasar v1.15.11: new prop (column-sort-order) and new "columns" definition prop (sortOrder).

Values: "ad" (ascending-descending) and "da" (descending-ascending). Default is "ad".

PS: thank you for being a sponsor.

[Daemach]

Thank you, Razvan!

…

On Sat, Apr 24, 2021 at 6:18 PM Razvan Stoenescu ***@***.***> wrote: Will be available in Quasar v2.0.0-beta.13 & Quasar v1.15.11: new prop (column-sort-order) and new "columns" definition prop (sortOrder). Values: "ad" (ascending-descending) and "da" (descending-ascending). Default is "ad". PS: thank you for being a sponsor. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#8527 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AC7Y5YL3IIJA744TZ6ZB2WTTKNUXHANCNFSM4YA4WR6A> .

[Daemach]

The sorting works. Thanks very much for adding this!

One very minor issue is that I would expect to see a down arrow when mousing over the column header of a column with a default descending sort. https://www.screencast.com/t/MpNdVZ76eHq When clicked, it does sort correctly and the arrow changes to point downward. Just confusing to see an asc hint and the sort be desc.

[rstoenescu]

I know, but implementing that requires way too much overhead which honestly we're better off...

[vojvodics]

@Daemach or anyone having the same problem. You can easily fix this with CSS:

just add a desc-first in headerClasses if you are using 'da' sortOrder for that column.
Then, just add this:

th.desc-first:not(.sorted) .q-table__sort-icon {
    transform: rotate(180deg);
  }

[Daemach]

@vojvodics Thanks for this suggestion. I appreciate it!

[Daemach]

I tried implementing this today, but get the following error. Where am I going wrong?

[MilosPaunovic]

Have you tried pasting it exactly as @vojvodics suggested?

th.desc-first:not(.sorted) .q-table__sort-icon {
  transform: rotate(180deg);
}

[vojvodics]

@Daemach Sorry, initially I pasted the version for scss, so either copy the latest code, or just add <style lang="scss"> instead of <style>

[Daemach]

Using your updated code worked. Thanks again for following up!

[Daemach]

@rstoenescu this is an elegant, low-overhead solution. Can this be added to the code base so I don't have to manually add it everywhere?

[Daemach]

@pdanpdan

[AlphaJuliettOmega]

@rstoenescu is this feature in yet?
Closing the ticket before it's released makes it confusing

I'm on

"@quasar/app-webpack": "^3.6.1",

Columns marked sortable:true

      v-model:pagination="defaultPagination"

With this model:

    const defaultPagination = {
      sortBy: 'date', // matches column Name in Columns definition
      descending: true
    }

It sorts it fine when the page loads but all columns are locked now, can't switch to sorting on another column

[AlphaJuliettOmega]

Will be available in Quasar v2.0.0-beta.13 & Quasar v1.15.11: new prop (column-sort-order) and new "columns" definition prop (sortOrder).

I have the column-sort-order property pop up so I have typings for it, but it doesn't have anything to do with choosing which column is to be default sorted.

And my columns are still locked if I set my default like above.

What am I missing?

[maggie9595]

Still having this issue but the CSS above worked for me as a temporary fix.