primevue 3.16.2 → 3.17.0

package/datatable/ColumnFilter.vue

@@ -1,40 +1,73 @@
 <template>
     <div :class="containerClass">
-        <div class="p-fluid p-column-filter-element" v-if="display === 'row'" >
+        <div v-if="display === 'row'" class="p-fluid p-column-filter-element">
             <component :is="filterElement" :field="field" :filterModel="filters[field]" :filterCallback="filterCallback" />
         </div>
-        <button ref="icon" v-if="showMenuButton" type="button" class="p-column-filter-menu-button p-link" aria-haspopup="true" :aria-expanded="overlayVisible"
-            :class="{'p-column-filter-menu-button-open': overlayVisible, 'p-column-filter-menu-button-active': hasFilter()}"
-            @click="toggleMenu()" @keydown="onToggleButtonKeyDown($event)"><span class="pi pi-filter-icon pi-filter"></span></button>
-        <button v-if="showClearButton && display === 'row'" :class="{'p-hidden-space': !hasRowFilter()}" type="button" class="p-column-filter-clear-button p-link" @click="clearFilter()"><span class="pi pi-filter-slash"></span></button>
+        <button
+            v-if="showMenuButton"
+            ref="icon"
+            type="button"
+            class="p-column-filter-menu-button p-link"
+            aria-haspopup="true"
+            :aria-expanded="overlayVisible"
+            :class="{ 'p-column-filter-menu-button-open': overlayVisible, 'p-column-filter-menu-button-active': hasFilter() }"
+            @click="toggleMenu()"
+            @keydown="onToggleButtonKeyDown($event)"
+        >
+            <span class="pi pi-filter-icon pi-filter"></span>
+        </button>
+        <button v-if="showClearButton && display === 'row'" :class="{ 'p-hidden-space': !hasRowFilter() }" type="button" class="p-column-filter-clear-button p-link" @click="clearFilter()"><span class="pi pi-filter-slash"></span></button>
         <Portal>
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
-                <div :ref="overlayRef" :class="overlayClass" v-if="overlayVisible" @keydown.escape="onEscape" @click="onContentClick" @mousedown="onContentMouseDown">
+                <div v-if="overlayVisible" :ref="overlayRef" :class="overlayClass" @keydown.escape="onEscape" @click="onContentClick" @mousedown="onContentMouseDown">
                     <component :is="filterHeaderTemplate" :field="field" :filterModel="filters[field]" :filterCallback="filterCallback" />
                     <template v-if="display === 'row'">
                         <ul class="p-column-filter-row-items">
-                            <li class="p-column-filter-row-item" v-for="(matchMode,i) of matchModes" :key="matchMode.label"
-                                @click="onRowMatchModeChange(matchMode.value)" @keydown="onRowMatchModeKeyDown($event)" @keydown.enter.prevent="onRowMatchModeChange(matchMode.value)"
-                                :class="{'p-highlight': isRowMatchModeSelected(matchMode.value)}" :tabindex="i === 0 ? '0' : null">{{matchMode.label}}</li>
+                            <li
+                                v-for="(matchMode, i) of matchModes"
+                                :key="matchMode.label"
+                                class="p-column-filter-row-item"
+                                @click="onRowMatchModeChange(matchMode.value)"
+                                @keydown="onRowMatchModeKeyDown($event)"
+                                @keydown.enter.prevent="onRowMatchModeChange(matchMode.value)"
+                                :class="{ 'p-highlight': isRowMatchModeSelected(matchMode.value) }"
+                                :tabindex="i === 0 ? '0' : null"
+                            >
+                                {{ matchMode.label }}
+                            </li>
                             <li class="p-column-filter-separator"></li>
-                            <li class="p-column-filter-row-item" @click="clearFilter()" @keydown="onRowMatchModeKeyDown($event)" @keydown.enter="onRowClearItemClick()">{{noFilterLabel}}</li>
+                            <li class="p-column-filter-row-item" @click="clearFilter()" @keydown="onRowMatchModeKeyDown($event)" @keydown.enter="onRowClearItemClick()">{{ noFilterLabel }}</li>
                         </ul>
                     </template>
                     <template v-else>
-                        <div class="p-column-filter-operator" v-if="isShowOperator">
+                        <div v-if="isShowOperator" class="p-column-filter-operator">
                             <CFDropdown :options="operatorOptions" :modelValue="operator" @update:modelValue="onOperatorChange($event)" class="p-column-filter-operator-dropdown" optionLabel="label" optionValue="value"></CFDropdown>
                         </div>
                         <div class="p-column-filter-constraints">
