Row header height not matching rows

Tags: #<Tag:0x00007efc62050798>

Hi

I’m using version version 7.4.2 and am finding the row header heights are not matching up with the actual row heights - see below.

Settings for the table are:

hotSettings = () => {
return {
licenseKey: “non-commercial-and-evaluation”,
data: this.props.values.dataToView,
colHeaders: this.colHeaders(),
columns: this.columns(),
rowHeaders: true,
readOnly: true,
manualColumnMove: true,
manualRowMove: true,
manualColumnResize: true,
manualRowResize: true,
filters: true,
dropdownMenu: [
“filter_by_condition”,
“filter_by_value”,
“filter_action_bar”, //OK, Cancel button
],
columnSorting: true,
contextMenu: this.contextMenus(),
};
};

I’m using version 7.4.2 as I am using various hooks (afterRowMove, afterFilter etc) to update code and statuses elsewhere, as there are issues associated with this in the current version, for example placing code in the afterFilter event will prevent the filter from working.

Can anyone give me any suggestions, help etc?

Cheers

Aha! sort of answered my own question! It seems that adding

autoRowSize: true,

To the settings apparently solved the problem , but when I scroll to the bottom of a table with only fifty rows, the rowheaders start to drift off again:

And I’m also seeing odd behaviour in the form of not being able to control row height despite the addition of:

rowHeights: 24,

On closer inspection of the th element, I see that is has

style=“height: 46px;”

but I haven’t edited the CSS or changed anything, and can’t find anyway of changing it.

Finally got the bottom of it! This component was sitting in a series of nested components, the top of which contained a react-bootstrap Table, and it was the formatting of the

elements that were interfering with the grid formatting.

Feel free to delete this. :grinning:

Finally got the bottom of it! […]

Feel free to delete this. :grinning:

That’s a quick update. As requested I’m closing the topic.
Feel free to open a new one when needed :slight_smile: