No More Posting New Topics!

@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

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

@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

@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!

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

@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!

@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

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

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>