MultiGrid and rowCount changes with fixed rowHeight

[pete-moss]

I am trying to render hierarchical data in a MultiGrid. I am using a fixed rowHeight = 27. When first rendered, things look fine: However, when I expand my first node, (this simply ends up changing the MultiGrid.props.rowCount from 2 to 5, the rendering of the row header column is funky for row 3: That div has height=17px whereas all the others in that row header column have the correct height=27px. If I "kick" the MultiGrid by calling recomputeGridSize(), the rendering recovers. But given that the rowCount changed from 2 to 5, and I am using fixed rowHeight, I don't understand why this didn't work. Am I doing something wrong, or is this a bug?

[And forgive the fact that the North America GDP data doesn't jive with the rest. It is all "fake news" anyway, and we all know that Donald Trump just makes up stuff anyway - especially when speaking with Justin Trudeau.]

[pete-moss]

I am trying to understand how we could ever get a div with height=17px instead of 27px. I traced it to this function in MultiGrid.js

  _rowHeightBottomGrid = ({index}) => {
    const {fixedRowCount, rowCount, rowHeight} = this.props;
    const {scrollbarSize, showVerticalScrollbar} = this.state;

    // An extra cell is added to the count
    // This gives the smaller Grid extra room for offset,
    // In case the main (bottom right) Grid has a scrollbar
    // If no scrollbar, the extra space is overflow:hidden anyway
    if (showVerticalScrollbar && index === rowCount - fixedRowCount) {
      return scrollbarSize;
    }

    return typeof rowHeight === 'function'
      ? rowHeight({index: index + fixedRowCount})
      : rowHeight;
  };

  _topLeftGridRef = ref => {
    this._topLeftGrid = ref;
  };

  _topRightGridRef = ref => {
    this._topRightGrid = ref;
  };
}

When this function is called with {index: 2} in my case, the rowCount = 3. So this method is returning the scrollbarSize for this case. Not sure why. Pardon me for not understanding the internals of the code, but I think this at least explains how this one div ends up with a height=17px.

[GarraouiMarwen]

Hello @pete-moss , I need to add expandable row in my table, could you please give me an example how you did it ? thank you.

[pete-moss]

Hi @GarraouiMarwen . Creating a hierarchical grid as I showed above is a non-trivial feat that involves building a fair amount of infrastructure to support it. You need to have the notion of some kind of View Model that knows about tree nodes and maintains some notion of what nodes are expanded. That View Model will know the flat list of nodes to render and what depth they are at. And it gets more difficult if you need to support variable row height in your grids because then, anytime you expand or collapse a node, you need to invalidate the row height cache below the node you expanded or collapsed. But basically, you have to respond to a request to expand or collapse a node. You then need to consult your View Model and determine how the Grid's rowCount will change and then re-render the Grid with that new rowCount. I am sorry I can't give you a simple example, because it isn't a simple exercise.

[GarraouiMarwen]

It looks a bit difficult and may be it will take much time, I think that the best solution is to use another library to handle table. Thank you for your feed back.