Update datatable doc

Author: mertsincan

src/showcase/datatable/DataTableDemo.js

@@ -420,6 +420,12 @@ export class DataTableDemo extends Component {
                             <td>pi pi-bars</td>
                             <td>Icon of the drag handle to reorder rows.</td>
                         </tr>
+                        <tr>
+                            <td>rowEditor</td>
+                            <td>boolean</td>
+                            <td>false</td>
+                            <td>Displays icons to edit row.</td>
+                        </tr>
                     </tbody>
                 </table>
             </div>
@@ -1064,7 +1070,7 @@ export class DataTableSelectionDemo extends Component {
 `}
 </CodeHighlight>
 
-            <h3>Incell Editing</h3>
+            <h3>Cell Editing</h3>
             <p>Incell editing feature provides a way to quickly edit data inside the table. A cell editor is defined using the <i>editor</i> property
             that refers to a function to return an input element for the editing.</p>
 
@@ -1142,6 +1148,87 @@ requiredValidator(props) {
     let value = props.rowData[props.field];
     return value && value.length > 0;
 }
+`}
+</CodeHighlight>
+
+            <h3>Row Editing</h3>
+            <p>Row editing toggles the visibility of the all editors in the row at once and provides additional options to save and cancel editing.</p>
+            
+<CodeHighlight className="language-jsx">
+{`
+<DataTable value={this.state.cars} editMode="row">
+    <Column field="vin" header="Vin" />
+    <Column field="brand" header="Brand" editor={this.brandEditor} onRowEditorValidator={this.onRowEditorValidator}/>
+    <Column field="saleDate" header="Sale Date" editor={this.saleDateEditor} >
+    <Column rowEditor={true} />
+</DataTable>
+
+`}
+</CodeHighlight>
+
+<CodeHighlight className="language-javascript">
+{`
+onEditorValueChange(props, value) {
+    let updatedCars = [...this.state.cars];
+    updatedCars[props.rowIndex][props.field] = value;
+    this.setState({cars: updatedCars});
+}
+
+brandEditor(props) {
+    let brands = [
+        {label: 'Audi', value: 'Audi'},
+        {label: 'BMW', value: 'BMW'},
+        {label: 'Fiat', value: 'Fiat'},
+        {label: 'Ford', value: 'Ford'},
+        {label: 'Honda', value: 'Honda'},
+        {label: 'Jaguar', value: 'Jaguar'},
+        {label: 'Mercedes', value: 'Mercedes'},
+        {label: 'Renault', value: 'Renault'},
+        {label: 'VW', value: 'VW'},
+        {label: 'Volvo', value: 'Volvo'}
+    ];
+    
+    return (
+        <Dropdown value={this.state.cars[props.rowIndex].brand} options={brands} 
+                onChange={(e) => this.onEditorValueChange(props, e.value)} style={{width:'100%'}} placeholder="Select a City"/>
+    );
+}
+
+saleDateEditor(props) {        
+    return (
+        <Calendar value={this.state.cars[props.rowIndex].saleDate}
+                onChange={(e) => this.onEditorValueChange(props, e.value)} style={{width:'100%'}} />
+    );
+}
+
+onRowEditorValidator(rowData) {
+    let value = rowData['brand'];
+    return value.length > 0;
+}
+
+onRowEditInit(event) {
+    this.clonedCars[event.data.vin] = {...event.data};
+}
+
+onRowEditSave(event) {
+    if (this.onRowEditorValidator(event.data)) {
+        delete this.clonedCars[event.data.vin];
+        // Success message
+    }
+    else {
+        // Error message
+    }
+}
+
+onRowEditCancel(event) {
+    let cars = [...this.state.cars];
+    cars[event.index] = this.clonedCars[event.data.vin];
+    delete this.clonedCars[event.data.vin];
+    this.setState({
+        cars
+    })
+}
+    
 `}
 </CodeHighlight>
 
@@ -2055,6 +2142,12 @@ export class DataTableStateDemo extends Component {
                             <td>session</td>
                             <td>Defines where a stateful table keeps its state, <br/> valid values are "session" for sessionStorage and "local" for localStorage.</td>
                         </tr>
+                        <tr>
+                            <td>editMode</td>
+                            <td>string</td>
+                            <td>cell</td>
+                            <td>Defines editing mode, options are "cell" and "row".</td>
+                        </tr>
                     </tbody>
                 </table>
             </div>
@@ -2187,6 +2280,30 @@ export class DataTableStateDemo extends Component {
                             <td>value: Value displayed by the table.</td>
                             <td>Callback to invoke after filtering and sorting to pass the rendered value.</td>
                         </tr>
+                        <tr>
+                            <td>rowEditorValidator</td>
+                            <td>data: Editing row data</td>
+                            <td>Callback to invoke to validate the editing row when the save icon is clicked on row editing mode.</td>
+                        </tr>
+                        <tr>
+                            <td>onRowEditInit</td>
+                            <td>event.originalEvent: Browser event <br />
+                                event.data: Editing row data </td>
+                            <td>Callback to invoke when the editing icon is clicked on row editing mode.</td>
+                        </tr>
+                        <tr>
+                            <td>onRowEditSave</td>
+                            <td>event.originalEvent: Browser event <br />
+                                event.data: Editing row data</td>
+                            <td>Callback to invoke when the save icon is clicked on row editing mode.</td>
+                        </tr>
+                        <tr>
+                            <td>onRowEditCancel</td>
+                            <td>event.originalEvent: Browser event <br />
+                                event.data: Editing row data <br />
+                                event.index: Editing row data index</td>
+                            <td>Callback to invoke when the cancel icon is clicked on row editing mode.</td>
+                        </tr>
                     </tbody>
                 </table>
             </div>