Refactor #1841

api-generator/components/datatable.js

@@ -185,6 +185,12 @@ const DataTableProps = [
         default: "false",
         description: "When enabled, background of the rows change on hover."
     },
+    {
+        name: "selectAll",
+        type: "boolean",
+        default: "null",
+        description: "Whether all data is selected."
+    },
     {
         name: "csvSeparator",
         type: "string",
@@ -634,6 +640,22 @@ const DataTableEvents = [
             }
         ]
     },
+    {
+        name: "select-all-change",
+        description: "Callback to invoke when all data is selected.",
+        arguments: [
+            {
+                name: "event.originalEvent",
+                type: "object",
+                description: "Browser event."
+            },
+            {
+                name: "event.checked",
+                type: "object",
+                description: "Whether all data is selected."
+            }
+        ]
+    },
     {
         name: "column-resize-end",
         description: "Callback to invoke when a column is resized.",

src/components/datatable/DataTable.d.ts

@@ -1,5 +1,5 @@
 import { VNode } from 'vue';
-import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { ClassComponent, GlobalComponentConstructor, Nullable } from '../ts-helpers';
 import Column from '../column';
 import { VirtualScrollerProps } from '../virtualscroller';
 
@@ -235,6 +235,17 @@ export interface DataTableRowUnselectAllEvent {
     originalEvent: Event;
 }
 
+export interface DataTableSelectAllChangeEvent {
+    /**
+     * Browser event
+     */
+    originalEvent: Event;
+    /**
+     * Whether all data is selected.
+     */
+    checked: boolean;
+}
+
 export interface DataTableColumnResizeEndEvent {
     /**
      * DOM element of the resized column.
@@ -607,6 +618,10 @@ export interface DataTableProps {
      * Selected row instance with the ContextMenu.
      */
     contextMenuSelection?: any | any[] | undefined;
+    /**
+     * Whether all data is selected.
+     */
+    selectAll?: Nullable<boolean>;
     /**
      * When enabled, background of the rows change on hover.
      */
@@ -952,6 +967,11 @@ export declare type DataTableEmits = {
      * @param {DataTableRowUnselectEvent} event - Custom row unselect event.
      */
     'row-unselect': (event: DataTableRowUnselectEvent) => void;
+    /**
+     * Callback to invoke when all data is selected.
+     * @param {DataTableSelectAllChangeEvent} event - Custom select all change event.
+     */
+    'select-all-change': (event: DataTableSelectAllChangeEvent) => void;
     /**
      * Callback to invoke when a column is resized.
      * @param {DataTableColumnResizeEndEvent} - Custom column resize event.

src/views/datatable/DataTableLazyDemo.vue

@@ -6,6 +6,7 @@
 				<p>Lazy mode is handy to deal with large datasets, instead of loading the entire data, small chunks of data is loaded by invoking corresponding callbacks everytime paging, sorting and filtering happens.
                     Sample belows imitates lazy paging by using an in memory list. It is also important to assign the logical number of rows to totalRecords by doing a projection query for paginator configuration
                     so that paginator displays the UI assuming there are actually records of totalRecords size although in reality they aren't as in lazy mode, only the records that are displayed on the current page exist.
+                    Also, the implementation of <b>checkbox selection</b> in lazy tables is left entirely to the user. Since the DataTable does not know what will happen to the data on the next page or whether there are instant data changes, the selection array can be implemented in several ways. One of them is as in the example below.
                 </p>
 			</div>
             <AppDemoActions />