React - appending an empty row to a table

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