{"action":"opened","issue":{"url":"https://api.github.com/repos/facebook/fixed-data-table/issues/231","labels_url":"https://api.github.com/repos/facebook/fixed-data-table/issues/231/labels{/name}","comments_url":"https://api.github.com/repos/facebook/fixed-data-table/issues/231/comments","events_url":"https://api.github.com/repos/facebook/fixed-data-table/issues/231/events","html_url":"https://github.com/facebook/fixed-data-table/issues/231","id":99787171,"number":231,"title":"Need example for updating rows data in fixed data table","user":{"login":"vraamu","id":12997347,"avatar_url":"https://avatars.githubusercontent.com/u/12997347?v=3","gravatar_id":"","url":"https://api.github.com/users/vraamu","html_url":"https://github.com/vraamu","followers_url":"https://api.github.com/users/vraamu/followers","following_url":"https://api.github.com/users/vraamu/following{/other_user}","gists_url":"https://api.github.com/users/vraamu/gists{/gist_id}","starred_url":"https://api.github.com/users/vraamu/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/vraamu/subscriptions","organizations_url":"https://api.github.com/users/vraamu/orgs","repos_url":"https://api.github.com/users/vraamu/repos","events_url":"https://api.github.com/users/vraamu/events{/privacy}","received_events_url":"https://api.github.com/users/vraamu/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2015-08-08T09:26:53Z","updated_at":"2015-08-08T09:26:53Z","closed_at":null,"body":"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.\r\nAfter 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 \r\nbutton in the modal box the data needs to get updated in the database and fixed data table also needs to update as well.\r\n\r\nI have worked till now on displaying the store data using fixed data table with editable option for each row.\r\nBut stucked at after updating the record in database how to update the fixed data table row only without refreshing the entire table.\r\n\r\nBelow is my code and have no idea whether it is the right way to do or not\r\nvar TestModal = React.createClass({\r\n\r\n  \r\n\tpropTypes: {\r\n\t  \r\n\t\ttitle : React.PropTypes.any,\r\n\t\trank : React.PropTypes.any,\r\n\t\tyear : React.PropTypes.any\r\n\t  \r\n\t},\r\n  \r\n\tgetInitialState: function() {\r\n\t  \r\n\t\treturn {  \t  \t  \r\n\t\t\t\t\r\n\t\t\ttitle: this.props.title,\r\n\t\t\trank: this.props.rank,\r\n\t\t\tyear: this.props.year\r\n\t\t\t\r\n\t\t};\r\n\t\t\r\n\t},\r\n  \r\n  \r\n\thandleSubmit: function(e) {\r\n\t  \r\n\t\te.preventDefault();\r\n\t\t\r\n\t\tvar title = this.refs.title.getValue().trim().toUpperCase();\r\n\t\tvar rank = this.refs.rank.getValue().trim().toUpperCase();\r\n\t\tvar year = this.refs.year.getValue().trim().toUpperCase();\r\n\t\t\r\n\t\tvar title_json= JSON.stringify({title: title});\r\n\t\tvar rank_json= JSON.stringify({rank: rank});\r\n\t\tvar year_json= JSON.stringify({year: year});\r\n\t\t//alert(title_json);\r\n\t\t//alert(rank_json);\r\n\t\t//alert(year_json);\r\n\t\tthis.props.onCommentSubmit(title_json,rank_json,year_json);\r\n\t\tthis.props.onRequestHide;\r\n\t\t\r\n\t\treturn;\r\n\t\t\r\n\t},\r\n\r\n\tvalidationTest: function() {\r\n\t\r\n\t\tvar length = this.state.test.length;\r\n\t\tif (length > 10) return 'success';\r\n\t\telse if (length > 5) return 'warning';\r\n\t\telse if (length > 0) {\r\n\t\t  return 'error';\r\n\t\t}\r\n\t\t\r\n\t},\r\n  \r\n  \r\n\r\n\trender: function() {\r\n\t\r\n\t\treturn (\r\n\t\t\r\n\t\t\t<Modal {...this.props} className=\"testModal\" bsStyle=\"primary\" title='Edit Details' animation={false}>\r\n\t\t\t\t<form className=\"testModal\" onSubmit={this.handleSubmit} >\r\n\t\t\t\t\t<div className=\"modal-body\">\r\n\t\t\t\t\t \r\n\t\t\t\t\t\t<p><Input type=\"text\" defaultValue={this.state.title} ref=\"title\" className=\"form-control\" required/></p>\r\n\t\t\t\t\t\t<p><Input type=\"text\" defaultValue={this.state.rank} ref=\"rank\" className=\"form-control\" required/></p>\r\n\t\t\t\t\t\t<p><Input type=\"text\" defaultValue={this.state.year} ref=\"year\" className=\"form-control\" required/></p>\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t</div> \r\n\t\t\t\t\t  \r\n\t\t\t\t\t<div className=\"modal-footer\">\r\n\t\t\t\t\t\t  <ButtonGroup>\r\n\t\t\t\t\t\t   <Button className=\"btn btn-default\" onClick={this.props.onRequestHide} data-dismiss=\"modal\" active>Close</Button>\r\n\t\t\t\t\t\t  <Button bsStyle=\"primary\" className=\"btn btn-default\" type=\"submit\" disabled={this.state.isSubmitting}>Save</Button>\r\n\t\t\t\t\t\t  </ButtonGroup>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</form>\r\n\t\t\t</Modal>\r\n\r\n\t\t);\r\n\t\t\r\n\t}\r\n\t\r\n});\r\n\r\n\r\nvar Trigger = React.createClass({\r\n\r\n\tpropTypes: {\r\n\t  \r\n\t\ttitle : React.PropTypes.any,\r\n\t\trank : React.PropTypes.any,\r\n\t\tyear : React.PropTypes.any\r\n\t\t\r\n\t},\r\n\r\n\thandleCommentSubmit: function(title_json,rank_json,year_json) {\r\n    \r\n\t\talert(\"handleCommentSubmit:\"+title_json);\r\n\t\talert(\"handleCommentSubmit:\"+rank_json);\r\n\t\talert(\"handleCommentSubmit:\"+year_json);\r\n\t\t\r\n\t\t//code to send updated fields to server and refresh the fixed data table row\r\n   \r\n\t},\r\n\r\n\trender: function() {\r\n\r\n\t\treturn (\r\n\r\n\t\t\t<ModalTrigger modal={<TestModal onCommentSubmit={this.handleCommentSubmit} title={this.props.title} rank={this.props.rank} year={this.props.year}/>} >\r\n\t\t\t\t  <Button bsStyle=\"primary\" bsSize=\"medium\">Edit</Button>\r\n\t\t\t</ModalTrigger>\r\n\r\n\t\t);\r\n\t\t\r\n\t}\r\n});\r\n\r\n\r\nvar usersList = React.createClass({\r\n\r\n\tgetInitialState() {\r\n\r\n\t\talert(\"DashboardComponent::getInitialState\");\r\n\t\treturn {\r\n\t\t\r\n\t\t\trows: []\r\n\t\t\t\r\n\t\t};\r\n\t},\r\n \r\n\tcomponentDidMount: function() {\t\t  \r\n\t\t\t\r\n\t\talert(\"DashboardComponent::componentDidMount\");\r\n\t\tDashboardServerActionCreators.receiveData();\t\t\t\r\n\t\t\r\n\t},\r\n  \r\n\tcomponentWillMount() {\t\t\t\r\n\t\t\r\n\t\talert(\"DashboardComponent::componentWillUnmount\");\r\n\t\tdashboardStore.addChangeListener(this._onChange);\r\n\t\t\r\n\t},\r\n  \r\n\tcomponentWillUnmount: function () {\r\n\t  \r\n\t\talert(\"DashboardComponent::componentWillUnmount\");\r\n\t\tdashboardStore.removeChangeListener(this._onChange);\r\n\t\t\r\n\t},\r\n  \r\n\t_onChange: function() {\r\n\r\n\t\talert(\"DashboardComponent::onChange\");\r\n\r\n\t\tthis.setState({ \r\n\t\t\r\n\t\t\trows:  dashboardStore.getUsersList()\r\n\t\t\t\r\n\t\t}); \r\n\t\t\r\n\t},\t\r\n\r\n\t_renderButton(cellData, cellDataKey, rowData, rowIndex){\r\n  \r\n\t\r\n\t\tvar title=(JSON.stringify(rowData.title)).replace(/\\\"/g, \"\");\t\r\n\t\tvar rank=(JSON.stringify(rowData.rank)).replace(/\\\"/g, \"\");\r\n\t\tvar year=(JSON.stringify(rowData.year)).replace(/\\\"/g, \"\");\t\r\n\t  \r\n\t\treturn <Trigger onCommentSubmit={this.handleCommentSubmit} title={title} rank={rank} year={year}/>\r\n  \r\n\t},\r\n \r\n\t_rowGetter(rowIndex) {\r\n\r\n\t\treturn this.state.rows[rowIndex];\r\n\t\t\r\n\t},\r\n\t\r\n\trender() { \r\n\t\r\n\t\treturn (\r\n\t\t\t<div>\t\t\t\r\n\t\t\t\t<Table\r\n\t\t\t\t\theight={500}      \r\n\t\t\t\t\trowHeight={40}\r\n\t\t\t\t\trowGetter={this._rowGetter}\r\n\t\t\t\t\trowsCount={this.state.rows.length}\r\n\t\t\t\t\twidth={630}\r\n\t\t\t\t\tmaxHeight={450}\r\n\t\t\t\t\theaderHeight={40}>\r\n\t\t\t\t\t<Column\r\n\t\t\t\t\t\tlabel=\"ID\"\r\n\t\t\t\t\t\twidth={200}\r\n\t\t\t\t\t\tdataKey=\"_id\"\r\n\t\t\t\t\t/>\r\n\t\t\t\t\t<Column\r\n\t\t\t\t\t\tlabel=\"Name\"\r\n\t\t\t\t\t\twidth={150}\r\n\t\t\t\t\t\tdataKey=\"title\"\r\n\t\t\t\t\t/>\r\n\t\t\t\t\t<Column\r\n\t\t\t\t\t\tlabel=\"Rank\"\r\n\t\t\t\t\t\twidth={100}\r\n\t\t\t\t\t\tdataKey=\"rank\"\r\n\t\t\t\t\t/>\r\n\t\t\t\t\t<Column\r\n\t\t\t\t\t\tlabel=\"Year\"\r\n\t\t\t\t\t\twidth={80}\r\n\t\t\t\t\t\tdataKey=\"year\"\r\n\t\t\t\t\t/>\r\n\t\t\t\t\t<Column\r\n\t\t\t\t\t   label=\"Click\"\r\n\t\t\t\t\t   width={80}           \t\t   \r\n\t\t\t\t\t   cellRenderer= {this._renderButton}\t              \r\n\t\t\t\t\t/>\r\n\t\t\t\t</Table>\r\n\t\t\t</div>\r\n\t\t);\r\n\t}\r\n\t\r\n});\r\n\r\n\r\n\r\n  "}}