Skip to content
React components for sorting, filtering and pagination of data.
JavaScript HTML CSS
Branch: master
Clone or download

Latest commit

carlosrocha Merge pull request #62 from carlosrocha/dependabot/npm_and_yarn/webpa…

Bump webpack-dev-server from 2.9.2 to 3.1.11
Latest commit 11db759 May 24, 2019


Type Name Latest commit message Commit time
Failed to load latest commit information.
css Accessibility for pagination Mar 2, 2015
example Replace RawGit with jsDelivr Dec 9, 2018
src upgrade dependencies Jul 7, 2017
.babelrc Upgrade babel and use ES2015 for everything Jun 26, 2016
.eslintrc.js Update eslint Oct 26, 2016
.flowconfig Add flow-bin Oct 26, 2016
.gitignore Remove dist from git Jul 12, 2016
.travis.yml Update tests Jun 27, 2016 v1.0.0 Jul 18, 2016
LICENSE Add license Jan 25, 2015 Use jsfiddle instead of jsbin for examples Sep 7, 2016
package.json Bump webpack-dev-server from 2.9.2 to 3.1.11 May 23, 2019
webpack.config.js upgrade dependencies Jul 7, 2017
yarn.lock Bump webpack-dev-server from 2.9.2 to 3.1.11 May 23, 2019


Build Status

DataTable: Live demo and source

SelectableTable: Live demo and source

Getting started

npm install react-data-components --save

This component requires Bootstrap stylesheet and Font Awesome fonts, in addition to the stylesheet for headers. 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.

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' ]

      initialSortBy={{ prop: 'city', order: 'descending' }}
  ), document.getElementById('root'));

See complete example.

You can’t perform that action at this time.