Is there a way to add headings separating data in react-virtualized

Question

I have a <List /> inside an <InfiniteLoader />, inside an <AutoSizer />, also <WindowScroller /> and <WindowScroller /> (wow, so much hocs there) but for simplicity, I think my question could fit the same with a simple <List /> Component.

I'm not sure if there is a way to render some kind of separator or heading like a title for the section (piece of data) rendered below.

Since each item have a prop that allow to group the data in chunks, and I am receiving this data ordered and grouped like:

[
  {
    item: 1,
    name: 'Banana',
    kind: 'fruits',
  },
  {
    item: 2,
    name: 'Apple',
    kind: 'fruits',
  },
  {
    item: 3,
    name: 'Watermelon',
    kind: 'fruits',
  },
  {
    item: 4,
    name: 'Dog',
    kind: 'animals',
  },
  {
    item: 5,
    name: 'Cat',
    kind: 'animals',
  },
  {
    item: 6,
    name: 'Horse',
    kind: 'animals',
  },
//...
]

the idea is to render something like:

<ul>
  <li className="fullWidth">
    <h3>Fruits</h3>
  </li>
  <li>Banana</li>
  <li>Apple</li>
  <li>Watermelon</li>
  <li className="fullWidth">
    <h3>Animals</h3>
  </li>
  <li>Dog</li>
  <li>Cat</li>
  <li>Horse</li>
</ul>

Making some calculation in rowRenderer method?

Or, since I am wrapping the <List /> in an <InfiniteLoader /> I could pass an argument when fire loadMoreRows, but anyway I think I have to do some calculation in rowRenderer, the responsible for the final render.

Answer 1

This is possible, although much easier if your data is pre-sorted so that groups aren't interleaved. You basically have 2 options:

1. Pre-flatten your data into an array of 2 types of items. One type is a header and the other type is a child. If you want headers to be a different size than regular rows you'll need to also provide a rowHeight getter function that's able to distinguish between a header item and a child and return a different value. Your rowRenderer will also need to do the same.
2. Compare the current datum's "kind" to the one that came before it and include a header with the rendered row if they are different. This approach also requires a custom rowHeight getter but does not require any data flattening so it may be easier/faster. The only downside is that your header and row item will be within the same div (or li) if you approach this way.

Here's an example of option 2: https://plnkr.co/edit/l22Ir7?p=preview

And here is the relevant code bits:

function includeHeader(index) {
  return (
    index === 0 ||
    list[index].kind !== list[index - 1].kind
  );
}

function rowHeight({ index }) {
  return includeHeader(index)
    ? ROW_HEIGHT_WITH_HEADER
    : ROW_HEIGHT;
}

function rowRenderer({ index, isScrolling, key, style }) {
  const datum = list[index];

  return (
    <div
      className='Row'
      key={key}
      style={style}
    >
      {includeHeader(index) && (
        <h3>{...}</h3>
      )}
      <div>{...}</div>
    </div>
  );
}