How can I set the height depending on the displayed rows? (on one page)

[robozb]

Without calculation?

I wouldn't like to determine a pre-fixed value. I would like to allow the table to adjust its own height so that all rows are visible on one page.

[ShaneCallananAerlytix]

I would also like to know how to do this.

I can calculate the total height of the table based on the number of rows, as follows:

const HEADER_HEIGHT = 40;

const Table = ({data, rowHeight}) => {
    const height = HEADER_HEIGHT + (data.length * rowHeight) + 2;
    return <ReactDataGrid style={{minHeight: height, height}} {...otherProps}/>;
}

But this is brittle (think dynamic row/header heights/content). It really shouldn't be up to the end-user to compute these heights.

Furthermore, if I set an explicit width on the table, these height values get lost/ignored: return <ReactDataGrid style={{width: 800, minHeight: height, height}} {...otherProps}/> minHeight/height doesn't get passed down when there's a width

To get around this, we can apply the same solution as above to a container div around ReactDataGrid with overflow:hidden:

const Table = ({data, rowHeight}) => {
    const height = HEADER_HEIGHT + (data.length * rowHeight) + 2;
    return (
        <div style={{height, width: 800, overflow: "hidden"}}>
             <ReactDataGrid style={{width: 800}} {...otherProps}/>
        </div>
    )
    return <ReactDataGrid style={{minHeight: height, height}} {...otherProps}/>;
}

But this solution also fails when we introduce frozen columns, since the scrollbar for the unfrozen columns appears at the bottom of ReactDataGrid's container, which is now hidden due to container div's overflow:hidden style.