how to display nested variable height rows with react-virtualized

Question

    import * as React from "react";
import { render } from "react-dom";
import {
  List,
  CellMeasurerCache,
  CellMeasurer,
  WindowScroller,
  AutoSizer
} from "react-virtualized";
import { ListGroupItem, Panel } from "react-bootstrap";

import "./styles.css";
const cache = new CellMeasurerCache({
  fixedWidth: true
});
const renderRow = ({ index, key, parent, style }) => {
  return (
    <CellMeasurer
      rowIndex={index}
      columnIndex={0}
      key={key}
      cache={cache}
      parent={parent}
      enableMargins
    >
      <div
        style={{
          ...style,
          height: "auto",
          display: "flex",
          flexDirection: "column"
        }}
      >
        <span> Row {index}</span>
        <span
          style={{
            border: "solid 1px #ccc",
            height: 100 + (index % 30) * 10 + "px"
          }}
        >
          random text with varible height
        </span>
        <span style={{ border: "solid red" }}>
          {index % 5 === 0 ? (
            <AutoSizer>
              {({ height }) => <App length={10} depth={1} />}
            </AutoSizer>
          ) : (
            ""
          )}
        </span>
      </div>
    </CellMeasurer>
  );
};

const App = ({ length = 1000, depth }) => {
  if (depth <= 1)
    return (
      <Panel>
        <Panel.Body>
          <WindowScroller>
            {({ height, isScrolling, scrollTop, onChildScroll }) => (
              <AutoSizer>
                {({ width }) => (
                  <List
                    height={height}
                    width={width}
                    deferredMeasurementCache={cache}
                    isScrolling={isScrolling}
                    rowCount={length}
                    rowHeight={(params) =>
                      cache.rowHeight(params) -
                      (params.index < length - 1 ? 1 : 0)
                    }
                    rowRenderer={renderRow}
                    autoHeight
                    scrollTop={scrollTop}
                    onChildScroll={onChildScroll}
                  />
                )}
              </AutoSizer>
            )}
          </WindowScroller>
        </Panel.Body>
      </Panel>
    );
};

const rootElement = document.getElementById("root");
render(<App depth={0} />, rootElement);

how can i generate recursively nested virtualised list with variable row height (based on content), it's working with parent items but not children.

full code example : https://codesandbox.io/s/react-virtualized-bootstrap-list-group-forked-gqz5z5

Answer 1

I faced a similar problem myself, I found a solution and created my own library for it: react-dynamic-virtual-tree