open-index/open-npm huggingface dataset:
npm package: @sstur/react-bootstrap
Description: Bootstrap 3 components built with React
Author: Stephen J. Collings
Latest version: 0.32.1-fx

# React-Bootstrap [![Travis][build-badge]][build] [![npm][npm-badge]][npm]

[Bootstrap 3][bootstrap] components built with [React][react].

[![Codecov][codecov-badge]][codecov]
[![Discord][discord-badge]][discord]
[![Thinkful][thinkful-badge]][thinkful]

__Under active development - APIs will change.__ Check out the [1.0.0 roadmap](https://github.com/react-bootstrap/react-bootstrap/wiki#100-roadmap) and [contributing guidelines][contributing] to see where you can help out. Prior to the 1.0.0 release, deprecations or breaking changes will result in a minor version bump.

## Docs

See the [documentation][documentation] with live editable examples.

## Related modules

- [react-router-bootstrap][react-router-bootstrap] – Integration with [React Router][react-router]
- [React Bootstrap Extended][react-bootstrap-extended] - A version of React Bootstrap where each component has extra props that map to bootstrap's utility classes. For example, `pullRight` adds the class `pull-right` to a component.
- [Awesome React Bootstrap Components][awesome-react-bootstrap-components] - Additional components like off-canvas navbar, switch and sliders.

## Local setup

- Install the dependencies with `npm install`
- Run tests `npm test`
- Run tests in watch mode `npm run tdd`
- Run the docs site in development mode with `npm run docs`. This will watch
  for file changes as you work. Simply refresh the page to see the updates.
- Build with `npm run build`

## Contributions

Yes please! See the [contributing guidelines][contributing] for details.

[bootstrap]: http://getbootstrap.com
[react]: http://facebook.github.io/react/

[documentation]: http://react-bootstrap.github.io
[contributing]: CONTRIBUTING.md

[build-badge]: https://travis-ci.org/react-bootstrap/react-bootstrap.svg?branch=master
[build]: https://travis-ci.org/react-bootstrap/react-bootstrap

[npm-badge]: https://badge.fury.io/js/react-bootstrap.svg
[npm]: http://badge.fury.io/js/react-bootstrap

[react-router-bootstrap]: https://github.com/react-bootstrap/react-router-bootstrap
[react-router]: https://github.com/reactjs/react-router
[react-bootstrap-extended]: https://github.com/rbalicki2/react-bootstrap-extended

[thinkful-badge]: https://tf-assets-staging.s3.amazonaws.com/badges/thinkful_repo_badge.svg
[thinkful]: http://start.thinkful.com/react/?utm_source=github&utm_medium=badge&utm_campaign=react-bootstrap

[codecov-badge]: https://img.shields.io/codecov/c/github/react-bootstrap/react-bootstrap/master.svg
[codecov]: https://codecov.io/gh/react-bootstrap/react-bootstrap

[discord-badge]: https://img.shields.io/badge/Discord-Join%20chat%20%E2%86%92-738bd7.svg
[discord]: https://discord.gg/0ZcbPKXt5bXLs9XK
npm package: @sstur/react-data-components
Description: React data components
Author: Carlos Rocha
Latest version: 99.1.8

# react-data-components

DataTable: [Live demo and source](http://jsbin.com/ziyawu/1/).

## Getting started

```sh
npm install react-data-components --save
```

### Using the default implementation

The default implementation includes a filter for case insensitive global search,
pagination and page size.

```javascript
var React = require('react');
var DataTable = require('react-data-components').DataTable;

var columns = [
  { title: 'Name', prop: 'name'  },
  { title: 'City', prop: 'city' },
  { title: 'Address', prop: 'address' },
  { title: 'Phone', prop: 'phone' }
];

var data = [
  { name: 'name value', city: 'city value', address: 'address value', phone: 'phone value' }
  // It also supports arrays
  // [ 'name value', 'city value', 'address value', 'phone value' ]
];

React.render((
    <DataTable
      className="container"
      keys={[ 'name', 'address' ]}
      columns={columns}
      initialData={data}
      initialPageLength={5}
      initialSortBy={{ prop: 'city', order: 'desc' }}
      pageLengthOptions={[ 5, 20, 50 ]}
    />
  ), document.body);
```

See [complete example](example/table/main.js), see [Flux example](example/flux/).

## DataMixin options

Name                | Type               | Description
------------------- | ------------------ | ----------------------------------
`keys`              | array              | Properties that make each row unique, e.g. an id.
`columns`           | array              | See column options.
`pageLengthOptions` | array              | Page length options.
`initialData`       | array              | The data to display.
`initialPageLength` | number             | Initial page length.
`initialSortBy`     | object             | Initial sorting, needs `prop` and `order`.

## Table column options

Name             | Type               | Description
---------------- | ------------------ | ----------------------------------
`title`          | string             | The title to display on the header.
`prop`           | string or number   | The name of the property or index on the data.
`render`         | function           | Function to customize the render on column.
`className`      | string or function | Class for the td.
`defaultContent` | string             | The default value to display if no data.
`sortable`       | boolean            | `true` by default.
`width`          | string or number   | Width for the column.