Vuetify: [Enhancement Request] Table header/field with custom width

[4eveRS]

I'm here asking for a small feature that would help a lot on better information display and visual match/fidelity for data tables.

Change the header size to a certain percentage or pixel size. Simply by adding a attribute to the headers object, like width: '50%' or '50px'.

For example the first column/field of the table should occupy 50% of the table total width, while the other 2 columns/fields should occupy 25% each. Today in the presented data tables component, it splits the header width by the number of columns and you have to "hard" code every to match the size that you want.

It's a simple feature that could add bring a better flexibility to the data tables component and make the code cleaner.

[jacekkarczmarczyk]

With https://github.com/vuetifyjs/vuetify/pull/1863 we can now add custom class to the header and specify the width in the css. Do we still need a separate property for this?

[rafaelrenanpacheco]

@jacekkarczmarczyk I think classes doesn't solve this issue, because the header width can be anything between 0% and 100%, and can be set directly as a html property for the th tag. The solution for this case would be the creation os 101 css classes to prepare for all cases, which isn't nice.

Also using classes to mixin with Vuetify components doen't work very well, because generally the css is scoped in the component that uses Vuetify. Vue.js will hash the scoped css, which will not match the css provided in the header custom class you suggested. Most of the "custom classes" properties Vuetify provides does not work with Vue.js scoped styles.

[KaelWD]

generally the css is scoped in the component that uses Vuetify

https://vue-loader.vuejs.org/en/features/scoped-css.html#deep-selectors

[rafaelrenanpacheco]

@KaelWD wow! Thanks for the tip!

But since html has an attribute to set header's width, I'll PR this feature I had just coded to allow this option.

Thanks again :+1:

[SujanKumarK]

Hi
Can i get sample code to set custom width for a column

[nekosaur]

Please direct questions to our chat. You can join us at https://chat.vuetifyjs.com

For posterity's sake, you set column width by having a width property on a header item.

{ text: 'Calories', value: 'calories', width: '10%' },

[l0nley]

And what about case when hide-headers applied?

[jacekkarczmarczyk]

Please do not comment old closed issues. You can ask questions on our discord channel https://chat.vuetifyjs.com

[manavm1990]

Or here