Join the chat at https://gitter.im/cht8687/react-listview-sticky-header
Circle CI NPM Version Coverage Status Build Status Downloads Dependency Status License
$ npm install --save react-listview-sticky-header
Since React is peer dependency, you need to install it manually if you haven't.
http://cht8687.github.io/react-listview-sticky-header/example/
<ReactListView data={data} headerAttName="headerName" itemsAttName="items" styles={styles} />
const DATALIST = [ { headerName : "ListA", items : [{ title : "items1" }, { title : "items2" }] }, { headerName : "ListB", items : [{ title : "items1" }, { title : "items2" }] } ];
variable name of header in your data object.
In above example, it's headerName.
variable name which hold items data in your data object.
In above example, it's items.
let styles = { outerDiv: { height: '420px', overflowY: 'auto', outline: '#b9ceb6 dashed 1px', width: '383px' }, ul: { margin: '0px', listStyleType: 'none', padding: '0px' }, fixedPosition: { position: 'fixed', width: '383px', top: '0px' }, listHeader: { width: '383px', height: '27px', background: '#94D6CF', color: 'white' }, listItems: { color: '#a9adab' } }
outerDiv, ul, fixedPosition, listHeader, listItems are required, you can modify the CSS to meet your needs.
$ git clone git@github.com:cht8687/react-listview-sticky-header.git
$ cd react-listview-sticky-header
$ npm install
$ webpack-dev-server
Then
open http://localhost:8080/webpack-dev-server/
MIT