Fixed #2636 - Add possibility to reset scroll in DataTable

primefaces · Feb 18, 2022 · 37b2072 · 37b2072
1 parent bcbc2c2
commit 37b2072
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 1 deletion.
diff --git a/components/doc/datatable/index.js b/components/doc/datatable/index.js
@@ -3706,6 +3706,11 @@ export const DataTableStateDemo = () => {
                                         <td>-</td>
                                         <td>Resets column order when reorderableColumns is enabled.</td>
                                     </tr>
+                                    <tr>
+                                        <td>resetScroll</td>
+                                        <td>-</td>
+                                        <td>Resets scroll position.</td>
+                                    </tr>
                                     <tr>
                                         <td>restoreTableState</td>
                                         <td>state</td>

diff --git a/components/lib/datatable/DataTable.d.ts b/components/lib/datatable/DataTable.d.ts
@@ -363,6 +363,7 @@ export interface DataTableProps {
 
 export declare class DataTable extends React.Component<DataTableProps, any> {
     public reset(): void;
+    public resetScroll(): void;
     public exportCSV(options?: { selectionOnly: boolean }): void;
     public filter<T>(value: T, field: string, mode: DataTableFilterMatchModeType, index?: number): void;
     public resetColumnOrder(): void;

diff --git a/components/lib/datatable/DataTable.js b/components/lib/datatable/DataTable.js
@@ -1395,6 +1395,13 @@ export class DataTable extends Component {
         this.setState(state);
     }
 
+    resetScroll() {
+        if (this.wrapper) {
+            const scrollableContainer = !this.isVirtualScrollerDisabled() ? DomHandler.findSingle(this.wrapper, '.p-virtualscroller') : this.wrapper;
+            scrollableContainer.scrollTo(0, 0);
+        }
+    }
+
     resetColumnOrder() {
         const columns = this.getColumns(true);
         let columnOrder = [];
@@ -1690,7 +1697,7 @@ export class DataTable extends Component {
         const virtualScrollerOptions = this.props.virtualScrollerOptions || {};
 
         return (
-            <div className="p-datatable-wrapper" style={{ maxHeight: isVirtualScrollerDisabled ? this.props.scrollHeight : null }}>
+            <div ref={el => this.wrapper = el} className="p-datatable-wrapper" style={{ maxHeight: isVirtualScrollerDisabled ? this.props.scrollHeight : null }}>
                 <VirtualScroller {...virtualScrollerOptions} items={processedData} columns={columns} scrollHeight={this.props.scrollHeight}
                     disabled={isVirtualScrollerDisabled} loaderDisabled showSpacer={false}
                     contentTemplate={(options) => {