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

Engelbert

Answer 1

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

Dedradedric

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Anticlinal