React - appending an empty row to a table - reactjs

Question

I am currently building an application that renders a table but in the first instance the only thing that renders are the column headers. What I would like to know is how I would then go about giving a user the choice to add a row with no data that they can then edit to add data that they want to put in the cells of the row. The headers are generated by a form with a dynamic amount of inputs so theoretically there could be a lot and the added row would need to reflect this also. I would like to try and avoid using a plugin if possible as well.
The app is being built with React and for the moment I am using flux architecture.
Fast answers with examples would be very much appreciated!
Thanks for your time
Here is where the whole table renders:
import React from 'react';
import TableHeader from './TableHeader.jsx';
import TableBody from './TableBody.jsx';
export default class Table extends React.Component {
render() {
return (
<table className="table table-striped dali-table">
<thead><TableHeader /></thead>
<tbody><TableBody /></tbody>
</table>
);
}
}
Here is the code for rendering the column headers:
import React from 'react';
import AppStore from '../../stores/AppStore';
export default class TableHeader extends React.Component {
addHeaders() {
let headerArray = AppStore.getTable().columns;
let headerList = headerArray.map((element, index) => {
return (
<th key={index} id={element.id} className="text-center">{element.name}</th>
);
});
return headerList;
}
render() {
return (
<tr>{this.addHeaders()}</tr>
);
}
}
And I don't really have any code for the body of the table, as that is the bit which I am struggling with!
Okay so I think I'm making some headway! Thanks for the help so far! Here is what I have at the moment (I will be separating it out later, just want to get it working first!):
import React from 'react';
import AppStore from '../../stores/AppStore';
export default class Table extends React.Component {
state = {rows: [], isEditing: false};
render() {
let {rows, isEditing} = this.state;
let headerArray = AppStore.getTable().columns;
const handleEdit = (row) => {
this.setState({isEditing: true});
};
const handleAddRowClickEvent = () => {
let rows = this.state.rows;
rows.push({isNew: true, isEditing: false});
this.setState({rows: rows});
};
return (
<div>
<div className="row" id="table-row">
<table className="table table-striped">
<thead>
<tr>{headerArray.map((element, index) => {
return (
<th key={index} id={element.id} className="text-center">{element.name}</th>
);})}
</tr>
</thead>
<tbody>
{rows.map((row, index) => row.isEditing ?
<RowForm formKey={index} key={index} /> :
<tr key={index}>
{headerArray.map((element, index) => {
return (
<td key={index} id={element.id}></td>
);
})}
<td>
<button onClick={handleEdit(row)}>Edit</button>
</td>
</tr>)}
</tbody>
</table>
</div>
<div className="row">
<div className="col-xs-12 de-button">
<button type="button" className="btn btn-success" onClick={handleAddRowClickEvent}>Add Row</button>
</div>
</div>
</div>
);
}
}
Need help on adding the row don't know what to push into the empty rows array! Thanks

Answer 1

The main idea is add flag to each row so you can know the status for each row, is it in edit mode or display mode
render(){
const handleEdit = (row) => {
// toggle isEditing flag
};
return (<tbody>
{
rows.map((row) => row.isEditing ?
<RowForm formKey={row.id} key={row.id}/> :
<tr key={row.id}>
<td>{row.id}</td>
<td>{row.name}</td>
<button onClick={handleEdit(row)}>
Edit
</button>
</td>
</tr>
}
</tbody>);
}
Check this example source code / demo

Answer 2

Posting some code snippets will help one provide better answers
So, to create a dynamic row you could do something like:
import React from 'react';
import AppStore from '../../stores/AppStore';
export default class TableBody extends React.Component {
addRows() {
// This gets the number of columns in your header from your backend
let noOfColumns = AppStore.getColumnSize();
// loop from 1 to noOfColumns and return:
return (
<td><input placeholder='Enter Value'/></td>
);
}
render() {
return (
<tr>{this.addRows()}</tr>
);
}
}
Then add TableBody to your Table Class.
PS - The above is just code snippets and is somewhat pseudo-code. You also need to handle the 'input field' correctly as per React Documentation recommendation: https://facebook.github.io/react/docs/forms.html