React-data-grid: Set minHeight to 100%

[noahprince22]

WHICH VERSION OF REACT ARE YOU USING?

Officially Supported:
[ ] v0.14.x

Community Supported:
[x] v15.0.x

WHICH BROWSER ARE YOU USING?

Officially Supported:
[ ] IE 9 / IE 10 / IE 11
[ ] Edge
[x] Chrome

Should work:
[x] Firefox
[x] Safari

---

I'm submitting a ... (check one with "x")

[ ] bug report
[x] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/adazzle/react-data-grid/blob/master/CONTRIBUTING.md

Current behavior

Currently, you have to set a specific height for the data grid using minHeight.

Expected/desired behavior

I would like the datagrid to expand to fit the div it's inside of. Similar to setting height: 100% in css. Is that already possible?

What is the motivation / use case for changing the behavior?

I have a div that the datagrid should completely fill out.

[noahprince22]

Super hacky, but my makeshift solution is this (using a library called react-measure):

class ExampleDataGrid extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      height: -1
    };
  }

  render() {
    return (
      <Measure
        onMeasure={({ height }) => {
          this.setState({ height })
        }}
        ref={element => {
          if (element) {
            const el = ReactDOM.findDOMNode(element);
            el.parentElement.style.height = '100%';
          }
        }}
      >
      <ReactDataGrid {...whateverOptions} minHeight={this.state.height} />
    </Measure>
    )
  }
}

Doesn't work if they resize the page after it renders, though.

[slackday]

I have a similar need.

_Note: I havn't followed the latest updates on react-data-grid I use version 2.0.11 there might be a better solution now._

Using the minHeight property I take the arbitrary height of one row * number of rows + ~height of scrollbar (Chrome)

Looks like this minHeight={((resultsPerPage + 1) * rowHeight) + scrollBarSize} where

const rowHeight = 35;
const scrollBarSize = 20;

It's not perfect but atleast you can get rid of external dependency if it's the only thing you use react-measure for.

[taoxiang1995]

@noahprince22
I worked out a solution without adding extra dependencies.
The idea is to get rid of minHeight and give css complete control over the height of data grid.

step1: remove minHeight from ReactDataGrid component
step2: add a wrapper div over reactDataGrid, give it an absolute height (it can be in pixel, viewpoert height or just be a percentage of its parent given parent's height is fixed)
step3: Add followings to your css file:
.react-grid-Main{
height: 100%;
}

.react-grid-Container{
height: 100%;
}

.react-grid-Grid{
min-height: 100% !important;
}

.react-grid-Canvas{
height: 100% !important;
}

[MV88]

@taoxiang1995 Thanks for providing your solution.
I just wanted to point out my case:
minHeight is needed to re-calculate the 'react-grid-Canvas' height. I say this because i wrapped the react-data-grid component into a docked Panel ( see https://github.com/alexkuz/react-dock)
You can calculate the minHeight using the size of the dock which is a percentage number. The size value is updated with setDockSize().

componentWillReceiveProps(newProps) {
  if (this.props.size !== newProps.size) {
    this.setState({minHeight: this.getHeight(this.refs.grid)});
  }
},
getHeight(element) {
  return element && element.getDataGridDOMNode().clientHeight || this.props.minHeight;
},
// in the component you pass the minHeight calculated
minHeight={this.state.minHeight || this.props.minHeight}

'this.refs.grid' is a reference for the react-data-grid component
I also used the css you suggested with the exception of .react-grid-Canvas rule

Glad to help anyone with this post.
Regards,
M.V.

[soma83]

@noahprince22 I think I may help on the resizing of the grid after the page resizes. Sorry, it's a little bit late and probably you've figured this out. Nevertheless here is my solution:

  componentDidMount () {
    window.addEventListener('resize', this.handleResize);
  }
  handleResize = () => {
    this.forceUpdate();
  }

[kozaxinan]

Adding some css and a resize listener did not fixed my problem. I need to add a height attribute root and all other parent div. And I need to set at least one of the parent fixed size so I added 'height: 100vh;' to body css.

public componentDidMount() {
    this.handleResize();
    window.addEventListener('resize', this.handleResize);
}

public componentWillUnmount() {
    window.removeEventListener('resize', this.handleResize);
}

handleResize = () => {
    const querySelector = findDOMNode(this).querySelector('.react-grid-Container') as HTMLElement;
    querySelector.style.height = '100%';

    const height = this.getHeight(this.refs.dataGrid);

    if (height !== 350) {
        this.setState({ minHeight: height - 100 });
        querySelector.style.height = (height - 100).toString() + 'px';
    }
}

getHeight = (element: any) => {
    return element && element.getDataGridDOMNode().clientHeight || this.props.minHeight;
}

[alpner]

Set minHeight to minimum and then this ...

.react-grid-Grid { min-height: calc( 100vh - 303px ) !important; }

I used 100% of the viewport and subtracted the amount of space I needed above the grid (logo, navigation, etc.). Ugly, but it works.

[salkiducky]

Bump to bring some attention back to this; I will try one of the suggested solutions but an eloquent official feature would be much better for this.

[dijonkitchen]

@taoxiang1995's https://github.com/adazzle/react-data-grid/issues/736#issuecomment-297844382 above seems to be the simplest solution with just an addition to styles.

[dbraynard]

@taoxiang1995, in addition, I found that I had to set my containing div's display style to inline-block in order for any elements after the grid to render completely below the grid otherwise the bottom of the grid overlapped some of those elements.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Please reopen this if you feel it has been incorrectly closed and we will do our best to look into it. Thank you for your contributions.

[fwextensions]

In addition to @alpner's calc() pointer on min-height, I found I had to set a minHeight prop on the component to force it to start out at the right height, instead of waiting to resize after the window did.

So my CSS was (all I needed was 56px of space at the top):

.react-grid-Grid {
    min-height: calc(100vh - 56px) !important;
}

And the JSX:

<ReactDataGrid 
    minHeight={window.visualViewport.height - 56}
    ...
/>

[mohsinxx365]

This doesn't work after window resize .
Even i have the same problem

[guy032]

Yes I can confirm it doesn't work after window resize

[qili26]

@guy032 @mohsinxx365
Wrap your React data grid in the AutoSizer https://www.npmjs.com/package/react-virtualized-auto-sizer and make sure the parent div is flex and can self grow.

You can follow this example for canary version
https://adazzle.github.io/react-data-grid/canary/?path=/story/demos--all-features
https://github.com/adazzle/react-data-grid/blob/canary/stories/demos/AllFeatures.tsx#L225

[mwkoehler]

I keep reading the canary version and I do not see how it sets height to 100%. My attempt in javascript not typescript gets 350px of height and horizontal scroll bars. Looking at the css I see that the div class=rdg has
element.style {
height: 350px;
...
}

I cannot see where that style is coming from.