Popularity
4.7
Growing
Activity
0.0
-
383
18
132

Monthly Downloads: 0
Programming language: JavaScript
License: MIT License
Latest version: v1.2.0

react-data-components alternatives and similar libraries

Based on the "Table / Data Grid" category

Do you think we are missing an alternative of react-data-components or a related project?

Add another 'Table / Data Grid' Library

Popular Comparisons

SaaSHub - Software Alternatives and Reviews
View more from us

README

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](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.

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](example/table/main.js).