react-editable-table

Getting started

sh

npm install react-editable-table --save





$3



The default implementation includes a filter for case insensitive global search,

pagination and page size.

javascript

var React = require('react');

var DataTable = require('react-editable-table').DataTable;



var columns = [

  { title: 'Site', prop: 'site'  },

  { title: 'Country', prop: 'country' },

  { title: 'Domain', prop: 'domain', validation: /^[a-zA-Z0-9][a-zA-Z0-9-]{1,61}a-zA-Z0-9+$/ },

  { title: 'Phone', prop: 'phone', editable: false }

];



var data = [

  { site: 'google', country: 'USA', domain: 'google.com', phone: 'phone value' }

  // It also supports arrays

  // [ 'name value', 'city value', 'address value', 'phone value' ]

];



React.render((

          className="container"

      keys={[ 'site' ]}

      columns={columns}

      initialData={data}

      initialPageLength={5}

      initialSortBy={{ prop: 'site', order: 'desc' }}

      pageLengthOptions={[ 5, 20, 50 ]}

    />

  ), document.body);





See complete example.



DataMixin options



$3

Properties that make each row unique, e.g. an id.



$3

See

Table` column options.

$3

Table column options

$3

The title to display on the header.

$3

The name of the property or index on the data.

$3

Enable / Disable possibility edit property data.

$3

Function to render a different component.

$3

Class name for the td.

$3