import { VNode } from 'vue';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { VirtualScrollerLoaderOptions } from '../virtualscroller';
type ColumnFieldType = string | ((item: any) => string) | undefined;
type ColumnSelectionModeType = 'single' | 'multiple' | undefined;
type ColumnAlignFrozenType = 'left' | 'right' | undefined;
export interface ColumnFilterModelType {
/**
* Value of filterModel.
*/
value: any;
/**
* Match mode of filterModel.
*/
matchMode: string;
}
export interface ColumnFilterMatchModeOptions {
[key: string]: string;
}
export interface ColumnLoadingOptions extends VirtualScrollerLoaderOptions {
/**
* Cell index
*/
cellIndex: number;
/**
* Whether the cell is first.
*/
cellFirst: boolean;
/**
* Whether the cell is last.
*/
cellLast: boolean;
/**
* Whether the cell is even.
*/
cellEven: boolean;
/**
* Whether the item is odd.
*/
cellOdd: boolean;
/**
* Column instance
*/
column: Column;
/**
* Column field
*/
field: string;
}
export interface ColumnProps {
/**
* Identifier of a column if field property is not defined.
*/
columnKey?: string | undefined;
/**
* Property represented by the column.
* @see ColumnFieldType
*/
field?: ColumnFieldType;
/**
* Property name to use in sorting, defaults to field.
* @see ColumnFieldType
*/
sortField?: ColumnFieldType;
/**
* Property name to use in filtering, defaults to field.
* @see ColumnFieldType
*/
filterField?: ColumnFieldType;
/**
* Type of data. It's value is related to PrimeVue.filterMatchModeOptions config.
*/
dataType?: string | undefined;
/**
* Defines if a column is sortable.
*/
sortable?: boolean | undefined;
/**
* Header content of the column.
*/
header?: string | undefined;
/**
* Footer content of the column.
*/
footer?: string | undefined;
/**
* Inline style of header, body and footer cells.
*/
style?: any;
/**
* Style class of header, body and footer cells.
*/
class?: any;
/**
* Inline style of the column header.
*/
headerStyle?: any;
/**
* Style class of the column header.
*/
headerClass?: any;
/**
* Inline style of the column body.
*/
bodyStyle?: any;
/**
* Style class of the column body.
*/
bodyClass?: any;
/**
* Inline style of the column footer.
*/
footerStyle?: any;
/**
* Style class of the column footer.
*/
footerClass?: any;
/**
* Whether to display the filter overlay.
* Default value is true.
*/
showFilterMenu?: boolean | undefined;
/**
* When enabled, match all and match any operator selector is displayed.
* Default value is true.
*/
showFilterOperator?: boolean | undefined;
/**
* Displays a button to clear the column filtering.
* Default value is true.
*/
showClearButton?: boolean | undefined;
/**
* Displays a button to apply the column filtering.
* Default value is true.
*/
showApplyButton?: boolean | undefined;
/**
* Whether to show the match modes selector.
* Default value is true.
*/
showFilterMatchModes?: boolean | undefined;
/**
* When enabled, a button is displayed to add more rules.
* Default value is true.
*/
showAddButton?: boolean | undefined;
/**
* An array of label-value pairs to override the global match mode options.
*/
filterMatchModeOptions?: ColumnFilterMatchModeOptions[];
/**
* Maximum number of constraints for a column filter.
* Default value is 2.
*/
maxConstraints?: number | undefined;
/**
* Whether to exclude from global filtering or not.
*/
excludeGlobalFilter?: boolean | undefined;
/**
* Inline style of the column filter header in row filter display.
*/
filterHeaderStyle?: any;
/**
* Style class of the column filter header in row filter display.
*/
filterHeaderClass?: any;
/**
* Inline style of the column filter overlay.
*/
filterMenuStyle?: any;
/**
* Style class of the column filter overlay.
*/
filterMenuClass?: any;
/**
* Defines column based selection mode, options are 'single' and 'multiple'.
* @see ColumnSelectionModeType
*/
selectionMode?: ColumnSelectionModeType;
/**
* Displays an icon to toggle row expansion.
*/
expander?: boolean | undefined;
/**
* Number of columns to span for grouping.
*/
colspan?: number | undefined;
/**
* Number of rows to span for grouping.
*/
rowspan?: number | undefined;
/**
* Whether this column displays an icon to reorder the rows.
*/
rowReorder?: boolean | undefined;
/**
* Icon of the drag handle to reorder rows.
* Default value is 'pi pi-bars'.
*/
rowReorderIcon?: string | undefined;
/**
* Defines if the column itself can be reordered with dragging.
*/
reorderableColumn?: boolean | undefined;
/**
* When enabled, column displays row editor controls.
*/
rowEditor?: boolean | undefined;
/**
* Whether the column is fixed in horizontal scrolling.
*/
frozen?: boolean | undefined;
/**
* Position of a frozen column, valid values are left and right.
* @see ColumnAlignFrozenType
* Default value is 'left'.
*/
alignFrozen?: ColumnAlignFrozenType;
/**
* Whether the column is included in data export.
*/
exportable?: boolean | undefined;
/**
* Custom export header of the column to be exported as CSV.
*/
exportHeader?: string | undefined;
/**
* Custom export footer of the column to be exported as CSV.
*/
exportFooter?: string | undefined;
/**
* Defines the filtering algorithm to use when searching the options.
*/
filterMatchMode?: string | undefined;
/**
* Whether the column is rendered.
*/
hidden?: boolean | undefined;
}
export interface ColumnSlots {
/**
* Custom body template.
* @param {Object} scope - body slot's params.
*/
body: (scope: {
/**
* Row data.
*/
data: any;
/**
* Row node data.
*/
node: any;
/**
* Column node.
*/
column: Column;
/**
* Column field.
*/
field: string;
/**
* Row index.
*/
index: number;
/**
* Whether the row is frozen.
*/
frozenRow: boolean;
/**
* Callback function
*/
editorInitCallback: () => void;
}) => VNode[];
/**
* Custom header template.
* @param {Object} scope - header slot's params.
*/
header: (scope: {
/**
* Column node.
*/
column: Column;
}) => VNode[];
/**
* Custom footer template.
* @param {Object} scope - footer slot's params.
*/
footer: (scope: {
/**
* Column node.
*/
column: Column;
}) => VNode[];
/**
* Custom editor template.
* @param {Object} scope - editor slot's params.
*/
editor: (scope: {
/**
* Row data.
*/
data: any;
/**
* Column node.
*/
column: Column;
/**
* Column field.
*/
field: string;
/**
* Row index.
*/
index: number;
/**
* Whether the row is frozen.
*/
frozenRow: boolean;
/**
* Callback function
*/
editorSaveCallback: () => void;
/**
* Callback function
*/
editorCancelCallback: () => void;
}) => VNode[];
/**
* Custom filter template.
* @param {Object} scope - filter slot's params.
*/
filter: (scope: {
/**
* Column field.
*/
field: string;
/**
* Filter metadata
* @see ColumnFilterModelType
*/
filterModel: ColumnFilterModelType;
/**
* Callback function
*/
filterCallback: () => void;
}) => VNode[];
/**
* Custom filter header template.
* @param {Object} scope - filter header slot's params.
*/
filterheader: (scope: {
/**
* Column field.
*/
field: string;
/**
* Filter metadata
* @see ColumnFilterModelType
*/
filterModel: ColumnFilterModelType;
/**
* Callback function
*/
filterCallback: () => void;
}) => VNode[];
/**
* Custom filter footer template.
* @param {Object} scope - filter footer slot's params.
*/
filterfooter: (scope: {
/**
* Column field.
*/
field: string;
/**
* Filter metadata
* @see ColumnFilterModelType
*/
filterModel: ColumnFilterModelType;
/**
* Callback function
*/
filterCallback: () => void;
}) => VNode[];
/**
* Custom filter clear template.
* @param {Object} scope - filter clear slot's params.
*/
filterclear: (scope: {
/**
* Column field.
*/
field: string;
/**
* Filter metadata
* @see ColumnFilterModelType
*/
filterModel: ColumnFilterModelType;
/**
* Callback function
*/
filterCallback: () => void;
}) => VNode[];
/**
* Custom filter apply template.
* @param {Object} scope - filter apply slot's params.
*/
filterapply: (scope: {
/**
* Column field.
*/
field: string;
/**
* Filter metadata
* @see ColumnFilterModelType
*/
filterModel: ColumnFilterModelType;
/**
* Callback function
*/
filterCallback: () => void;
}) => VNode[];
/**
* Custom loading template.
* @param {Object} scope - loading slot's params.
*/
loading: (scope: {
/**
* Row data.
*/
data: any;
/**
* Column node.
*/
column: Column;
/**
* Column field.
*/
field: string;
/**
* Row index.
*/
index: number;
/**
* Whether the row is frozen.
*/
frozenRow: boolean;
/**
* Loading options.
* @see ColumnLoadingOptions
*/
loadingOptions: ColumnLoadingOptions;
}) => VNode[];
}
export declare type ColumnEmits = {};
declare class Column extends ClassComponent<ColumnProps, ColumnSlots, ColumnEmits> {}
declare module '@vue/runtime-core' {
interface GlobalComponents {
Column: GlobalComponentConstructor<Column>;
}
}
/**
*
* Column is a helper component for DataTable and TreeTable.
*
* Demos:
*
* - [DataTable](https://www.primefaces.org/primevue/datatable)
* - [TreeTable](https://www.primefaces.org/primevue/treetable)
*
*/
export default Column;