Fixed #1841 - DataTable component does not work correctly "Checkbox selection" together with "lazy"

src/components/datatable/DataTable.vue

@@ -82,7 +82,7 @@ import TableFooter from './TableFooter.vue';
 export default {
     name: 'DataTable',
     emits: ['value-change', 'update:first', 'update:rows', 'page', 'update:sortField', 'update:sortOrder', 'update:multiSortMeta', 'sort', 'filter', 'row-click', 'row-dblclick',
-        'update:selection', 'row-select', 'row-unselect', 'update:contextMenuSelection', 'row-contextmenu', 'row-unselect-all', 'row-select-all',
+        'update:selection', 'row-select', 'row-unselect', 'update:contextMenuSelection', 'row-contextmenu', 'row-unselect-all', 'row-select-all', 'select-all-change',
         'column-resize-end', 'column-reorder', 'row-reorder', 'update:expandedRows', 'row-collapse', 'row-expand',
         'update:expandedRowGroups', 'rowgroup-collapse', 'rowgroup-expand', 'update:filters', 'state-restore', 'state-save',
         'cell-edit-init', 'cell-edit-complete', 'cell-edit-cancel', 'update:editingRows', 'row-edit-init', 'row-edit-save', 'row-edit-cancel'],
@@ -211,6 +211,10 @@ export default {
             type: Object,
             default: null
         },
+        selectAll: {
+            type: Boolean,
+            default: null
+        },
         rowHover: {
             type: Boolean,
             default: false
@@ -883,15 +887,24 @@ export default {
             }
         },
         toggleRowsWithCheckbox(event) {
-            const processedData = this.processedData;
+            if (this.selectAll !== null) {
-            const checked = this.allRowsSelected;
+                this.$emit('select-all-change', event);
-            const _selection = checked ? [] : (this.frozenValue ? [...this.frozenValue, ...processedData]: processedData);
+            }
-            this.$emit('update:selection', _selection);
+            else {
+                const { originalEvent, checked } = event;
+                let _selection = [];
 
-            if (checked)
+                if (checked) {
-                this.$emit('row-unselect-all', {originalEvent: event});
+                    _selection = this.frozenValue ? [...this.frozenValue, ...this.processedData] : this.processedData;
-            else
+                    this.$emit('row-select-all', {originalEvent, data: _selection});
-                this.$emit('row-select-all', {originalEvent: event, data: _selection});
+                }
+                else {
+                    this.$emit('row-unselect-all', {originalEvent});
+                }
+
+                this.$emit('update:selection', _selection);
+
+            }
         },
         isSingleSelectionMode() {
             return this.selectionMode === 'single';
@@ -1887,9 +1900,13 @@ export default {
             return ['p-datatable-loading-icon pi-spin', this.loadingIcon];
         },
         allRowsSelected() {
-            const val = this.frozenValue ? [...this.frozenValue, ...this.processedData]: this.processedData;
+            if (this.selectAll !== null) {
-            const length = this.lazy ? this.totalRecords : (val ? val.length : 0);
+                return this.selectAll;
-            return (val && length > 0 && this.selection && this.selection.length > 0 && this.selection.length === length);
+            }
+            else {
+                const val = this.frozenValue ? [...this.frozenValue, ...this.processedData] : this.processedData;
+                return val && this.selection && Array.isArray(this.selection) && val.every(v => this.selection.some(s => this.equals(s, v)));
+            }
         },
         attributeSelector() {
             return UniqueComponentId();

src/components/datatable/HeaderCheckbox.vue

@@ -24,7 +24,10 @@ export default {
         onClick(event) {
             if (!this.$attrs.disabled) {
                 this.focused = true;
-                this.$emit('change', event);
+                this.$emit('change', {
+                    originalEvent: event,
+                    checked: !this.checked
+                });
             }
         },
         onFocus() {

src/service/CustomerService.js

@@ -21,7 +21,7 @@ export default class CustomerService {
     }
 
     getCustomers(params) {
-        const queryParams = Object.keys(params).map(k => encodeURIComponent(k) + '=' + encodeURIComponent(params[k])).join('&');
+        const queryParams = params ? Object.keys(params).map(k => encodeURIComponent(k) + '=' + encodeURIComponent(params[k])).join('&') : '';
         return fetch('https://www.primefaces.org/data/customers?' + queryParams).then(res => res.json())
     }
 }

src/views/datatable/DataTableLazyDemo.vue

@@ -13,13 +13,15 @@
 
 		<div class="content-section implementation">
             <div class="card">
-                <DataTable :value="customers" :lazy="true" :paginator="true" :rows="10" v-model:filters="filters" ref="dt"
+                <DataTable :value="customers" :lazy="true" :paginator="true" :rows="10" v-model:filters="filters" ref="dt" dataKey="id"
                     :totalRecords="totalRecords" :loading="loading" @page="onPage($event)" @sort="onSort($event)" @filter="onFilter($event)" filterDisplay="row"
-                    :globalFilterFields="['name','country.name', 'company', 'representative.name']" responsiveLayout="scroll" >
+                    :globalFilterFields="['name','country.name', 'company', 'representative.name']" responsiveLayout="scroll"
-                    <Column field="name" header="Name" filterMatchMode="startsWith" ref="name" :sortable="true">  
+                    v-model:selection="selectedCustomers" :selectAll="selectAll" @select-all-change="onSelectAllChange" @row-select="onRowSelect" @row-unselect="onRowUnselect">
+                    <Column selectionMode="multiple" headerStyle="width: 3em"></Column>
+                    <Column field="name" header="Name" filterMatchMode="startsWith" ref="name" :sortable="true">
                         <template #filter="{filterModel,filterCallback}">
                             <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search by name"/>
-                        </template>                    
+                        </template>
                     </Column>
                     <Column field="country.name" header="Country" filterField="country.name" filterMatchMode="contains" ref="country.name" :sortable="true">
                         <template #filter="{filterModel,filterCallback}">
@@ -39,7 +41,7 @@
                 </DataTable>
             </div>
 		</div>
- 
+
         <AppDoc name="DataTableLazyDemo" :sources="sources" :service="['CustomerService']" github="datatable/DataTableLazyDemo.vue" />
 	</div>
 </template>
@@ -53,6 +55,8 @@ export default {
             loading: false,
             totalRecords: 0,
             customers: null,
+            selectedCustomers: null,
+            selectAll: false,
             filters: {
                 'name': {value: '', matchMode: 'contains'},
                 'country.name': {value: '', matchMode: 'contains'},
@@ -72,13 +76,15 @@ export default {
                     content: `
 <template>
 	<div>
-        <DataTable :value="customers" :lazy="true" :paginator="true" :rows="10" v-model:filters="filters" ref="dt"
+        <DataTable :value="customers" :lazy="true" :paginator="true" :rows="10" v-model:filters="filters" ref="dt" dataKey="id"
             :totalRecords="totalRecords" :loading="loading" @page="onPage($event)" @sort="onSort($event)" @filter="onFilter($event)" filterDisplay="row"
-            :globalFilterFields="['name','country.name', 'company', 'representative.name']" responsiveLayout="scroll">
+            :globalFilterFields="['name','country.name', 'company', 'representative.name']" responsiveLayout="scroll"
-            <Column field="name" header="Name" filterMatchMode="startsWith" ref="name" :sortable="true">  
+            v-model:selection="selectedCustomers" :selectAll="selectAll" @select-all-change="onSelectAllChange" @row-select="onRowSelect" @row-unselect="onRowUnselect">
+            <Column selectionMode="multiple" headerStyle="width: 3em"></Column>
+            <Column field="name" header="Name" filterMatchMode="startsWith" ref="name" :sortable="true">
                 <template #filter="{filterModel,filterCallback}">
                     <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search by name"/>
-                </template>                    
+                </template>
             </Column>
             <Column field="country.name" header="Country" filterField="country.name" filterMatchMode="contains" ref="country.name" :sortable="true">
                 <template #filter="{filterModel,filterCallback}">
@@ -108,6 +114,8 @@ export default {
             loading: false,
             totalRecords: 0,
             customers: null,
+            selectedCustomers: null,
+            selectAll: false,
             filters: {
                 'name': {value: '', matchMode: 'contains'},
                 'country.name': {value: '', matchMode: 'contains'},
@@ -129,7 +137,7 @@ export default {
     },
     mounted() {
         this.loading = true;
-        
+
         this.lazyParams = {
             first: 0,
             rows: this.$refs.dt.rows,
@@ -166,10 +174,30 @@ export default {
         onFilter() {
             this.lazyParams.filters = this.filters;
             this.loadLazyData();
+        },
+        onSelectAllChange(event) {
+            const selectAll = event.checked;
+
+            if (selectAll) {
+                this.customerService.getCustomers().then(data => {
+                    this.selectAll = true;
+                    this.selectedCustomers = data.customers;
+                });
+            }
+            else {
+                this.selectAll = false;
+                this.selectedCustomers = [];
+            }
+        },
+        onRowSelect() {
+            this.selectAll = this.selectedCustomers.length === this.totalRecords
+        },
+        onRowUnselect() {
+            this.selectAll = false;
         }
     }
 }
-<\\/script>                  
+<\\/script>
 `
                 },
                 'composition-api': {
@@ -177,13 +205,15 @@ export default {
                     content: `
 <template>
 	<div>
-        <DataTable :value="customers" :lazy="true" :paginator="true" :rows="10" v-model:filters="filters" ref="dt"
+        <DataTable :value="customers" :lazy="true" :paginator="true" :rows="10" v-model:filters="filters" ref="dt" dataKey="id"
             :totalRecords="totalRecords" :loading="loading" @page="onPage($event)" @sort="onSort($event)" @filter="onFilter($event)" filterDisplay="row"
-            :globalFilterFields="['name','country.name', 'company', 'representative.name']" responsiveLayout="scroll">
+            :globalFilterFields="['name','country.name', 'company', 'representative.name']" responsiveLayout="scroll"
-            <Column field="name" header="Name" filterMatchMode="startsWith" ref="name" :sortable="true">  
+            v-model:selection="selectedCustomers" :selectAll="selectAll" @select-all-change="onSelectAllChange" @row-select="onRowSelect" @row-unselect="onRowUnselect">
+            <Column selectionMode="multiple" headerStyle="width: 3em"></Column>
+            <Column field="name" header="Name" filterMatchMode="startsWith" ref="name" :sortable="true">
                 <template #filter="{filterModel,filterCallback}">
                     <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search by name"/>
-                </template>                    
+                </template>
             </Column>
             <Column field="country.name" header="Country" filterField="country.name" filterMatchMode="contains" ref="country.name" :sortable="true">
                 <template #filter="{filterModel,filterCallback}">
@@ -212,7 +242,7 @@ export default {
     setup() {
         onMounted(() => {
             loading.value = true;
-        
+
             lazyParams.value = {
                 first: 0,
                 rows: dt.value.rows,
@@ -228,6 +258,8 @@ export default {
         const loading = ref(false);
         const totalRecords = ref(0);
         const customers = ref();
+        const selectedCustomers = ref();
+        const selectAll = ref(false);
         const customerService = ref(new CustomerService());
         const filters = ref({
             'name': {value: '', matchMode: 'contains'},
@@ -269,11 +301,31 @@ export default {
             lazyParams.value.filters = filters.value ;
             loadLazyData();
         }
+        const onSelectAllChange = (event) => {
+            const selectAll = event.checked;
 
-        return { dt, loading, totalRecords, customers, filters, lazyParams, columns, loadLazyData, onPage, onSort, onFilter }
+            if (selectAll) {
+                customerService.value.getCustomers().then(data => {
+                    selectAll.value = true;
+                    selectedCustomers.value = data.customers;
+                });
+            }
+            else {
+                selectAll.value = false;
+                selectedCustomers.value = [];
+            }
+        }
+        const onRowSelect = () => {
+            selectAll.value = selectedCustomers.value.length === totalRecords.value;
+        }
+        const onRowUnselect = () => {
+            selectAll.value = false;
+        }
+
+        return { dt, loading, totalRecords, customers, filters, lazyParams, columns, loadLazyData, onPage, onSort, onFilter, onSelectAllChange, onRowSelect, onRowUnselect }
     }
 }
-<\\/script>                  
+<\\/script>
 `
                 },
                 'browser-source': {
@@ -282,13 +334,15 @@ export default {
         <script src="https://unpkg.com/primevue@^3/column/column.min.js"><\\/script>
         <script src="./CustomerService.js"><\\/script>`,
                     content: `<div id="app">
-            <p-datatable :value="customers" :lazy="true" :paginator="true" :rows="10" v-model:filters="filters" ref="dt"
+            <p-datatable :value="customers" :lazy="true" :paginator="true" :rows="10" v-model:filters="filters" ref="dt" dataKey="id"
-                :total-records="totalRecords" :loading="loading" @page="onPage($event)" @sort="onSort($event)" @filter="onFilter($event)" filter-display="row"
+                :totalRecords="totalRecords" :loading="loading" @page="onPage($event)" @sort="onSort($event)" @filter="onFilter($event)" filterDisplay="row"
-                :global-filter-fields="['name','country.name', 'company', 'representative.name']" responsive-layout="scroll">
+                :globalFilterFields="['name','country.name', 'company', 'representative.name']" responsiveLayout="scroll"
-                <p-column field="name" header="Name" filter-match-mode="startsWith" ref="name" :sortable="true">  
+                v-model:selection="selectedCustomers" :selectAll="selectAll" @select-all-change="onSelectAllChange" @row-select="onRowSelect" @row-unselect="onRowUnselect">
+                <p-column selectionMode="multiple" headerStyle="width: 3em"></Column>
+                <p-column field="name" header="Name" filter-match-mode="startsWith" ref="name" :sortable="true">
                     <template #filter="{filterModel,filterCallback}">
                         <p-inputtext type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search by name"></p-inputtext>
-                    </template>                    
+                    </template>
                 </p-column>
                 <p-column field="country.name" header="Country" filter-field="country.name" filter-match-mode="contains" ref="country.name" :sortable="true">
                     <template #filter="{filterModel,filterCallback}">
@@ -315,7 +369,7 @@ export default {
             setup() {
                 onMounted(() => {
                     loading.value = true;
-                
+
                     lazyParams.value = {
                         first: 0,
                         rows: dt.value.rows,
@@ -331,6 +385,8 @@ export default {
                 const loading = ref(false);
                 const totalRecords = ref(0);
                 const customers = ref();
+                const selectedCustomers = ref();
+                const selectAll = ref(false);
                 const customerService = ref(new CustomerService());
                 const filters = ref({
                     'name': {value: '', matchMode: 'contains'},
@@ -373,7 +429,28 @@ export default {
                     loadLazyData();
                 }
 
-                return { dt, loading, totalRecords, customers, filters, lazyParams, columns, loadLazyData, onPage, onSort, onFilter }
+                const onSelectAllChange = (event) => {
+                    const selectAll = event.checked;
+
+                    if (selectAll) {
+                        customerService.value.getCustomers().then(data => {
+                            selectAll.value = true;
+                            selectedCustomers.value = data.customers;
+                        });
+                    }
+                    else {
+                        selectAll.value = false;
+                        selectedCustomers.value = [];
+                    }
+                }
+                const onRowSelect = () => {
+                    selectAll.value = selectedCustomers.value.length === totalRecords.value;
+                }
+                const onRowUnselect = () => {
+                    selectAll.value = false;
+                }
+
+                return { dt, loading, totalRecords, customers, filters, lazyParams, columns, loadLazyData, onPage, onSort, onFilter, onSelectAllChange, onRowSelect, onRowUnselect }
             },
             components: {
                 "p-datatable": primevue.datatable,
@@ -381,11 +458,11 @@ export default {
                 "p-inputtext": primevue.inputtext
             }
         };
-        
+
         createApp(App)
             .use(primevue.config.default)
             .mount("#app");
-        <\\/script>                  
+        <\\/script>
 `
                 }
             }
@@ -397,7 +474,7 @@ export default {
     },
     mounted() {
         this.loading = true;
-        
+
         this.lazyParams = {
             first: 0,
             rows: this.$refs.dt.rows,
@@ -431,7 +508,27 @@ export default {
         onFilter() {
             this.lazyParams.filters = this.filters;
             this.loadLazyData();
+        },
+        onSelectAllChange(event) {
+            const selectAll = event.checked;
+
+            if (selectAll) {
+                this.customerService.getCustomers().then(data => {
+                    this.selectAll = true;
+                    this.selectedCustomers = data.customers;
+                });
+            }
+            else {
+                this.selectAll = false;
+                this.selectedCustomers = [];
+            }
+        },
+        onRowSelect() {
+            this.selectAll = this.selectedCustomers.length === this.totalRecords
+        },
+        onRowUnselect() {
+            this.selectAll = false;
         }
     }
 }
-</script>
+</script>

src/views/datatable/DataTableSelectionDemo.vue

@@ -72,7 +72,7 @@
             <div class="card">
                 <h5>Checkbox</h5>
 
-                <DataTable :value="products" v-model:selection="selectedProducts3" dataKey="id" responsiveLayout="scroll" >
+                <DataTable :value="products" v-model:selection="selectedProducts3" dataKey="id" responsiveLayout="scroll">
                     <Column selectionMode="multiple" headerStyle="width: 3em"></Column>
                     <Column field="code" header="Code"></Column>
                     <Column field="name" header="Name"></Column>
@@ -83,7 +83,7 @@
 		</div>
 
         <AppDoc name="DataTableSelectionDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableSelectionDemo.vue" />
-                  
+
 	</div>
 </template>
 
@@ -173,7 +173,7 @@ export default {
                 <Column field="category" header="Category"></Column>
                 <Column field="quantity" header="Quantity"></Column>
             </DataTable>
-		</div>    
+		</div>
 	</div>
 </template>
 
@@ -208,7 +208,7 @@ export default {
         }
     }
 }
-<\\/script>                 
+<\\/script>
 `
                 },
                 'composition-api': {
@@ -283,7 +283,7 @@ export default {
                 <Column field="category" header="Category"></Column>
                 <Column field="quantity" header="Quantity"></Column>
             </DataTable>
-		</div>    
+		</div>
 	</div>
 </template>
 
@@ -319,7 +319,7 @@ export default {
         return { products, selectedProduct1, selectedProduct2, selectedProduct3, selectedProducts1, selectedProducts2, selectedProducts3, onRowSelect, onRowUnselect}
     }
 }
-<\\/script>                 
+<\\/script>
 `
                 },
                 'browser-source': {
@@ -397,7 +397,7 @@ export default {
                     <p-column field="category" header="Category"></p-column>
                     <p-column field="quantity" header="Quantity"></p-column>
                 </p-datatable>
-            </div>    
+            </div>
         </div>
 
     <script type="module">
@@ -440,7 +440,7 @@ export default {
     createApp(App)
             .use(primevue.config.default)
             .mount("#app");
-    <\\/script>                 
+    <\\/script>
 `
                 }
             }
@@ -462,4 +462,4 @@ export default {
         }
     }
 }
-</script>
+</script>