Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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

Awesome Lists containing this project

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



Circle CI


NPM Version


Coverage Status


Build Status


Downloads


Dependency Status


License

![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)