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
    1. Home
    2. Tags
    3. q-table
    Log in to post
    • O

      How to highlight one row of a q-table at a time?
      Help • highlight q-table • • omar

      3
      0
      Votes
      3
      Posts
      924
      Views

      O

      @dobbel

      Thanks a lot, your idea worked! I modified the toggleSelected mutation in this way:

      toggleSelected({commit}, row) { if (row !== state.selectedRow) { Vue.set(state.selectedRow, "selected", false) Vue.set(row, "selected", true) state.selectedRow = row } }

      So, the props at the body slot level are useless?

    • KunalChoudhary

      quasar table selectable columns
      Help • help q-table select table • • KunalChoudhary

      2
      0
      Votes
      2
      Posts
      156
      Views

      dobbel

      @kunalchoudhary

      Here’s a demo to create a checkbox in the header of a particular field. How you would be able to select columns instead of rows is another problem.

      https://codepen.io/ontwikkelfabriek/pen/WNoLdGw

    • E

      q-table highlight filtered value
      Help • filter highlight hits q-table • • erhard

      5
      0
      Votes
      5
      Posts
      446
      Views

      X

      @erhard You could use the “item” scoped slot to create a custom template to output your data e.g. in a card, then use v-html and string replacement:

      https://codepen.io/xariusdesai/pen/XWNBLNZ

    • T

      Q-Table custom column width via column style property
      Framework • q-table • • thescript

      9
      0
      Votes
      9
      Posts
      8137
      Views

      F

      @metalsadman I still have problems with having fixed and auto fitting columns. Could you please extend (or create a new example) with two fixed width column and one filling the left space with ‘ellipsing’ or ‘word-wraping’.

      See my plain html example: http://jsfiddle.net/g40b6eqt/13/

      Thanks!

    • F

      q-table not showing manually generated columns in grid mode
      Framework • q-table • • firibz

      6
      0
      Votes
      6
      Posts
      674
      Views

      metalsadman

      @firibz you will have to write the whole unfortunately, like what’s in the example you can loop for columns that will have a generic look.

    • A

      Problem trying to change 'All' label in 'Records per page'
      Help • q-table • • aestheticarepa

      3
      0
      Votes
      3
      Posts
      1534
      Views

      A

      @s-molinari said in Problem trying to change 'All' label in 'Records per page':

      https://github.com/quasarframework/quasar/blob/c66d946e8dd5496eb20db7c0a0a81e18ce262f74/ui/src/components/table/table-pagination.js#L68

      It’s an internal language phrase.

      You can change the English (US) value here permantly (there is also a GB version too that would need changing, plus all the translations, should you wish to do that):

      https://github.com/quasarframework/quasar/blob/c66d946e8dd5496eb20db7c0a0a81e18ce262f74/ui/lang/en-us.js#L37

      Or change it during runtime (notice the mounted hook):

      https://codepen.io/smolinari/pen/KKpmELv?editors=1010

      Scott

      Oh, I didn’t know the framework had language packs, no need to change the internal values, thanks for the help!

    • S

      q-table on pagination Next flashes last page before showing next page
      Framework • q-table • • stuffy

      8
      0
      Votes
      8
      Posts
      1349
      Views

      metalsadman

      @stuffy your reproduction code has many errors, pls fix those non related to your question first. take this one from docs as example. https://codepen.io/metalsadman/pen/xxxJKmJ?&editable=true&editors=101

    • K

      [Solved] How to make a q-table with multiple headers?
      Framework • q-table • • KevinYang

      19
      0
      Votes
      19
      Posts
      8529
      Views

      s.molinari

      That is an old fiddle. Have a look at the header slot in QTable.

      https://v1.quasar-framework.org/vue-components/table

      This can get you rolling maybe.

      https://codepen.io/smolinari/pen/PgqEMM?editors=1010

      Scott

    • S

      Responsive layout in Q-Table v0.15
      Help • q-table • • section14

      4
      0
      Votes
      4
      Posts
      4064
      Views

      Hawkeye64

      if it helps, here is how I am using it. The first column and the last two columns need extra work. Everything else in the middle is done by a loop.

      <q-table dense color="teal-6" hide-bottom :data="alarms" :columns="columns" row-key="id" :pagination.sync="pagination" > <q-tr :id="props.row.id" slot="body" slot-scope="props" :props="props" @click.native="rowClick(props.row)" @dblclick.native="rowDoubleClick(props.row)" class="cursor-pointer" :style="rowStyleObject(props.row)"> <q-td key="downloaded" :props="props"> <q-icon :name="getDownloadStatusIcon(props)" /> </q-td> <q-td v-for="col in props.cols" v-if="col.name !== 'downloaded' && col.name !== 'acknowledgement' && col.name !== 'bookmark'" :key="col.name" :props="props" > {{ col.value }} </q-td> <q-td key="bookmark" :props="props"> <q-icon v-if="!props.row.bookmark" name="far fa-star" color="grey-4" @click.native="onBookmark(props.row)"/> <q-icon v-else name="far fa-star" color="teal-6" @click.native="onBookmark(props.row)"/> </q-td> <q-td key="acknowledgement" :props="props" :style="ackWhoStyleObject(props.row)"> <q-icon v-if="!props.row.ackWho" name="fas fa-ellipsis-h" color="grey-4" @click.native="onAckWho(props.row)"/> <q-icon v-else name="fas fa-bolt" color="teal-6" @click.native="onAckWho(props.row)"/> </q-td> </q-tr> </q-table>