quasarframework / quasar

Quasar Framework - Build high-performance VueJS user interfaces in record time
https://quasar.dev
MIT License
25.64k stars 3.47k forks source link

Feature Request / Problem: Change sorting order icons in QTable / current make no sense #5065

Closed aprixon01112017 closed 4 years ago

aprixon01112017 commented 4 years ago

https://quasar.dev/vue-components/table#Basic

Currently an arrow down is displayed for descending order and arrow up for ascending order.

Compare to Windows Explorer, MacOS, KDE: All of them display not full arrows with shafts, but triangles - and for good reason: With a triangle the emphasis is on a small tip and on a wide (large) base which corresponds with the sorted elements. But an arrow primarily points into one direction. But a direction down or up in the context of sorting has no clear meaning.

So I propose to follow these established icons.

rstoenescu commented 4 years ago

Hi,

According to Material Guidelines, that's the way to do it.

material-datatable

However, you can change the icon in a boot file:

import MaterialIconSet from 'quasar/icon-set/material-icons'
MaterialIconSet.table.arrowUp = 'arrow_drop_down'

Result:

table

Quasar is highly configurable ;)

rstoenescu commented 4 years ago

The Quasar icon sets are located here: https://github.com/quasarframework/quasar/tree/dev/ui/icon-set

p3v9d5ui commented 4 years ago

@rstoenescu , when you say "boot file", what are you referring to? I tried this in my Vue.js app's main.js file, and tried setting the arrowUp value both before and after Quasar is loaded, like so:

MaterialIconSet.table.arrowUp = 'keyboard_arrow_up' Vue.use(Quasar); MaterialIconSet.table.arrowUp = 'keyboard_arrow_up';

But, this has no effect. Any idea what I'm doing wrong?

rstoenescu commented 4 years ago

@p3v9d5ui The full content of the boot file should be just this:

import MaterialIconSet from 'quasar/icon-set/material-icons'
MaterialIconSet.table.arrowUp = 'keyboard_arrow_up'

Nothing else. Especially no Vue.use(Quasar).

p3v9d5ui commented 4 years ago

Thanks @rstoenescu . I don't think Quasar boot files work with my app. This is a Vue.js app which just loads Quasar via Vue.use(Quasar).

In any case, It tried to create a boot file in the app root, according to the documentation and got this:

✗ quasar new boot quasar-boot app:paths ⚠️ Error. This command must be executed inside a Quasar v0.15+ project folder. +0ms app:paths For Quasar pre v0.15 projects, npm uninstall -g quasar-cli; npm i -g quasar-cli@0.6.5 +2ms

Can I manually create a boot file?

Thanks.

rstoenescu commented 4 years ago

@p3v9d5ui Boot files are a Quasar CLI feature...... :|

p3v9d5ui commented 4 years ago

There's more helpful information here:

https://quasar.dev/options/quasar-icon-sets#Installing-a-Quasar-Icon-Set

For me, this was the easiest:

this.$q.iconSet.table.arrowUp = 'keyboard_arrow_up'

shomalikhashayar commented 12 months ago

How can I change quasar sorting icon in q-table in 2023?