Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cht8687/react-listview-sticky-header
react listview with sticky section header
https://github.com/cht8687/react-listview-sticky-header
react react-component reactjs sticky-headers
Last synced: about 2 months ago
JSON representation
react listview with sticky section header
- Host: GitHub
- URL: https://github.com/cht8687/react-listview-sticky-header
- Owner: cht8687
- Created: 2015-08-23T14:07:27.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2022-12-11T02:24:21.000Z (about 2 years ago)
- Last Synced: 2024-10-12T00:37:41.697Z (2 months ago)
- Topics: react, react-component, reactjs, sticky-headers
- Language: JavaScript
- Homepage:
- Size: 2.94 MB
- Stars: 80
- Watchers: 5
- Forks: 13
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-react-components-all - react-listview-sticky-header - React listview with sticky section header. (Uncategorized / Uncategorized)
- awesome-list - react-listview-sticky-header - React listview with sticky section header. (Demos / Sticky)
README
[![Join the chat at https://gitter.im/cht8687/react-listview-sticky-header](https://badges.gitter.im/cht8687/react-listview-sticky-header.svg)](https://gitter.im/cht8687/react-listview-sticky-header?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
React listview with sticky header
![React Listview sticky header](src/example/react-listview-sticky-header.gif)
## Installation
### npm
```
$ npm install --save react-listview-sticky-header
```Since React is peer dependency, you need to install it manually if you haven't.
## Demo
[http://cht8687.github.io/react-listview-sticky-header/example/](http://cht8687.github.io/react-listview-sticky-header/example/)
## Usage
```js
```
## Options
#### `data`: PropTypes.array.isRequired
```js
const DATALIST = [
{
headerName : "ListA",
items : [{
title : "items1"
}, {
title : "items2"
}]
},
{
headerName : "ListB",
items : [{
title : "items1"
}, {
title : "items2"
}]
}
];
```#### `headerAttName`: PropTypes.string.isRequired
variable name of header in your `data` object.
In above example, it's `headerName`.#### `itemsAttName`: PropTypes.string.isRequired
variable name which hold items data in your `data` object.
In above example, it's `items`.#### `styles`: PropTypes.object.isRequired
```js
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.
## Development
```
$ git clone [email protected]:cht8687/react-listview-sticky-header.git
$ cd react-listview-sticky-header
$ npm install
$ webpack-dev-server
```Then
```
open http://localhost:8080/webpack-dev-server/
```## License
MIT
[![js-standard-style](https://cdn.rawgit.com/feross/standard/master/badge.svg)](https://github.com/feross/standard)