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

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:
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.
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>
);
}