editable-table.js

'use strict';

var React = require('react');
var _ = require('lodash');

var EditTable        = require('./edit-table.jsx');
var Dropdown         = require('./dropdown.jsx');

module.exports = React.createClass({
    displayName: 'itemListComponent',
	propTypes: {
        data: React.PropTypes.object
    },

    onChange: function(data) {
        console.log(data); 
    },

    getInitialState: function() {
        var columns = [
            { label: 'Name', id: 'name', value: 'name', hidden: true, editable: false },
            { label: 'Mini', id: 'mini', value: 'mini', editable: true },
            { label: 'Normal', id: 'normal', value: 'normal', editable: true },
            { label: 'Big', id: 'big', value: 'big', editable: true }
        ];
        return {
            columns: columns,
            selectedColumns: columns
        }
    },

    changeColumns: function(el, value) {
        var value = value.split(',');
        var selectedColumns = this.state.columns.filter(function(column) {
            return value.indexOf(column.id) >= 0;
        });
        this.setState({
            selectedColumns: selectedColumns
        })
    },

	render: function() {

        var data = [
            { name: 'Ananas', mini: '0.2', normal: '0.8', big: '1' },
            { name: 'Basilicum', mini: '0.3', normal: '0.35', big: '1' },
            { name: 'Gorgonzola', mini: '0.2', normal: '0.85', big: '1' }
        ];

        return (
            <div>
                <Dropdown
                    name="columns"
                    options={this.state.columns}
                    value="name,mini,normal,big"
                    multi={true}
                    onChange={this.changeColumns} />
                <EditTable columns={this.state.selectedColumns} data={data} onChange={this.onChange}></EditTable>
            </div>
        );
	}
});

react-components/editable-table
Features/opinions --

• plain json for data and columns configuration
• click to edit cell content (text-only for now)
• any data change is sent to parent via onChange handler
• change of columns will re-render table accordingly

Well, I see here only columns, where are header titles?
I thought that it can be splitted into 2 separate components: EditTable & EditTextField.

• EditTable will display basic table with usage of EditTextField's
• EditTextField simple span on dbClick changes to input

Actually I have really custom table, so what I need is only that EditTextField added into fields, I think that Nicola 'll need EditTable for sure.

Yes, this looks like the table that I am going to need for product variants where data is separated in columns (instead of rows). In this case there is no header titles because the labels in columns is the header title of the specific column.