Search code examples
csshandsontable

Selected row goes out of visible area when i override handsontable height property

I have a table with 12000 rows. My testing scenario is :- 1) Select any row in the table 2) click on any column header(Sorting) 3) the data gets sorted and the selection should be maintained and selected row should be in visible area.

Correctly working use case:- when no parameter in _r8handsontable.scss are modified, it works perfectly fine, selection is maintained and selected row comes in the visible area.

Problematic scenario:- As i wanted to increase the height of the row. I created a separate css file and overwrote some of handson properties in it. Modified properties in my overridden css are :- 

.handsontable th,
.handsontable td {
border-right: 1px solid #CCC;
border-bottom: 1px solid #CCC;
height: 30px;
empty-cells: show;
line-height: 30px;
max-height: 30px;
padding: 0 4px 0 4px;
/* top, bottom padding different than 0 is handled poorly by FF with HTML5 doctype /
background-color: #FFF;
vertical-align: top;
overflow: hidden;
outline-width: 0;
white-space: pre-line;
font: $FontSize_S, "Siemens Sans";
/ preserve new line character in cell */
}

I change the height of the row to 30px. Now when i open the table the height of the rows are increased. Look and feel of table is according to my needs. But the problem in this case is :- when i select a row and click on the table header for sorting the selection is maintained but the visible rows goes out of the visible area.

For example - I have my table sorted in ascending order by default. If i select the 1st row and than click on column header for sorting. Now my table get sorted in descending order and my selected row moves to the bottom and selection is maintained(we have written logic for maintaining selection) but the problem is the selected row is not in the visible area.

Solution

  • Yes, unfortunately, messing with the overriding CSS will mess up some of these features. I suggest instead to use the rowHeights function. This one lets you set the height of all rows if you give it an int, or of individual ones if you provide an array.

    See my fiddle for a simple example.

    Relevant code:

    hot1 = new Handsontable(container, {
    data: data,
    startRows: 5,
    rowHeights: 40
};