valex · October 22, 2018 12:33
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>
    <title>Table</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="03.00.table.css">
  </head>
  <body>
    <div id="app">
      <!-- my app renders here -->
    </div>
    <script charset="utf-8" crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.2/prop-types.min.js"></script>

    <script type="text/babel">
        class Excel extends React.Component{
            constructor(params) {
                super(params);
                this.displayName= 'Excel';

                this.state = {
                    data: this.props.initialData,
                    sortby: null,
                    descending: false,
                    edit: null, // [row index, cell index]
                };

                // This binding is necessary to make `this` work in the callback
                this._save = this._save.bind(this);
                this._sort = this._sort.bind(this);
                this._showEditor = this._showEditor.bind(this);
            };

            _save(e){
                e.preventDefault();
                var input = e.target.firstChild;
                var data = this.state.data.slice();
                data[this.state.edit.row][this.state.edit.cell] = input.value;
                this.setState({
                    edit: null,
                    data: data,
                });
            };

            _sort(e){
                var column = e.target.cellIndex;
                var data = this.state.data.slice(); // copy data
                var descending = this.state.sortby === column && !this.state.descending;
                data.sort(function(a, b) {
                    return descending
                        ? (a[column] < b[column] ? 1 : -1)
                        : (a[column] > b[column] ? 1 : -1);
                });
                this.setState({
                    data: data,
                    sortby: column,
                    descending: descending,
                });
            };

            _showEditor(e){
                this.setState({edit: {
                        row: parseInt(e.target.dataset.row, 10),
                        cell: e.target.cellIndex,
                    }});
            };

            render() {
                return (
                    <table>
                        <thead onClick={this._sort}>
                        <tr>
                            {
                                this.props.headers.map(function(title, idx)
                                {
                                    if (this.state.sortby === idx) {
                                        title += this.state.descending ? ' \u2191' : ' \u2193'
                                    }
                                    return (<th key={idx}>{title}</th>);

                                }, this)
                            }
                        </tr>
                        </thead>
                        <tbody onDoubleClick={this._showEditor}>
                        {
                            this.state.data.map(function(row, idrow)
                            {
                                return (
                                    <tr key={idrow}>
                                        {
                                            row.map(function(cell, idcell){
                                                var content = cell;
                                                var edit = this.state.edit;
                                                if (edit && edit.row === idrow && edit.cell === idcell) {
                                                    content = <form onSubmit={this._save}><input defaultValue={cell} type="text"/></form>;
                                                }
                                                return (<td data-row={idrow} key={idcell}>{content}</td>);
                                            }, this)
                                        }
                                    </tr>
                                );

                            }, this)
                        }
                        </tbody>
                    </table>
                );
            }
        }

        Excel.propTypes = {
            headers: PropTypes.arrayOf(PropTypes.string),
            initialData: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)),
        };

        var headers = [
            "Book", "Author", "Language", "Published", "Sales"
        ];

        var data = [
            ["The Lord of the Rings", "J. R. R. Tolkien", "English", "1954–1955", "150 million"],
            ["Le Petit Prince (The Little Prince)", "Antoine de Saint-Exupéry", "French", "1943", "140 million"],
            ["Harry Potter and the Philosopher's Stone", "J. K. Rowling", "English", "1997", "107 million"],
            ["And Then There Were None", "Agatha Christie", "English", "1939", "100 million"],
            ["Dream of the Red Chamber", "Cao Xueqin", "Chinese", "1754–1791", "100 million"],
            ["The Hobbit", "J. R. R. Tolkien", "English", "1937", "100 million"],
            ["She: A History of Adventure", "H. Rider Haggard", "English", "1887", "100 million"],
        ];

        ReactDOM.render(
            React.createElement(Excel, {
                headers: headers,
                initialData: data,
            }),
            document.getElementById("app")
        );
    </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Table</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="03.00.table.css">
	</head>
	<body>
	<div id="app">
	<!-- my app renders here -->
	</div>
	<script charset="utf-8" crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
	<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
	<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
	<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.2/prop-types.min.js"></script>

	<script type="text/babel">
	class Excel extends React.Component{
	constructor(params) {
	super(params);
	this.displayName= 'Excel';

	this.state = {
	data: this.props.initialData,
	sortby: null,
	descending: false,
	edit: null, // [row index, cell index]
	};

	// This binding is necessary to make `this` work in the callback
	this._save = this._save.bind(this);
	this._sort = this._sort.bind(this);
	this._showEditor = this._showEditor.bind(this);
	};

	_save(e){
	e.preventDefault();
	var input = e.target.firstChild;
	var data = this.state.data.slice();
	data[this.state.edit.row][this.state.edit.cell] = input.value;
	this.setState({
	edit: null,
	data: data,
	});
	};

	_sort(e){
	var column = e.target.cellIndex;
	var data = this.state.data.slice(); // copy data
	var descending = this.state.sortby === column && !this.state.descending;
	data.sort(function(a, b) {
	return descending
	? (a[column] < b[column] ? 1 : -1)
	: (a[column] > b[column] ? 1 : -1);
	});
	this.setState({
	data: data,
	sortby: column,
	descending: descending,
	});
	};

	_showEditor(e){
	this.setState({edit: {
	row: parseInt(e.target.dataset.row, 10),
	cell: e.target.cellIndex,
	}});
	};

	render() {
	return (
	<table>
	<thead onClick={this._sort}>
	<tr>
	{
	this.props.headers.map(function(title, idx)
	{
	if (this.state.sortby === idx) {
	title += this.state.descending ? ' \u2191' : ' \u2193'
	}
	return (<th key={idx}>{title}</th>);

	}, this)
	}
	</tr>
	</thead>
	<tbody onDoubleClick={this._showEditor}>
	{
	this.state.data.map(function(row, idrow)
	{
	return (
	<tr key={idrow}>
	{
	row.map(function(cell, idcell){
	var content = cell;
	var edit = this.state.edit;
	if (edit && edit.row === idrow && edit.cell === idcell) {
	content = <form onSubmit={this._save}><input defaultValue={cell} type="text"/></form>;
	}
	return (<td data-row={idrow} key={idcell}>{content}</td>);
	}, this)
	}
	</tr>
	);

	}, this)
	}
	</tbody>
	</table>
	);
	}
	}

	Excel.propTypes = {
	headers: PropTypes.arrayOf(PropTypes.string),
	initialData: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)),
	};

	var headers = [
	"Book", "Author", "Language", "Published", "Sales"
	];

	var data = [
	["The Lord of the Rings", "J. R. R. Tolkien", "English", "1954–1955", "150 million"],
	["Le Petit Prince (The Little Prince)", "Antoine de Saint-Exupéry", "French", "1943", "140 million"],
	["Harry Potter and the Philosopher's Stone", "J. K. Rowling", "English", "1997", "107 million"],
	["And Then There Were None", "Agatha Christie", "English", "1939", "100 million"],
	["Dream of the Red Chamber", "Cao Xueqin", "Chinese", "1754–1791", "100 million"],
	["The Hobbit", "J. R. R. Tolkien", "English", "1937", "100 million"],
	["She: A History of Adventure", "H. Rider Haggard", "English", "1887", "100 million"],
	];

	ReactDOM.render(
	React.createElement(Excel, {
	headers: headers,
	initialData: data,
	}),
	document.getElementById("app")
	);
	</script>
	</body>
	</html>