React-datatable-bs NPM

react-datatable-bs

Demo

https://sonsoleslp.github.io/react-datatable-bs/example/

Getting started

npm install react-datatable-bs --save

This component is based on https://github.com/carlosrocha/react-data-components, but with some extra props that allow for further customization.

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-datatable-bs/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'));