Adjust column width to cell content?

Hello all,

for a project we are doing, we need to have the following:
A Table to take up 100% of the width of the page (or parenting container) → easy :slight_smile:

However we want the colums to automatically adjust their width to the width needed to show the data inside their cells.
The fact that this will most likely create a horizontal scroll bar on the table is not an issue. However we don’t accept a scroll bar inside of a cell.

In other words, this solution is not the correct one:

.v-table-cell-wrapper{
    overflow:auto;
}

Any and all help is appreciated!

regards,
Pieter

Nobody has encountered this before?
Or isn’t anybody able to get around this issue?

Again, any an all help is appreciated!

Hi,

not helping too much, just pointing out that as far as I know, the kind of expansion you want is not possible.

This is a limitation imposed by the lazy loading - the column widths should actually behave just as you describe, but the width is calculated by the first “page” (set of rows) loaded to the client. Therefore if you have longer strings etc. in some of the rows not yet loaded, the column widths will no longer change. This might be doable quite easily but I’m not sure how disturbing/flickering/whatever it would be if the width of the table columns would change while you’re scrolling the table. The table obviously can’t set them initially since it has no idea about the widths of the rows not yet loaded.

There’s two simple workarounds I can think of:

  1. If your table does not have huge amounts of data, you could disable lazy-loading (call setPageLength(0) on the table). After this all the rows are loaded to client at once and the column widths are set by the longest columns in the whole data set.

  2. Use PagedTable and call setAlwaysRecalculateColumnWidths(true) on it. When this is done the table will reset the column widths to fit the content after each ‘page’ load.

-tepi

Hey Teppo,

the setPageLength(0) call is not exactly what I’m looking for (couple of million records is a bit much :slight_smile: )

However, the PagedTable seems to do the trick!

I’ll be working it out to see if I can use this addon to provide me with whatever I need.

Thanks a million for the tip!

regards,
Pieter

setAlwaysRecalculateColumnWidths means all columns setColumnWidth(propertyId, -1);