Fixed #1836 - For Column

pull/1846/head
mertsincan 2021-12-01 16:19:18 +03:00
parent 813d6f4db1
commit 248b052c5d
1 changed files with 386 additions and 79 deletions

View File

@ -1,94 +1,401 @@
interface ColumnProps { import { VNode } from 'vue';
columnKey?: any; import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
field?: string | ((item: any) => any);
sortField?: string | ((item: any) => any);
filterField?: string | ((item: any) => any);
dataType?: string;
sortable?: boolean;
header?: any;
footer?: any;
style?: object;
class?: string;
headerStyle?: object;
headerClass?: string;
bodyStyle?: object;
bodyClass?: string;
footerStyle?: object;
footerClass?: string;
showFilterMenu?: boolean;
showFilterOperator?: boolean;
showClearButton?: boolean;
showApplyButton?: boolean;
showFilterMatchModes?: boolean;
showAddButton?: boolean;
filterMatchModeOptions?: any[];
maxConstraints?: number;
excludeGlobalFilter?: boolean;
filterHeaderStyle?: object;
filterHeaderClass?: string;
filterMenuStyle?: object;
filterMenuClass?: string;
selectionMode?: string;
expander?: boolean;
colspan?: number;
rowspan?: number;
rowReorder?: boolean;
rowReorderIcon?: string;
reorderableColumn?: boolean;
rowEditor?: boolean;
frozen?: boolean;
alignFrozen?: string;
exportable?: boolean;
filterMatchMode?: string;
hidden?: boolean;
}
interface ColumnBodySlotInterface { type ColumnFieldType = string | ((item: any) => string) | undefined;
data: any;
column: any;
field: string;
index: number;
frozenRow: boolean;
}
interface ColumnHeaderSlotInterface { type ColumnSelectionModeType = 'single' | 'multiple' | undefined;
column: any;
}
interface ColumnFooterSlotInterface { type ColumnAlignFrozenType = 'left' | 'right';
column: any;
}
interface ColumnEditorSlotInterface { export interface ColumnFilterModelType {
data: any; /**
column: any; * Value of filterModel.
field: string; */
index: number;
frozenRow: boolean;
}
interface ColumnFilterSlotInterface {
field: string;
filterModel: {
value: any; value: any;
/**
* Match mode of filterModel.
*/
matchMode: string; matchMode: string;
};
filterCallback: any;
} }
declare class Column { export interface ColumnFilterMatchModeOptions {
$props: ColumnProps; [key: string]: string;
$slots: { }
body: ColumnBodySlotInterface;
header: ColumnHeaderSlotInterface; export interface ColumnProps {
footer: ColumnFooterSlotInterface; /**
editor: ColumnEditorSlotInterface; * Identifier of a column if field property is not defined.
filter: ColumnFilterSlotInterface; */
filterheader: ColumnFilterSlotInterface; columnKey?: string | undefined;
filterfooter: ColumnFilterSlotInterface; /**
filterclear: ColumnFilterSlotInterface; * Property represented by the column.
filterapply: ColumnFilterSlotInterface; * @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?: string | undefined;
/**
* Inline style of the column header.
*/
headerStyle?: any;
/**
* Style class of the column header.
*/
headerClass?: string | undefined;
/**
* Inline style of the column body.
*/
bodyStyle?: any;
/**
* Style class of the column body.
*/
bodyClass?: string | undefined;
/**
* Inline style of the column footer.
*/
footerStyle?: any;
/**
* Style class of the column footer.
*/
footerClass?: string | undefined;
/**
* 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?: string | undefined;
/**
* Inline style of the column filter overlay.
*/
filterMenuStyle?: any;
/**
* Style class of the column filter overlay.
*/
filterMenuClass?: string | undefined;
/**
* 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;
/**
* 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;
/**
* Column node.
*/
column: Column;
/**
* Column field.
*/
field: string;
/**
* Row index.
*/
index: number;
/**
* Whether the row is frozen.
*/
frozenRow: boolean;
}) => 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;
}) => 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[];
}
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/showcase/#/datatable)
* - [TreeTable](https://www.primefaces.org/primevue/showcase/#/treetable)
*
*/
export default Column; export default Column;