Fixed #643 - Ability to get filtered and/or sorted data in DataTable

primefaces · Dec 4, 2018 · 464125a · 464125a
1 parent 4397361
commit 464125a
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 13 deletions.
diff --git a/src/components/datatable/DataTable.d.ts b/src/components/datatable/DataTable.d.ts
@@ -80,6 +80,7 @@ interface DataTableProps {
     onContextMenu?(e: {originalEvent: Event, data: any}): void;
     onColReorder?(e: {dragIndex: number, dropIndex: number, columns: any}): void;
     onRowReorder?(e: {originalEvent: Event, value: any, dragIndex: number, dropIndex: number}): void;
+    onValueChange?(value: any[]): void;
 }
 
 export class DataTable extends React.Component<DataTableProps,any> {

diff --git a/src/components/datatable/DataTable.js b/src/components/datatable/DataTable.js
@@ -89,7 +89,8 @@ export class DataTable extends Component {
         onRowCollapse: null,
         onContextMenu: null,
         onColReorder: null,
-        onRowReorder: null
+        onRowReorder: null,
+        onValueChange: null
     }
 
     static propTypes = {
@@ -168,7 +169,8 @@ export class DataTable extends Component {
         onRowCollapse: PropTypes.func,
         onContextMenu: PropTypes.func,
         onColReorder: PropTypes.func,
-        onRowReorder: PropTypes.func
+        onRowReorder: PropTypes.func,
+        onValueChange: PropTypes.func
     };
 
     constructor(props) {
@@ -236,6 +238,10 @@ export class DataTable extends Component {
             this.props.onPage(event);
         else
             this.setState({first: event.first, rows: event.rows});
+
+        if (this.props.onValueChange) {
+            this.props.onValueChange();
+        }
     }
 
     createPaginator(position, totalRecords, data) {
@@ -281,6 +287,14 @@ export class DataTable extends Component {
                 multiSortMeta: multiSortMeta
             });
         }
+
+        if (this.props.onValueChange) {
+            this.props.onValueChange(this.processData({
+                sortField: sortField,
+                sortOrder: sortOrder,
+                multiSortMeta: multiSortMeta
+            }));
+        }
     }
 
     addSortMeta(meta, multiSortMeta) {
@@ -298,7 +312,7 @@ export class DataTable extends Component {
             multiSortMeta.push(meta);
     }
 
-    sortSingle(data) {
+    sortSingle(data, sortField, sortOrder) {
         let value = [...data];
 
         if(this.columnSortable && this.columnSortable === 'custom' && this.columnSortFunction) {
@@ -309,7 +323,6 @@ export class DataTable extends Component {
         }
         else {
             value.sort((data1, data2) => {
-                const sortField = this.getSortField();
                 const value1 = ObjectUtils.resolveFieldData(data1, sortField);
                 const value2 = ObjectUtils.resolveFieldData(data2, sortField);
                 let result = null;
@@ -325,17 +338,17 @@ export class DataTable extends Component {
                 else
                     result = (value1 < value2) ? -1 : (value1 > value2) ? 1 : 0;
 
-                return (this.getSortOrder() * result);
+                return (sortOrder * result);
             });
         }
 
         return value;
     }
 
-    sortMultiple(data) {
+    sortMultiple(data, multiSortMeta) {
          let value = [...data];
          value.sort((data1, data2) => {
-            return this.multisortField(data1, data2, this.getMultiSortMeta(), 0);
+            return this.multisortField(data1, data2, multiSortMeta, 0);
          });
 
          return value;
@@ -390,6 +403,12 @@ export class DataTable extends Component {
                 filters: newFilters
             });
         }
+
+        if (this.props.onValueChange) {
+            this.props.onValueChange(this.processData({
+                filters: newFilters
+            }));
+        }
     }
 
     isFilterBlank(filter) {
@@ -813,19 +832,24 @@ export class DataTable extends Component {
         return filteredValue;
     }
 
-    processData() {
+    processData(localState) {
         let data = this.props.value;
         if(!this.props.lazy) {
             if(data && data.length) {
-                if(this.getSortField() || this.getMultiSortMeta()) {
+                let sortField = (localState && localState.sortField) || this.getSortField();
+                let sortOrder = (localState && localState.sortOrder) || this.getSortOrder();
+                let multiSortMeta = (localState && localState.multiSortMeta) || this.getMultiSortMeta();
+
+                if(sortField || multiSortMeta) {
                     if(this.props.sortMode === 'single')
-                        data = this.sortSingle(data);
+                        data = this.sortSingle(data, sortField, sortOrder);
                     else if(this.props.sortMode === 'multiple')
-                        data = this.sortMultiple(data);
+                        data = this.sortMultiple(data, multiSortMeta);
                 }
 
-                if(this.getFilters() || this.props.globalFilter) {
-                    data = this.filterLocal(data);
+                let localFilters = (localState && localState.filters) || this.getFilters();
+                if (localFilters || this.props.globalFilter) {
+                    data = this.filterLocal(data, localFilters);
                 }
             }
         }

diff --git a/src/showcase/datatable/DataTableDemo.js b/src/showcase/datatable/DataTableDemo.js
@@ -703,6 +703,19 @@ mysort(event) {
     //event.order = Sort order
 }
 
+`}
+</CodeHighlight>
+
+            <p>Getting access to the sorted data is provided by the <i>onValueChange</i> callback.</p>
+            <CodeHighlight className="language-javascript">
+{`
+<DataTable value={this.state.cars} onValueChange={sortedData => console.log(sortedData)}>
+    <Column field="vin" header="Vin" sortable={true} />
+    <Column field="year" header="Year" sortable={true} />
+    <Column field="brand" header="Brand" sortable={true} />
+    <Column field="color" header="Color" sortable={true} />
+</DataTable>
+
 `}
 </CodeHighlight>
 
@@ -921,6 +934,19 @@ export class DataTableFilterDemo extends Component {
     }
 }
 
+`}
+</CodeHighlight>
+
+            <p>Getting access to the filtered data is provided by the <i>onValueChange</i> callback.</p>
+            <CodeHighlight className="language-javascript">
+{`
+<DataTable value={this.state.cars} onValueChange={filteredData => console.log(filteredData)}>
+    <Column field="vin" header="Vin" filter={true} />
+    <Column field="year" header="Year" filter={true} />
+    <Column field="brand" header="Brand" filter={true} />
+    <Column field="color" header="Color" filter={true}  />
+</DataTable>
+
 `}
 </CodeHighlight>
 
@@ -2072,6 +2098,11 @@ export class DataTableLazyDemo extends Component {
                                 event.dropIndex: Index of the drop location</td>
                             <td>Callback to invoke when a row is reordered.</td>
                         </tr>
+                        <tr>
+                            <td>onValueChange</td>
+                            <td>value: Value displayed by the table.</td>
+                            <td>Callback to invoke after filtering and sorting to pass the rendered value.</td>
+                        </tr>
                     </tbody>
                 </table>
             </div>