Data Table Multiple Column Sort

  • I would like to implement multiple column sort for the data table with the least hackery possible.

    Basically if I click sort on two columns, the first columns sort will remain and the second will then be sorted.

    Kind of like a ‘sticky’ sort.

    Any tips?


  • Use a data table with multi col sort already in it. The one in Quasar in very limited as are most in any component framework and why entire companies (many with open sorce versions) specialize it data tables only. Advanced features like that are typically only available in those.

  • As @genyded said, that is ULTRA complex and undertaking this in vue will probably make you want to go on vacation. Just thinking out loud, you will probably need to maintain a “ghost object” of the sorted first column and then using some ES-foo

    Object.keys().sort().forEach(()=>{} where you pop the object’s keys from the first sorting according to the second sorting into a new array and then use that to resort the table. My brain hurts just writing that.

    My feeling is that you would be better off learning how to use graphql and prisma.

  • Vuetify currently has this. I’m surprised Quasar doesn’t support it. I had it working on vuetify with an external API hitting the DB and refreshing the table contents. In vuetify, the sort object contains and array of objects consisting of column names and asc or desc. Worked really well.

Log in to reply