react-virtualized-stickylist
An extension of react-virtualized
's List
component that adds 'sticky' subheaders in the list.
See storybook for live demos.
Installation
yarn add react-virtualized-stickylist
Usage
import React from 'react';
import {render} from 'react-dom';
import StickyList from 'react-virtualized-stickylist';
const items = [
{ text: 'apple', group: 'fruits' },
{ text: 'banana', group: 'fruits' },
{ text: 'carrot', group: 'vegetables' },
// ... etc.
];
const labelRenderer = ({ label, style, key }) => (
<div
key={key}
style={{
...style,
height: 20,
backgroundColor: 'white',
lineHeight: `20px`,
}}
>
<b>{label}</b>
</div>
);
const rowRenderer = ({ index, style, key }) => (
<div
key={key}
style={{
...style,
height: 20,
backgroundColor: 'white',
lineHeight: `20px`,
paddingLeft: 8,
}}
>
{items[index].text}
</div>
);
render(
<StickyList
height={100},
items={items},
labelRenderer={labelRenderer},
rowHeight={20},
rowRenderer={rowRenderer},
width={300},
}}
/>,
document.getElementById('root')
);
Props
Takes all the props of react-virtualized
's [list][List component], as well as the following additional props:
Prop | Type | Required? | Default | Description |
---|---|---|---|---|
itemToGroup | func |
item => item && item['group'] |
A function that converts an item to its group. Signature function(item: any) => (group: string | null)
|
|
items | array |
[] |
The items to list. | |
labelRenderer | func |
✓ | A function that renders the label. Similar to rowRenderer except it is given a label prop instead of anindex prop.Signature function({label: string, ...otherProps}) => node
|
|
wrapperStyle | object |
{} |
Extra styling for the wrapper div . |