title: Is there a way to add headings separating data in react-virtualized
body: <p>I have a <code>&lt;List /&gt;</code> inside an <code>&lt;InfiniteLoader /&gt;</code>, inside an <code>&lt;AutoSizer /&gt;</code>, also <code>&lt;WindowScroller /&gt;</code> and <code>&lt;WindowScroller /&gt;</code>  (wow, so much <code>hoc</code>s there) but for simplicity, I think my question could fit the same with a simple <code>&lt;List /&gt;</code> <em>Component</em>.</p>
  
  <p>I'm not sure if there is a way to render some kind of <em>separator</em> or <em>heading</em> like a title for the section (piece of data) rendered below.</p>
  
  <p>Since each <em>item</em> have a <code>prop</code> that allow to group the data in chunks, and I am receiving this data ordered and grouped like: </p>
  
  <pre><code>[
    {
      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',
    },
  //...
  ]
  </code></pre>
  
  <p>the idea is to render something like:</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li className="fullWidth"&gt;
      &lt;h3&gt;Fruits&lt;/h3&gt;
    &lt;/li&gt;
    &lt;li&gt;Banana&lt;/li&gt;
    &lt;li&gt;Apple&lt;/li&gt;
    &lt;li&gt;Watermelon&lt;/li&gt;
    &lt;li className="fullWidth"&gt;
      &lt;h3&gt;Animals&lt;/h3&gt;
    &lt;/li&gt;
    &lt;li&gt;Dog&lt;/li&gt;
    &lt;li&gt;Cat&lt;/li&gt;
    &lt;li&gt;Horse&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Making some calculation in <code>rowRenderer</code> method? </p>
  
  <p>Or, since I am wrapping the <code>&lt;List /&gt;</code> in an <code>&lt;InfiniteLoader /&gt;</code> I could pass an argument when fire <code>loadMoreRows</code>, but anyway I think I have to do some calculation in <code>rowRenderer</code>, the responsible for the final <code>render</code>.</p>