$ 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: '400px',
overflowY: 'auto',
outline: '1px dashed blue',
width: '400px',
},
ul: {
margin: '0px',
listStyleType: 'none',
padding: '0'
},
fixedPosition: {
position : 'fixed',
width : '383px',
top: '0px'
},
listHeader: {
width: '383px',
height: '20px',
background: 'green',
color: 'white'
},
listItems: {
color: 'blue'
},
};
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