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>
        );
	}
});

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.