primevue 3.8.2 → 3.11.0

package/datatable/DataTable.vue

@@ -9,51 +9,56 @@
         </div>
         <DTPaginator v-if="paginatorTop" :rows="d_rows" :first="d_first" :totalRecords="totalRecordsLength" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
                 :currentPageReportTemplate="currentPageReportTemplate" class="p-paginator-top" @page="onPage($event)" :alwaysShow="alwaysShowPaginator">
-            <template #left v-if="$slots.paginatorLeft">
-                <slot name="paginatorLeft"></slot>
+            <template #start v-if="$slots.paginatorstart">
+                <slot name="paginatorstart"></slot>
             </template>
-            <template #right v-if="$slots.paginatorRight">
-                <slot name="paginatorRight"></slot>
+            <template #end v-if="$slots.paginatorend">
+                <slot name="paginatorend"></slot>
             </template>
         </DTPaginator>
-        <div class="p-datatable-wrapper" :style="{maxHeight: scrollHeight}">
-            <table ref="table" role="table" :class="[tableClass, 'p-datatable-table']" :style="tableStyle">
-                <DTTableHeader :columnGroup="headerColumnGroup" :columns="columns" :rowGroupMode="rowGroupMode"
-                        :groupRowsBy="groupRowsBy" :groupRowSortField="groupRowSortField" :resizableColumns="resizableColumns" :allRowsSelected="allRowsSelected" :empty="empty"
-                        :sortMode="sortMode" :sortField="d_sortField" :sortOrder="d_sortOrder" :multiSortMeta="d_multiSortMeta" :filters="d_filters" :filtersStore="filters" :filterDisplay="filterDisplay"
-                        @column-click="onColumnHeaderClick($event)" @column-mousedown="onColumnHeaderMouseDown($event)" @filter-change="onFilterChange" @filter-apply="onFilterApply"
-                        @column-dragstart="onColumnHeaderDragStart($event)" @column-dragover="onColumnHeaderDragOver($event)" @column-dragleave="onColumnHeaderDragLeave($event)" @column-drop="onColumnHeaderDrop($event)"
-                        @column-resizestart="onColumnResizeStart($event)" @checkbox-change="toggleRowsWithCheckbox($event)" />
-                <DTTableBody v-if="frozenValue" :value="frozenValue" :frozenRow="true" class="p-datatable-frozen-tbody" :columns="columns" :dataKey="dataKey" :selection="selection" :selectionKeys="d_selectionKeys" :selectionMode="selectionMode" :contextMenu="contextMenu" :contextMenuSelection="contextMenuSelection"
-                    :rowGroupMode="rowGroupMode" :groupRowsBy="groupRowsBy" :expandableRowGroups="expandableRowGroups" :rowClass="rowClass" :editMode="editMode" :compareSelectionBy="compareSelectionBy" :scrollable="scrollable"
-                    :expandedRowIcon="expandedRowIcon" :collapsedRowIcon="collapsedRowIcon" :expandedRows="expandedRows" :expandedRowKeys="d_expandedRowKeys" :expandedRowGroups="expandedRowGroups"
-                    :editingRows="editingRows" :editingRowKeys="d_editingRowKeys" :templates="$slots" :loading="loading" :responsiveLayout="responsiveLayout"
-                    @rowgroup-toggle="toggleRowGroup" @row-click="onRowClick($event)" @row-dblclick="onRowDblClick($event)" @row-rightclick="onRowRightClick($event)" @row-touchend="onRowTouchEnd" @row-keydown="onRowKeyDown"
-                    @row-mousedown="onRowMouseDown" @row-dragstart="onRowDragStart($event)" @row-dragover="onRowDragOver($event)" @row-dragleave="onRowDragLeave($event)" @row-dragend="onRowDragEnd($event)" @row-drop="onRowDrop($event)"
-                    @row-toggle="toggleRow($event)" @radio-change="toggleRowWithRadio($event)" @checkbox-change="toggleRowWithCheckbox($event)"
-                    @cell-edit-init="onCellEditInit($event)" @cell-edit-complete="onCellEditComplete($event)" @cell-edit-cancel="onCellEditCancel($event)"
-                    @row-edit-init="onRowEditInit($event)" @row-edit-save="onRowEditSave($event)" @row-edit-cancel="onRowEditCancel($event)"
-                    :editingMeta="d_editingMeta" @editing-meta-change="onEditingMetaChange" />
-                <DTTableBody :value="dataToRender" :columns="columns" :empty="empty" :dataKey="dataKey" :selection="selection" :selectionKeys="d_selectionKeys" :selectionMode="selectionMode" :contextMenu="contextMenu" :contextMenuSelection="contextMenuSelection"
-                    :rowGroupMode="rowGroupMode" :groupRowsBy="groupRowsBy" :expandableRowGroups="expandableRowGroups" :rowClass="rowClass" :editMode="editMode" :compareSelectionBy="compareSelectionBy" :scrollable="scrollable"
-                    :expandedRowIcon="expandedRowIcon" :collapsedRowIcon="collapsedRowIcon" :expandedRows="expandedRows" :expandedRowKeys="d_expandedRowKeys" :expandedRowGroups="expandedRowGroups"
-                    :editingRows="editingRows" :editingRowKeys="d_editingRowKeys" :templates="$slots" :loading="loading" :responsiveLayout="responsiveLayout"
-                    @rowgroup-toggle="toggleRowGroup" @row-click="onRowClick($event)" @row-dblclick="onRowDblClick($event)" @row-rightclick="onRowRightClick($event)" @row-touchend="onRowTouchEnd" @row-keydown="onRowKeyDown"
-                    @row-mousedown="onRowMouseDown" @row-dragstart="onRowDragStart($event)" @row-dragover="onRowDragOver($event)" @row-dragleave="onRowDragLeave($event)" @row-dragend="onRowDragEnd($event)" @row-drop="onRowDrop($event)"
-                    @row-toggle="toggleRow($event)" @radio-change="toggleRowWithRadio($event)" @checkbox-change="toggleRowWithCheckbox($event)"
-                    @cell-edit-init="onCellEditInit($event)" @cell-edit-complete="onCellEditComplete($event)" @cell-edit-cancel="onCellEditCancel($event)"
-                    @row-edit-init="onRowEditInit($event)" @row-edit-save="onRowEditSave($event)" @row-edit-cancel="onRowEditCancel($event)"
-                    :editingMeta="d_editingMeta" @editing-meta-change="onEditingMetaChange" />
-                <DTTableFooter :columnGroup="footerColumnGroup" :columns="columns" />
-            </table>
+        <div class="p-datatable-wrapper" :style="{ maxHeight: virtualScrollerDisabled ? scrollHeight : '' }">
+            <DTVirtualScroller v-bind="virtualScrollerOptions" :items="processedData" :columns="columns" :style="{ height: scrollHeight }" :disabled="virtualScrollerDisabled" loaderDisabled :showSpacer="false">
+                <template #content="slotProps">
+                    <table ref="table" role="table" :class="[tableClass, 'p-datatable-table']" :style="[tableStyle, slotProps.spacerStyle]">
+                        <DTTableHeader :columnGroup="headerColumnGroup" :columns="slotProps.columns" :rowGroupMode="rowGroupMode"
+                                :groupRowsBy="groupRowsBy" :groupRowSortField="groupRowSortField" :resizableColumns="resizableColumns" :allRowsSelected="allRowsSelected" :empty="empty"
+                                :sortMode="sortMode" :sortField="d_sortField" :sortOrder="d_sortOrder" :multiSortMeta="d_multiSortMeta" :filters="d_filters" :filtersStore="filters" :filterDisplay="filterDisplay"
+                                @column-click="onColumnHeaderClick($event)" @column-mousedown="onColumnHeaderMouseDown($event)" @filter-change="onFilterChange" @filter-apply="onFilterApply"
+                                @column-dragstart="onColumnHeaderDragStart($event)" @column-dragover="onColumnHeaderDragOver($event)" @column-dragleave="onColumnHeaderDragLeave($event)" @column-drop="onColumnHeaderDrop($event)"
+                                @column-resizestart="onColumnResizeStart($event)" @checkbox-change="toggleRowsWithCheckbox($event)" />
+                        <DTTableBody v-if="frozenValue" :value="frozenValue" :frozenRow="true" class="p-datatable-frozen-tbody" :columns="slotProps.columns" :dataKey="dataKey" :selection="selection" :selectionKeys="d_selectionKeys" :selectionMode="selectionMode" :contextMenu="contextMenu" :contextMenuSelection="contextMenuSelection"
+                            :rowGroupMode="rowGroupMode" :groupRowsBy="groupRowsBy" :expandableRowGroups="expandableRowGroups" :rowClass="rowClass" :rowStyle="rowStyle" :editMode="editMode" :compareSelectionBy="compareSelectionBy" :scrollable="scrollable"
+                            :expandedRowIcon="expandedRowIcon" :collapsedRowIcon="collapsedRowIcon" :expandedRows="expandedRows" :expandedRowKeys="d_expandedRowKeys" :expandedRowGroups="expandedRowGroups"
+                            :editingRows="editingRows" :editingRowKeys="d_editingRowKeys" :templates="$slots" :loading="loading" :responsiveLayout="responsiveLayout"
+                            @rowgroup-toggle="toggleRowGroup" @row-click="onRowClick($event)" @row-dblclick="onRowDblClick($event)" @row-rightclick="onRowRightClick($event)" @row-touchend="onRowTouchEnd" @row-keydown="onRowKeyDown"
+                            @row-mousedown="onRowMouseDown" @row-dragstart="onRowDragStart($event)" @row-dragover="onRowDragOver($event)" @row-dragleave="onRowDragLeave($event)" @row-dragend="onRowDragEnd($event)" @row-drop="onRowDrop($event)"
+                            @row-toggle="toggleRow($event)" @radio-change="toggleRowWithRadio($event)" @checkbox-change="toggleRowWithCheckbox($event)"
+                            @cell-edit-init="onCellEditInit($event)" @cell-edit-complete="onCellEditComplete($event)" @cell-edit-cancel="onCellEditCancel($event)"
+                            @row-edit-init="onRowEditInit($event)" @row-edit-save="onRowEditSave($event)" @row-edit-cancel="onRowEditCancel($event)"
+                            :editingMeta="d_editingMeta" @editing-meta-change="onEditingMetaChange" :isVirtualScrollerDisabled="true"  />
+                        <DTTableBody :value="dataToRender(slotProps.rows)" :class="slotProps.styleClass" :columns="slotProps.columns" :empty="empty" :dataKey="dataKey" :selection="selection" :selectionKeys="d_selectionKeys" :selectionMode="selectionMode" :contextMenu="contextMenu" :contextMenuSelection="contextMenuSelection"
+                            :rowGroupMode="rowGroupMode" :groupRowsBy="groupRowsBy" :expandableRowGroups="expandableRowGroups" :rowClass="rowClass" :rowStyle="rowStyle" :editMode="editMode" :compareSelectionBy="compareSelectionBy" :scrollable="scrollable"
+                            :expandedRowIcon="expandedRowIcon" :collapsedRowIcon="collapsedRowIcon" :expandedRows="expandedRows" :expandedRowKeys="d_expandedRowKeys" :expandedRowGroups="expandedRowGroups"
+                            :editingRows="editingRows" :editingRowKeys="d_editingRowKeys" :templates="$slots" :loading="loading" :responsiveLayout="responsiveLayout"
+                            @rowgroup-toggle="toggleRowGroup" @row-click="onRowClick($event)" @row-dblclick="onRowDblClick($event)" @row-rightclick="onRowRightClick($event)" @row-touchend="onRowTouchEnd" @row-keydown="onRowKeyDown"
+                            @row-mousedown="onRowMouseDown" @row-dragstart="onRowDragStart($event)" @row-dragover="onRowDragOver($event)" @row-dragleave="onRowDragLeave($event)" @row-dragend="onRowDragEnd($event)" @row-drop="onRowDrop($event)"
+                            @row-toggle="toggleRow($event)" @radio-change="toggleRowWithRadio($event)" @checkbox-change="toggleRowWithCheckbox($event)"
+                            @cell-edit-init="onCellEditInit($event)" @cell-edit-complete="onCellEditComplete($event)" @cell-edit-cancel="onCellEditCancel($event)"
+                            @row-edit-init="onRowEditInit($event)" @row-edit-save="onRowEditSave($event)" @row-edit-cancel="onRowEditCancel($event)"
+                            :editingMeta="d_editingMeta" @editing-meta-change="onEditingMetaChange"
+                            :virtualScrollerContentProps="slotProps" :isVirtualScrollerDisabled="virtualScrollerDisabled" />
+                        <DTTableFooter :columnGroup="footerColumnGroup" :columns="slotProps.columns" />
+                    </table>
+                </template>
+            </DTVirtualScroller>
         </div>
         <DTPaginator v-if="paginatorBottom" :rows="d_rows" :first="d_first" :totalRecords="totalRecordsLength" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
                 :currentPageReportTemplate="currentPageReportTemplate" class="p-paginator-bottom" @page="onPage($event)" :alwaysShow="alwaysShowPaginator">