-                            <div v-for="(fieldConstraint,i) of fieldConstraints" :key="i" class="p-column-filter-constraint">
-                                <CFDropdown v-if="isShowMatchModes" :options="matchModes" :modelValue="fieldConstraint.matchMode" optionLabel="label" optionValue="value"
-                                    @update:modelValue="onMenuMatchModeChange($event, i)" class="p-column-filter-matchmode-dropdown"></CFDropdown>
+                            <div v-for="(fieldConstraint, i) of fieldConstraints" :key="i" class="p-column-filter-constraint">
+                                <CFDropdown
+                                    v-if="isShowMatchModes"
+                                    :options="matchModes"
+                                    :modelValue="fieldConstraint.matchMode"
+                                    optionLabel="label"
+                                    optionValue="value"
+                                    @update:modelValue="onMenuMatchModeChange($event, i)"
+                                    class="p-column-filter-matchmode-dropdown"
+                                ></CFDropdown>
                                 <component v-if="display === 'menu'" :is="filterElement" :field="field" :filterModel="fieldConstraint" :filterCallback="filterCallback" />
                                 <div>
-                                    <CFButton v-if="showRemoveIcon" type="button" icon="pi pi-trash" class="p-column-filter-remove-button p-button-text p-button-danger p-button-sm" @click="removeConstraint(i)" :label="removeRuleButtonLabel"></CFButton>
+                                    <CFButton
+                                        v-if="showRemoveIcon"
+                                        type="button"
+                                        icon="pi pi-trash"
+                                        class="p-column-filter-remove-button p-button-text p-button-danger p-button-sm"
+                                        @click="removeConstraint(i)"
+                                        :label="removeRuleButtonLabel"
+                                    ></CFButton>
                                 </div>
                             </div>
                         </div>
-                        <div class="p-column-filter-add-rule" v-if="isShowAddConstraint">
+                        <div v-if="isShowAddConstraint" class="p-column-filter-add-rule">
                             <CFButton type="button" :label="addRuleButtonLabel" icon="pi pi-plus" class="p-column-filter-add-button p-button-text p-button-sm" @click="addConstraint()"></CFButton>
                         </div>
                         <div class="p-column-filter-buttonbar">
@@ -54,16 +87,16 @@
 </template>
 
 <script>
-import {DomHandler,ConnectedOverlayScrollHandler,ZIndexUtils} from 'primevue/utils';
+import { DomHandler, ConnectedOverlayScrollHandler, ZIndexUtils } from 'primevue/utils';
 import OverlayEventBus from 'primevue/overlayeventbus';
