primevue 4.3.2 → 4.3.3

package/datatable/DataTable.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="cx('root')" data-scrollselectors=".p-datatable-wrapper" v-bind="ptmi('root')">
+    <div :class="cx('root')" data-scrollselectors=".p-datatable-wrapper" :data-p="dataP" v-bind="ptmi('root')">
         <slot></slot>
         <div v-if="loading" :class="cx('mask')" v-bind="ptm('mask')">
             <slot v-if="$slots.loading" name="loading"></slot>
@@ -25,9 +25,10 @@
             @page="onPage($event)"
             :alwaysShow="alwaysShowPaginator"
             :unstyled="unstyled"
+            :data-p-top="true"
             :pt="ptm('pcPaginator')"
         >
-            <template v-if="$slots.paginatorcontainer" #container>
+            <template v-if="$slots.paginatorcontainer" #container="slotProps">
                 <slot
                     name="paginatorcontainer"
                     :first="slotProps.first"
@@ -35,12 +36,14 @@
                     :rows="slotProps.rows"
                     :page="slotProps.page"
                     :pageCount="slotProps.pageCount"
+                    :pageLinks="slotProps.pageLinks"
                     :totalRecords="slotProps.totalRecords"
                     :firstPageCallback="slotProps.firstPageCallback"
                     :lastPageCallback="slotProps.lastPageCallback"
                     :prevPageCallback="slotProps.prevPageCallback"
                     :nextPageCallback="slotProps.nextPageCallback"
                     :rowChangeCallback="slotProps.rowChangeCallback"
+                    :changePageCallback="slotProps.changePageCallback"
                 ></slot>
             </template>
             <template v-if="$slots.paginatorstart" #start>
@@ -68,7 +71,7 @@
                 <slot name="paginatorrowsperpagedropdownicon" :class="slotProps.class"></slot>
             </template>
         </DTPaginator>
-        <div :class="cx('tableContainer')" :style="[sx('tableContainer'), { maxHeight: virtualScrollerDisabled ? scrollHeight : '' }]" v-bind="ptm('tableContainer')">
+        <div :class="cx('tableContainer')" :style="[sx('tableContainer'), { maxHeight: virtualScrollerDisabled ? scrollHeight : '' }]" :data-p="dataP" v-bind="ptm('tableContainer')">
             <DTVirtualScroller
                 ref="virtualScroller"
                 v-bind="virtualScrollerOptions"
@@ -130,6 +133,7 @@
                             :selection="selection"
                             :selectionKeys="d_selectionKeys"
                             :selectionMode="selectionMode"
+                            :rowHover="rowHover"
                             :contextMenu="contextMenu"
                             :contextMenuSelection="contextMenuSelection"
                             :rowGroupMode="rowGroupMode"
@@ -186,6 +190,7 @@
                             :selection="selection"
                             :selectionKeys="d_selectionKeys"
                             :selectionMode="selectionMode"
+                            :rowHover="rowHover"
                             :contextMenu="contextMenu"
                             :contextMenuSelection="contextMenuSelection"
                             :rowGroupMode="rowGroupMode"
@@ -256,6 +261,7 @@
             @page="onPage($event)"
             :alwaysShow="alwaysShowPaginator"
             :unstyled="unstyled"
+            :data-p-bottom="true"
             :pt="ptm('pcPaginator')"
         >
             <template v-if="$slots.paginatorcontainer" #container="slotProps">
@@ -266,12 +272,14 @@
                     :rows="slotProps.rows"
                     :page="slotProps.page"
                     :pageCount="slotProps.pageCount"
+                    :pageLinks="slotProps.pageLinks"
                     :totalRecords="slotProps.totalRecords"
                     :firstPageCallback="slotProps.firstPageCallback"
                     :lastPageCallback="slotProps.lastPageCallback"
                     :prevPageCallback="slotProps.prevPageCallback"
                     :nextPageCallback="slotProps.nextPageCallback"
                     :rowChangeCallback="slotProps.rowChangeCallback"
+                    :changePageCallback="slotProps.changePageCallback"
                 ></slot>
             </template>
             <template v-if="$slots.paginatorstart" #start>
@@ -313,6 +321,7 @@
 </template>
 
 <script>
