React

by MuLtDirectX

HTML

<div id="app"></div>

CSS

.row {
  display: flex;
  flex-wrap: wrap;
}

.cell {
  height: 40px;
  width: 40px;
  margin: 10px;
  background-color: blue;
}

React

class App extends React.Component {
 
  render() {
    return <Table rows="5" cols="6" />
  }
}

class Table extends React.Component {
	constructor (props) {
  	super(props)
  	const rows = props.rows
    const cols = props.cols
    
    const model = []
    for (let i = 0; i < rows; i += 1) {
    	const row = []
    	for (let j = 0; j < cols; j += 1) {
      	row[j] = null
      }
      model[i] = row
    }
    this.state = {
    	model: model
    }
  }
  
  addRow () {
  	const currentColsLen = this.state.model[0].length
  	const row = []
    for (let j = 0; j < currentColsLen; j += 1) {
      row[j] = null
     }
    this.setState({
    	model: this.state.model.concat([row])
    })
  }
  
  dropRow () {
  	const modelCopy = this.state.model.slice(0)
    if (modelCopy.length < 2) return
    modelCopy.pop()
  	this.setState({
    	model: modelCopy
    })
  }

  render () {
  	return (
    	<div>
    	  <div className="row">
    	    {this.state.model.map((row, i) => (<Row data={row} key={i} />))}
    	  </div>
        <hr />
        <button onClick={() => this.addRow()}>+ row</button>
        <button disabled={this.state.model.length < 2} onClick={() => this.dropRow()}>- row</button>
    	</div>
    )
  }
}

class Row extends React.Component {
	render () {
  	const data = this.props.data
   	return (
   		<div className="row">
   		  {data.map((_, i) => <div className="cell" key={i} />)}
   		</div>
    )
  }  
}

ReactDOM.render(<App />, document.querySelector("#app"))