-import {FilterOperator} from 'primevue/api';
+import { FilterOperator } from 'primevue/api';
 import Dropdown from 'primevue/dropdown';
 import Button from 'primevue/button';
 import Portal from 'primevue/portal';
 
 export default {
     name: 'ColumnFilter',
-    emits: ['filter-change','filter-apply','operator-change','matchmode-change','constraint-add','constraint-remove','filter-clear','apply-click'],
+    emits: ['filter-change', 'filter-apply', 'operator-change', 'matchmode-change', 'constraint-add', 'constraint-remove', 'filter-clear', 'apply-click'],
     props: {
         field: {
             type: String,
@@ -140,7 +173,7 @@ export default {
             overlayVisible: false,
             defaultMatchMode: null,
             defaultOperator: null
-        }
+        };
     },
     overlay: null,
     selfClick: false,
@@ -159,24 +192,24 @@ export default {
     mounted() {
         if (this.filters && this.filters[this.field]) {
             let fieldFilters = this.filters[this.field];
+
             if (fieldFilters.operator) {
                 this.defaultMatchMode = fieldFilters.constraints[0].matchMode;
                 this.defaultOperator = fieldFilters.operator;
-            }
-            else {
+            } else {
                 this.defaultMatchMode = this.filters[this.field].matchMode;
             }
         }
     },
     methods: {
         clearFilter() {
-            let _filters = {...this.filters};
+            let _filters = { ...this.filters };
+
             if (_filters[this.field].operator) {
                 _filters[this.field].constraints.splice(1);
                 _filters[this.field].operator = this.defaultOperator;
-                _filters[this.field].constraints[0] = {value: null, matchMode: this.defaultMatchMode};
-            }
-            else {
+                _filters[this.field].constraints[0] = { value: null, matchMode: this.defaultMatchMode };
+            } else {
                 _filters[this.field].value = null;
                 _filters[this.field].matchMode = this.defaultMatchMode;
             }
@@ -187,18 +220,17 @@ export default {
             this.hide();
         },
         applyFilter() {
-            this.$emit('apply-click', {field: this.field, constraints: this.filters[this.field]});
+            this.$emit('apply-click', { field: this.field, constraints: this.filters[this.field] });
             this.$emit('filter-apply');
             this.hide();
         },
         hasFilter() {
             if (this.filtersStore) {
                 let fieldFilter = this.filtersStore[this.field];
+
                 if (fieldFilter) {
-                    if (fieldFilter.operator)
-                        return !this.isFilterBlank(fieldFilter.constraints[0].value);
-                    else
-                        return !this.isFilterBlank(fieldFilter.value);
+                    if (fieldFilter.operator) return !this.isFilterBlank(fieldFilter.constraints[0].value);
+                    else return !this.isFilterBlank(fieldFilter.value);
                 }
             }
 
@@ -209,48 +241,51 @@ export default {
         },
         isFilterBlank(filter) {
             if (filter !== null && filter !== undefined) {
-                if ((typeof filter === 'string' && filter.trim().length == 0) || (filter instanceof Array && filter.length == 0))
-                    return true;
-                else
-                    return false;
+                if ((typeof filter === 'string' && filter.trim().length == 0) || (filter instanceof Array && filter.length == 0)) return true;
+                else return false;
             }
+
             return true;
         },
         toggleMenu() {
             this.overlayVisible = !this.overlayVisible;
         },
         onToggleButtonKeyDown(event) {
-            switch(event.key) {
+            switch (event.key) {
                 case 'Escape':
                 case 'Tab':
                     this.overlayVisible = false;
-                break;
+                    break;
 
                 case 'ArrowDown':
                     if (this.overlayVisible) {
                         let focusable = DomHandler.getFocusableElements(this.overlay);
+
                         if (focusable) {
                             focusable[0].focus();
                         }
+
                         event.preventDefault();
-                    }
-                    else if (event.altKey) {
+                    } else if (event.altKey) {
                         this.overlayVisible = true;
                         event.preventDefault();
                     }
-                break;
+
+                    break;
             }
         },
         onEscape() {
             this.overlayVisible = false;
+
             if (this.$refs.icon) {
                 this.$refs.icon.focus();
             }
         },
         onRowMatchModeChange(matchMode) {
-            let _filters = {...this.filters};
+            let _filters = { ...this.filters };
+
             _filters[this.field].matchMode = matchMode;
-            this.$emit('matchmode-change', {field: this.field, matchMode: matchMode});
+            this.$emit('matchmode-change', { field: this.field, matchMode: matchMode });
             this.$emit('filter-change', _filters);
             this.$emit('filter-apply');
             this.hide();
@@ -258,9 +293,10 @@ export default {
         onRowMatchModeKeyDown(event) {
             let item = event.target;
 
-            switch(event.key) {
+            switch (event.key) {
                 case 'ArrowDown':
                     var nextItem = this.findNextItem(item);
+
                     if (nextItem) {
                         item.removeAttribute('tabindex');
                         nextItem.tabIndex = '0';
@@ -268,10 +304,11 @@ export default {
                     }
 
                     event.preventDefault();
-                break;
+                    break;
 
                 case 'ArrowUp':
                     var prevItem = this.findPrevItem(item);
+
                     if (prevItem) {
                         item.removeAttribute('tabindex');
                         prevItem.tabIndex = '0';
@@ -279,36 +316,40 @@ export default {
                     }
 
                     event.preventDefault();
-                break;
+                    break;
             }
         },
         isRowMatchModeSelected(matchMode) {
-            return (this.filters[this.field]).matchMode === matchMode;
+            return this.filters[this.field].matchMode === matchMode;
         },
         onOperatorChange(value) {
-            let _filters = {...this.filters};
+            let _filters = { ...this.filters };
+
             _filters[this.field].operator = value;
             this.$emit('filter-change', _filters);
 
-            this.$emit('operator-change', {field: this.field, operator: value});
+            this.$emit('operator-change', { field: this.field, operator: value });
+
             if (!this.showApplyButton) {
                 this.$emit('filter-apply');
             }
         },
         onMenuMatchModeChange(value, index) {
-            let _filters = {...this.filters};
+            let _filters = { ...this.filters };
+
             _filters[this.field].constraints[index].matchMode = value;
-            this.$emit('matchmode-change', {field: this.field, matchMode: value, index: index});
+            this.$emit('matchmode-change', { field: this.field, matchMode: value, index: index });
 
             if (!this.showApplyButton) {
                 this.$emit('filter-apply');
             }
         },
         addConstraint() {
-            let _filters = {...this.filters};
-            let newConstraint = {value: null, matchMode: this.defaultMatchMode};
+            let _filters = { ...this.filters };
+            let newConstraint = { value: null, matchMode: this.defaultMatchMode };
+
             _filters[this.field].constraints.push(newConstraint);
-            this.$emit('constraint-add', {field: this.field, constraing: newConstraint});
+            this.$emit('constraint-add', { field: this.field, constraing: newConstraint });
             this.$emit('filter-change', _filters);
 
             if (!this.showApplyButton) {
@@ -316,9 +357,10 @@ export default {
             }
         },
         removeConstraint(index) {
-            let _filters = {...this.filters};
+            let _filters = { ...this.filters };
             let removedConstraint = _filters[this.field].constraints.splice(index, 1);
-            this.$emit('constraint-remove', {field: this.field, constraing: removedConstraint});
+
+            this.$emit('constraint-remove', { field: this.field, constraing: removedConstraint });
             this.$emit('filter-change', _filters);
 
             if (!this.showApplyButton) {
@@ -331,18 +373,14 @@ export default {
         findNextItem(item) {
             let nextItem = item.nextElementSibling;
 
-            if (nextItem)
-                return DomHandler.hasClass(nextItem, 'p-column-filter-separator')  ? this.findNextItem(nextItem) : nextItem;
-            else
-                return item.parentElement.firstElementChild;
+            if (nextItem) return DomHandler.hasClass(nextItem, 'p-column-filter-separator') ? this.findNextItem(nextItem) : nextItem;
+            else return item.parentElement.firstElementChild;
         },
         findPrevItem(item) {
             let prevItem = item.previousElementSibling;
 
-            if (prevItem)
-                DomHandler.hasClass(prevItem, 'p-column-filter-separator')  ? this.findPrevItem(prevItem) : prevItem;
-            else
-                return item.parentElement.lastElementChild;
+            if (prevItem) DomHandler.hasClass(prevItem, 'p-column-filter-separator') ? this.findPrevItem(prevItem) : prevItem;
+            else return item.parentElement.lastElementChild;
         },
         hide() {
             this.overlayVisible = false;
@@ -362,6 +400,7 @@ export default {
             if (this.filterMenuStyle) {
                 DomHandler.applyStyle(this.overlay, this.filterMenuStyle);
             }
+
             ZIndexUtils.set('overlay', el, this.$primevue.config.zIndex.overlay);
             DomHandler.absolutePosition(this.overlay, this.$refs.icon);
             this.bindOutsideClickListener();
@@ -372,7 +411,8 @@ export default {
                 if (!this.isOutsideClicked(e.target)) {
                     this.selfClick = true;
                 }
-            }
+            };
+
             OverlayEventBus.on('overlay-click', this.overlayEventListener);
         },
         onOverlayLeave() {
@@ -404,8 +444,10 @@ export default {
                     if (this.overlayVisible && !this.selfClick && this.isOutsideClicked(event.target)) {
                         this.overlayVisible = false;
                     }
+
                     this.selfClick = false;
                 };
+
                 document.addEventListener('click', this.outsideClickListener);
             }
         },
@@ -439,6 +481,7 @@ export default {
                         this.hide();
                     }
                 };
+
                 window.addEventListener('resize', this.resizeListener);
             }
         },
@@ -451,35 +494,43 @@ export default {
     },
     computed: {
         containerClass() {
-            return ['p-column-filter p-fluid', {
-                'p-column-filter-row': this.display === 'row',
-                'p-column-filter-menu': this.display === 'menu'
-            }];
+            return [
+                'p-column-filter p-fluid',
+                {
+                    'p-column-filter-row': this.display === 'row',
+                    'p-column-filter-menu': this.display === 'menu'
+                }
+            ];
         },
         overlayClass() {
-            return [this.filterMenuClass, {
-                'p-column-filter-overlay p-component p-fluid': true,
-                'p-column-filter-overlay-menu': this.display === 'menu',
-                'p-input-filled': this.$primevue.config.inputStyle === 'filled',
-                'p-ripple-disabled': this.$primevue.config.ripple === false
-            }];
+            return [
+                this.filterMenuClass,
+                {
+                    'p-column-filter-overlay p-component p-fluid': true,
+                    'p-column-filter-overlay-menu': this.display === 'menu',
+                    'p-input-filled': this.$primevue.config.inputStyle === 'filled',
+                    'p-ripple-disabled': this.$primevue.config.ripple === false
+                }
+            ];
         },
         showMenuButton() {
-            return this.showMenu && (this.display === 'row' ? this.type !== 'boolean': true);
+            return this.showMenu && (this.display === 'row' ? this.type !== 'boolean' : true);
         },
         matchModes() {
-            return this.matchModeOptions ||
-                this.$primevue.config.filterMatchModeOptions[this.type].map(key => {
-                    return {label: this.$primevue.config.locale[key], value: key}
-                });
+            return (
+                this.matchModeOptions ||
+                this.$primevue.config.filterMatchModeOptions[this.type].map((key) => {
+                    return { label: this.$primevue.config.locale[key], value: key };
+                })
+            );
         },
         isShowMatchModes() {
             return this.type !== 'boolean' && this.showMatchModes && this.matchModes;
         },
         operatorOptions() {
             return [
-                {label: this.$primevue.config.locale.matchAll, value: FilterOperator.AND},
-                {label: this.$primevue.config.locale.matchAny, value: FilterOperator.OR}
+                { label: this.$primevue.config.locale.matchAll, value: FilterOperator.AND },
+                { label: this.$primevue.config.locale.matchAny, value: FilterOperator.OR }
             ];
         },
         noFilterLabel() {
@@ -504,7 +555,7 @@ export default {
             return this.$primevue.config.locale.addRule;
         },
         isShowAddConstraint() {
-            return this.showAddButton && this.filters[this.field].operator && (this.fieldConstraints && this.fieldConstraints.length < this.maxConstraints);
+            return this.showAddButton && this.filters[this.field].operator && this.fieldConstraints && this.fieldConstraints.length < this.maxConstraints;
         },
         clearButtonLabel() {
             return this.$primevue.config.locale.clear;
@@ -514,9 +565,9 @@ export default {
         }
     },
     components: {
-        'CFDropdown': Dropdown,
-        'CFButton': Button,
-        'Portal': Portal
+        CFDropdown: Dropdown,
+        CFButton: Button,
+        Portal: Portal
     }
-}
+};
 </script>

package/datatable/DataTable.d.ts

@@ -163,7 +163,7 @@ export interface DataTablePageEvent extends DataTableSortEvent {
 /**
  * @extends DataTableSortEvent
  */
- export interface DataTableFilterEvent extends DataTableSortEvent {
+export interface DataTableFilterEvent extends DataTableSortEvent {
     /**
      * Filtered collection (non-lazy only)
      */
@@ -188,12 +188,12 @@ export interface DataTableRowClickEvent {
 /**
  * @extends DataTableRowClickEvent
  */
-export interface DataTableRowDoubleClickEvent extends DataTableRowClickEvent { }
+export interface DataTableRowDoubleClickEvent extends DataTableRowClickEvent {}
 
 /**
  * @extends DataTableRowClickEvent
  */
-export interface DataTableRowContextMenuEvent extends DataTableRowClickEvent { }
+export interface DataTableRowContextMenuEvent extends DataTableRowClickEvent {}
 
 export interface DataTableRowSelectEvent {
     /**
@@ -217,7 +217,7 @@ export interface DataTableRowSelectEvent {
 /**
  * @extends DataTableRowSelectEvent
  */
-export interface DataTableRowUnselectEvent extends DataTableRowSelectEvent { }
+export interface DataTableRowUnselectEvent extends DataTableRowSelectEvent {}
 
 export interface DataTableRowSelectAllEvent {
     /**
@@ -307,7 +307,7 @@ export interface DataTableRowExpandEvent {
 /**
  * @extends DataTableRowExpandEvent
  */
-export interface DataTableRowCollapseEvent extends DataTableRowExpandEvent { }
+export interface DataTableRowCollapseEvent extends DataTableRowExpandEvent {}
 
 export interface DataTableCellEditInitEvent {
     /**
@@ -331,7 +331,7 @@ export interface DataTableCellEditInitEvent {
 /**
  * @extends DataTableCellEditInitEvent
  */
-export interface DataTableCellEditCancelEvent extends DataTableCellEditInitEvent { }
+export interface DataTableCellEditCancelEvent extends DataTableCellEditInitEvent {}
 
 export interface DataTableCellEditCompleteEvent {
     /**
@@ -394,12 +394,12 @@ export interface DataTableRowEditInitEvent {
 /**
  * @extends DataTableRowEditInitEvent
  */
-export interface DataTableRowEditSaveEvent extends DataTableRowEditInitEvent { }
+export interface DataTableRowEditSaveEvent extends DataTableRowEditInitEvent {}
 
 /**
  * @extends DataTableRowEditCancelEvent
  */
-export interface DataTableRowEditCancelEvent extends DataTableRowEditInitEvent { }
+export interface DataTableRowEditCancelEvent extends DataTableRowEditInitEvent {}
 
 export interface DataTableStateEvent {
     /**
@@ -719,7 +719,7 @@ export interface DataTableProps {
      * A function that takes the row data as a parameter and returns a string to apply a particular class for the row.
      *
      */
-    rowClass?:(data: any) => object | string | undefined;
+    rowClass?: (data: any) => object | string | undefined;
     /**
      * A function that takes the row data as a parameter and returns the inline style for the corresponding row.
      */
@@ -839,11 +839,11 @@ export interface DataTableSlots {
         /**
          * Row data
          */
-         data: any;
-         /**
-          * Row index
-          */
-         index: number;
+        data: any;
+        /**
+         * Row index
+         */
+        index: number;
     }) => VNode[];
 }
 
@@ -882,7 +882,7 @@ export declare type DataTableEmits = {
      * Emitted when the contextMenuSelection changes.
      * @param {*} value - New value.
      */
-    'update:contextMenuSelection': (value: any[] | any | undefined ) => void;
+    'update:contextMenuSelection': (value: any[] | any | undefined) => void;
     /**
      * Emitted when the expandedRows changes.
      * @param {DataTableExpandedRows} value - New value.
@@ -907,17 +907,17 @@ export declare type DataTableEmits = {
      * Callback to invoke on pagination. Sort and Filter information is also available for lazy loading implementation.
      * @param {DataTablePageEvent} event - Custom page event.
      */
-    'page': (event: DataTablePageEvent) => void;
+    page: (event: DataTablePageEvent) => void;
     /**
      * Callback to invoke on sort. Page and Filter information is also available for lazy loading implementation.
      * @param {DataTableSortEvent} event - Custom sort event.
      */
-    'sort': (event: DataTableSortEvent) => void;
+    sort: (event: DataTableSortEvent) => void;
     /**
      * Event to emit after filtering, not triggered in lazy mode.
      * @param {DataTableFilterEvent} event - Custom filter event.
      */
-    'filter': (event: DataTableFilterEvent) => void;
+    filter: (event: DataTableFilterEvent) => void;
     /**
      * Callback to invoke after filtering, sorting, pagination and cell editing to pass the rendered value.
      * @param {*} value - Value displayed by the table.
@@ -1038,7 +1038,7 @@ export declare type DataTableEmits = {
      * @param {DataTableStateEvent} event - Custom state event.
      */
     'state-save': (event: DataTableStateEvent) => void;
-}
+};
 
 declare class DataTable extends ClassComponent<DataTableProps, DataTableSlots, DataTableEmits> {
     /**
@@ -1051,7 +1051,7 @@ declare class DataTable extends ClassComponent<DataTableProps, DataTableSlots, D
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        DataTable: GlobalComponentConstructor<DataTable>
+        DataTable: GlobalComponentConstructor<DataTable>;
     }
 }
 
@@ -1066,10 +1066,10 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [DataTable](https://www.primefaces.org/primevue/showcase/#/datatable)
- * - [Edit](https://www.primefaces.org/primevue/showcase/#/datatable/edit)
- * - [Sort](https://www.primefaces.org/primevue/showcase/#/datatable/sort)
- * - [Filter](https://www.primefaces.org/primevue/showcase/#/datatable/filter)
+ * - [DataTable](https://www.primefaces.org/primevue/datatable)
+ * - [Edit](https://www.primefaces.org/primevue/datatable/edit)
+ * - [Sort](https://www.primefaces.org/primevue/datatable/sort)
+ * - [Filter](https://www.primefaces.org/primevue/datatable/filter)
  * etc.
  *
  */