+import { cn } from '@primeuix/utils';
 import {
     addClass,
     addStyle,
@@ -1371,20 +1380,24 @@ export default {
         },
         bindColumnResizeEvents() {
             if (!this.documentColumnResizeListener) {
-                this.documentColumnResizeListener = document.addEventListener('mousemove', () => {
+                this.documentColumnResizeListener = (event) => {
                     if (this.columnResizing) {
                         this.onColumnResize(event);
                     }
-                });
+                };
+
+                document.addEventListener('mousemove', this.documentColumnResizeListener);
             }
 
             if (!this.documentColumnResizeEndListener) {
-                this.documentColumnResizeEndListener = document.addEventListener('mouseup', () => {
+                this.documentColumnResizeEndListener = () => {
                     if (this.columnResizing) {
                         this.columnResizing = false;
                         this.onColumnResizeEnd();
                     }
-                });
+                };
+
+                document.addEventListener('mouseup', this.documentColumnResizeEndListener);
             }
         },
         unbindColumnResizeEvents() {
@@ -1706,7 +1719,8 @@ export default {
             }
 
             if (this.d_sortField) {
-                state.sortField = this.d_sortField;
+                // Functions can't be serialized, so don't attempt to save them
+                if (typeof this.d_sortField !== 'function') state.sortField = this.d_sortField;
                 state.sortOrder = this.d_sortOrder;
             }
 
@@ -1758,51 +1772,90 @@ export default {
                 return value;
             };
 
-            if (stateString) {
-                let restoredState = JSON.parse(stateString, reviver);
+            let parsedState;
+            try {
+                parsedState = JSON.parse(stateString, reviver);
+            } catch (error) {}
+            if (!parsedState || typeof parsedState !== 'object') {
+                storage.removeItem(this.stateKey);
+                return;
+            }
 
-                if (this.paginator) {
-                    this.d_first = restoredState.first;
-                    this.d_rows = restoredState.rows;
-                }
+            const restoredState = {};
 
-                if (restoredState.sortField) {
-                    this.d_sortField = restoredState.sortField;
-                    this.d_sortOrder = restoredState.sortOrder;
+            if (this.paginator) {
+                if (typeof parsedState.first === 'number') {
+                    this.d_first = parsedState.first;
+                    this.$emit('update:first', this.d_first);
+                    restoredState.first = this.d_first;
                 }
-
-                if (restoredState.multiSortMeta) {
-                    this.d_multiSortMeta = restoredState.multiSortMeta;
+                if (typeof parsedState.rows === 'number') {
+                    this.d_rows = parsedState.rows;
+                    this.$emit('update:rows', this.d_rows);
+                    restoredState.rows = this.d_rows;
                 }
+            }
 
-                if (restoredState.filters) {
-                    this.$emit('update:filters', restoredState.filters);
-                }
+            if (typeof parsedState.sortField === 'string') {
+                this.d_sortField = parsedState.sortField;
+                this.$emit('update:sortField', this.d_sortField);
+                restoredState.sortField = this.d_sortField;
+            }
 
-                if (this.resizableColumns) {
-                    this.columnWidthsState = restoredState.columnWidths;
-                    this.tableWidthState = restoredState.tableWidth;
-                }
+            if (typeof parsedState.sortOrder === 'number') {
+                this.d_sortOrder = parsedState.sortOrder;
+                this.$emit('update:sortOrder', this.d_sortOrder);
+                restoredState.sortOrder = this.d_sortOrder;
+            }
 
-                if (this.reorderableColumns) {
-                    this.d_columnOrder = restoredState.columnOrder;
-                }
+            if (Array.isArray(parsedState.multiSortMeta)) {
+                this.d_multiSortMeta = parsedState.multiSortMeta;
+                this.$emit('update:multiSortMeta', this.d_multiSortMeta);
+                restoredState.multiSortMeta = this.d_multiSortMeta;
+            }
 
-                if (restoredState.expandedRows) {
-                    this.$emit('update:expandedRows', restoredState.expandedRows);
-                }
+            if (this.hasFilters && typeof parsedState.filters === 'object' && parsedState.filters !== null) {
+                this.d_filters = this.cloneFilters(parsedState.filters);
+                this.$emit('update:filters', this.d_filters);
+                restoredState.filters = this.d_filters;
+            }
 
-                if (restoredState.expandedRowGroups) {
-                    this.$emit('update:expandedRowGroups', restoredState.expandedRowGroups);
+            if (this.resizableColumns) {
+                if (typeof parsedState.columnWidths === 'string') {
+                    this.columnWidthsState = parsedState.columnWidths;
+                    restoredState.columnWidths = this.columnWidthsState;
                 }
-
-                if (restoredState.selection) {
-                    this.d_selectionKeys = restoredState.d_selectionKeys;
-                    this.$emit('update:selection', restoredState.selection);
+                if (typeof parsedState.tableWidth === 'string') {
+                    this.tableWidthState = parsedState.tableWidth;
+                    restoredState.tableWidth = this.tableWidthState;
                 }
+            }
+
+            if (this.reorderableColumns && Array.isArray(parsedState.columnOrder)) {
+                this.d_columnOrder = parsedState.columnOrder;
+                restoredState.columnOrder = this.d_columnOrder;
+            }
 
-                this.$emit('state-restore', restoredState);
+            if (typeof parsedState.expandedRows === 'object' && parsedState.expandedRows !== null) {
+                this.$emit('update:expandedRows', parsedState.expandedRows);
+                restoredState.expandedRows = parsedState.expandedRows;
             }
+
+            if (Array.isArray(parsedState.expandedRowGroups)) {
+                this.$emit('update:expandedRowGroups', parsedState.expandedRowGroups);
+                restoredState.expandedRowGroups = parsedState.expandedRowGroups;
+            }
+
+            if (typeof parsedState.selection === 'object' && parsedState.selection !== null) {
+                if (typeof parsedState.selectionKeys === 'object' && parsedState.selectionKeys !== null) {
+                    this.d_selectionKeys = parsedState.selectionKeys;
+                    restoredState.selectionKeys = this.d_selectionKeys;
+                }
+                this.$emit('update:selection', parsedState.selection);
+                restoredState.selection = parsedState.selection;
+            }
+
+            this.$emit('state-restore', restoredState);
         },
         saveColumnWidths(state) {
             let widths = [];
@@ -1926,11 +1979,11 @@ export default {
                 this.$emit('filter', this.createLazyLoadEvent());
             }
         },
-        cloneFilters() {
+        cloneFilters(filters) {
             let cloned = {};
 
-            if (this.filters) {
-                Object.entries(this.filters).forEach(([prop, value]) => {
+            if (filters) {
+                Object.entries(filters).forEach(([prop, value]) => {
                     cloned[prop] = value.operator
                         ? {
                               operator: value.operator,
@@ -1984,7 +2037,7 @@ export default {
         columns() {
             const cols = this.d_columns.get(this);
 
-            if (this.reorderableColumns && this.d_columnOrder) {
+            if (cols && this.reorderableColumns && this.d_columnOrder) {
                 let orderedColumns = [];
 
                 for (let columnKey of this.d_columnOrder) {
@@ -2094,6 +2147,12 @@ export default {
         },
         virtualScrollerDisabled() {
             return isEmpty(this.virtualScrollerOptions) || !this.scrollable;
+        },
+        dataP() {
+            return cn({
+                scrollable: this.scrollable,
+                'flex-scrollable': this.scrollable && this.scrollHeight === 'flex'
+            });
         }
     },
     components: {

package/datatable/HeaderCheckbox.vue

@@ -1,9 +1,9 @@
 <template>
     <Checkbox :modelValue="checked" :binary="true" :disabled="disabled" :aria-label="headerCheckboxAriaLabel" @change="onChange" :unstyled="unstyled" :pt="getColumnPT('pcHeaderCheckbox')">
-        <template #icon="slotProps">
+        <!--<template #icon="slotProps">
             <component v-if="headerCheckboxIconTemplate" :is="headerCheckboxIconTemplate" :checked="slotProps.checked" :class="slotProps.class" />
             <CheckIcon v-else-if="!headerCheckboxIconTemplate && slotProps.checked" :class="slotProps.class" v-bind="getColumnPT('pcHeaderCheckbox')['icon']" />
-        </template>
+        </template>-->
     </Checkbox>
 </template>
 

package/datatable/RowCheckbox.vue

@@ -2,7 +2,7 @@
     <Checkbox :modelValue="checked" :binary="true" :disabled="$attrs.disabled" :aria-label="checkboxAriaLabel" @change="onChange" :unstyled="unstyled" :pt="getColumnPT('pcRowCheckbox')">
         <template #icon="slotProps">
             <component v-if="rowCheckboxIconTemplate" :is="rowCheckboxIconTemplate" :checked="slotProps.checked" :class="slotProps.class" />
-            <CheckIcon v-else-if="!rowCheckboxIconTemplate && slotProps.checked" :class="slotProps.class" v-bind="getColumnPT('pcRowCheckbox')['icon']" />
+            <CheckIcon v-else-if="!rowCheckboxIconTemplate && slotProps.checked" :class="slotProps.class" v-bind="getColumnPT('pcRowCheckbox.icon')" />
         </template>
     </Checkbox>
 </template>

package/datatable/TableBody.vue

@@ -1,5 +1,5 @@
 <template>
-    <tbody :ref="bodyRef" :class="cx('tbody')" role="rowgroup" :style="bodyContentStyle" v-bind="ptm('tbody', ptmTBodyOptions)">
+    <tbody :ref="bodyRef" :class="cx('tbody')" role="rowgroup" :style="bodyContentStyle" :data-p="dataP" v-bind="ptm('tbody', ptmTBodyOptions)">
         <template v-if="!empty">
             <template v-for="(rowData, rowIndex) of value" :key="getRowKey(rowData, rowIndex)">
                 <DTBodyRow
@@ -70,6 +70,7 @@
 </template>
 
 <script>
+import { cn } from '@primeuix/utils';
 import { getOuterHeight } from '@primeuix/utils/dom';
 import { resolveFieldData } from '@primeuix/utils/object';
 import BaseComponent from '@primevue/core/basecomponent';
@@ -168,6 +169,10 @@ export default {
             type: String,
             default: null
         },
+        rowHover: {
+            type: Boolean,
+            default: false
+        },
         contextMenu: {
             type: Boolean,
             default: false
@@ -289,6 +294,12 @@ export default {
                     scrollable: this.$parentInstance?.$parentInstance?.scrollable
                 }
             };
+        },
+        dataP() {
+            return cn({
+                hoverable: this.rowHover || this.selectionMode,
+                frozen: this.frozenRow
+            });
         }
     },
     components: {

package/datatable/TableFooter.vue

@@ -1,5 +1,13 @@
 <template>
-    <tfoot v-if="hasFooter" :class="cx('tfoot')" :style="sx('tfoot')" role="rowgroup" v-bind="columnGroup ? { ...ptm('tfoot', ptmTFootOptions), ...getColumnGroupPT('root') } : ptm('tfoot', ptmTFootOptions)" data-pc-section="tfoot">
+    <tfoot
+        v-if="hasFooter"
+        :class="cx('tfoot')"
+        :style="sx('tfoot')"
+        role="rowgroup"
+        v-bind="columnGroup ? { ...ptm('tfoot', ptmTFootOptions), ...getColumnGroupPT('root') } : ptm('tfoot', ptmTFootOptions)"
+        :data-p-scrollable="$parentInstance?.$parentInstance?.scrollable"
+        data-pc-section="tfoot"
+    >
         <tr v-if="!columnGroup" role="row" v-bind="ptm('footerRow')">
             <template v-for="(col, i) of columns" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i">
                 <DTFooterCell v-if="!columnProp(col, 'hidden')" :column="col" :pt="pt" />

package/datatable/TableHeader.vue

@@ -1,5 +1,12 @@
 <template>
-    <thead :class="cx('thead')" :style="sx('thead')" role="rowgroup" v-bind="columnGroup ? { ...ptm('thead', ptmTHeadOptions), ...getColumnGroupPT('root') } : ptm('thead', ptmTHeadOptions)" data-pc-section="thead">
+    <thead
+        :class="cx('thead')"
+        :style="sx('thead')"
+        role="rowgroup"
+        v-bind="columnGroup ? { ...ptm('thead', ptmTHeadOptions), ...getColumnGroupPT('root') } : ptm('thead', ptmTHeadOptions)"
+        :data-p-scrollable="$parentInstance?.$parentInstance?.scrollable"
+        data-pc-section="thead"
+    >
         <template v-if="!columnGroup">
             <tr role="row" v-bind="ptm('headerRow')">
                 <template v-for="(col, i) of columns" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i">
@@ -97,7 +104,7 @@
                     @constraint-add="$emit('constraint-add', $event)"
                     @constraint-remove="$emit('constraint-remove', $event)"
                     @apply-click="$emit('apply-click', $event)"
-                    @change="$emit('checkbox-change', $event)"
+                    @checkbox-change="$emit('checkbox-change', $event)"
                     :unstyled="unstyled"
                     :pt="pt"
                 />

package/datatable/index.d.ts

@@ -7,7 +7,7 @@
  * @module datatable
  *
  */
-import type { DefineComponent, DesignToken, EmitFn, HintedString, Nullable, PassThrough } from '@primevue/core';
+import type { DefineComponent, DesignToken, EmitFn, HintedString, NoInfer, Nullable, PassThrough } from '@primevue/core';
 import type { ComponentHooks } from '@primevue/core/basecomponent';
 import type { ButtonProps } from 'primevue/button';
 import type { ColumnPassThroughOptionType } from 'primevue/column';
@@ -593,19 +593,19 @@ export interface DataTableRowEditCancelEvent<T = any> extends DataTableRowEditIn
  * Custom state event.
  * @see {@link DataTableEmitsOptions['state-save']}
  */
-export interface DataTableStateEvent {
+export interface DataTableStateEvent<T = any> {
     /**
      * Index of first record
      */
-    first: number;
+    first?: number | undefined;
     /**
      * Number of rows to display in new page
      */
-    rows: number;
+    rows?: number | undefined;
     /**
      * Field to sort against
      */
-    sortField: string;
+    sortField: keyof T;
     /**
      * Sort order as integer
      */
@@ -613,19 +613,19 @@ export interface DataTableStateEvent {
     /**
      * MultiSort metadata
      */
-    multiSortMeta: DataTableSortMeta[] | undefined;
+    multiSortMeta?: DataTableSortMeta[] | undefined | null;
     /**
      * Collection of active filters
      */
-    filters: DataTableFilterMeta;
+    filters?: DataTableFilterMeta;
     /**
      * Comma separated list of column widths
      */
-    columnWidths: string[];
+    columnWidths?: string[] | null;
     /**
      * Order of the columns
      */
-    columnOrder: string[];
+    columnOrder?: string[] | null;
     /**
      * Instances of rows in expanded state
      */
@@ -637,15 +637,15 @@ export interface DataTableStateEvent {
     /**
      * Instances of rows in expanded state
      */
-    expandedRowGroups: any[] | DataTableExpandedRows;
+    expandedRowGroups?: any[] | DataTableExpandedRows;
     /**
      * Selected rows
      */
-    selection: any[] | any;
+    selection?: T[] | T | undefined | null;
     /**
      * Keys of selected rows
      */
-    selectionKeys: any[];
+    selectionKeys: any[] | null;
 }
 
 /**
@@ -884,11 +884,11 @@ export interface DataTableProps<T = any> {
     /**
      * An array of objects to display.
      */
-    value?: any[] | undefined | null;
+    value?: T[] | undefined | null;
     /**
      * Name of the field that uniquely identifies the a record in the data.
      */
-    dataKey?: string | ((item: any) => string) | undefined;
+    dataKey?: keyof T | ((item: NoInfer<T>) => string) | undefined;
     /**
      * Number of rows to display per page.
      * @defaultValue 0
@@ -972,7 +972,7 @@ export interface DataTableProps<T = any> {
     /**
      * Property name or a getter function of a row data used for sorting by default
      */
-    sortField?: string | ((item: any) => string) | undefined;
+    sortField?: keyof T | ((item: NoInfer<T>) => string) | undefined;
     /**
      * Order to sort the data by default.
      */
@@ -1013,7 +1013,7 @@ export interface DataTableProps<T = any> {
     /**
      * 	An array of fields as string or function to use in global filtering.
      */
-    globalFilterFields?: (string | ((data: T) => string))[] | undefined;
+    globalFilterFields?: (keyof T | ((data: NoInfer<T>) => string))[] | undefined;
     /**
      * Locale to use in filtering. The default locale is the host environment's current locale.
      */
@@ -1021,7 +1021,7 @@ export interface DataTableProps<T = any> {
     /**
      * Selected row in single mode or an array of values in multiple mode.
      */
-    selection?: T[] | T | undefined;
+    selection?: NoInfer<T>[] | NoInfer<T> | undefined;
     /**
      * Specifies the selection mode.
      */
@@ -1045,7 +1045,7 @@ export interface DataTableProps<T = any> {
     /**
      * Selected row instance with the ContextMenu.
      */
-    contextMenuSelection?: any | any[] | undefined;
+    contextMenuSelection?: NoInfer<T> | NoInfer<T>[] | undefined;
     /**
      * Whether all data is selected.
      */
@@ -1087,7 +1087,7 @@ export interface DataTableProps<T = any> {
     /**
      * A collection of row data display as expanded.
      */
-    expandedRows?: any[] | DataTableExpandedRows | null;
+    expandedRows?: NoInfer<T>[] | DataTableExpandedRows | null;
     /**
      * Icon of the row toggler to display the row as expanded.
      */
@@ -1103,7 +1103,7 @@ export interface DataTableProps<T = any> {
     /**
      * One or more field names to use in row grouping.
      */
-    groupRowsBy?: ((field: string) => object) | string[] | string | undefined;
+    groupRowsBy?: ((field: NoInfer<T>) => object) | keyof T[] | keyof T | undefined;
     /**
      * Whether the row groups can be expandable.
      * @defaultValue false
@@ -1112,7 +1112,7 @@ export interface DataTableProps<T = any> {
     /**
      * An array of group field values whose groups would be rendered as expanded.
      */
-    expandedRowGroups?: any[] | DataTableExpandedRows;
+    expandedRowGroups?: NoInfer<T>[] | DataTableExpandedRows;
     /**
      * Defines where a stateful table keeps its state.
      * @defaultValue session
@@ -1129,18 +1129,18 @@ export interface DataTableProps<T = any> {
     /**
      * A collection of rows to represent the current editing data in row edit mode.
      */
-    editingRows?: T[] | DataTableEditingRows;
+    editingRows?: NoInfer<T>[] | DataTableEditingRows;
     /**
      * A function that takes the row data as a parameter and returns a string to apply a particular class for the row.
      * The return value is added to the row's :classes array (see Vue.js class bindings).
      */
-    rowClass?: (data: T) => string | object | undefined;
+    rowClass?: (data: NoInfer<T>) => string | object | undefined;
     /**
      * A function that takes the row data as a parameter and returns the inline style object for the corresponding row.
      * The function may also return an array of style objects which will be merged.
      * The return value of this function is directly applied as a Vue.js style-binding on the table row.
      */
-    rowStyle?: (data: T) => object | object[] | undefined;
+    rowStyle?: (data: NoInfer<T>) => object | object[] | undefined;
     /**
      * When specified, enables horizontal and/or vertical scrolling.
      * @defaultValue false
@@ -1158,7 +1158,7 @@ export interface DataTableProps<T = any> {
     /**
      * Items of the frozen part in scrollable DataTable.
      */
-    frozenValue?: any[] | undefined | null;
+    frozenValue?: NoInfer<T>[] | undefined | null;
     /**
      * The breakpoint to define the maximum width boundary when using stack responsive layout.
      * @defaultValue 960px
@@ -1370,6 +1370,10 @@ export interface DataTableSlots<T = any> {
          * Total number of pages
          */
         pageCount?: number;
+        /**
+         * Direct page links
+         */
+        pageLinks?: number;
         /**
          * Total records
          */
@@ -1398,6 +1402,10 @@ export interface DataTableSlots<T = any> {
          * Row change function.
          */
         rowChangeCallback: (value: number) => void;
+        /**
+         * Page change function.
+         */
+        changePageCallback: (value: number) => void;
     }): VNode[];
     /**
      * Custom paginator start template.
@@ -1656,12 +1664,12 @@ export interface DataTableEmitsOptions<T = any> {
      * Invoked when a stateful table saves the state.
      * @param {DataTableStateEvent} event - Custom state event.
      */
-    'state-restore'(event: DataTableStateEvent): void;
+    'state-restore'(event: DataTableStateEvent<T>): void;
     /**
      * Invoked when a stateful table restores the state.
      * @param {DataTableStateEvent} event - Custom state event.
      */
-    'state-save'(event: DataTableStateEvent): void;
+    'state-save'(event: DataTableStateEvent<T>): void;
 }
 
 export declare type DataTableEmits = EmitFn<DataTableEmitsOptions>;