Support variable width row headers

[chahu]

I'm working on a project which is attempting to use handsontable, however we're running up against the fact that the row-header-column is a fixed width (and not very wide). This cause the vast majority of our row header labels to be truncated. One alternative is to tweak the CSS and widen that first column a fixed amount, but this is not an option as the data we are displaying could vary in length/width. I've also tried changing the CSS and commenting out some of the lines with "width: 0" -- this "works" in that the row-header-column does indeed become variable width, but the scrolling logic becomes buggy.

Long story short, how can I get the below to show my row headers (without having a fixed-width column) and keep the nice scrolling functionality:

http://jsfiddle.net/4587J/6/

Thanks!
Charlie

[scottfrenz]

I second this request. I have header cells that need large widths as well. Thanks!

[setthase]

Seems to be similar to #328

[chahu]

Yes, it is very similar, and I found that thread long ago, however the suggested solution did not fix the problem. If you're able to modify the CSS as suggested on my jsfiddle example and cause the rows to be variable width and scrolling to continue to work I'll be happily mistaken.

Regards,
Charlie

[ajlaventure]

I am also running into this issue as well where you can't scroll to the last cell. I plan on calculating the visible columns, average column size, and setting the width of the table so it's the browser's scroll bar and not the handsontable.
An option to have the table always be max width and use browser's scroll bars would be nice as well

[warpech]

Version 0.9.0 no longer uses hard-coded row header width. Thanks for reporting this!

[warpech]

But you still have to define row header width using CSS - http://jsfiddle.net/4587J/9/

[chahu]

There is still no support for "variable width row headers". Your solution (below) hardcodes a width of 180px in the css. This won't work if a row header is a very long string longer than 180px, nor will it look good when all the row headers are very short. Since this issue was titled "Support variable width row headers", I think should remain open.

Thanks.

.handsontable col.rowHeader {
    width: 180px;
}

One additional comment: I do appreciate the situation is improved as you make it easier to define a fixed column width for the row headers. However, the idea is that the row headers are not known apriori during development and will vary as the table is populated dynamically.

[nkoren]

I'd like to echo the request to re-open this issue, since it has clearly not been addressed (there is no way to dynamically resize row headers).

[jingzans]

Does anyone know how to right align the row header?

This doesn't seem to work:

.handsontable col.rowHeader {
width: 180px;
text-align: right;
}

[tartor]

Workaround
in the config implement afterLoadData callback to change the width of all the elements that have class name 'col.rowHeader'

var ht = new Handsontable(
document.getElementById(id),
{
afterLoadData: function(){
var rowHeaders = document.getElementById(id).querySelectorAll('col.rowHeader');
if (rowHeaders.length != 0) {
for (var j = 0; j < rowHeaders.length; j++) {
rowHeaders[j].style.width = "200px";
}
}
}
}
);

where id is the id of the html element which holds the handsontable

[realtebo]

Is there any CSS way to defined a 'auto-width' for row headers ?

[donmccurdy]

Could this issue be reopened? The JSFiddle posted by the OP (which I've updated with fixed links to CDN js/css) is still showing row headers fixed at 50px. As pointed out, the 50px can be overridden in CSS, but this isn't ideal.

@realtebo No, not without using JavaScript to calculate what the magic width should be, and then applying it in CSS.

[AMBudnik]

@donmccurdy this issue is continued (and marked as a bug) at #2868