React Js Fixed Data Table Rows Update

Question

My requirement is to fetch data from store and populate it using fixed data table and against each row i need to place an edit button. After clicking on the edit button, i need to display row data on a modal box with editable option after upating the fields and finally clicking on save button in the modal box the data needs to get updated in the database and fixed data table also needs to update as well.

I have worked till now on displaying the store data using fixed data table with editable option for each row. But stucked at after updating the record in database how to update the fixed data table row only without refreshing the entire table.

Below is my code and have no idea whether it is the right way to do or not

    var TestModal = React.createClass({



    propTypes: {

        title : React.PropTypes.any,
        rank : React.PropTypes.any,
        year : React.PropTypes.any

    },

    getInitialState: function() {

        return {          

            title: this.props.title,
            rank: this.props.rank,
            year: this.props.year

        };

    },


    handleSubmit: function(e) {

        e.preventDefault();

        var title = this.refs.title.getValue().trim().toUpperCase();
        var rank = this.refs.rank.getValue().trim().toUpperCase();
        var year = this.refs.year.getValue().trim().toUpperCase();

        var title_json= JSON.stringify({title: title});
        var rank_json= JSON.stringify({rank: rank});
        var year_json= JSON.stringify({year: year});
        //alert(title_json);
        //alert(rank_json);
        //alert(year_json);
        this.props.onCommentSubmit(title_json,rank_json,year_json);
        this.props.onRequestHide;

        return;

    },

    validationTest: function() {

        var length = this.state.test.length;
        if (length > 10) return 'success';
        else if (length > 5) return 'warning';
        else if (length > 0) {
          return 'error';
        }

    },



    render: function() {

        return (

            <Modal {...this.props} className="testModal" bsStyle="primary" title='Edit Details' animation={false}>
                <form className="testModal" onSubmit={this.handleSubmit} >
                    <div className="modal-body">

                        <p><Input type="text" defaultValue={this.state.title} ref="title" className="form-control" required/></p>
                        <p><Input type="text" defaultValue={this.state.rank} ref="rank" className="form-control" required/></p>
                        <p><Input type="text" defaultValue={this.state.year} ref="year" className="form-control" required/></p>

                    </div> 

                    <div className="modal-footer">
                          <ButtonGroup>
                           <Button className="btn btn-default" onClick={this.props.onRequestHide} data-dismiss="modal" active>Close</Button>
                          <Button bsStyle="primary" className="btn btn-default" type="submit" disabled={this.state.isSubmitting}>Save</Button>
                          </ButtonGroup>
                    </div>
                </form>
            </Modal>

        );

    }

});


var Trigger = React.createClass({

    propTypes: {

        title : React.PropTypes.any,
        rank : React.PropTypes.any,
        year : React.PropTypes.any

    },

    handleCommentSubmit: function(title_json,rank_json,year_json) {

        alert("handleCommentSubmit:"+title_json);
        alert("handleCommentSubmit:"+rank_json);
        alert("handleCommentSubmit:"+year_json);

        //code to send updated fields to server and refresh the fixed data table row

    },

    render: function() {

        return (

            <ModalTrigger modal={<TestModal onCommentSubmit={this.handleCommentSubmit} title={this.props.title} rank={this.props.rank} year={this.props.year}/>} >
                  <Button bsStyle="primary" bsSize="medium">Edit</Button>
            </ModalTrigger>

        );

    }
});


var usersList = React.createClass({

    getInitialState() {

        alert("DashboardComponent::getInitialState");
        return {

            rows: []

        };
    },

    componentDidMount: function() {       

        alert("DashboardComponent::componentDidMount");
        DashboardServerActionCreators.receiveData();            

    },

    componentWillMount() {          

        alert("DashboardComponent::componentWillUnmount");
        dashboardStore.addChangeListener(this._onChange);

    },

    componentWillUnmount: function () {

        alert("DashboardComponent::componentWillUnmount");
        dashboardStore.removeChangeListener(this._onChange);

    },

    _onChange: function() {

        alert("DashboardComponent::onChange");

        this.setState({ 

            rows:  dashboardStore.getUsersList()

        }); 

    },  

    _renderButton(cellData, cellDataKey, rowData, rowIndex){


        var title=(JSON.stringify(rowData.title)).replace(/\"/g, "");   
        var rank=(JSON.stringify(rowData.rank)).replace(/\"/g, "");
        var year=(JSON.stringify(rowData.year)).replace(/\"/g, ""); 

        return <Trigger onCommentSubmit={this.handleCommentSubmit} title={title} rank={rank} year={year}/>

    },

    _rowGetter(rowIndex) {

        return this.state.rows[rowIndex];

    },

    render() { 

        return (
            <div>           
                <Table
                    height={500}      
                    rowHeight={40}
                    rowGetter={this._rowGetter}
                    rowsCount={this.state.rows.length}
                    width={630}
                    maxHeight={450}
                    headerHeight={40}>
                    <Column
                        label="ID"
                        width={200}
                        dataKey="_id"
                    />
                    <Column
                        label="Name"
                        width={150}
                        dataKey="title"
                    />
                    <Column
                        label="Rank"
                        width={100}
                        dataKey="rank"
                    />
                    <Column
                        label="Year"
                        width={80}
                        dataKey="year"
                    />
                    <Column
                       label="Click"
                       width={80}                      
                       cellRenderer= {this._renderButton}                 
                    />
                </Table>
            </div>
        );
    }

});

Answer 1

I don't think you can avoid re-rendering the table. But is that a problem, React should handle that very well . After all that seems like the React way of doing stuff and the fixeddatatable 'works by virtualizing your cells and only rendering what is in view'.

If you don't want to re-call all the data could you just update the object for that row in you collection (data for the fixeddatatable), presumably in relevant Store and setState in View to re-render, your server should just send a success or fail for the DB update, or when you leave the view you could update any edits to the DB , get a pass fail and if a fail alert the users the edits have failed, could be more efficient to do it that way ?

Interested to hear from anyone else about this.