-            <template #left v-if="$slots.paginatorLeft">
-                <slot name="paginatorLeft"></slot>
+            <template #start v-if="$slots.paginatorstart">
+                <slot name="paginatorstart"></slot>
             </template>
-            <template #right v-if="$slots.paginatorRight">
-                <slot name="paginatorRight"></slot>
+            <template #end v-if="$slots.paginatorend">
+                <slot name="paginatorend"></slot>
             </template>
         </DTPaginator>
         <div class="p-datatable-footer" v-if="$slots.footer">
@@ -69,6 +74,7 @@
 import {ObjectUtils,DomHandler,UniqueComponentId} from 'primevue/utils';
 import {FilterMatchMode,FilterOperator,FilterService} from 'primevue/api';
 import Paginator from 'primevue/paginator';
+import VirtualScroller from 'primevue/virtualscroller';
 import TableHeader from './TableHeader.vue';
 import TableBody from './TableBody.vue';
 import TableFooter from './TableFooter.vue';
@@ -76,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'],
@@ -205,6 +211,10 @@ export default {
             type: Object,
             default: null
         },
+        selectAll: {
+            type: Boolean,
+            default: null
+        },
         rowHover: {
             type: Boolean,
             default: false
@@ -285,6 +295,10 @@ export default {
             type: null,
             default: null
         },
+        rowStyle: {
+            type: null,
+            default: null
+        },
         scrollable: {
             type: Boolean,
             default: false
@@ -293,6 +307,10 @@ export default {
             type: String,
             default: "vertical"
         },
+        virtualScrollerOptions: {
+            type: Object,
+            default: null
+        },
         scrollHeight: {
             type: String,
             default: null
@@ -687,7 +705,7 @@ export default {
 
             if (this.selectionMode) {
                 const rowData = e.data;
-                const rowIndex = e.index;
+                const rowIndex = this.d_first + e.index;
 
                 if (this.isMultipleSelectionMode() && event.shiftKey && this.anchorRowIndex != null) {
                     DomHandler.clearSelection();
@@ -869,15 +887,24 @@ export default {
             }
         },
         toggleRowsWithCheckbox(event) {
-            const processedData = this.processedData;
-            const checked = this.allRowsSelected;
-            const _selection = checked ? [] : (this.frozenValue ? [...this.frozenValue, ...processedData]: processedData);
-            this.$emit('update:selection', _selection);
+            if (this.selectAll !== null) {
+                this.$emit('select-all-change', event);
+            }
+            else {
+                const { originalEvent, checked } = event;
+                let _selection = [];
 
-            if (checked)
-                this.$emit('row-unselect-all', {originalEvent: event});
-            else
-                this.$emit('row-select-all', {originalEvent: event, data: _selection});
+                if (checked) {
+                    _selection = this.frozenValue ? [...this.frozenValue, ...this.processedData] : this.processedData;
+                    this.$emit('row-select-all', {originalEvent, data: _selection});
+                }
+                else {
+                    this.$emit('row-unselect-all', {originalEvent});
+                }
+
+                this.$emit('update:selection', _selection);
+
+            }
         },
         isSingleSelectionMode() {
             return this.selectionMode === 'single';
@@ -983,14 +1010,17 @@ export default {
 
             this.$emit('update:selection', _selection);
         },
-        exportCSV(options) {
-            let data = this.processedData;
+        exportCSV(options, data) {
             let csv = '\ufeff';
 
-            if (options && options.selectionOnly)
-                data = this.selection || [];
-            else if (this.frozenValue)
-                data = data ? [...this.frozenValue, ...data] : this.frozenValue;
+            if (!data) {
+                data = this.processedData;
+
+                if (options && options.selectionOnly)
+                    data = this.selection || [];
+                else if (this.frozenValue)
+                    data = data ? [...this.frozenValue, ...data] : this.frozenValue;
+            }
 
             //headers
             let headerInitiated = false;
@@ -1041,28 +1071,7 @@ export default {
                 });
             }
 
-            let blob = new Blob([csv], {
-                type: 'text/csv;charset=utf-8;'
-            });
-
-            if (window.navigator.msSaveOrOpenBlob) {
-                navigator.msSaveOrOpenBlob(blob, this.exportFilename + '.csv');
-            }
-            else {
-                let link = document.createElement("a");
-                link.style.display = 'none';
-                document.body.appendChild(link);
-                if (link.download !== undefined) {
-                    link.setAttribute('href', URL.createObjectURL(blob));
-                    link.setAttribute('download', this.exportFilename + '.csv');
-                    link.click();
-                }
-                else {
-                    csv = 'data:text/csv;charset=utf-8,' + csv;
-                    window.open(encodeURI(csv));
-                }
-                document.body.removeChild(link);
-            }
+            DomHandler.exportCSV(csv, this.exportFilename);
         },
         resetPage() {
             this.d_first = 0;
@@ -1097,15 +1106,7 @@ export default {
                     let nextColumnWidth = nextColumn.offsetWidth - delta;
 
                     if (newColumnWidth > 15 && nextColumnWidth > 15) {
-                        if (!this.scrollable) {
-                            this.resizeColumnElement.style.width = newColumnWidth + 'px';
-                            if(nextColumn) {
-                                nextColumn.style.width = nextColumnWidth + 'px';
-                            }
-                        }
-                        else {
-                            this.resizeTableCells(newColumnWidth, nextColumnWidth);
-                        }
+                        this.resizeTableCells(newColumnWidth, nextColumnWidth);
                     }
                 }
                 else if (this.columnResizeMode === 'expand') {
@@ -1113,10 +1114,7 @@ export default {
                     this.$refs.table.style.width = tableWidth;
                     this.$refs.table.style.minWidth = tableWidth;
 
-                    if (!this.scrollable)
-                        this.resizeColumnElement.style.width = newColumnWidth + 'px';
-                    else
-                        this.resizeTableCells(newColumnWidth);
+                    this.resizeTableCells(newColumnWidth);
                 }
 
                 this.$emit('column-resize-end', {
@@ -1145,18 +1143,18 @@ export default {
             this.createStyleElement();
 
             let innerHTML = '';
-            widths.forEach((width,index) => {
+            widths.forEach((width, index) => {
                 let colWidth = index === colIndex ? newColumnWidth : (nextColumnWidth && index === colIndex + 1) ? nextColumnWidth : width;
+                let style = this.scrollable ? `flex: 1 1 ${colWidth}px !important` : `width: ${colWidth}px !important`;
                 innerHTML += `
-                    .p-datatable[${this.attributeSelector}] .p-datatable-thead > tr > th:nth-child(${index+1}) {
-                        flex: 0 0 ${colWidth}px !important;
-                    }
-
-                    .p-datatable[${this.attributeSelector}] .p-datatable-tbody > tr > td:nth-child(${index+1}) {
-                        flex: 0 0 ${colWidth}px !important;
+                    .p-datatable[${this.attributeSelector}] .p-datatable-thead > tr > th:nth-child(${index + 1}),
+                    .p-datatable[${this.attributeSelector}] .p-datatable-tbody > tr > td:nth-child(${index + 1}),
+                    .p-datatable[${this.attributeSelector}] .p-datatable-tfoot > tr > td:nth-child(${index + 1}) {
+                        ${style}
                     }
                 `
             });
+        
             this.styleElement.innerHTML = innerHTML;
         },
         bindColumnResizeEvents() {
@@ -1186,7 +1184,7 @@ export default {
 
             if (this.documentColumnResizeEndListener) {
                 document.removeEventListener('document', this.documentColumnResizeEndListener);
-                 this.documentColumnResizeEndListener = null;
+                this.documentColumnResizeEndListener = null;
             }
         },
         onColumnHeaderMouseDown(e) {
@@ -1579,27 +1577,23 @@ export default {
                     this.$el.style.width = this.tableWidthState;
                 }
 
-                this.createStyleElement();
+                if (ObjectUtils.isNotEmpty(widths)) {
+                    this.createStyleElement();
 
-                if (this.scrollable && widths && widths.length > 0) {
                     let innerHTML = '';
-                    widths.forEach((width,index) => {
+                    widths.forEach((width, index) => {
+                        let style = this.scrollable ? `flex: 1 1 ${width}px !important` : `width: ${width}px !important`;
                         innerHTML += `
-                            .p-datatable[${this.attributeSelector}] .p-datatable-thead > tr > th:nth-child(${index+1}) {
-                                flex: 0 0 ${width}px;
-                            }
-
-                            .p-datatable[${this.attributeSelector}] .p-datatable-tbody > tr > td:nth-child(${index+1}) {
-                                flex: 0 0 ${width}px;
+                            .p-datatable[${this.attributeSelector}] .p-datatable-thead > tr > th:nth-child(${index + 1}),
+                            .p-datatable[${this.attributeSelector}] .p-datatable-tbody > tr > td:nth-child(${index + 1}),
+                            .p-datatable[${this.attributeSelector}] .p-datatable-tfoot > tr > td:nth-child(${index + 1}) {
+                                ${style}
                             }
                         `
                     });
 
                     this.styleElement.innerHTML = innerHTML;
                 }
-                else {
-                    DomHandler.find(this.$refs.table, '.p-datatable-thead > tr > th').forEach((header, index) => header.style.width = widths[index] + 'px');
-                }
             }
         },
         onCellEditInit(event) {
@@ -1746,6 +1740,31 @@ export default {
                 document.head.removeChild(this.styleElement);
                 this.styleElement = null;
             }
+        },
+        recursiveGetChildren(children, results) {
+            if (!results) {
+                results = [];
+            }
+            if (children && children.length) {
+                children.forEach((child) => {
+                    if (child.children instanceof Array) {
+                        results.concat(this.recursiveGetChildren(child.children, results));
+                    } else if (child.type.name == 'Column') {
+                        results.push(child);
+                    }
+                });
+            }
+            return results;
+        },
+        dataToRender(data) {
+            const _data = data || this.processedData;
+
+            if (_data && this.paginator) {
+                const first = this.lazy ? 0 : this.d_first;
+                return _data.slice(first, first + this.d_rows);
+            }
+
+            return _data;
         }
     },
     computed: {
@@ -1771,19 +1790,13 @@ export default {
             ];
         },
         columns() {
-            let cols = [];
             let children = this.getChildren();
 
             if (!children) {
                 return;
             }
 
-            children.forEach(child => {
-                if (child.children && child.children instanceof Array)
-                    cols = [...cols, ...child.children];
-                else if (child.type.name === 'Column')
-                    cols.push(child);
-            });
+            const cols = this.recursiveGetChildren(children, []);
 
             if (this.reorderableColumns && this.d_columnOrder) {
                 let orderedColumns = [];
@@ -1846,17 +1859,6 @@ export default {
 
             return data;
         },
-        dataToRender() {
-            const data = this.processedData;
-
-            if (data && this.paginator) {
-                const first = this.lazy ? 0 : this.d_first;
-                return data.slice(first, first + this.d_rows);
-            }
-            else {
-                return data;
-            }
-        },
         totalRecordsLength() {
             if (this.lazy) {
                 return this.totalRecords;
@@ -1883,15 +1885,22 @@ export default {
             return ['p-datatable-loading-icon pi-spin', this.loadingIcon];
         },
         allRowsSelected() {
-            const val = this.frozenValue ? [...this.frozenValue, ...this.processedData]: this.processedData;
-            const length = this.lazy ? this.totalRecords : (val ? val.length : 0);
-            return (val && length > 0 && this.selection && this.selection.length > 0 && this.selection.length === length);
+            if (this.selectAll !== null) {
+                return this.selectAll;
+            }
+            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();
         },
         groupRowSortField() {
             return this.sortMode === 'single' ? this.sortField : (this.d_groupRowsSortMeta ? this.d_groupRowsSortMeta.field : null);
+        },
+        virtualScrollerDisabled() {
+            return ObjectUtils.isEmpty(this.virtualScrollerOptions) || !this.scrollable;
         }
     },
     components: {
@@ -1899,6 +1908,7 @@ export default {
         'DTTableHeader': TableHeader,
         'DTTableBody': TableBody,
         'DTTableFooter': TableFooter,
+        'DTVirtualScroller': VirtualScroller
     }
 }
 </script>
@@ -2055,7 +2065,7 @@ export default {
     white-space: nowrap;
 }
 
-.p-datatable-resizable .p-resizable-column {
+.p-datatable-resizable .p-resizable-column:not(.p-frozen-column) {
     background-clip: padding-box;
     position: relative;
 }
@@ -2192,4 +2202,13 @@ export default {
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
     display: none;
 }
+
+/* VirtualScroller */
+.p-datatable .p-virtualscroller-loading {
+    transform: none !important;
+    min-height: 0;
+    position: sticky;
+    top: 0;
+    left: 0;
+}
 </style>

package/datatable/HeaderCheckbox.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="p-checkbox p-component" @click="onClick" @keydown.space.prevent="onClick">
+    <div :class="['p-checkbox p-component', {'p-checkbox-focused': focused}]" @click="onClick" @keydown.space.prevent="onClick">
         <div ref="box" :class="['p-checkbox-box p-component', {'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused}]"
             role="checkbox" :aria-checked="checked" :tabindex="$attrs.disabled ? null : '0'" @focus="onFocus($event)" @blur="onBlur($event)">
             <span :class="['p-checkbox-icon', {'pi pi-check': checked}]"></span>
@@ -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() {

package/datatable/RowCheckbox.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="p-checkbox p-component" @click="onClick">
+    <div :class="['p-checkbox p-component', {'p-checkbox-focused': focused}]" @click="onClick">
         <div ref="box" :class="['p-checkbox-box p-component', {'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused}]"
             role="checkbox" :aria-checked="checked" :tabindex="$attrs.disabled ? null : '0'" @keydown.space.prevent="onClick" @focus="onFocus($event)" @blur="onBlur($event)">
             <span :class="['p-checkbox-icon', {'pi pi-check': checked}]"></span>

package/datatable/RowRadioButton.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="p-radiobutton p-component" @click="onClick" tabindex="0" @focus="onFocus($event)" @blur="onBlur($event)" @keydown.space.prevent="onClick">
+    <div :class="['p-radiobutton p-component', {'p-radiobutton-focused': focused}]" @click="onClick" tabindex="0" @focus="onFocus($event)" @blur="onBlur($event)" @keydown.space.prevent="onClick">
         <div ref="box" :class="['p-radiobutton-box p-component', {'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused}]" role="radio" :aria-checked="checked">
             <div class="p-radiobutton-icon"></div>
         </div>