React SectionList component based in react-virtualized List
npm install react-virtualized-sectionlist


This component can be usefull to display large sets of grouped data with header line between groups.
``bash`
npm install react-virtualized-sectionlist --save
`bash`
yarn add react-virtualized-sectionlist
This component mimic the same concepts, props and API from react-virtualized List component. If you need click here to get more info about.
In order to use this component your data need be in this format-schema:
`javascript`
const sections = [
{ title: 'Group 1', data: ['Item 1 of Group 1', 'Item 2 of Group 1', 'Item 3 of Group 1', ...] },
{ title: 'Group 2', data: ['Item 1 of Group 2', 'Item 2 of Group 2', 'Item 3 of Group 2', ...] },
{ title: 'Group 3', data: ['Item 1 of Group 3', 'Item 2 of Group 3', 'Item 3 of Group 3', ...] },
...
];
And to render your the SectionList:
`javascript
import React, { Component } from 'react';
import SectionList from 'react-virtualized-sectionlist';
const renderHeader = ({title, sectionIndex, key, style, isScrolling, isVisible, parent}) => {
return (
const renderRow = ({item, sectionIndex, rowIndex, key, style, isScrolling, isVisible, parent}) => {
return (
{item}
const ROW_HEIGHT = 30;
const sections = [
{ title: 'Group 1', data: ['Item 1 of Group 1', 'Item 2 of Group 1', 'Item 3 of Group 1'] },
{ title: 'Group 2', data: ['Item 1 of Group 2', 'Item 2 of Group 2', 'Item 3 of Group 2'] },
{ title: 'Group 3', data: ['Item 1 of Group 3', 'Item 2 of Group 3', 'Item 3 of Group 3'] },
];
const MySectionList = () => {
return (
height={250}
sections={sections}
sectionHeaderRenderer={renderHeader}
sectionHeaderHeight={ROW_HEIGHT}
rowHeight={ROW_HEIGHT}
rowRenderer={renderRow} />}
);
};
// before that you can use your
``