Set a max-width and max-height for table cells

Question

Is it possible to set a max-width and max-height for cells in Handsontable?

I've tried to set this via CSS on the <th> and <td> elements but this doesn't work.

I saw in the docs that you can set the columns to particular widths, but not maximums.

Don't know the answer and have been wanting to know myself but here's a place to start: if you don't set the colWidths and set the rowResizing to true, then there is a min-width that gets setsomewhere to not allow youto go below the width neededto show the entire colHeader. Maybe that helps? — ZekeDroid, Mar 04 '15 at 06:43
Got something. When you say "set a maximum" did you mean for resizing events or in general? I wrote something up for resizing which can be adapted for if you wanted just in general, on render, to not allow beyond a certain amount. Let me know but in the meantime I'll post the resizing one — ZekeDroid, Mar 09 '15 at 18:00
Did you solve the problem after all? I heard back from the HOT team that says they're going to be developing this feature in the coming future. — ZekeDroid, Mar 12 '15 at 01:17

ZekeDroid · Answer 1 · 2015-03-09T19:04:36.950

So, the solution is to use your HOT instance's manualColumnWidths array. This array will set the widths for all columns automatically. It's nested somewhere in the code so that anytime there's a change to the DOM it updates which is why using CSS or jQuery on the widths of the elements themselves wasn't working. It's a good structure, we just need this to be more explicitly written somewhere.

Note that you can repeat this for rows by just using manualRowHeights instead, as well as the rest of the row methods.

Now, here is how you would set maximums and minimums for column resizing events. Set the afterColumnResize option to this following function:

function setAfterColumnResize() {
  return function(col, size) {

    var headers = $(".colHeader"); // first is empty if there are rowHeaders
    var maxW = [10, 200, 400]; // note that the first is the row header
    var minW = [1, 100, 100]; // note that the first is the row header

    var actualCol = col + 1; // this is to account for the row header

    var maxColW = maxW[actualCol];
    var minColW = minW[actualCol];
    var actualW = $(headers[actualCol]).parent().parent().width();

    if (hot && maxColW && actualW > maxColW) {
      hot.manualColumnWidths[col] = maxColW;
      hot.render()
    }

    if (hot && minColW && actualW < minColW) {
      hot.manualColumnWidths[col] = minColW;
      hot.render()
    }
  }
}

Now let me explain it. When this event gets triggered, you first find the header using the col index it gives you. Correct it if you have row headers set to true (which is what I do here and in the fiddle). Then you set the arrays of max/min widths (of course you can do this more elegantly in your code).

Then grab the actual current width of the column in question by looking at the parent's parent of the span (this is a little messy but it's the simplest way I found of doing). The conditional after should be self explanatory.

And lastly, the important bits. You can see that by accessing hot.manualColumnWidths you can set the width that you want. I set it to the max if my current width exceeds it. Then just re-render and you're done!

There are a few issues like the fact that these events get called only after resizing so if you originally set the table to render with a width larger than your max, it won't do anything. If that's the case, just call this function after rendering the table the first time (call it once per column).

This would also be the case if you didn't want to use the column resizing event; in this case, it would just be a normal function that you call after rendering.

Hope this helps! Here is a demo fiddle showing it in action :D

Hmm, your fiddle doesn't appear to work. I can type in a ton of text into any column, and it will exceed the widths specified in maxW. When I try to resize it, the columns width won't change it just maintains the current width. — Don P, Apr 06 '15 at 09:28
You didn't specify that. I thought you meant you wanted to restrict resizing beyond a certain point. The fiddle works exactly as it's expected. Your problem was a lot simpler than you made it out to be so you should have specified that you were talking about max and min during typing of text. — ZekeDroid, Apr 06 '15 at 15:23
I just mean that the cell should never exceed the max-width or max-height. Whether the table has just loaded, you are typing, resizing, etc - the cells should not exceed the max-width or max-height — Don P, Apr 06 '15 at 19:31

Set a max-width and max-height for table cells

1 Answers1