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

Created on 11 Sep 2019  ·  7Comments  ·  Source: quasarframework/quasar

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.

feature request

Most helpful comment

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 ;)

All 7 comments

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 , 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?

@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).

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 [email protected] +2ms

Can I manually create a boot file?

Thanks.

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

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'

Was this page helpful?
0 / 5 - 0 ratings