react-data-components

WebJar for react-data-components

License

License

MIT
Categories

Categories

Data React User Interface Web Frameworks
GroupId

GroupId

org.webjars.npm
ArtifactId

ArtifactId

react-data-components
Last Version

Last Version

1.2.0
Release Date

Release Date

Type

Type

jar
Description

Description

react-data-components
WebJar for react-data-components
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/carlosrocha/react-data-components

Download react-data-components

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.npm/react-data-components/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>react-data-components</artifactId>
    <version>1.2.0</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.npm/react-data-components/
implementation 'org.webjars.npm:react-data-components:1.2.0'
// https://jarcasting.com/artifacts/org.webjars.npm/react-data-components/
implementation ("org.webjars.npm:react-data-components:1.2.0")
'org.webjars.npm:react-data-components:jar:1.2.0'
<dependency org="org.webjars.npm" name="react-data-components" rev="1.2.0">
  <artifact name="react-data-components" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.npm', module='react-data-components', version='1.2.0')
)
libraryDependencies += "org.webjars.npm" % "react-data-components" % "1.2.0"
[org.webjars.npm/react-data-components "1.2.0"]

Dependencies

compile (2)

Group / Artifact Type Version
org.webjars.npm : lodash jar [4.13.1,5)
org.webjars.npm : prop-types jar [15.5.10,16)

Project Modules

There are no modules declared in this project.

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.

Versions

Version
1.2.0
0.6.0