No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Is there a way to set sort order in q-table as desc,asc,no sort ?

    Framework
    3
    5
    4334
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • L
      lakshmi last edited by

      Is there a way to set sort order in q-table as desc,asc,no sort ? I see the default order as no sort,asc,desc but i want the opposite way due to type of data i use where i am more interested about bigger value at top and wanted to skip 2 clicks to get them??

      1 Reply Last reply Reply Quote 0
      • metalsadman
        metalsadman last edited by metalsadman

        @lakshmi set pagination: { descending: true, ... } then in QTable <q-table ... pagination.sync="pagination" ... />. https://quasar.dev/vue-components/table#QTable-API Props -> Pagination -> pagination.

        1 Reply Last reply Reply Quote 1
        • L
          lakshmi last edited by

          @metalsadman thanks a lot for quick response… i am using the same for pagination but the behaviour seems to be the same
          1.no sort
          2.ascending
          3.descending

          1 Reply Last reply Reply Quote 0
          • metalsadman
            metalsadman last edited by metalsadman

            what did you set your pagination object? here an example https://codepen.io/metalsadman/pen/LwWebB?editors=1011

            1 Reply Last reply Reply Quote 0
            • H
              hugoberry last edited by

              I’ve solved this by replacing the icon of the column from upward to downward and then reverse the direction of sorting

              {{col.label}}<q-icon :class="props.cols[10].__iconClass" name="arrow_downward" /></div>
              ...
              sorting(data, sortBy, descending){
              ...
              const dir = descending ? 1 : -1 //opposite logic
              ...
              }
              
              1 Reply Last reply Reply Quote 0
              • First post
                Last post