primevue-mirror/components/lib/datatable/DataTable.d.ts

1635 lines
44 KiB
TypeScript
Raw Normal View History

2023-02-28 08:29:30 +00:00
/**
*
* DataTable displays data in tabular format.
*
2023-02-28 10:57:39 +00:00
* [Live Demo](https://www.primevue.org/datatable/)
2023-02-28 08:29:30 +00:00
*
* @module datatable
*
*/
2023-08-02 14:07:22 +00:00
import { InputHTMLAttributes, TableHTMLAttributes, TransitionProps, VNode } from 'vue';
2023-07-06 11:17:08 +00:00
import { ComponentHooks } from '../basecomponent';
import { ButtonProps } from '../button';
2023-06-02 11:17:23 +00:00
import { ColumnPassThroughOptionType } from '../column';
import { ColumnGroupPassThroughOptionType } from '../columngroup';
2023-05-08 14:08:06 +00:00
import { PaginatorPassThroughOptionType } from '../paginator';
2023-09-05 08:50:46 +00:00
import { PassThroughOptions } from '../passthrough';
2023-06-02 11:17:23 +00:00
import { RowPassThroughOptionType } from '../row';
import { ClassComponent, DesignToken, GlobalComponentConstructor, HintedString, Nullable, PassThrough } from '../ts-helpers';
2023-05-08 14:08:06 +00:00
import { VirtualScrollerPassThroughOptionType, VirtualScrollerProps } from '../virtualscroller';
export declare type DataTablePassThroughOptionType = DataTablePassThroughAttributes | ((options: DataTablePassThroughMethodOptions) => DataTablePassThroughAttributes | string) | string | null | undefined;
2023-05-08 14:08:06 +00:00
2023-08-02 14:07:22 +00:00
export declare type DataTablePassThroughTransitionType = TransitionProps | ((options: DataTablePassThroughMethodOptions) => TransitionProps) | undefined;
2023-05-08 14:08:06 +00:00
/**
* Custom passthrough(pt) option method.
*/
export interface DataTablePassThroughMethodOptions {
/**
* Defines instance.
*/
2023-07-06 12:01:33 +00:00
instance: any;
/**
* Defines valid properties.
*/
2023-05-08 14:08:06 +00:00
props: DataTableProps;
/**
* Defines current inline state.
*/
2023-05-08 14:08:06 +00:00
state: DataTableState;
/**
* Defines current options.
*/
context: DataTableContext;
/**
* Defines valid attributes.
*/
attrs: any;
/**
* Defines parent options.
*/
parent: any;
2023-09-05 08:50:46 +00:00
/**
* Defines passthrough(pt) options in global config.
*/
global: object | undefined;
2023-05-08 14:08:06 +00:00
}
2022-09-06 12:03:37 +00:00
/**
* Custom shared passthrough(pt) option method.
*/
export interface DataTableSharedPassThroughMethodOptions {
/**
* Defines valid properties.
*/
props: DataTableProps;
/**
* Defines current inline state.
*/
state: DataTableState;
}
2023-02-28 12:10:08 +00:00
/**
* Custom datatable export metadata.
*/
2022-09-06 12:03:37 +00:00
export interface DataTableExportFunctionOptions {
/**
* Row data
*/
data: any;
/**
* Column Field
*/
field: string;
}
2023-02-28 12:10:08 +00:00
/**
* Custom datatable filter metadata.
*/
2022-09-06 12:03:37 +00:00
export interface DataTableFilterMetaData {
/**
* Filter value
*/
value: any;
/**
* Filter match mode
*/
matchMode: HintedString<'startsWith' | 'contains' | 'notContains' | 'endsWith' | 'equals' | 'notEquals' | 'in' | 'lt' | 'lte' | 'gt' | 'gte' | 'between' | 'dateIs' | 'dateIsNot' | 'dateBefore' | 'dateAfter'> | undefined;
2022-09-06 12:03:37 +00:00
}
2023-02-28 12:10:08 +00:00
/**
* Custom datatable operator filter metadata.
*/
2022-09-06 12:03:37 +00:00
export interface DataTableOperatorFilterMetaData {
/**
* Filter operator
*/
operator: string;
/**
* Array of filter meta datas.
*/
constraints: DataTableFilterMetaData[];
}
2023-02-28 12:10:08 +00:00
/**
* Custom datatable filter metadata.
*/
2022-09-06 12:03:37 +00:00
export interface DataTableFilterMeta {
/**
2023-02-28 12:10:08 +00:00
* Extra options
2022-09-06 12:03:37 +00:00
*/
[key: string]: string | DataTableFilterMetaData | DataTableOperatorFilterMetaData;
}
2023-02-28 12:10:08 +00:00
/**
* Custom datatable sort meta.
*/
2022-09-06 12:03:37 +00:00
export interface DataTableSortMeta {
/**
* Column field
*/
field: string;
/**
* Column sort order
*/
2023-02-28 12:10:08 +00:00
order: 1 | 0 | -1 | undefined | null;
2022-09-06 12:03:37 +00:00
}
2023-02-28 12:10:08 +00:00
/**
* Custom datatable expanded rows.
*/
2022-09-06 12:03:37 +00:00
export interface DataTableExpandedRows {
[key: string]: boolean;
}
2023-02-28 12:10:08 +00:00
/**
* Custom datatable editing rows.
*/
2022-09-06 12:03:37 +00:00
export interface DataTableEditingRows {
[key: string]: boolean;
}
2023-02-28 12:10:08 +00:00
/**
* Custom datatable export csv metadata.
*/
2022-09-06 12:03:37 +00:00
export interface DataTableExportCSVOptions {
/**
* Whether to export only selection data.
*/
selectionOnly: boolean;
}
/**
* Custom datatable filter inline button props options.
*/
export interface DataTableFilterButtonInlinePropsOptions {
/**
* Apply button props
*/
clear: ButtonProps | undefined;
}
/**
* Custom datatable filter popover button props options.
*/
export interface DataTableFilterButtonPopoverPropsOptions {
/**
* Add rule button props
*/
addRule: ButtonProps | undefined;
/**
* Remove rule button props
*/
removeRule: ButtonProps | undefined;
/**
* Apply button props
*/
apply: ButtonProps | undefined;
/**
* Apply button props
*/
clear: ButtonProps | undefined;
}
/**
* Custom datatable filter buttons' props options.
*/
export interface DataTableFilterButtonPropsOptions {
/**
* Filter button props
*/
filter: ButtonProps | undefined;
/**
* Inline filter buttons' options
*/
inline: DataTableFilterButtonInlinePropsOptions | undefined;
/**
* Popover filter buttons' options
*/
popover: DataTableFilterButtonPopoverPropsOptions | undefined;
}
/**
* Custom datatable edit buttons' props options.
*/
export interface DataTableEditButtonPropsOptions {
/**
* Init button props
*/
init: ButtonProps | undefined;
/**
* Save button props
*/
save: ButtonProps | undefined;
/**
* Cancel button props
*/
cancel: ButtonProps | undefined;
}
2023-02-28 08:29:30 +00:00
/**
2023-03-09 12:02:47 +00:00
* Custom sort event.
2023-03-06 10:59:56 +00:00
* @see {@link DataTableEmits.sort}
2023-02-28 08:29:30 +00:00
*/
2022-09-06 12:03:37 +00:00
export interface DataTableSortEvent {
/**
* Browser event.
*/
originalEvent: Event;
/**
* Index of first record
*/
first: number;
/**
* Number of rows to display in new page
*/
rows: number;
/**
* Field to sort against
*/
2023-02-28 14:07:58 +00:00
sortField: string | ((item: any) => string) | undefined;
2022-09-06 12:03:37 +00:00
/**
* Sort order as integer
*/
2023-02-28 12:10:08 +00:00
sortOrder: 1 | 0 | -1 | undefined | null;
2022-09-06 12:03:37 +00:00
/**
* MultiSort metadata
*/
2023-02-28 14:07:58 +00:00
multiSortMeta: DataTableSortMeta[] | undefined;
2022-09-06 12:03:37 +00:00
/**
* Collection of active filters
* @see DataTableFilterMeta
*/
filters: DataTableFilterMeta;
/**
* Match modes per field
*/
filterMatchModes: HintedString<'startsWith' | 'contains' | 'notContains' | 'endsWith' | 'equals' | 'notEquals' | 'in' | 'lt' | 'lte' | 'gt' | 'gte' | 'between' | 'dateIs' | 'dateIsNot' | 'dateBefore' | 'dateAfter'> | undefined;
2022-09-06 12:03:37 +00:00
}
/**
2023-02-28 08:29:30 +00:00
* Custom pagination event.
2023-03-06 10:59:56 +00:00
* @see {@link DataTableEmits.page}
2022-09-06 12:03:37 +00:00
* @extends DataTableSortEvent
*/
export interface DataTablePageEvent extends DataTableSortEvent {
/**
* New page number
*/
page: number;
/**
* Total page count
*/
pageCount: number;
}
/**
2023-03-09 12:02:47 +00:00
* Custom filter event.
* @see {@link DataTableEmits.filter}
2022-09-06 12:03:37 +00:00
* @extends DataTableSortEvent
*/
2022-09-14 11:26:01 +00:00
export interface DataTableFilterEvent extends DataTableSortEvent {
2022-09-06 12:03:37 +00:00
/**
* Filtered collection (non-lazy only)
*/
filteredValue: any;
}
2023-02-28 12:10:08 +00:00
/**
* Custom row click event.
2023-03-06 10:59:56 +00:00
* @see {@link DataTableEmits['row-click']}
2023-02-28 12:10:08 +00:00
*/
2022-09-06 12:03:37 +00:00
export interface DataTableRowClickEvent {
/**
* Browser event.
*/
originalEvent: Event;
/**
* Selected row data.
*/
data: any;
/**
* Row index.
*/
index: number;
}
/**
2023-02-28 12:10:08 +00:00
* Custom row double click event.
2023-03-06 10:59:56 +00:00
* @see {@link DataTableEmits['row-dblclick']]}
2022-09-06 12:03:37 +00:00
* @extends DataTableRowClickEvent
*/
2022-09-14 11:26:01 +00:00
export interface DataTableRowDoubleClickEvent extends DataTableRowClickEvent {}
2022-09-06 12:03:37 +00:00
/**
2023-03-09 12:02:47 +00:00
* Custom row context menu event.
2023-03-06 10:59:56 +00:00
* @see {@link DataTableEmits['row-contextmenu']}
2022-09-06 12:03:37 +00:00
* @extends DataTableRowClickEvent
*/
2022-09-14 11:26:01 +00:00
export interface DataTableRowContextMenuEvent extends DataTableRowClickEvent {}
2022-09-06 12:03:37 +00:00
2023-02-28 12:10:08 +00:00
/**
* Custom row select event.
2023-03-06 10:59:56 +00:00
* @see {@link DataTableEmits['row-select']}
2023-02-28 12:10:08 +00:00
*/
2022-09-06 12:03:37 +00:00
export interface DataTableRowSelectEvent {
/**
* Browser event
*/
originalEvent: Event;
/**
* Selected row data
*/
data: any;
/**
* Row index
*/
index: number;
/**
* Type of the selection, valid values are 'row', 'radio' or 'checkbox'.
*/
type: string;
}
/**
2023-02-28 12:10:08 +00:00
* Custom row unselect event.
2023-03-06 10:59:56 +00:00
* @see {@link DataTableEmits['row-unselect']}
2022-09-06 12:03:37 +00:00
* @extends DataTableRowSelectEvent
*/
2022-09-14 11:26:01 +00:00
export interface DataTableRowUnselectEvent extends DataTableRowSelectEvent {}
2022-09-06 12:03:37 +00:00
2023-02-28 12:10:08 +00:00
/**
* Custom row select all event.
2023-03-06 10:59:56 +00:00
* @see {@link DataTableEmits['row-select-all']}
2023-02-28 12:10:08 +00:00
*/
2022-09-06 12:03:37 +00:00
export interface DataTableRowSelectAllEvent {
/**
* Browser event
*/
originalEvent: Event;
/**
* Selected dataset
*/
data: any;
}
2023-02-28 12:10:08 +00:00
/**
* Custom row unselect all event.
2023-03-06 10:59:56 +00:00
* @see {@link DataTableEmits['row-unselect-all']}
2023-02-28 12:10:08 +00:00
*/
2022-09-06 12:03:37 +00:00
export interface DataTableRowUnselectAllEvent {
/**
* Browser event
*/
originalEvent: Event;
}
2023-02-28 12:10:08 +00:00
/**
* Custom row select all change event.
2023-03-06 10:59:56 +00:00
* @see {@link DataTableEmits['select-all-change']}
2023-02-28 12:10:08 +00:00
*/
2022-09-06 12:03:37 +00:00
export interface DataTableSelectAllChangeEvent {
/**
* Browser event
*/
originalEvent: Event;
/**
* Whether all data is selected.
*/
checked: boolean;
}
2023-02-28 12:10:08 +00:00
/**
2023-03-09 12:02:47 +00:00
* Custom column resize end event.
2023-03-06 10:59:56 +00:00
* @see {@link DataTableEmits['column-resize-end']}
2023-02-28 12:10:08 +00:00
*/
2022-09-06 12:03:37 +00:00
export interface DataTableColumnResizeEndEvent {
/**
* DOM element of the resized column.
*/
element: HTMLElement;
/**
* Change in column width
*/
delta: any;
}
2023-02-28 12:10:08 +00:00
/**
* Custom row column reorder event.
2023-03-06 10:59:56 +00:00
* @see {@link DataTableEmits['column-reorder']}
2023-02-28 12:10:08 +00:00
*/
2022-09-06 12:03:37 +00:00
export interface DataTableColumnReorderEvent {
/**
* Browser event
*/
originalEvent: Event;
/**
* Index of the dragged column
*/
dragIndex: number;
/**
* Index of the dropped column
*/
dropIndex: number;
}
2023-02-28 12:10:08 +00:00
/**
* Custom row reorder event.
2023-03-06 10:59:56 +00:00
* @see {@link DataTableEmits['row-reorder']}
2023-02-28 12:10:08 +00:00
*/
2022-09-06 12:03:37 +00:00
export interface DataTableRowReorderEvent {
/**
* Browser event
*/
originalEvent: Event;
/**
* Index of the dragged row
*/
dragIndex: number;
/**
* Index of the dropped row
*/
dropIndex: number;
/**
* Reordered value
*/
value: any[];
}
2023-02-28 12:10:08 +00:00
/**
* Custom row expand event.
2023-03-06 10:59:56 +00:00
* @see {@link DataTableEmits['row-expand']}
2023-02-28 12:10:08 +00:00
*/
2022-09-06 12:03:37 +00:00
export interface DataTableRowExpandEvent {
/**
* Browser event
*/
originalEvent: Event;
/**
* Expanded row data
*/
data: any;
2022-09-06 12:03:37 +00:00
}
/**
2023-02-28 12:10:08 +00:00
* Custom row collapse event.
2023-03-06 10:59:56 +00:00
* @see {@link DataTableEmits['row-expand']}
2022-09-06 12:03:37 +00:00
* @extends DataTableRowExpandEvent
*/
2022-09-14 11:26:01 +00:00
export interface DataTableRowCollapseEvent extends DataTableRowExpandEvent {}
2022-09-06 12:03:37 +00:00
2023-02-28 12:10:08 +00:00
/**
* Custom cell edit init event.
2023-03-06 10:59:56 +00:00
* @see {@link DataTableEmits['cell-edit-init']}
2023-02-28 12:10:08 +00:00
*/
2022-09-06 12:03:37 +00:00
export interface DataTableCellEditInitEvent {
/**
* Browser event
*/
originalEvent: Event;
/**
* Row data to edit.
*/
data: any;
/**
* Field name of the row data.
*/
field: string;
/**
* Index of the row data to edit.
*/
index: number;
}
/**
2023-02-28 12:10:08 +00:00
* Custom cell edit cancel event.
2023-03-06 10:59:56 +00:00
* @see {@link DataTableEmits['cell-edit-cancel']}
2022-09-06 12:03:37 +00:00
* @extends DataTableCellEditInitEvent
*/
2022-09-14 11:26:01 +00:00
export interface DataTableCellEditCancelEvent extends DataTableCellEditInitEvent {}
2022-09-06 12:03:37 +00:00
2023-02-28 12:10:08 +00:00
/**
* Custom cell edit complete event.
2023-03-06 10:59:56 +00:00
* @see {@link DataTableEmits['cell-edit-complete']}
2023-02-28 12:10:08 +00:00
*/
2022-09-06 12:03:37 +00:00
export interface DataTableCellEditCompleteEvent {
/**
* Browser event
*/
originalEvent: Event;
/**
* Row data to edit.
*/
data: any;
/**
* New row data after editing.
*/
newData: any;
/**
* Field value of row data to edit.
*/
value: any;
/**
* Field value of new row data after editing.
*/
newValue: any;
/**
* Field name of the row data.
*/
field: string;
/**
* Index of the row data to edit.
*/
index: number;
/**
* Type of completion such as 'enter', 'outside' or 'tab'.
*/
type: string;
}
2023-02-28 12:10:08 +00:00
/**
2023-03-09 12:02:47 +00:00
* Custom row edit init event.
2023-03-06 10:59:56 +00:00
* @see {@link DataTableEmits['row-edit-init']}
2023-02-28 12:10:08 +00:00
*/
2022-09-06 12:03:37 +00:00
export interface DataTableRowEditInitEvent {
/**
* Browser event
*/
originalEvent: Event;
/**
* Row data to edit.
*/
data: any;
/**
* New row data after editing.
*/
newData: any;
/**
* Field name of the row data.
*/
field: string;
/**
* Index of the row data to edit.
*/
index: number;
}
/**
2023-03-09 12:02:47 +00:00
* Custom row edit save event.
* @see {@link DataTableEmits['row-edit-save']}
2022-09-06 12:03:37 +00:00
* @extends DataTableRowEditInitEvent
*/
2022-09-14 11:26:01 +00:00
export interface DataTableRowEditSaveEvent extends DataTableRowEditInitEvent {}
2022-09-06 12:03:37 +00:00
/**
2023-02-28 12:10:08 +00:00
* Custom row edit cancel event.
2023-03-06 10:59:56 +00:00
* @see {@link DataTableEmits['row-edit-cancel']}
2022-09-06 12:03:37 +00:00
* @extends DataTableRowEditCancelEvent
*/
2022-09-14 11:26:01 +00:00
export interface DataTableRowEditCancelEvent extends DataTableRowEditInitEvent {}
2022-09-06 12:03:37 +00:00
2023-02-28 12:10:08 +00:00
/**
* Custom state event.
2023-03-06 10:59:56 +00:00
* @see {@link DataTableEmits['state-save']}
2023-02-28 12:10:08 +00:00
*/
2022-09-06 12:03:37 +00:00
export interface DataTableStateEvent {
/**
* Index of first record
*/
first: number;
/**
* Number of rows to display in new page
*/
rows: number;
/**
* Field to sort against
*/
sortField: string;
/**
* Sort order as integer
*/
2023-02-28 12:10:08 +00:00
sortOrder: 1 | 0 | -1 | undefined | null;
2022-09-06 12:03:37 +00:00
/**
* MultiSort metadata
*/
2023-02-28 14:07:58 +00:00
multiSortMeta: DataTableSortMeta[] | undefined;
2022-09-06 12:03:37 +00:00
/**
* Collection of active filters
*/
filters: DataTableFilterMeta;
/**
* Comma separated list of column widths
*/
columWidths: string[];
/**
* Order of the columns
*/
columnOrder: string[];
/**
* Instances of rows in expanded state
*/
expandedRows: any[] | DataTableExpandedRows;
/**
* Keys of rows in expanded state
*/
expandedRowKeys: any[];
/**
* Instances of rows in expanded state
*/
expandedRowGroups: any[] | DataTableExpandedRows;
/**
* Selected rows
*/
selection: any[] | any;
/**
* Keys of selected rows
*/
selectionKeys: any[];
}
2023-05-08 14:08:06 +00:00
/**
* Custom passthrough(pt) options.
* @see {@link DataTableProps.pt}
*/
export interface DataTablePassThroughOptions {
/**
2023-08-01 14:01:12 +00:00
* Used to pass attributes to the root's DOM element.
2023-05-08 14:08:06 +00:00
*/
root?: DataTablePassThroughOptionType;
/**
2024-05-02 09:58:00 +00:00
* Used to pass attributes to the overlay's DOM element.
2023-05-08 14:08:06 +00:00
*/
2024-05-02 09:58:00 +00:00
overlay?: DataTablePassThroughOptionType;
2023-05-08 14:08:06 +00:00
/**
2023-08-01 14:01:12 +00:00
* Used to pass attributes to the loading icon's DOM element.
2023-05-08 14:08:06 +00:00
*/
loadingIcon?: DataTablePassThroughOptionType;
/**
2023-08-01 14:01:12 +00:00
* Used to pass attributes to the header's DOM element.
2023-05-08 14:08:06 +00:00
*/
header?: DataTablePassThroughOptionType;
/**
2023-08-01 14:01:12 +00:00
* Used to pass attributes to the Paginator component.
2023-05-08 14:08:06 +00:00
* @see {@link PaginatorPassThroughOptionType}
*/
paginator?: PaginatorPassThroughOptionType<DataTableSharedPassThroughMethodOptions>;
2023-05-08 14:08:06 +00:00
/**
2024-05-02 09:58:00 +00:00
* Used to pass attributes to the table container's DOM element.
2023-05-08 14:08:06 +00:00
*/
2024-05-02 09:58:00 +00:00
tableContainer?: DataTablePassThroughOptionType;
2023-05-08 14:08:06 +00:00
/**
2023-08-01 14:01:12 +00:00
* Used to pass attributes to the VirtualScroller component.
2023-05-08 14:08:06 +00:00
* @see {@link VirtualScrollerPassThroughOptionType}
*/
virtualScroller?: VirtualScrollerPassThroughOptionType;
/**
2023-08-01 14:01:12 +00:00
* Used to pass attributes to the table's DOM element.
2023-05-08 14:08:06 +00:00
*/
table?: DataTablePassThroughOptionType;
/**
2023-08-01 14:01:12 +00:00
* Used to pass attributes to the virtual scroller spacer's DOM element.
2023-05-08 14:08:06 +00:00
*/
virtualScrollerSpacer?: DataTablePassThroughOptionType;
/**
2023-08-01 14:01:12 +00:00
* Used to pass attributes to the footer's DOM element.
2023-05-08 14:08:06 +00:00
*/
footer?: DataTablePassThroughOptionType;
/**
2023-08-01 14:01:12 +00:00
* Used to pass attributes to the thead's DOM element.
2023-05-08 14:08:06 +00:00
*/
thead?: DataTablePassThroughOptionType;
/**
2023-08-01 14:01:12 +00:00
* Used to pass attributes to the header row's DOM element.
2023-05-08 14:08:06 +00:00
*/
headerRow?: DataTablePassThroughOptionType;
/**
2023-08-01 14:01:12 +00:00
* Used to pass attributes to the tbody's DOM element.
2023-05-08 14:08:06 +00:00
*/
tbody?: DataTablePassThroughOptionType;
/**
2024-05-02 09:58:00 +00:00
* Used to pass attributes to the rowg roup header's DOM element.
2023-05-08 14:08:06 +00:00
*/
2023-06-05 13:49:36 +00:00
rowGroupHeader?: DataTablePassThroughOptionType;
2023-09-01 10:06:53 +00:00
/**
2024-05-02 09:58:00 +00:00
* Used to pass attributes to the row group header cell's DOM element.
2023-09-01 10:06:53 +00:00
*/
rowGroupHeaderCell?: DataTablePassThroughOptionType;
2023-05-08 14:08:06 +00:00
/**
2023-08-01 14:01:12 +00:00
* Used to pass attributes to the body row's DOM element.
2023-05-08 14:08:06 +00:00
*/
2023-06-02 11:10:18 +00:00
bodyRow?: DataTablePassThroughOptionType;
2023-05-08 14:08:06 +00:00
/**
2023-08-01 14:01:12 +00:00
* Used to pass attributes to the row expansion's DOM element.
2023-05-08 14:08:06 +00:00
*/
rowExpansion?: DataTablePassThroughOptionType;
2023-09-01 10:06:53 +00:00
/**
* Used to pass attributes to the row expansion cell's DOM element.
*/
rowExpansionCell?: DataTablePassThroughOptionType;
2023-05-08 14:08:06 +00:00
/**
2024-05-02 09:58:00 +00:00
* Used to pass attributes to the row group footer's DOM element.
2023-05-08 14:08:06 +00:00
*/
2023-06-05 13:49:36 +00:00
rowGroupFooter?: DataTablePassThroughOptionType;
2023-09-01 10:06:53 +00:00
/**
2024-05-02 09:58:00 +00:00
* Used to pass attributes to the row group footer cell's DOM element.
2023-09-01 10:06:53 +00:00
*/
rowGroupFooterCell?: DataTablePassThroughOptionType;
2023-05-08 14:08:06 +00:00
/**
2023-08-01 14:01:12 +00:00
* Used to pass attributes to the empty message's DOM element.
2023-05-08 14:08:06 +00:00
*/
emptyMessage?: DataTablePassThroughOptionType;
2023-09-01 10:06:53 +00:00
/**
* Used to pass attributes to the empty message cell's DOM element.
*/
emptyMessageCell?: DataTablePassThroughOptionType;
2023-05-08 14:08:06 +00:00
/**
2023-08-01 14:01:12 +00:00
* Used to pass attributes to the tfoot's DOM element.
2023-05-08 14:08:06 +00:00
*/
tfoot?: DataTablePassThroughOptionType;
/**
2023-08-02 12:00:36 +00:00
* Used to pass attributes to the footer row's DOM element.
2023-05-08 14:08:06 +00:00
*/
footerRow?: DataTablePassThroughOptionType;
/**
2024-05-02 09:58:00 +00:00
* Used to pass attributes to the column resize indicator's DOM element.
2023-05-08 14:08:06 +00:00
*/
2024-05-02 09:58:00 +00:00
columnResizeIndicator?: DataTablePassThroughOptionType;
2023-05-08 14:08:06 +00:00
/**
2024-05-02 09:58:00 +00:00
* Used to pass attributes to the row reorder indicator up's DOM element.
2023-05-08 14:08:06 +00:00
*/
2024-05-02 09:58:00 +00:00
rowReorderIndicatorUp?: DataTablePassThroughOptionType;
2023-05-08 14:08:06 +00:00
/**
2024-05-02 09:58:00 +00:00
* Used to pass attributes to the row reorder indicator down's DOM element.
2023-05-08 14:08:06 +00:00
*/
2024-05-02 09:58:00 +00:00
rowReorderIndicatorDown?: DataTablePassThroughOptionType;
2023-06-02 11:17:23 +00:00
/**
2023-08-01 14:01:12 +00:00
* Used to pass attributes to the ColumnGroup helper components.
2023-06-02 11:17:23 +00:00
*/
columnGroup?: ColumnGroupPassThroughOptionType;
/**
2023-08-01 14:01:12 +00:00
* Used to pass attributes to the Row helper components.
2023-06-02 11:17:23 +00:00
*/
row?: RowPassThroughOptionType;
/**
2023-08-01 14:01:12 +00:00
* Used to pass attributes to the Column helper components.
2023-06-02 11:17:23 +00:00
*/
column?: ColumnPassThroughOptionType;
2023-07-06 11:09:01 +00:00
/**
2023-11-07 06:16:39 +00:00
* Used to manage all lifecycle hooks.
2023-07-06 11:09:01 +00:00
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;
2023-08-02 12:00:36 +00:00
/**
* Used to control Vue Transition API.
*/
2023-08-02 14:07:22 +00:00
transition?: DataTablePassThroughTransitionType;
2023-05-08 14:08:06 +00:00
}
/**
* Custom passthrough attributes for each DOM elements
*/
export interface DataTablePassThroughAttributes {
[key: string]: any;
}
/**
* Defines current inline state in DataTable component.
*/
export interface DataTableState {
/**
* Current index of first record as a number.
*/
d_first: number;
/**
* Current number of rows to display in new page as a number.
*/
d_rows: number;
/**
* Current sort field.
*/
d_sortField: string | ((item: any) => string) | undefined;
/**
* Current order to sort the data by default.
*/
d_sortOrder: number;
/**
* Current sortmeta objects to sort the data.
*/
d_multiSortMeta: DataTableSortMeta[];
/**
* Current group sortmeta objects to sort the data.
*/
d_groupRowsSortMeta: DataTableSortMeta;
/**
* Current keys of selected rows.
*/
d_selectionKeys: any[];
/**
* Current keys of rows in expanded state.
*/
d_expandedRowKeys: any[];
/**
* Current order of the columns.
*/
d_columnOrder: string[];
/**
* Current keys of editing rows.
*/
d_editingRowKeys: any;
/**
* Current editing meta data.
*/
d_editingMeta: object;
/**
* Current filters object.
*/
d_filters: DataTableFilterMeta;
/**
* Current editing as a boolean.
* @defaultValue false
*/
d_editing: boolean;
}
/**
* Defines current options in DataTable component.
*/
export interface DataTableContext {
/**
* Current index of the row.
*/
index: number;
/**
* Current selectable state of row as a boolean.
* @defaultValue false
*/
selectable: boolean;
/**
* Current selected state of row as a boolean.
* @defaultValue false
*/
selected: boolean;
/**
* Current stripedRows state of row as a boolean.
* @defaultValue false
*/
stripedRows: boolean;
}
2023-02-28 08:29:30 +00:00
/**
2023-02-28 14:47:48 +00:00
* Defines valid properties in DataTable component.
2023-02-28 08:29:30 +00:00
*/
2022-09-06 12:03:37 +00:00
export interface DataTableProps {
/**
* An array of objects to display.
*/
2023-02-28 12:10:08 +00:00
value?: any[] | undefined | null;
2022-09-06 12:03:37 +00:00
/**
* Name of the field that uniquely identifies the a record in the data.
*/
2023-02-28 14:07:58 +00:00
dataKey?: string | ((item: any) => string) | undefined;
2022-09-06 12:03:37 +00:00
/**
* Number of rows to display per page.
2023-02-28 12:10:08 +00:00
* @defaultValue 0
2022-09-06 12:03:37 +00:00
*/
rows?: number | undefined;
/**
* Index of the first row to be displayed.
2023-02-28 12:10:08 +00:00
* @defaultValue 0
2022-09-06 12:03:37 +00:00
*/
first?: number | undefined;
/**
* Number of total records, defaults to length of value when not defined.
2023-02-28 12:10:08 +00:00
* @defaultValue 0
2022-09-06 12:03:37 +00:00
*/
totalRecords?: number | undefined;
/**
* When specified as true, enables the pagination.
2023-02-28 12:10:08 +00:00
* @defaultValue false
2022-09-06 12:03:37 +00:00
*/
paginator?: boolean | undefined;
/**
* Position of the paginator, options are 'top','bottom' or 'both'.
2023-02-28 12:10:08 +00:00
* @defaultValue bottom
2022-09-06 12:03:37 +00:00
*/
2023-02-28 12:10:08 +00:00
paginatorPosition?: 'top' | 'bottom' | 'both' | undefined;
2022-09-06 12:03:37 +00:00
/**
* Whether to show it even there is only one page.
2023-02-28 12:10:08 +00:00
* @defaultValue true
2022-09-06 12:03:37 +00:00
*/
alwaysShowPaginator?: boolean | undefined;
/**
2023-02-28 12:10:08 +00:00
* Template of the paginator. It can be customized using the template property using the predefined keys.
2022-09-06 12:03:37 +00:00
*
* - FirstPageLink
* - PrevPageLink
* - PageLinks
* - NextPageLink
* - LastPageLink
* - RowsPerPageDropdown
* - JumpToPageDropdown
* - JumpToPageInput
* - CurrentPageReport
* @defaultValue FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown
2022-09-06 12:03:37 +00:00
*/
2022-12-08 11:04:25 +00:00
paginatorTemplate?: any | string;
2022-09-06 12:03:37 +00:00
/**
* Number of page links to display.
2023-02-28 12:10:08 +00:00
* @defaultValue 5
2022-09-06 12:03:37 +00:00
*/
pageLinkSize?: number | undefined;
/**
* Array of integer values to display inside rows per page dropdown.
*/
2023-02-28 14:07:58 +00:00
rowsPerPageOptions?: number[] | undefined;
2022-09-06 12:03:37 +00:00
/**
2023-02-28 14:07:58 +00:00
* Template of the current page report element. It displays information about the pagination state. Available placeholders are the following;
2022-09-06 12:03:37 +00:00
*
* - {currentPage}
* - {totalPages}
* - {rows}
* - {first}
* - {last}
* - {totalRecords}
2023-03-08 11:02:08 +00:00
* @defaultValue '({currentPage} of {totalPages})'
2022-09-06 12:03:37 +00:00
*/
currentPageReportTemplate?: string | undefined;
/**
* Defines if data is loaded and interacted with in lazy manner.
2023-02-28 12:10:08 +00:00
* @defaultValue false
2022-09-06 12:03:37 +00:00
*/
lazy?: boolean | undefined;
/**
* Displays a loader to indicate data load is in progress.
2023-02-28 12:10:08 +00:00
* @defaultValue false
2022-09-06 12:03:37 +00:00
*/
loading?: boolean | undefined;
/**
* The icon to show while indicating data load is in progress.
* @deprecated since v3.27.0. Use 'loadingicon' slot.
2022-09-06 12:03:37 +00:00
*/
loadingIcon?: string | undefined;
/**
* Property name or a getter function of a row data used for sorting by default
*/
2023-02-28 14:07:58 +00:00
sortField?: string | ((item: any) => string) | undefined;
2022-09-06 12:03:37 +00:00
/**
* Order to sort the data by default.
*/
sortOrder?: number | undefined;
/**
* Determines how null values are sorted.
* @defaultValue 1
*/
nullSortOrder?: number;
2022-09-06 12:03:37 +00:00
/**
* Default sort order of an unsorted column.
2023-02-28 12:10:08 +00:00
* @defaultValue 1
2022-09-06 12:03:37 +00:00
*/
defaultSortOrder?: number | undefined;
/**
2023-02-28 14:07:58 +00:00
* An array of SortMeta objects to sort the data.
2022-09-06 12:03:37 +00:00
*/
2023-02-28 14:07:58 +00:00
multiSortMeta?: DataTableSortMeta[] | undefined;
2022-09-06 12:03:37 +00:00
/**
* Defines whether sorting works on single column or on multiple columns.
* @defaultValue single
2022-09-06 12:03:37 +00:00
*/
2023-02-28 12:10:08 +00:00
sortMode?: 'single' | 'multiple' | undefined;
2022-09-06 12:03:37 +00:00
/**
* When enabled, columns can have an un-sorted state.
2023-02-28 12:10:08 +00:00
* @defaultValue false
2022-09-06 12:03:37 +00:00
*/
removableSort?: boolean | undefined;
/**
* Filters object with key-value pairs to define the filters.
* @see DataTableFilterMeta
*/
2023-02-28 14:07:58 +00:00
filters?: DataTableFilterMeta;
2022-09-06 12:03:37 +00:00
/**
2023-02-28 14:07:58 +00:00
* Layout of the filter elements.
2022-09-06 12:03:37 +00:00
*/
2023-02-28 14:07:58 +00:00
filterDisplay?: 'menu' | 'row' | undefined;
2022-09-06 12:03:37 +00:00
/**
* An array of fields as string or function to use in global filtering.
2022-09-06 12:03:37 +00:00
*/
globalFilterFields?: (string | ((data: any) => string))[] | undefined;
2022-09-06 12:03:37 +00:00
/**
* Locale to use in filtering. The default locale is the host environment's current locale.
*/
filterLocale?: string | undefined;
/**
* Selected row in single mode or an array of values in multiple mode.
*/
selection?: any[] | any | undefined;
/**
2023-02-28 14:07:58 +00:00
* Specifies the selection mode.
2022-09-06 12:03:37 +00:00
*/
2023-02-28 12:10:08 +00:00
selectionMode?: 'single' | 'multiple' | undefined;
2022-09-06 12:03:37 +00:00
/**
2023-02-28 14:07:58 +00:00
* Algorithm to define if a row is selected.
* @defaultValue deepEquals
2022-09-06 12:03:37 +00:00
*/
2023-02-28 12:10:08 +00:00
compareSelectionBy?: 'equals' | 'deepEquals' | undefined;
2022-09-06 12:03:37 +00:00
/**
* Defines whether metaKey is requred or not for the selection. When true metaKey needs to be pressed to select or unselect an item and
* when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically.
2023-12-20 10:35:18 +00:00
* @defaultValue false
2022-09-06 12:03:37 +00:00
*/
metaKeySelection?: boolean | undefined;
/**
* Enables context menu integration.
2023-02-28 12:10:08 +00:00
* @defaultValue false
2022-09-06 12:03:37 +00:00
*/
contextMenu?: boolean | undefined;
/**
* Selected row instance with the ContextMenu.
*/
2023-02-28 14:07:58 +00:00
contextMenuSelection?: any | any[] | undefined;
2022-09-06 12:03:37 +00:00
/**
* Whether all data is selected.
*/
selectAll?: Nullable<boolean>;
/**
* When enabled, background of the rows change on hover.
2023-02-28 12:10:08 +00:00
* @defaultValue false
2022-09-06 12:03:37 +00:00
*/
rowHover?: boolean | undefined;
/**
* Character to use as the csv separator.
* @defaultValue ,
2022-09-06 12:03:37 +00:00
*/
csvSeparator?: string | undefined;
/**
* Name of the exported file.
* @defaultValue download
2022-09-06 12:03:37 +00:00
*/
exportFilename?: string | undefined;
/**
* Custom function to export data.
*/
2023-09-01 13:27:43 +00:00
exportFunction?: (options: DataTableExportFunctionOptions) => any;
2022-09-06 12:03:37 +00:00
/**
* When enabled, columns can be resized using drag and drop.
2023-02-28 12:10:08 +00:00
* @defaultValue false
2022-09-06 12:03:37 +00:00
*/
resizableColumns?: boolean | undefined;
/**
2023-02-28 14:07:58 +00:00
* Defines whether the overall table width.
* @defaultValue fit
2022-09-06 12:03:37 +00:00
*/
2023-02-28 12:10:08 +00:00
columnResizeMode?: 'fit' | 'expand' | undefined;
2022-09-06 12:03:37 +00:00
/**
* When enabled, columns can be reordered using drag and drop.
2023-02-28 12:10:08 +00:00
* @defaultValue false
2022-09-06 12:03:37 +00:00
*/
reorderableColumns?: boolean | undefined;
/**
* A collection of row data display as expanded.
*/
2023-02-28 12:10:08 +00:00
expandedRows?: any[] | DataTableExpandedRows | null;
2022-09-06 12:03:37 +00:00
/**
* Icon of the row toggler to display the row as expanded.
* @deprecated since v3.27.0. Use 'rowtogglericon' slot.
2022-09-06 12:03:37 +00:00
*/
expandedRowIcon?: string | undefined;
/**
* Icon of the row toggler to display the row as collapsed.
* @deprecated since v3.27.0. Use 'rowtogglericon' slot.
2022-09-06 12:03:37 +00:00
*/
collapsedRowIcon?: string | undefined;
/**
2023-02-28 14:07:58 +00:00
* Defines the row group mode.
2022-09-06 12:03:37 +00:00
*/
2023-02-28 14:07:58 +00:00
rowGroupMode?: 'subheader' | 'rowspan' | undefined;
2022-09-06 12:03:37 +00:00
/**
* One or more field names to use in row grouping.
*/
2022-12-28 06:17:31 +00:00
groupRowsBy?: ((field: string) => object) | string[] | string | undefined;
2022-09-06 12:03:37 +00:00
/**
* Whether the row groups can be expandable.
2023-02-28 12:10:08 +00:00
* @defaultValue false
2022-09-06 12:03:37 +00:00
*/
expandableRowGroups?: boolean | undefined;
/**
* An array of group field values whose groups would be rendered as expanded.
*/
expandedRowGroups?: any[] | DataTableExpandedRows;
/**
2023-02-28 14:07:58 +00:00
* Defines where a stateful table keeps its state.
* @defaultValue session
2022-09-06 12:03:37 +00:00
*/
2023-02-28 12:10:08 +00:00
stateStorage?: 'session' | 'local' | undefined;
2022-09-06 12:03:37 +00:00
/**
* Unique identifier of a stateful table to use in state storage.
*/
2023-02-28 14:07:58 +00:00
stateKey?: string | undefined;
2022-09-06 12:03:37 +00:00
/**
2023-03-03 08:18:55 +00:00
* Defines the incell editing mode.
2022-09-06 12:03:37 +00:00
*/
2023-02-28 14:07:58 +00:00
editMode?: 'cell' | 'row' | undefined;
2022-09-06 12:03:37 +00:00
/**
* A collection of rows to represent the current editing data in row edit mode.
*/
2023-02-28 14:07:58 +00:00
editingRows?: any[] | DataTableEditingRows;
2022-09-06 12:03:37 +00:00
/**
* A function that takes the row data as a parameter and returns a string to apply a particular class for the row.
*/
2024-03-14 11:40:37 +00:00
rowClass?: (data: any) => object | undefined;
2022-09-06 12:03:37 +00:00
/**
* A function that takes the row data as a parameter and returns the inline style for the corresponding row.
*/
rowStyle?: (data: any) => object | undefined;
2022-09-06 12:03:37 +00:00
/**
* When specified, enables horizontal and/or vertical scrolling.
2023-02-28 12:10:08 +00:00
* @defaultValue false
2022-09-06 12:03:37 +00:00
*/
scrollable?: boolean | undefined;
/**
* Height of the scroll viewport in fixed pixels or the 'flex' keyword for a dynamic size.
*/
scrollHeight?: HintedString<'flex'> | undefined;
2022-09-06 12:03:37 +00:00
/**
* Whether to use the virtualScroller feature. The properties of VirtualScroller component can be used like an object in it.
* Note: Currently only vertical orientation mode is supported.
*/
2023-02-28 14:07:58 +00:00
virtualScrollerOptions?: VirtualScrollerProps;
2022-09-06 12:03:37 +00:00
/**
* Items of the frozen part in scrollable DataTable.
*/
2023-02-28 12:10:08 +00:00
frozenValue?: any[] | undefined | null;
2022-09-06 12:03:37 +00:00
/**
* The breakpoint to define the maximum width boundary when using stack responsive layout.
* @defaultValue 960px
2022-09-06 12:03:37 +00:00
*/
breakpoint?: string | undefined;
/**
* Whether to show grid lines between cells.
2023-02-28 12:10:08 +00:00
* @defaultValue false
2022-09-06 12:03:37 +00:00
*/
showGridlines?: boolean | undefined;
/**
* Whether to displays rows with alternating colors.
2023-02-28 12:10:08 +00:00
* @defaultValue false
2022-09-06 12:03:37 +00:00
*/
stripedRows?: boolean | undefined;
2024-01-18 13:11:07 +00:00
/**
* Highlights automatically the first item.
* @defaultValue false
*/
highlightOnSelect?: boolean | undefined;
/**
* Defines the size of the table.
*/
size?: 'small' | 'large' | undefined;
2022-09-06 12:03:37 +00:00
/**
* Inline style of the table element.
*/
tableStyle?: string | object | undefined;
2022-09-06 12:03:37 +00:00
/**
* Style class of the table element.
*/
tableClass?: string | object | undefined;
2022-12-08 11:04:25 +00:00
/**
2023-08-01 14:01:12 +00:00
* Used to pass all properties of the TableHTMLAttributes to table element inside the component.
2022-12-08 11:04:25 +00:00
*/
2023-02-28 14:07:58 +00:00
tableProps?: TableHTMLAttributes | undefined;
2022-12-08 11:04:25 +00:00
/**
2023-08-01 14:01:12 +00:00
* Used to pass all properties of the HTMLInputElement to the focusable filter input element inside the component.
2022-12-08 11:04:25 +00:00
*/
2023-02-28 14:07:58 +00:00
filterInputProps?: InputHTMLAttributes | undefined;
/**
* Used to pass all filter button property object
* @defaultValue {
filter: { severity: 'secondary', text: true, rounded: true },
inline: {
clear: { severity: 'secondary', text: true, rounded: true }
},
popover: {
addRule: { severity: 'info', text: true, size: 'small' },
removeRule: { severity: 'danger', text: true, size: 'small' },
apply: { size: 'small' },
clear: { outlined: true, size: 'small' }
}
}
*/
filterButtonProps?: DataTableFilterButtonPropsOptions | undefined;
/**
* Used to pass all edit button property object
* @defaultValue {
init: { severity: 'secondary', text: true, rounded: true },
save: { severity: 'secondary', text: true, rounded: true },
cancel: { severity: 'secondary', text: true, rounded: true }
}
*/
editButtonProps?: DataTableEditButtonPropsOptions | undefined;
/**
* It generates scoped CSS variables using design tokens for the component.
*/
dt?: DesignToken<any>;
2023-05-08 14:08:06 +00:00
/**
2023-08-01 14:01:12 +00:00
* Used to pass attributes to DOM elements inside the component.
2023-05-08 14:08:06 +00:00
* @type {DataTablePassThroughOptions}
*/
pt?: PassThrough<DataTablePassThroughOptions>;
2023-09-05 08:50:46 +00:00
/**
* Used to configure passthrough(pt) options of the component.
* @type {PassThroughOptions}
*/
ptOptions?: PassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
*/
unstyled?: boolean;
2022-09-06 12:03:37 +00:00
}
2023-02-28 14:47:48 +00:00
2023-02-28 08:29:30 +00:00
/**
2023-02-28 14:47:48 +00:00
* Defines valid slots in DataTable component.
2023-02-28 08:29:30 +00:00
*/
2022-09-06 12:03:37 +00:00
export interface DataTableSlots {
/**
* Custom header template.
*/
2023-02-28 08:29:30 +00:00
header(): VNode[];
2022-09-06 12:03:37 +00:00
/**
* Custom footer template.
*/
2023-02-28 08:29:30 +00:00
footer(): VNode[];
2022-09-06 12:03:37 +00:00
/**
* Custom paginator start template.
*/
2023-02-28 08:29:30 +00:00
paginatorstart(): VNode[];
2022-09-06 12:03:37 +00:00
/**
* Custom paginator end template.
*/
2023-02-28 08:29:30 +00:00
paginatorend(): VNode[];
2022-09-06 12:03:37 +00:00
/**
* Custom empty template.
*/
2023-02-28 08:29:30 +00:00
empty(): VNode[];
2022-09-06 12:03:37 +00:00
/**
* Custom group header template.
2023-08-17 07:16:25 +00:00
* @param {Object} scope - group header slot's params.
2022-09-06 12:03:37 +00:00
*/
2023-02-28 08:29:30 +00:00
groupheader(scope: {
2022-09-06 12:03:37 +00:00
/**
* Row data
*/
data: any;
/**
* Row index
*/
index: number;
2023-02-28 08:29:30 +00:00
}): VNode[];
2022-09-06 12:03:37 +00:00
/**
* Custom group footer template.
* @param {Object} scope - group footer slot's params.
*/
2023-02-28 08:29:30 +00:00
groupfooter(scope: {
2022-09-06 12:03:37 +00:00
/**
* Row data
*/
data: any;
/**
* Row index
*/
index: number;
2023-02-28 08:29:30 +00:00
}): VNode[];
2022-09-06 12:03:37 +00:00
/**
* Custom loading template.
2023-08-17 07:16:25 +00:00
* @param {Object} scope - loading slot's params.
2022-09-06 12:03:37 +00:00
*/
2023-02-28 08:29:30 +00:00
loading(): VNode[];
2022-09-06 12:03:37 +00:00
/**
* Custom expansion template.
* @param {Object} scope - expansion slot's params.
*/
2023-02-28 08:29:30 +00:00
expansion(scope: {
2022-09-06 12:03:37 +00:00
/**
* Row data
*/
2022-09-14 11:26:01 +00:00
data: any;
/**
* Row index
*/
index: number;
2023-02-28 08:29:30 +00:00
}): VNode[];
/**
* Custom loading icon template.
*/
loadingicon(): VNode[];
/**
2024-05-02 13:15:11 +00:00
* Custom row reorder indicator up icon template.
* @deprecated since v4.0. Use 'rowreorderindicatorupicon' slot.
*/
reorderindicatorupicon(): VNode[];
2024-05-02 13:15:11 +00:00
/**
* Custom row reorder indicator up icon template.
*/
rowreorderindicatorupicon(): VNode[];
/**
* Custom reorder indicator down icon template.
2024-05-02 13:15:11 +00:00
* @deprecated since v4.0. Use 'rowreorderindicatordownicon' slot.
*/
reorderindicatordownicon(): VNode[];
2024-05-02 13:15:11 +00:00
/**
* Custom reorder indicator down icon template.
*/
rowreorderindicatordownicon(): VNode[];
/**
* Custom rowgroup toggler icon template.
* @param {Object} scope - rowgroup toggler icon slot's params.
*/
rowgrouptogglericon(scope: {
/**
* Current rowgroup's expanded state.
*/
expanded: boolean;
}): VNode[];
/**
* Custom paginator first page link icon template.
*/
paginatorfirstpagelinkicon(scope: {
/**
* Style class of the paginator first page link icon.
* @param {Object} scope - paginatorfirstpagelinkicon's params.
*/
class: string;
}): VNode[];
/**
* Custom paginator previous page link icon template.
*/
paginatorprevpagelinkicon(scope: {
/**
* Style class of the paginator prev page link icon.
* @param {Object} scope - paginatorprevpagelinkicon's params.
*/
class: string;
}): VNode[];
/**
* Custom paginator next page link icon template.
*/
paginatornextpagelinkicon(scope: {
/**
* Style class of the paginator next page link icon.
* @param {Object} scope - paginatornextpagelinkicon's params.
*/
class: string;
}): VNode[];
/**
* Custom paginator last page link icon template.
*/
paginatorlastpagelinkicon(scope: {
/**
* Style class of the paginator last page link icon.
* @param {Object} scope - paginatorlastpagelinkicon's params.
*/
class: string;
}): VNode[];
/**
* Custom paginatorrowsperpagedropdownicon template.
* @param {Object} scope - paginatorrowsperpagedropdownicon's params.
*/
paginatorrowsperpagedropdownicon(scope: {
/**
* Style class of the paginator rows per page dropdown icon.
*/
class: string;
}): VNode[];
/**
* Custom paginatorjumptopagedropdownicon template.
* @param {Object} scope - paginatorjumptopagedropdownicon's params.
*/
paginatorjumptopagedropdownicon(scope: {
/**
* Style class of the paginator jump to page dropdown icon.
*/
class: string;
}): VNode[];
2022-09-06 12:03:37 +00:00
}
2023-02-28 08:29:30 +00:00
/**
* Defines valid emits in Datatable component.
*/
export interface DataTableEmits {
2022-09-06 12:03:37 +00:00
/**
* Emitted when the first changes.
* @param {number} value - New value.
*/
2023-02-28 08:29:30 +00:00
'update:first'(value: number): void;
2022-09-06 12:03:37 +00:00
/**
* Emitted when the rows changes.
* @param {number} value - New value.
*/
2023-02-28 08:29:30 +00:00
'update:rows'(value: number): void;
2022-09-06 12:03:37 +00:00
/**
* Emitted when the sortField changes.
* @param {string} value - New value.
*/
2023-02-28 08:29:30 +00:00
'update:sortField'(value: string): void;
2022-09-06 12:03:37 +00:00
/**
* Emitted when the sortOrder changes.
* @param {number | undefined} value - New value.
*/
2023-02-28 08:29:30 +00:00
'update:sortOrder'(value: number | undefined): void;
2022-09-06 12:03:37 +00:00
/**
* Emitted when the multiSortMeta changes.
2023-02-28 12:10:08 +00:00
* @param {DataTableSortMeta[] | undefined | null} value - New value.
2022-09-06 12:03:37 +00:00
*/
2023-02-28 12:10:08 +00:00
'update:multiSortMeta'(value: DataTableSortMeta[] | undefined | null): void;
2022-09-06 12:03:37 +00:00
/**
* Emitted when the selection changes.
* @param {*} value - New value.
*/
2023-02-28 08:29:30 +00:00
'update:selection'(value: any[] | any | undefined): void;
2022-09-06 12:03:37 +00:00
/**
* Emitted when the contextMenuSelection changes.
* @param {*} value - New value.
*/
2023-02-28 08:29:30 +00:00
'update:contextMenuSelection'(value: any[] | any | undefined): void;
2022-09-06 12:03:37 +00:00
/**
* Emitted when the expandedRows changes.
* @param {DataTableExpandedRows} value - New value.
*/
2023-02-28 08:29:30 +00:00
'update:expandedRows'(value: any[] | DataTableExpandedRows): void;
2022-09-06 12:03:37 +00:00
/**
* Emitted when the expandedRowGroups changes.
* @param {DataTableExpandedRows} value - New value.
*/
2023-02-28 08:29:30 +00:00
'update:expandedRowGroups'(value: any[] | DataTableExpandedRows): void;
2022-09-06 12:03:37 +00:00
/**
* Emitted when the filters changes.
* @param {DataTableFilterMeta} value - New value.
*/
2023-02-28 08:29:30 +00:00
'update:filters'(value: DataTableFilterMeta): void;
2022-09-06 12:03:37 +00:00
/**
* Emitted when the editingRows changes.
* @param {DataTableEditingRows} value - New value.
*/
2023-02-28 08:29:30 +00:00
'update:editingRows'(value: any[] | DataTableEditingRows): void;
2022-09-06 12:03:37 +00:00
/**
* Callback to invoke on pagination. Sort and Filter information is also available for lazy loading implementation.
* @param {DataTablePageEvent} event - Custom page event.
*/
2023-02-28 08:29:30 +00:00
page(event: DataTablePageEvent): void;
2022-09-06 12:03:37 +00:00
/**
* Callback to invoke on sort. Page and Filter information is also available for lazy loading implementation.
* @param {DataTableSortEvent} event - Custom sort event.
*/
2023-02-28 08:29:30 +00:00
sort(event: DataTableSortEvent): void;
2022-09-06 12:03:37 +00:00
/**
* Event to emit after filtering, not triggered in lazy mode.
* @param {DataTableFilterEvent} event - Custom filter event.
*/
2023-02-28 08:29:30 +00:00
filter(event: DataTableFilterEvent): void;
2022-09-06 12:03:37 +00:00
/**
* Callback to invoke after filtering, sorting, pagination and cell editing to pass the rendered value.
* @param {*} value - Value displayed by the table.
*/
2023-02-28 08:29:30 +00:00
'value-change'(value: any[]): void;
2022-09-06 12:03:37 +00:00
/**
* Callback to invoke when a row is clicked.
* @param {DataTableRowClickEvent} event - Custom row click event.
*/
2023-02-28 08:29:30 +00:00
'row-click'(event: DataTableRowClickEvent): void;
2022-09-06 12:03:37 +00:00
/**
* Callback to invoke when a row is double clicked.
* @param {DataTableRowDoubleClickEvent} event - Custom row double click event.
*/
2023-02-28 08:29:30 +00:00
'row-dblclick'(event: DataTableRowDoubleClickEvent): void;
2022-09-06 12:03:37 +00:00
/**
* Callback to invoke when a row is selected with a ContextMenu.
* @param {DataTableRowContextMenuEvent} event - Custom row context menu event.
*/
2023-02-28 08:29:30 +00:00
'row-contextmenu'(event: DataTableRowContextMenuEvent): void;
2022-09-06 12:03:37 +00:00
/**
* Callback to invoke when a row is selected.
* @param {DataTableRowSelectEvent} event - Custom row select event.
*/
2023-02-28 08:29:30 +00:00
'row-select'(event: DataTableRowSelectEvent): void;
2022-09-06 12:03:37 +00:00
/**
* Fired when header checkbox is checked.
* @param {DataTableRowSelectAllEvent} event - Custom row select all event.
*/
2023-02-28 08:29:30 +00:00
'row-select-all'(event: DataTableRowSelectAllEvent): void;
2022-09-06 12:03:37 +00:00
/**
* Fired when header checkbox is unchecked.
* @param {DataTableRowUnselectAllEvent} event - Custom row unselect all event.
*/
2023-02-28 08:29:30 +00:00
'row-unselect-all'(event: DataTableRowUnselectAllEvent): void;
2022-09-06 12:03:37 +00:00
/**
* Callback to invoke when a row is unselected.
* @param {DataTableRowUnselectEvent} event - Custom row unselect event.
*/
2023-02-28 08:29:30 +00:00
'row-unselect'(event: DataTableRowUnselectEvent): void;
2022-09-06 12:03:37 +00:00
/**
* Callback to invoke when all data is selected.
* @param {DataTableSelectAllChangeEvent} event - Custom select all change event.
*/
2023-02-28 08:29:30 +00:00
'select-all-change'(event: DataTableSelectAllChangeEvent): void;
2022-09-06 12:03:37 +00:00
/**
* Callback to invoke when a column is resized.
* @param {DataTableColumnResizeEndEvent} - Custom column resize event.
*/
2023-02-28 08:29:30 +00:00
'column-resize-end'(event: DataTableColumnResizeEndEvent): void;
2022-09-06 12:03:37 +00:00
/**
* Callback to invoke when a column is reordered.
* @param {DataTableColumnReorderEvent} event - Custom column reorder event.
*/
2023-02-28 08:29:30 +00:00
'column-reorder'(event: DataTableColumnReorderEvent): void;
2022-09-06 12:03:37 +00:00
/**
* Callback to invoke when a row is reordered.
* @param {DataTableRowReorderEvent} event - Custom row reorder event.
*/
2023-02-28 08:29:30 +00:00
'row-reorder'(event: DataTableRowReorderEvent): void;
2022-09-06 12:03:37 +00:00
/**
* Callback to invoke when a row is expanded.
* @param {DataTableRowExpandEvent} event - Custom row expand event.
*/
2023-02-28 08:29:30 +00:00
'row-expand'(event: DataTableRowExpandEvent): void;
2022-09-06 12:03:37 +00:00
/**
* Callback to invoke when a row is collapsed.
* @param {DataTableRowCollapseEvent} event - Custom row collapse event.
*/
2023-02-28 08:29:30 +00:00
'row-collapse'(event: DataTableRowCollapseEvent): void;
2022-09-06 12:03:37 +00:00
/**
* Callback to invoke when a row group is expanded.
* @param {DataTableRowExpandEvent} event - Custom row expand event.
*/
2023-02-28 08:29:30 +00:00
'rowgroup-expand'(event: DataTableRowExpandEvent): void;
2022-09-06 12:03:37 +00:00
/**
* Callback to invoke when a row group is collapsed.
* @param {DataTableRowCollapseEvent} event - Custom row collapse event.
*/
2023-02-28 14:07:58 +00:00
'rowgroup-collapse'(event: DataTableRowCollapseEvent): void;
2022-09-06 12:03:37 +00:00
/**
* Callback to invoke when cell edit is initiated.
* @param {DataTableCellEditInitEvent} event - Custom cell edit init.
*/
2023-02-28 14:07:58 +00:00
'cell-edit-init'(event: DataTableCellEditInitEvent): void;
2022-09-06 12:03:37 +00:00
/**
* Callback to invoke when cell edit is completed.
* @param {DataTableCellEditCompleteEvent} event - Custom cell edit complete event.
*/
2023-02-28 08:29:30 +00:00
'cell-edit-complete'(event: DataTableCellEditCompleteEvent): void;
2022-09-06 12:03:37 +00:00
/**
* Callback to invoke when cell edit is cancelled with escape key.
* @param {DataTableCellEditCancelEvent} event - Custom cell edit cancel event.
*/
2023-02-28 08:29:30 +00:00
'cell-edit-cancel'(event: DataTableCellEditCancelEvent): void;
2022-09-06 12:03:37 +00:00
/**
* Callback to invoke when row edit is initiated.
* @param {DataTableRowEditInitEvent} event - Custom row edit init event.
*/
2023-02-28 14:07:58 +00:00
'row-edit-init'(event: DataTableRowEditInitEvent): void;
2022-09-06 12:03:37 +00:00
/**
* Callback to invoke when row edit is saved.
* @param {DataTableRowEditSaveEvent} event - Custom row edit save event.
*/
2023-02-28 08:29:30 +00:00
'row-edit-save'(event: DataTableRowEditSaveEvent): void;
2022-09-06 12:03:37 +00:00
/**
* Callback to invoke when row edit is cancelled.
* @param {DataTableRowEditCancelEvent} event - Custom row edit cancel event.
*/
2023-02-28 08:29:30 +00:00
'row-edit-cancel'(event: DataTableRowEditCancelEvent): void;
2022-09-06 12:03:37 +00:00
/**
* Invoked when a stateful table saves the state.
* @param {DataTableStateEvent} event - Custom state event.
*/
2023-02-28 08:29:30 +00:00
'state-restore'(event: DataTableStateEvent): void;
2022-09-06 12:03:37 +00:00
/**
* Invoked when a stateful table restores the state.
* @param {DataTableStateEvent} event - Custom state event.
*/
2023-02-28 08:29:30 +00:00
'state-save'(event: DataTableStateEvent): void;
}
2022-09-06 12:03:37 +00:00
2023-02-28 08:29:30 +00:00
/**
2023-02-28 10:57:39 +00:00
* **PrimeVue - DataTable**
2023-02-28 08:29:30 +00:00
*
* * _DataTable displays data in tabular format._
*
* [Live Demo](https://www.primevue.org/datatable/)
* --- ---
2023-03-03 10:55:20 +00:00
* ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
2023-02-28 08:29:30 +00:00
*
2023-02-28 12:10:08 +00:00
* @group Component
2023-02-28 08:29:30 +00:00
*/
2023-03-01 14:37:47 +00:00
declare class DataTable extends ClassComponent<DataTableProps, DataTableSlots, DataTableEmits> {
2022-09-06 12:03:37 +00:00
/**
* Exports the data to CSV format.
* @param {DataTableExportCSVOptions} [options] - Export options.
* @param {Object[]} [data] - Custom exportable data. This param can be used on lazy dataTable.
*/
2023-02-28 08:29:30 +00:00
exportCSV(options?: DataTableExportCSVOptions, data?: any[]): void;
2022-09-06 12:03:37 +00:00
}
declare module 'vue' {
export interface GlobalComponents {
2022-09-14 11:26:01 +00:00
DataTable: GlobalComponentConstructor<DataTable>;
2022-09-06 12:03:37 +00:00
}
}
export default DataTable;