[Feature Request] Make el-table-column width size proportional to its content

[alvarolemos]

Existing Component

Yes

Component Name

el-table-column

Description

I'm working on a system that has lots of CRUD tables and I'd like their column width to be variable. Specifically, their width should fit its content. Right now, the Table-Column Attributes available doesn't support that. All the examples on the documentation uses hard-coded width, witch we rather not do in that particular project.

Is there something we are missing or this is not possible with the current API. And if it isn't, would you mind to make it possible?

Thanks in advance,

Álvaro

[hzy333]

I have the same demand.

[ihoment-amu]

yeah , i think it 's fit of the table attributes not working by the way. or fit isn't working depend on column's content.

[vgavro]

here is related issue with material-ui, I believe problems discussed there are same.
mui/material-ui#1911

[furybean]

Sorry, we have no plan to support this.

[furybean]

Sorry, we have no plan to support this.

[ghost]

@alvarolemos
I needed something similar. A hacky way to do this. You have to play with numbers to get ultimate best result according to fontsize etc.

<el-table-column 
v-for="(item, index) in fields" 
min-width="50px" 
:width="item.name.length * 6 + 50 + 'px'">

[mnm1001]

this repository may help ex-table-column
can automatically adjust column width according to content.

Hope this can help you.

[valentinMERCIER]

No plan for re-opening this Request ?

[nicholasoxford]

Would love to have this

[astoliarov]

+1
This would be nice

[syJSdev]

+1

[jorge-romo]

Would be nice.

[BrandonMendoza]

Would be nice.

[alexanderkraemer]

Hey guys, I solved it by doing the following:
<el-table-column v-if="contentWidth" :width="contentWidth">

getContentWidth() {
   let maxWidth = 0
   this.rows.forEach(t => {
     if (t.content.length > maxWidth) {
       maxWidth = t.content.length
     }
   })
   // adding 20px width for padding
   this.contentWidth = (maxWidth + 20).toString() + 'px'
 },

I also had a watcher on the rows variable, so everytime this changed, i recalculated the width of the column.

[eloise-mcintyre]

This would be a great addition

[litoxy]

This would be a great addition

I calc the header field width and

Hey guys, I solved it by doing the following:
<el-table-column v-if="contentWidth" :width="contentWidth">

getContentWidth() {
   let maxWidth = 0
   this.rows.forEach(t => {
     if (t.content.length > maxWidth) {
       maxWidth = t.content.length
     }
   })
   // adding 20px width for padding
   this.contentWidth = (maxWidth + 20).toString() + 'px'
 },

I also had a watcher on the rows variable, so everytime this changed, i recalculated the width of the column.

I did the same. But if the content is html, it will bad - -

[Alex-wwei]

it`s so bad.

[wll8]

Similar to this parameter: https://www.antdv.com/components/table/#scroll

[jvalrog]

bad framework is bad

[vildanbina]

2024 is starting and there is still no solution 😆