react-editable-table
Based on: react-data-components.
Getting started
npm install react-editable-table --save
Using the default implementation
The default implementation includes a filter for case insensitive global search, pagination and page size.
var React = ;var DataTable = 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;
See complete example.
DataMixin options
keys: Array<string | number>
Properties that make each row unique, e.g. an id.
columns: Array<ColumnOption>
See Table
column options.
pageLengthOptions: Array<number>
initialData: Array<object | Array<any>>
initialPageLength: number
initialSortBy: { prop: string | number, order: string }
Table column options
title: string
The title to display on the header.
prop: string | number
The name of the property or index on the data.
editable: boolean
Enable / Disable possibility edit property data.
render: (val: any, row: any) => any
Function to render a different component.
className: string | (val: any, row: any) => string
Class name for the td.