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…
…ck-dev-server-3.1.11

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

Files

Permalink
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
CHANGELOG.md v1.0.0 Jul 18, 2016
LICENSE Add license Jan 25, 2015
README.md 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

README.md

react-data-components

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

ReactDOM.render((
    <DataTable
      keys="name"
      columns={columns}
      initialData={data}
      initialPageLength={5}
      initialSortBy={{ prop: 'city', order: 'descending' }}
    />
  ), document.getElementById('root'));

See complete example.

You can’t perform that action at this time.