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

1127 lines
29 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
*
*/
2022-12-08 11:04:25 +00:00
import { InputHTMLAttributes, TableHTMLAttributes, VNode } from 'vue';
2022-09-06 12:03:37 +00:00
import { ClassComponent, GlobalComponentConstructor, Nullable } from '../ts-helpers';
import { VirtualScrollerProps } from '../virtualscroller';
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
*/
2023-02-28 12:10:08 +00:00
matchMode: '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;
}
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
*/
2023-02-28 12:10:08 +00:00
filterMatchModes: '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[];
}
/**
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-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.
* @defaultValue pi pi-spinner
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;
/**
* 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
/**
* Fields for global filter
*/
globalFilterFields?: string[] | undefined;
/**
* 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-02-28 12:10:08 +00:00
* @defaultValue true
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.
*/
exportFunction?(options: DataTableExportFunctionOptions): any;
/**
* 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.
* @defaultValue pi-chevron-down
2022-09-06 12:03:37 +00:00
*/
expandedRowIcon?: string | undefined;
/**
* Icon of the row toggler to display the row as collapsed.
* @defaultValue pi-chevron-right
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.
*/
2023-02-28 14:07:58 +00:00
rowClass?: (data: any) => object | string | 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.
*/
2023-02-28 14:07:58 +00:00
scrollHeight?: 'flex' | string | 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;
/**
* Inline style of the table element.
*/
2023-02-28 14:07:58 +00:00
tableStyle?: any;
2022-09-06 12:03:37 +00:00
/**
* Style class of the table element.
*/
2023-02-28 14:07:58 +00:00
tableClass?: any;
2022-12-08 11:04:25 +00:00
/**
* Uses to pass all properties of the TableHTMLAttributes to table element inside the component.
*/
2023-02-28 14:07:58 +00:00
tableProps?: TableHTMLAttributes | undefined;
2022-12-08 11:04:25 +00:00
/**
* Uses to pass all properties of the HTMLInputElement to the focusable filter input element inside the component.
*/
2023-02-28 14:07:58 +00:00
filterInputProps?: InputHTMLAttributes | undefined;
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-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-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[];
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/runtime-core' {
interface GlobalComponents {
2022-09-14 11:26:01 +00:00
DataTable: GlobalComponentConstructor<DataTable>;
2022-09-06 12:03:37 +00:00
}
}
export default DataTable;