primevue 3.8.0 → 3.9.1

package/datatable/datatable.esm.js

@@ -345,7 +345,15 @@ var script$9 = {
         hide() {
             this.overlayVisible = false;
         },
-        onContentClick() {
+        onContentClick(event) {
+            this.selfClick = true;
+
+            OverlayEventBus.emit('overlay-click', {
+                originalEvent: event,
+                target: this.overlay
+            });
+        },
+        onContentMouseDown() {
             this.selfClick = true;
         },
         onOverlayEnter(el) {
@@ -359,7 +367,7 @@ var script$9 = {
             this.bindResizeListener();
 
             this.overlayEventListener = (e) => {
-                if (this.overlay.contains(e.target)) {
+                if (!this.isOutsideClicked(e.target)) {
                     this.selfClick = true;
                 }
             };
@@ -382,13 +390,16 @@ var script$9 = {
         overlayRef(el) {
             this.overlay = el;
         },
-        isTargetClicked(event) {
-            return this.$refs.icon && (this.$refs.icon === event.target || this.$refs.icon.contains(event.target));
+        isOutsideClicked(target) {
+            return !this.isTargetClicked(target) && this.overlay && !(this.overlay.isSameNode(target) || this.overlay.contains(target));
+        },
+        isTargetClicked(target) {
+            return this.$refs.icon && (this.$refs.icon.isSameNode(target) || this.$refs.icon.contains(target));
         },
         bindOutsideClickListener() {
             if (!this.outsideClickListener) {
                 this.outsideClickListener = (event) => {
-                    if (this.overlayVisible && !this.selfClick && !this.isTargetClicked(event)) {
+                    if (this.overlayVisible && !this.selfClick && this.isOutsideClicked(event.target)) {
                         this.overlayVisible = false;
                     }
                     this.selfClick = false;
@@ -521,7 +532,7 @@ const _hoisted_6$1 = {
   key: 0,
   class: "p-column-filter-operator"
 };
-const _hoisted_7$1 = { class: "p-column-filter-constraints" };
+const _hoisted_7 = { class: "p-column-filter-constraints" };
 const _hoisted_8 = {
   key: 1,
   class: "p-column-filter-add-rule"
@@ -580,7 +591,8 @@ function render$9(_ctx, _cache, $props, $setup, $data, $options) {
                 ref: $options.overlayRef,
                 class: $options.overlayClass,
                 onKeydown: _cache[12] || (_cache[12] = withKeys((...args) => ($options.onEscape && $options.onEscape(...args)), ["escape"])),
-                onClick: _cache[13] || (_cache[13] = (...args) => ($options.onContentClick && $options.onContentClick(...args)))
+                onClick: _cache[13] || (_cache[13] = (...args) => ($options.onContentClick && $options.onContentClick(...args))),
+                onMousedown: _cache[14] || (_cache[14] = (...args) => ($options.onContentMouseDown && $options.onContentMouseDown(...args)))
               }, [
                 (openBlock(), createBlock(resolveDynamicComponent($props.filterHeaderTemplate), {
                   field: $props.field,
@@ -624,7 +636,7 @@ function render$9(_ctx, _cache, $props, $setup, $data, $options) {
                             }, null, 8, ["options", "modelValue"])
                           ]))
                         : createCommentVNode("", true),
-                      createVNode("div", _hoisted_7$1, [
+                      createVNode("div", _hoisted_7, [
                         (openBlock(true), createBlock(Fragment, null, renderList($options.fieldConstraints, (fieldConstraint, i) => {
                           return (openBlock(), createBlock("div", {
                             key: i,
@@ -1112,7 +1124,7 @@ var script$7 = {
     },
     methods: {
         columnProp(col, prop) {
-            return col.props ? ((col.type.props[prop].type === Boolean && col.props[prop] === '') ? true : col.props[prop]) : null;
+            return ObjectUtils.getVNodeProp(col, prop);
         },
         getFilterColumnHeaderClass(column) {
             return ['p-filter-column', this.columnProp(column, 'filterHeaderClass'), this.columnProp(column, 'class'), {
@@ -1121,6 +1133,20 @@ var script$7 = {
         },
         getFilterColumnHeaderStyle(column) {
             return [this.columnProp(column, 'filterHeaderStyle'), this.columnProp(column, 'style')];
+        },
+        getHeaderColumns(row){
+            let cols = [];
+
+            if (row.children && row.children.default) {
+                row.children.default().forEach(child => {
+                    if (child.children && child.children instanceof Array)
+                        cols = [...cols, ...child.children];
+                    else if (child.type.name === 'Column')
+                        cols.push(child);
+                });
+
+                return cols;
+            }
         }
     },
     components: {
@@ -1253,7 +1279,7 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
             key: i,
             role: "row"
           }, [
-            (openBlock(true), createBlock(Fragment, null, renderList(row.children.default(), (col, j) => {
+            (openBlock(true), createBlock(Fragment, null, renderList($options.getHeaderColumns(row), (col, j) => {
               return (openBlock(), createBlock(Fragment, {
                 key: $options.columnProp(col, 'columnKey')||$options.columnProp(col, 'field')||j
               }, [
@@ -1781,82 +1807,91 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
             index: $props.rowIndex,
             frozenRow: $props.frozenRow
           }, null, 8, ["data", "column", "field", "index", "frozenRow"]))
-        : ($options.columnProp('selectionMode'))
-          ? (openBlock(), createBlock(Fragment, { key: 3 }, [
-              ($options.columnProp('selectionMode') === 'single')
-                ? (openBlock(), createBlock(_component_DTRadioButton, {
-                    key: 0,
-                    value: $props.rowData,
-                    checked: $props.selected,
-                    onChange: $options.toggleRowWithRadio
-                  }, null, 8, ["value", "checked", "onChange"]))
-                : ($options.columnProp('selectionMode') ==='multiple')
-                  ? (openBlock(), createBlock(_component_DTCheckbox, {
-                      key: 1,
+        : ($props.column.children && $props.column.children.body && !$props.column.children.editor && $data.d_editing)
+          ? (openBlock(), createBlock(resolveDynamicComponent($props.column.children.body), {
+              key: 3,
+              data: $options.editingRowData,
+              column: $props.column,
+              field: $options.field,
+              index: $props.rowIndex,
+              frozenRow: $props.frozenRow
+            }, null, 8, ["data", "column", "field", "index", "frozenRow"]))
+          : ($options.columnProp('selectionMode'))
+            ? (openBlock(), createBlock(Fragment, { key: 4 }, [
+                ($options.columnProp('selectionMode') === 'single')
+                  ? (openBlock(), createBlock(_component_DTRadioButton, {
+                      key: 0,
                       value: $props.rowData,
                       checked: $props.selected,
-                      onChange: $options.toggleRowWithCheckbox
+                      onChange: $options.toggleRowWithRadio
                     }, null, 8, ["value", "checked", "onChange"]))
-                  : createCommentVNode("", true)
-            ], 64))
-          : ($options.columnProp('rowReorder'))
-            ? (openBlock(), createBlock("i", {
-                key: 4,
-                class: ['p-datatable-reorderablerow-handle', ($options.columnProp('rowReorderIcon') || 'pi pi-bars')]
-              }, null, 2))
-            : ($options.columnProp('expander'))
-              ? withDirectives((openBlock(), createBlock("button", {
+                  : ($options.columnProp('selectionMode') ==='multiple')
+                    ? (openBlock(), createBlock(_component_DTCheckbox, {
+                        key: 1,
+                        value: $props.rowData,
+                        checked: $props.selected,
+                        onChange: $options.toggleRowWithCheckbox
+                      }, null, 8, ["value", "checked", "onChange"]))
+                    : createCommentVNode("", true)
+              ], 64))
+            : ($options.columnProp('rowReorder'))
+              ? (openBlock(), createBlock("i", {
                   key: 5,
-                  class: "p-row-toggler p-link",
-                  onClick: _cache[1] || (_cache[1] = (...args) => ($options.toggleRow && $options.toggleRow(...args))),
-                  type: "button"
-                }, [
-                  createVNode("span", { class: $props.rowTogglerIcon }, null, 2)
-                ], 512)), [
-                  [_directive_ripple]
-                ])
-              : ($props.editMode === 'row' && $options.columnProp('rowEditor'))
-                ? (openBlock(), createBlock(Fragment, { key: 6 }, [
-                    (!$data.d_editing)
-                      ? withDirectives((openBlock(), createBlock("button", {
-                          key: 0,
-                          class: "p-row-editor-init p-link",
-                          onClick: _cache[2] || (_cache[2] = (...args) => ($options.onRowEditInit && $options.onRowEditInit(...args))),
-                          type: "button"
-                        }, [
-                          _hoisted_2$3
-                        ], 512)), [
-                          [_directive_ripple]
-                        ])
-                      : createCommentVNode("", true),
-                    ($data.d_editing)
-                      ? withDirectives((openBlock(), createBlock("button", {
-                          key: 1,
-                          class: "p-row-editor-save p-link",
-                          onClick: _cache[3] || (_cache[3] = (...args) => ($options.onRowEditSave && $options.onRowEditSave(...args))),
-                          type: "button"
-                        }, [
-                          _hoisted_3$1
-                        ], 512)), [
-                          [_directive_ripple]
-                        ])
-                      : createCommentVNode("", true),
-                    ($data.d_editing)
-                      ? withDirectives((openBlock(), createBlock("button", {
-                          key: 2,
-                          class: "p-row-editor-cancel p-link",
-                          onClick: _cache[4] || (_cache[4] = (...args) => ($options.onRowEditCancel && $options.onRowEditCancel(...args))),
-                          type: "button"
-                        }, [
-                          _hoisted_4$1
-                        ], 512)), [
-                          [_directive_ripple]
-                        ])
-                      : createCommentVNode("", true)
-                  ], 64))
-                : (openBlock(), createBlock(Fragment, { key: 7 }, [
-                    createTextVNode(toDisplayString($options.resolveFieldData()), 1)
-                  ], 64))
+                  class: ['p-datatable-reorderablerow-handle', ($options.columnProp('rowReorderIcon') || 'pi pi-bars')]
+                }, null, 2))
+              : ($options.columnProp('expander'))
+                ? withDirectives((openBlock(), createBlock("button", {
+                    key: 6,
+                    class: "p-row-toggler p-link",
+                    onClick: _cache[1] || (_cache[1] = (...args) => ($options.toggleRow && $options.toggleRow(...args))),
+                    type: "button"
+                  }, [
+                    createVNode("span", { class: $props.rowTogglerIcon }, null, 2)
+                  ], 512)), [
+                    [_directive_ripple]
+                  ])
+                : ($props.editMode === 'row' && $options.columnProp('rowEditor'))
+                  ? (openBlock(), createBlock(Fragment, { key: 7 }, [
+                      (!$data.d_editing)
+                        ? withDirectives((openBlock(), createBlock("button", {
+                            key: 0,
+                            class: "p-row-editor-init p-link",
+                            onClick: _cache[2] || (_cache[2] = (...args) => ($options.onRowEditInit && $options.onRowEditInit(...args))),
+                            type: "button"
+                          }, [
+                            _hoisted_2$3
+                          ], 512)), [
+                            [_directive_ripple]
+                          ])
+                        : createCommentVNode("", true),
+                      ($data.d_editing)
+                        ? withDirectives((openBlock(), createBlock("button", {
+                            key: 1,
+                            class: "p-row-editor-save p-link",
+                            onClick: _cache[3] || (_cache[3] = (...args) => ($options.onRowEditSave && $options.onRowEditSave(...args))),
+                            type: "button"
+                          }, [
+                            _hoisted_3$1
+                          ], 512)), [
+                            [_directive_ripple]
+                          ])
+                        : createCommentVNode("", true),
+                      ($data.d_editing)
+                        ? withDirectives((openBlock(), createBlock("button", {
+                            key: 2,
+                            class: "p-row-editor-cancel p-link",
+                            onClick: _cache[4] || (_cache[4] = (...args) => ($options.onRowEditCancel && $options.onRowEditCancel(...args))),
+                            type: "button"
+                          }, [
+                            _hoisted_4$1
+                          ], 512)), [
+                            [_directive_ripple]
+                          ])
+                        : createCommentVNode("", true)
+                    ], 64))
+                  : (openBlock(), createBlock(Fragment, { key: 8 }, [
+                      createTextVNode(toDisplayString($options.resolveFieldData()), 1)
+                    ], 64))
   ], 38))
 }
 
@@ -1945,6 +1980,10 @@ var script$3 = {
             type: null,
             default: null
         },
+        rowStyle: {
+            type: null,
+            default: null
+        },
         editMode: {
             type: String,
             default: null
@@ -2007,7 +2046,7 @@ var script$3 = {
     },
     methods: {
         columnProp(col, prop) {
-            return col.props ? ((col.type.props[prop].type === Boolean && col.props[prop] === '') ? true : col.props[prop]) : null;
+            return ObjectUtils.getVNodeProp(col, prop);
         },
         shouldRenderRowGroupHeader(value, rowData, i) {
             let currentRowFieldData = ObjectUtils.resolveFieldData(rowData, this.groupRowsBy);
@@ -2345,6 +2384,7 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
             ($props.expandableRowGroups ? $options.isRowGroupExpanded(rowData): true)
               ? (openBlock(), createBlock("tr", {
                   class: $options.getRowClass(rowData),
+                  style: $props.rowStyle,
                   key: $options.getRowKey(rowData, index),
                   onClick: $event => ($options.onRowClick($event, rowData, index)),
                   onDblclick: $event => ($options.onRowDblClick($event, rowData, index)),
@@ -2393,7 +2433,7 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
                         : createCommentVNode("", true)
                     ], 64))
                   }), 128))
-                ], 42, ["onClick", "onDblclick", "onContextmenu", "onKeydown", "tabindex", "onDragstart", "onDragover"]))
+                ], 46, ["onClick", "onDblclick", "onContextmenu", "onKeydown", "tabindex", "onDragstart", "onDragover"]))
               : createCommentVNode("", true),
             ($props.templates['expansion'] && $props.expandedRows && $options.isRowExpanded(rowData))
               ? (openBlock(), createBlock("tr", {
@@ -2536,7 +2576,21 @@ var script$1 = {
     },
     methods: {
         columnProp(col, prop) {
-            return col.props ? ((col.type.props[prop].type === Boolean && col.props[prop] === '') ? true : col.props[prop]) : null;
+            return ObjectUtils.getVNodeProp(col, prop);
+        },
+        getFooterColumns(row){
+            let cols = [];
+
+            if (row.children && row.children.default) {
+                row.children.default().forEach(child => {
+                    if (child.children && child.children instanceof Array)
+                        cols = [...cols, ...child.children];
+                    else if (child.type.name === 'Column')
+                        cols.push(child);
+                });
+
+                return cols;
+            }
         }
     },
     computed: {
@@ -2598,7 +2652,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                 key: i,
                 role: "row"
               }, [
-                (openBlock(true), createBlock(Fragment, null, renderList(row.children.default(), (col, j) => {
+                (openBlock(true), createBlock(Fragment, null, renderList($options.getFooterColumns(row), (col, j) => {
                   return (openBlock(), createBlock(Fragment, {
                     key: $options.columnProp(col,'columnKey')||$options.columnProp(col,'field')||j
                   }, [
@@ -2830,6 +2884,10 @@ var script = {
             type: null,
             default: null
         },
+        rowStyle: {
+            type: null,
+            default: null
+        },
         scrollable: {
             type: Boolean,
             default: false
@@ -2861,6 +2919,14 @@ var script = {
         stripedRows: {
             type: Boolean,
             default: false
+        },
+        tableStyle: {
+            type: null,
+            default: null
+        },
+        tableClass: {
+            type: String,
+            default: null
         }
     },
     data() {
@@ -2973,7 +3039,7 @@ var script = {
     },
     methods: {
         columnProp(col, prop) {
-            return col.props ? ((col.type.props[prop].type === Boolean && col.props[prop] === '') ? true : col.props[prop]) : null;
+            return ObjectUtils.getVNodeProp(col, prop);
         },
         onPage(event) {
             this.clearEditingMetaData();
@@ -3224,7 +3290,7 @@ var script = {
 
             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();
@@ -4279,7 +4345,22 @@ var script = {
                 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;
+        },
     },
     computed: {
         containerClass() {
@@ -4304,19 +4385,13 @@ var script = {
             ];
         },
         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 = [];
@@ -4444,26 +4519,21 @@ const _hoisted_2 = {
   class: "p-datatable-header"
 };
 const _hoisted_3 = {
-  ref: "table",
-  role: "table",
-  class: "p-datatable-table"
-};
-const _hoisted_4 = {
   key: 4,
   class: "p-datatable-footer"
 };
-const _hoisted_5 = {
+const _hoisted_4 = {
   ref: "resizeHelper",
   class: "p-column-resizer-helper",
   style: {"display":"none"}
 };
-const _hoisted_6 = {
+const _hoisted_5 = {
   key: 5,
   ref: "reorderIndicatorUp",
   class: "pi pi-arrow-down p-datatable-reorder-indicator-up",
   style: {"position":"absolute","display":"none"}
 };
-const _hoisted_7 = {
+const _hoisted_6 = {
   key: 6,
   ref: "reorderIndicatorDown",
   class: "pi pi-arrow-up p-datatable-reorder-indicator-down",
@@ -4495,7 +4565,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       ? (openBlock(), createBlock(_component_DTPaginator, {
           key: 2,
           rows: $data.d_rows,
-          first: $data.d_first,
+          first: $props.lazy ? 0 : $data.d_first,
           totalRecords: $options.totalRecordsLength,
           pageLinkSize: $props.pageLinkSize,
           template: $props.paginatorTemplate,
@@ -4505,19 +4575,19 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           onPage: _cache[1] || (_cache[1] = $event => ($options.onPage($event))),
           alwaysShow: $props.alwaysShowPaginator
         }, createSlots({ _: 2 }, [
-          (_ctx.$slots.paginatorLeft)
+          (_ctx.$slots.paginatorstart)
             ? {
-                name: "left",
+                name: "start",
                 fn: withCtx(() => [
-                  renderSlot(_ctx.$slots, "paginatorLeft")
+                  renderSlot(_ctx.$slots, "paginatorstart")
                 ])
               }
             : undefined,
-          (_ctx.$slots.paginatorRight)
+          (_ctx.$slots.paginatorend)
             ? {
-                name: "right",
+                name: "end",
                 fn: withCtx(() => [
-                  renderSlot(_ctx.$slots, "paginatorRight")
+                  renderSlot(_ctx.$slots, "paginatorend")
                 ])
               }
             : undefined
@@ -4527,7 +4597,12 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       class: "p-datatable-wrapper",
       style: {maxHeight: $props.scrollHeight}
     }, [
-      createVNode("table", _hoisted_3, [
+      createVNode("table", {
+        ref: "table",
+        role: "table",
+        class: [$props.tableClass, 'p-datatable-table'],
+        style: $props.tableStyle
+      }, [
         createVNode(_component_DTTableHeader, {
           columnGroup: $options.headerColumnGroup,
           columns: $options.columns,
@@ -4572,6 +4647,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               groupRowsBy: $props.groupRowsBy,
               expandableRowGroups: $props.expandableRowGroups,
               rowClass: $props.rowClass,
+              rowStyle: $props.rowStyle,
               editMode: $props.editMode,
               compareSelectionBy: $props.compareSelectionBy,
               scrollable: $props.scrollable,
@@ -4608,7 +4684,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               onRowEditCancel: _cache[26] || (_cache[26] = $event => ($options.onRowEditCancel($event))),
               editingMeta: $data.d_editingMeta,
               onEditingMetaChange: $options.onEditingMetaChange
-            }, null, 8, ["value", "columns", "dataKey", "selection", "selectionKeys", "selectionMode", "contextMenu", "contextMenuSelection", "rowGroupMode", "groupRowsBy", "expandableRowGroups", "rowClass", "editMode", "compareSelectionBy", "scrollable", "expandedRowIcon", "collapsedRowIcon", "expandedRows", "expandedRowKeys", "expandedRowGroups", "editingRows", "editingRowKeys", "templates", "loading", "responsiveLayout", "onRowgroupToggle", "onRowTouchend", "onRowKeydown", "onRowMousedown", "editingMeta", "onEditingMetaChange"]))
+            }, null, 8, ["value", "columns", "dataKey", "selection", "selectionKeys", "selectionMode", "contextMenu", "contextMenuSelection", "rowGroupMode", "groupRowsBy", "expandableRowGroups", "rowClass", "rowStyle", "editMode", "compareSelectionBy", "scrollable", "expandedRowIcon", "collapsedRowIcon", "expandedRows", "expandedRowKeys", "expandedRowGroups", "editingRows", "editingRowKeys", "templates", "loading", "responsiveLayout", "onRowgroupToggle", "onRowTouchend", "onRowKeydown", "onRowMousedown", "editingMeta", "onEditingMetaChange"]))
           : createCommentVNode("", true),
         createVNode(_component_DTTableBody, {
           value: $options.dataToRender,
@@ -4624,6 +4700,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           groupRowsBy: $props.groupRowsBy,
           expandableRowGroups: $props.expandableRowGroups,
           rowClass: $props.rowClass,
+          rowStyle: $props.rowStyle,
           editMode: $props.editMode,
           compareSelectionBy: $props.compareSelectionBy,
           scrollable: $props.scrollable,
@@ -4660,18 +4737,18 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           onRowEditCancel: _cache[43] || (_cache[43] = $event => ($options.onRowEditCancel($event))),
           editingMeta: $data.d_editingMeta,
           onEditingMetaChange: $options.onEditingMetaChange
-        }, null, 8, ["value", "columns", "empty", "dataKey", "selection", "selectionKeys", "selectionMode", "contextMenu", "contextMenuSelection", "rowGroupMode", "groupRowsBy", "expandableRowGroups", "rowClass", "editMode", "compareSelectionBy", "scrollable", "expandedRowIcon", "collapsedRowIcon", "expandedRows", "expandedRowKeys", "expandedRowGroups", "editingRows", "editingRowKeys", "templates", "loading", "responsiveLayout", "onRowgroupToggle", "onRowTouchend", "onRowKeydown", "onRowMousedown", "editingMeta", "onEditingMetaChange"]),
+        }, null, 8, ["value", "columns", "empty", "dataKey", "selection", "selectionKeys", "selectionMode", "contextMenu", "contextMenuSelection", "rowGroupMode", "groupRowsBy", "expandableRowGroups", "rowClass", "rowStyle", "editMode", "compareSelectionBy", "scrollable", "expandedRowIcon", "collapsedRowIcon", "expandedRows", "expandedRowKeys", "expandedRowGroups", "editingRows", "editingRowKeys", "templates", "loading", "responsiveLayout", "onRowgroupToggle", "onRowTouchend", "onRowKeydown", "onRowMousedown", "editingMeta", "onEditingMetaChange"]),
         createVNode(_component_DTTableFooter, {
           columnGroup: $options.footerColumnGroup,
           columns: $options.columns
         }, null, 8, ["columnGroup", "columns"])
-      ], 512)
+      ], 6)
     ], 4),
     ($options.paginatorBottom)
       ? (openBlock(), createBlock(_component_DTPaginator, {
           key: 3,
           rows: $data.d_rows,
-          first: $data.d_first,
+          first: $props.lazy ? 0 : $data.d_first,
           totalRecords: $options.totalRecordsLength,
           pageLinkSize: $props.pageLinkSize,
           template: $props.paginatorTemplate,
@@ -4681,35 +4758,35 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           onPage: _cache[44] || (_cache[44] = $event => ($options.onPage($event))),
           alwaysShow: $props.alwaysShowPaginator
         }, createSlots({ _: 2 }, [
-          (_ctx.$slots.paginatorLeft)
+          (_ctx.$slots.paginatorstart)
             ? {
-                name: "left",
+                name: "start",
                 fn: withCtx(() => [
-                  renderSlot(_ctx.$slots, "paginatorLeft")
+                  renderSlot(_ctx.$slots, "paginatorstart")
                 ])
               }
             : undefined,
-          (_ctx.$slots.paginatorRight)
+          (_ctx.$slots.paginatorend)
             ? {
-                name: "right",
+                name: "end",
                 fn: withCtx(() => [
-                  renderSlot(_ctx.$slots, "paginatorRight")
+                  renderSlot(_ctx.$slots, "paginatorend")
                 ])
               }
             : undefined
         ]), 1032, ["rows", "first", "totalRecords", "pageLinkSize", "template", "rowsPerPageOptions", "currentPageReportTemplate", "alwaysShow"]))
       : createCommentVNode("", true),
     (_ctx.$slots.footer)
-      ? (openBlock(), createBlock("div", _hoisted_4, [
+      ? (openBlock(), createBlock("div", _hoisted_3, [
           renderSlot(_ctx.$slots, "footer")
         ]))
       : createCommentVNode("", true),
-    createVNode("div", _hoisted_5, null, 512),
+    createVNode("div", _hoisted_4, null, 512),
     ($props.reorderableColumns)
-      ? (openBlock(), createBlock("span", _hoisted_6, null, 512))
+      ? (openBlock(), createBlock("span", _hoisted_5, null, 512))
       : createCommentVNode("", true),
     ($props.reorderableColumns)
-      ? (openBlock(), createBlock("span", _hoisted_7, null, 512))
+      ? (openBlock(), createBlock("span", _hoisted_6, null, 512))
       : createCommentVNode("", true)
   ], 2))
 }