Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/carlosrocha/react-data-components
React components for sorting, filtering and pagination of data.
https://github.com/carlosrocha/react-data-components
Last synced: 5 days ago
JSON representation
React components for sorting, filtering and pagination of data.
- Host: GitHub
- URL: https://github.com/carlosrocha/react-data-components
- Owner: carlosrocha
- License: mit
- Created: 2014-08-25T22:00:49.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2023-11-27T23:45:33.000Z (about 1 year ago)
- Last Synced: 2024-12-07T02:30:21.048Z (6 days ago)
- Language: JavaScript
- Homepage: http://carlosrocha.github.io/react-data-components/
- Size: 1.54 MB
- Stars: 399
- Watchers: 17
- Forks: 131
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-components-all - react-data-components - React components for sorting, filtering and pagination of data. (Uncategorized / Uncategorized)
- awesome-list - react-data-components - React components for sorting, filtering and pagination of data. (Demos / Openshift)
- awesome-react-components - react-data-components - React components for sorting, filtering and pagination of data. (UI Components / Table / Data Grid)
README
# react-data-components
[![Build Status](https://travis-ci.org/carlosrocha/react-data-components.svg?branch=master)](https://travis-ci.org/carlosrocha/react-data-components)
DataTable: [Live demo and source](https://jsfiddle.net/carlosrocha/xgde4uh0/)
SelectableTable: [Live demo and source](https://jsfiddle.net/carlosrocha/p9pouh1v/)
## Getting started
```sh
npm install react-data-components --save
```This component requires Bootstrap stylesheet and Font Awesome fonts, in addition
to the [stylesheet for headers](css/table-twbs.css). If you are using Webpack
and the `css-loader` you can also require the css
with `require('react-data-components/css/table-twbs.css')`.### 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 ReactDOM = require('react-dom');
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' ]
];ReactDOM.render((
), document.getElementById('root'));
```See [complete example](example/table/main.js).