Q-Table custom column width via column style property

thescript

It is stated in the quasar documentation that total customization of rows and cells is through scoped slots, would like to know what needs to be done aside from setting the columns array with style property, and also when customizing the body, is it need to also modify the header? thanks.

Sample from the documentation:

columns: [
{
name: ‘name’,
required: true,
label: ‘Dessert (100g serving)’,
align: ‘left’,
sortable: true,
style: ‘width: 100px’,
classes: ‘myClass’
},

metalsadman

@thescript you will also have to set the headerStyle and use max-width. https://codepen.io/metalsadman/pen/XWXVNoZ

thescript

@metalsadman thanks awesome, can we have multiple style attributes?

metalsadman

@thescript yeah, in a form of a string, or you can use the classes props headerClasses and classes. can check in here https://quasar.dev/vue-components/table#Defining-the-columns.

marcelo

I have been trying to set fixed columns width with style and headerStyle and CSS min-width, width, and max-width and looks like these values are sometimes overwritten to make sure table fits on space/screen…
Still don’t know how to do it
A working example would be just great!

metalsadman

@marcelo did you see the codepen above? Otherwise make a codepen of what you’ve done, if cell content is not a simple text then you would probably use slots and set your styles there in a div.

thescript

@metalsadman thanks for the tips, it’s working fine now.

Li Yao

@metalsadman Wow, this question has been bothering me for a long time. I saw your solution today and suddenly understood. Thank you.

felix41382

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