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: 3 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 (3 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)