Neverending Package Mountain

    react-editable-table

    1.12.32 • Public • Published

    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 = 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](?:\.[a-zA-Z]{2,})+$/ },
      { 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((
        <DataTable
          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

    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.

    defaultContent: string

    sortable: boolean

    width: string | number

    Install

    npm i react-editable-table

    DownloadsWeekly Downloads

    102

    Version

    1.12.32

    License

    MIT

    Last publish

    Collaborators

    • slavik-m