I’m using Handsontable version 6.2.2 and I need to make it so that the default maximum size of any column width is a certain length but I want the user to still be able to resize the column after we have shown them the initial table. How do I achieve this?
In this example above, I don’t want the last column to be stretched that long but I don’t want to touch the other column widths.
Hi @maxxue2000
Can you please check this example and let me know if that meets your requirements? https://jsfiddle.net/handsoncode/crpa4mwb/
I used colWidths option to set the maximum default width, but you can still resize them manually.
I’d like all the columns widths to be whatever their default size is, i.e., not have to define what each column width is.
The exception is when a particular column width exceeds a certain length. Then I would like to add a limit to the width of that column. However, I still want users to be able to freely change the width after the initial render.
The logic would be something like this:
if (defaultColWidth > 500px) {
colWidth = 500px;
} else {
// do nothing
}
I saw a hook called beforeStretchingColumnWidth but I can’t seem to get it to fire when the table is first loaded. Not sure if that’s the right place to look.
Hi @maxxue2000
I tried a different approach, and I think it does what you need. Please check the new example: https://jsfiddle.net/handsoncode/5mtrx8k0/
The width limit for all columns is set to 200 but you can still resize them.
Thanks for the example. It’s nearly there for my use case.
However, I’m looking for a manual resize only on the initial load of the table. After the table has been rendered for the first time, I do not want to limit the user’s ability to resize the table ever, which is what your example is doing. They should be able to resize beyond the limit.
Is there some kind of hook in v6.2.2 I can use that lets me hook onto right before the initial render of the table. I had a look at beforeRender but it seems to run the hook every time the user scrolls (I assume because the table needs to rerender on scroll).
Hi @maxxue2000
There are a few things I have to mention at this point. First is that v. 6.2.2 doesn’t have support plans, as it’s on MIT license, so the guidance and those simple examples is as much as we can do.
The second thing is that it had many issues that were solved after v. 8.0 and in my examples I use the most current version, 14.5.
The last thing is that I’m a little bit confused by your requirements, because the last example I sent is exactly what you asked for at the beginning:
I need to make it so that the default maximum size of any column width is a certain length but I want the user to still be able to resize the column after we have shown them the initial table.
Thanks for the support so far even despite the unsupported version I’m using. Appreciate it.
As for your last point, sorry I miscommunicated the requirements. A more accurate requirement would be:
I need to make it so that the maximum size of any column width is a certain length on the first render when the table first appears but I want the user to still be able to resize the column without limit (i.e., beyond the previously mentioned max width) after all the data has populated the first render/calculation of the table.
If there is a simple example available or sending me in some sort of direction for further investigation, that would be greatly appreciated.
Hi @maxxue2000
My colleague took some days off so I wanted to make a small update.
As mentioned, colWidths is an option that allows you to specify widths for columns - https://handsontable.com/docs/javascript-data-grid/api/options/#colwidths. It can be set on the initialization and altered at some point using updateSettings() method.
You can also alter the width using a custom cell renderer. Then you wrap the cell content in a DIV with some predefined width.
Generally, in Handsontable we do not have options called min-width or max-width so maybe that’s why we weren’t able to help you right away.