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: 7 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-29T15:04:32.621Z (14 days ago)
• Language: JavaScript
• Homepage: http://carlosrocha.github.io/react-data-components/
• Size: 1.54 MB
• Stars: 398
• 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).