q-table customize records per page dropdown?

  • Hi all. Following the instructions here I was able to customize the pagination icons, but I also want to replace the down caret in use for the “Records per page” item, can someone point me how to replace just that icon? Thanks!

  • @ssuess I believe that’s just a menu/QSelect, you can simply log the quasar $q object pertaining to iconSet and see what’s the icon being used there then you can assign your own icon to the related prop. Ie. this.$q.iconSet.somethingIcon = 'some-icon-name' just an example can’t check the correct obj atm.

  • Well, I can’t find this value represented anywhere in that object:

    {version: "1.14.5", config: {…}, platform: {…}, …}
    config: {}
    dark: (...)
    dialog: (_ref) => {…}
    iconMapFn: (...)
    iconSet: Object
    arrow: (...)
    carousel: (...)
    chevron: (...)
    chip: (...)
    colorPicker: (...)
    datetime: (...)
    editor: (...)
    expansionItem: (...)
    fab: (...)
    field: (...)
    name: (...)
    pagination: (...)
    pullToRefresh: (...)
    rating: (...)
    set: (...)
    stepper: (...)
    table: (...)
    tabs: (...)
    tree: (...)
    type: (...)
    uploader: (...)
    __ob__: Observer {value: {…}, dep: Dep, vmCount: 0}
    get arrow: ƒ reactiveGetter()
    set arrow: ƒ reactiveSetter(newVal)
    get carousel: ƒ reactiveGetter()
    set carousel: ƒ reactiveSetter(newVal)
    get chevron: ƒ reactiveGetter()
    set chevron: ƒ reactiveSetter(newVal)
    get chip: ƒ reactiveGetter()
    set chip: ƒ reactiveSetter(newVal)
    get colorPicker: ƒ reactiveGetter()
    set colorPicker: ƒ reactiveSetter(newVal)
    get datetime: ƒ reactiveGetter()
    set datetime: ƒ reactiveSetter(newVal)
    get editor: ƒ reactiveGetter()
    set editor: ƒ reactiveSetter(newVal)
    get expansionItem: ƒ reactiveGetter()
    set expansionItem: ƒ reactiveSetter(newVal)
    get fab: ƒ reactiveGetter()
    set fab: ƒ reactiveSetter(newVal)
    get field: ƒ reactiveGetter()
    set field: ƒ reactiveSetter(newVal)
    get name: ƒ reactiveGetter()
    set name: ƒ reactiveSetter(newVal)
    get pagination: ƒ reactiveGetter()
    set pagination: ƒ reactiveSetter(newVal)
    get pullToRefresh: ƒ reactiveGetter()
    set pullToRefresh: ƒ reactiveSetter(newVal)
    get rating: ƒ reactiveGetter()
    set rating: ƒ reactiveSetter(newVal)
    get set: ƒ reactiveGetter()
    set set: ƒ reactiveSetter(newVal)
    get stepper: ƒ reactiveGetter()
    set stepper: ƒ reactiveSetter(newVal)
    get table: ƒ reactiveGetter()
    set table: ƒ reactiveSetter(newVal)
    get tabs: ƒ reactiveGetter()
    set tabs: ƒ reactiveSetter(newVal)
    get tree: ƒ reactiveGetter()
    set tree: ƒ reactiveSetter(newVal)
    get type: ƒ reactiveGetter()
    set type: ƒ reactiveSetter(newVal)
    get uploader: ƒ reactiveGetter()
    set uploader: ƒ reactiveSetter(newVal)
    __proto__: Object
    lang: (...)
    notify: ƒ ()
    platform: {userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 11_1_0) App…ML, like Gecko) Chrome/87.0.4280.67 Safari/537.36", is: {…}, has: {…}, within: {…}, install: ƒ}
    screen: (...)
    version: "1.14.5"
    get dark: ƒ reactiveGetter()
    set dark: ƒ reactiveSetter(newVal)
    get iconMapFn: ƒ reactiveGetter()
    set iconMapFn: ƒ reactiveSetter(newVal)
    get iconSet: ƒ reactiveGetter()
    set iconSet: ƒ reactiveSetter(newVal)
    get lang: ƒ reactiveGetter()
    set lang: ƒ reactiveSetter(newVal)
    get screen: ƒ reactiveGetter()
    set screen: ƒ reactiveSetter(newVal)

    And looking at the html it spits out does not help either:

    <div class="q-field__append q-field__marginal row no-wrap items-center q-anchor--skip"><i aria-hidden="true" role="presentation" class="q-select__dropdown-icon fal fa-caret-down q-icon notranslate"> </i></div>

    I tried setting many variations of the following with no success:

    this.$q.iconSet.dropdown = 'fal fa-angle-down'
    this.$q.iconSet.select.dropdown = 'fal fa-angle-down'
    this.$q.iconSet.dropdownIcon = 'fal fa-angle-down'

    Any pointers or suggestions?

  • @metalsadman I have tried many other combinations, like this.$q.iconSet.selectDropdownIcon = 'fal fa-angle-down' and nothing works, do you know where I can find this reference? Thanks.

  • UGH I finally found it by digging into node_modules/quasar/src/components/select/QSelect.js! The value, in case someone else needs it is:


Log in to reply