valex · October 21, 2018 20:53
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
                };
            };

            render() {
                return (
                    <table>
                        <thead>
                        <tr>
                            {
                                this.props.headers.map(function(title, idx)
                                {
                                    return (<th key={idx}>{title}</th>);

                                })
                            }
                        </tr>
                        </thead>
                      <tbody>
                      {
                          this.state.data.map(function(row, idrow)
                          {
                              return (
                                  <tr key={idrow}>
                                      {
                                        row.map(function(cell, idcell){
                                            return (<td key={idcell}>{cell}</td>);
                                        })
                                      }
                                  </tr>
                              );

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

	render() {
	return (
	<table>
	<thead>
	<tr>
	{
	this.props.headers.map(function(title, idx)
	{
	return (<th key={idx}>{title}</th>);

	})
	}
	</tr>
	</thead>
	<tbody>
	{
	this.state.data.map(function(row, idrow)
	{
	return (
	<tr key={idrow}>
	{
	row.map(function(cell, idcell){
	return (<td key={idcell}>{cell}</td>);
	})
	}
	</tr>
	);

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