Pages section - table layout - option to shrink column width to fit content#463

The table layout currently cannot shrink a column width to fit the content.

For a lot of data, such as dates and numbers, it’s not useful to show partial (cut-off) data.

This means in order to not allow the data to get cut-off as the browser gets narrower, you’d have to make the column a lot wider for safety, taking space away from other columns.

This is especially undesirable when the other column(s) contain text such as title, where you want to see as much of it as possible. Having the data column sized to fit would maximize the the amount of text being displayed, leading to a better user experience.

Currently it is possible to pass a fixed width for column size in the blueprint (not mentioned by documentation, but it works), while this avoids wasting space to accommodate varying browser width it is still unavoidable to build in a safety margin due to the dynamic nature of the data shown. In addition, if the site is multilingual, data shown in one language could be a lot wider than another.

I tried poking around the CSS style for the panel, it looks like the reason you cannot have shrink-to-fit column is because .k-table uses table-layout: fixed which completely ignores content for sizing purposes. It also allows overflow of table cells.

I’ve tried to remove that line, and get the cells to overflow correctly via max-width: 0 for the <th> and <td> elements. However I then ran into various width issues that aren’t easy to solve because it requires fiddling with the styling for UI elements that are shared with other panel widgets.

I really don’t want do brain surgery on the Panel styling, because then I’m effectively forking the panel UI and I’m on my own for ensuring compatibility for all future updates and plugins that I want to use.

So I’m putting it as a suggestion here and will live with the lack of shrink-to-fit column for now.