igniteui-react-grids
Version:
Ignite UI React grid components.
745 lines (740 loc) • 25.3 kB
TypeScript
import * as React from 'react';
import { GridColumnDataType } from "./GridColumnDataType";
import { IgrFilteringOperand } from "./igr-filtering-operand";
import { IgrSortingStrategy } from "./igr-sorting-strategy";
import { IgrColumnPipeArgs } from "./igr-column-pipe-args";
import { IgrColumnEditorOptions } from "./igr-column-editor-options";
import { IgrFilteringExpressionsTree } from "./igr-filtering-expressions-tree";
import { Column } from "./Column";
import { ReactRenderer, PortalManager } from "igniteui-react-core";
import { ContentChildrenManager } from "igniteui-react-core";
import { IgrSummaryResult } from "./igr-summary-result";
import { IgrSummaryOperand } from "./igr-summary-operand";
import { IgrSummaryTemplateContext } from "./igr-summary-template-context";
import { IgrCellTemplateContext } from "./igr-cell-template-context";
import { IgrColumnTemplateContext } from "./igr-column-template-context";
export declare class IgrColumn<P extends IIgrColumnProps = IIgrColumnProps> extends React.Component<P & Omit<React.HTMLAttributes<HTMLElement>, keyof P>, {}> {
protected createImplementation(): Column;
protected _implementation: any;
protected mounted: boolean;
get nativeElement(): HTMLElement;
/**
* @hidden
*/
get i(): Column; /**
* @hidden
*/
static _createFromInternal(internal: any): IgrColumn;
protected _renderer: ReactRenderer;
protected _portalManager: PortalManager;
protected onImplementationCreated(): void;
protected _contentChildrenManager: ContentChildrenManager;
constructor(props: P & Omit<React.HTMLAttributes<HTMLElement>, keyof P>);
componentDidMount(): void;
shouldComponentUpdate(nextProps: any, nextState: any): boolean;
render(): React.DetailedReactHTMLElement<{
ref: (ref: any) => void;
className: (P & Omit<React.HTMLAttributes<HTMLElement>, keyof P>)["className"];
style: {};
children: any[];
}, any>;
protected _elRef: HTMLElement;
protected _getMainRef(ref: any): void;
get field(): string;
set field(v: string);
get header(): string;
set header(v: string);
get title(): string;
set title(v: string);
get sortable(): boolean;
set sortable(v: boolean);
/**
* Returns if the column is selectable.
* ```typescript
* let columnSelectable = this.column.selectable;
* ```
* @memberof IgxColumnComponent
*/
get selectable(): boolean;
set selectable(v: boolean);
get groupable(): boolean;
set groupable(v: boolean);
/**
* Gets whether the column is editable.
* Default value is `false`.
* ```typescript
* let isEditable = this.column.editable;
* ```
* @memberof IgxColumnComponent
*/
get editable(): boolean;
set editable(v: boolean);
get filterable(): boolean;
set filterable(v: boolean);
get resizable(): boolean;
set resizable(v: boolean);
get autosizeHeader(): boolean;
set autosizeHeader(v: boolean);
/**
* Gets a value indicating whether the summary for the column is enabled.
* ```typescript
* let hasSummary = this.column.hasSummary;
* ```
* @memberof IgxColumnComponent
*/
get hasSummary(): boolean;
set hasSummary(v: boolean);
/**
* Gets whether the column is hidden.
* ```typescript
* let isHidden = this.column.hidden;
* ```
* @memberof IgxColumnComponent
*/
get hidden(): boolean;
set hidden(v: boolean);
/**
* Returns if the column is selected.
* ```typescript
* let isSelected = this.column.selected;
* ```
* @memberof IgxColumnComponent
*/
get selected(): boolean;
set selected(v: boolean);
/**
* Gets whether the hiding is disabled.
* ```typescript
* let isHidingDisabled = this.column.disableHiding;
* ```
* @memberof IgxColumnComponent
*/
get disableHiding(): boolean;
set disableHiding(v: boolean);
/**
* Gets whether the pinning is disabled.
* ```typescript
* let isPinningDisabled = this.column.disablePinning;
* ```
* @memberof IgxColumnComponent
*/
get disablePinning(): boolean;
set disablePinning(v: boolean);
/**
* Gets the `width` of the column.
* ```typescript
* let columnWidth = this.column.width;
* ```
* @memberof IgxColumnComponent
*/
get width(): string;
set width(v: string);
get maxWidth(): string;
set maxWidth(v: string);
get headerClasses(): string;
set headerClasses(v: string);
get headerStyles(): any;
set headerStyles(v: any);
get headerGroupClasses(): string;
set headerGroupClasses(v: string);
get headerGroupStyles(): any;
set headerGroupStyles(v: any);
get cellClasses(): any;
set cellClasses(v: any);
get cellStyles(): any;
set cellStyles(v: any);
/**
* Applies display format to cell values in the column. Does not modify the underlying data.
* @remark
* Note: As the formatter is used in places like the Excel style filtering dialog, in certain
* scenarios (remote filtering for example), the row data argument can be `undefined`.
* In this example, we check to see if the column name is Salary, and then provide a method as the column formatter
* to format the value into a currency string.
* @example
* ```typescript
* columnInit(column: IgxColumnComponent) {
* if (column.field == "Salary") {
* column.formatter = (salary => this.format(salary));
* }
* }
* format(value: number) : string {
* return formatCurrency(value, "en-us", "$");
* }
* ```
* @example
* ```typescript
* const column = this.grid.getColumnByName('Address');
* const addressFormatter = (address: string, rowData: any) => data.privacyEnabled ? 'unknown' : address;
* column.formatter = addressFormatter;
* ```
* @memberof IgxColumnComponent
*/
get formatter(): (value: any, rowData: any) => any;
set formatter(v: (value: any, rowData: any) => any);
get summaryFormatter(): (summary: IgrSummaryResult, summaryOperand: IgrSummaryOperand) => any;
set summaryFormatter(v: (summary: IgrSummaryResult, summaryOperand: IgrSummaryOperand) => any);
get filteringIgnoreCase(): boolean;
set filteringIgnoreCase(v: boolean);
get sortingIgnoreCase(): boolean;
set sortingIgnoreCase(v: boolean);
get searchable(): boolean;
set searchable(v: boolean);
get dataType(): GridColumnDataType;
set dataType(v: GridColumnDataType);
get rowEnd(): number;
set rowEnd(v: number);
get colEnd(): number;
set colEnd(v: number);
get rowStart(): number;
set rowStart(v: number);
get colStart(): number;
set colStart(v: number);
get additionalTemplateContext(): any;
set additionalTemplateContext(v: any);
get minWidth(): string;
set minWidth(v: string);
/**
* Gets the column index.
* ```typescript
* let columnIndex = this.column.index;
* ```
* @memberof IgxColumnComponent
*/
get index(): number;
/**
* Gets whether the column is `pinned`.
* ```typescript
* let isPinned = this.column.pinned;
* ```
* @memberof IgxColumnComponent
*/
get pinned(): boolean;
set pinned(v: boolean);
/**
* Gets the column `summaries`.
* ```typescript
* let columnSummaries = this.column.summaries;
* ```
* @memberof IgxColumnComponent
*/
get summaries(): any;
set summaries(v: any);
get disabledSummaries(): string[];
set disabledSummaries(v: string[]);
/**
* Gets the column `filters`.
* ```typescript
* let columnFilters = this.column.filters'
* ```
* @memberof IgxColumnComponent
*/
get filters(): IgrFilteringOperand;
set filters(v: IgrFilteringOperand);
/**
* Gets the column `sortStrategy`.
* ```typescript
* let sortStrategy = this.column.sortStrategy
* ```
* @memberof IgxColumnComponent
*/
get sortStrategy(): IgrSortingStrategy;
set sortStrategy(v: IgrSortingStrategy);
private _summaryTemplate;
private _summaryTemplateAdapter;
/**
* Returns a reference to the `summaryTemplate`.
* ```typescript
* let summaryTemplate = this.column.summaryTemplate;
* ```
* @memberof IgxColumnComponent
*/
get summaryTemplate(): React.FunctionComponent<{
dataContext: IgrSummaryTemplateContext;
}> | React.Component<{
dataContext: IgrSummaryTemplateContext;
}>;
set summaryTemplate(v: React.FunctionComponent<{
dataContext: IgrSummaryTemplateContext;
}> | React.Component<{
dataContext: IgrSummaryTemplateContext;
}>);
private _bodyTemplate;
private _bodyTemplateAdapter;
/**
* Returns a reference to the `bodyTemplate`.
* ```typescript
* let bodyTemplate = this.column.bodyTemplate;
* ```
* @memberof IgxColumnComponent
*/
get bodyTemplate(): React.FunctionComponent<{
dataContext: IgrCellTemplateContext;
}> | React.Component<{
dataContext: IgrCellTemplateContext;
}>;
set bodyTemplate(v: React.FunctionComponent<{
dataContext: IgrCellTemplateContext;
}> | React.Component<{
dataContext: IgrCellTemplateContext;
}>);
private _headerTemplate;
private _headerTemplateAdapter;
/**
* Returns a reference to the header template.
* ```typescript
* let headerTemplate = this.column.headerTemplate;
* ```
* @memberof IgxColumnComponent
*/
get headerTemplate(): React.FunctionComponent<{
dataContext: IgrColumnTemplateContext;
}> | React.Component<{
dataContext: IgrColumnTemplateContext;
}>;
set headerTemplate(v: React.FunctionComponent<{
dataContext: IgrColumnTemplateContext;
}> | React.Component<{
dataContext: IgrColumnTemplateContext;
}>);
private _inlineEditorTemplate;
private _inlineEditorTemplateAdapter;
/**
* Returns a reference to the inline editor template.
* ```typescript
* let inlineEditorTemplate = this.column.inlineEditorTemplate;
* ```
* @memberof IgxColumnComponent
*/
get inlineEditorTemplate(): React.FunctionComponent<{
dataContext: IgrCellTemplateContext;
}> | React.Component<{
dataContext: IgrCellTemplateContext;
}>;
set inlineEditorTemplate(v: React.FunctionComponent<{
dataContext: IgrCellTemplateContext;
}> | React.Component<{
dataContext: IgrCellTemplateContext;
}>);
private _errorTemplate;
private _errorTemplateAdapter;
/**
* Returns a reference to the validation error template.
* ```typescript
* let errorTemplate = this.column.errorTemplate;
* ```
*/
get errorTemplate(): React.FunctionComponent<{
dataContext: IgrCellTemplateContext;
}> | React.Component<{
dataContext: IgrCellTemplateContext;
}>;
set errorTemplate(v: React.FunctionComponent<{
dataContext: IgrCellTemplateContext;
}> | React.Component<{
dataContext: IgrCellTemplateContext;
}>);
private _filterCellTemplate;
private _filterCellTemplateAdapter;
/**
* Returns a reference to the `filterCellTemplate`.
* ```typescript
* let filterCellTemplate = this.column.filterCellTemplate;
* ```
* @memberof IgxColumnComponent
*/
get filterCellTemplate(): React.FunctionComponent<{
dataContext: IgrColumnTemplateContext;
}> | React.Component<{
dataContext: IgrColumnTemplateContext;
}>;
set filterCellTemplate(v: React.FunctionComponent<{
dataContext: IgrColumnTemplateContext;
}> | React.Component<{
dataContext: IgrColumnTemplateContext;
}>);
/**
* Gets the column visible index.
* If the column is not visible, returns `-1`.
* ```typescript
* let visibleColumnIndex = this.column.visibleIndex;
* ```
* @memberof IgxColumnComponent
*/
get visibleIndex(): number;
/**
* Returns a boolean indicating if the column is a `ColumnGroup`.
* ```typescript
* let columnGroup = this.column.columnGroup;
* ```
* @memberof IgxColumnComponent
*/
get columnGroup(): boolean;
/**
* Returns a boolean indicating if the column is a `ColumnLayout` for multi-row layout.
* ```typescript
* let columnGroup = this.column.columnGroup;
* ```
* @memberof IgxColumnComponent
*/
get columnLayout(): boolean;
/**
* Returns a boolean indicating if the column is a child of a `ColumnLayout` for multi-row layout.
* ```typescript
* let columnLayoutChild = this.column.columnLayoutChild;
* ```
* @memberof IgxColumnComponent
*/
get columnLayoutChild(): boolean;
/**
* A list containing all the child columns under this column (if any).
* Empty without children or if this column is not Group or Layout.
*/
get childColumns(): IgrColumn[];
/**
* Returns the level of the column in a column group.
* Returns `0` if the column doesn't have a `parent`.
* ```typescript
* let columnLevel = this.column.level;
* ```
* @memberof IgxColumnComponent
*/
get level(): number;
get visibleWhenCollapsed(): boolean;
set visibleWhenCollapsed(v: boolean);
get pipeArgs(): IgrColumnPipeArgs;
set pipeArgs(v: IgrColumnPipeArgs);
get editorOptions(): IgrColumnEditorOptions;
set editorOptions(v: IgrColumnEditorOptions);
/**
* Returns the filteringExpressionsTree of the column.
* ```typescript
* let tree = this.column.filteringExpressionsTree;
* ```
* @memberof IgxColumnComponent
*/
get filteringExpressionsTree(): IgrFilteringExpressionsTree;
/**
* Sets/gets the parent column.
* ```typescript
* let parentColumn = this.column.parent;
* ```
* ```typescript
* this.column.parent = higherLevelColumn;
* ```
* @memberof IgxColumnComponent
*/
get parent(): any;
set parent(v: any);
/**
* Returns a reference to the top level parent column.
* ```typescript
* let topLevelParent = this.column.topLevelParent;
* ```
*/
get topLevelParent(): IgrColumn;
get name(): string;
set name(v: string);
findByName(name: string): any;
protected __p: string;
protected _hasUserValues: Set<string>;
protected get hasUserValues(): Set<string>;
protected __m(propertyName: string): void;
protected _stylingContainer: any;
protected _stylingParent: any;
protected _inStyling: boolean;
protected _styling(container: any, component: any, parent?: any): void;
setNativeElement(element: any): void;
/**
* Pins the column at the provided index in the pinned area.
* Defaults to index `0` if not provided, or to the initial index in the pinned area.
* Returns `true` if the column is successfully pinned. Returns `false` if the column cannot be pinned.
* Column cannot be pinned if:
* - Is already pinned
* - index argument is out of range
* - The pinned area exceeds 80% of the grid width
* ```typescript
* let success = this.column.pin();
* ```
* @memberof IgxColumnComponent
*/
pin(index?: number): boolean;
/**
* Unpins the column and place it at the provided index in the unpinned area.
* Defaults to index `0` if not provided, or to the initial index in the unpinned area.
* Returns `true` if the column is successfully unpinned. Returns `false` if the column cannot be unpinned.
* Column cannot be unpinned if:
* - Is already unpinned
* - index argument is out of range
* ```typescript
* let success = this.column.unpin();
* ```
* @memberof IgxColumnComponent
*/
unpin(index?: number): boolean;
/**
* Moves a column to the specified visible index.
* If passed index is invalid, or if column would receive a different visible index after moving, moving is not performed.
* If passed index would move the column to a different column group. moving is not performed.
* @example
* ```typescript
* column.move(index);
* ```
* @memberof IgxColumnComponent
*/
move(index: number): void;
/**
* Autosize the column to the longest currently visible cell value, including the header cell.
* ```typescript
* @ViewChild('grid') grid: IgxGridComponent;
* let column = this.grid.columnList.filter(c => c.field === 'ID')[0];
* column.autosize();
* ```
* @memberof IgxColumnComponent
* byHeaderOnly Set if column should be autosized based only on the header content.
* @param byHeaderOnly * Set if column should be autosized based only on the header content.
*/
autosize(byHeaderOnly?: boolean): void;
}
export interface IIgrColumnProps {
children?: React.ReactNode;
id?: string | undefined;
className?: string | undefined;
style?: React.CSSProperties | undefined;
field?: string;
header?: string;
title?: string;
sortable?: boolean | string;
/**
* Returns if the column is selectable.
* ```typescript
* let columnSelectable = this.column.selectable;
* ```
* @memberof IgxColumnComponent
*/
selectable?: boolean | string;
groupable?: boolean | string;
/**
* Gets whether the column is editable.
* Default value is `false`.
* ```typescript
* let isEditable = this.column.editable;
* ```
* @memberof IgxColumnComponent
*/
editable?: boolean | string;
filterable?: boolean | string;
resizable?: boolean | string;
autosizeHeader?: boolean | string;
/**
* Gets a value indicating whether the summary for the column is enabled.
* ```typescript
* let hasSummary = this.column.hasSummary;
* ```
* @memberof IgxColumnComponent
*/
hasSummary?: boolean | string;
/**
* Gets whether the column is hidden.
* ```typescript
* let isHidden = this.column.hidden;
* ```
* @memberof IgxColumnComponent
*/
hidden?: boolean | string;
/**
* Returns if the column is selected.
* ```typescript
* let isSelected = this.column.selected;
* ```
* @memberof IgxColumnComponent
*/
selected?: boolean | string;
/**
* Gets whether the hiding is disabled.
* ```typescript
* let isHidingDisabled = this.column.disableHiding;
* ```
* @memberof IgxColumnComponent
*/
disableHiding?: boolean | string;
/**
* Gets whether the pinning is disabled.
* ```typescript
* let isPinningDisabled = this.column.disablePinning;
* ```
* @memberof IgxColumnComponent
*/
disablePinning?: boolean | string;
/**
* Gets the `width` of the column.
* ```typescript
* let columnWidth = this.column.width;
* ```
* @memberof IgxColumnComponent
*/
width?: string;
maxWidth?: string;
headerClasses?: string;
headerStyles?: any;
headerGroupClasses?: string;
headerGroupStyles?: any;
cellClasses?: any;
cellStyles?: any;
/**
* Applies display format to cell values in the column. Does not modify the underlying data.
* @remark
* Note: As the formatter is used in places like the Excel style filtering dialog, in certain
* scenarios (remote filtering for example), the row data argument can be `undefined`.
* In this example, we check to see if the column name is Salary, and then provide a method as the column formatter
* to format the value into a currency string.
* @example
* ```typescript
* columnInit(column: IgxColumnComponent) {
* if (column.field == "Salary") {
* column.formatter = (salary => this.format(salary));
* }
* }
* format(value: number) : string {
* return formatCurrency(value, "en-us", "$");
* }
* ```
* @example
* ```typescript
* const column = this.grid.getColumnByName('Address');
* const addressFormatter = (address: string, rowData: any) => data.privacyEnabled ? 'unknown' : address;
* column.formatter = addressFormatter;
* ```
* @memberof IgxColumnComponent
*/
formatter?: (value: any, rowData: any) => any;
summaryFormatter?: (summary: IgrSummaryResult, summaryOperand: IgrSummaryOperand) => any;
filteringIgnoreCase?: boolean | string;
sortingIgnoreCase?: boolean | string;
searchable?: boolean | string;
dataType?: GridColumnDataType | string;
rowEnd?: number | string;
colEnd?: number | string;
rowStart?: number | string;
colStart?: number | string;
additionalTemplateContext?: any;
minWidth?: string;
/**
* Gets whether the column is `pinned`.
* ```typescript
* let isPinned = this.column.pinned;
* ```
* @memberof IgxColumnComponent
*/
pinned?: boolean | string;
/**
* Gets the column `summaries`.
* ```typescript
* let columnSummaries = this.column.summaries;
* ```
* @memberof IgxColumnComponent
*/
summaries?: any;
disabledSummaries?: string[];
/**
* Gets the column `filters`.
* ```typescript
* let columnFilters = this.column.filters'
* ```
* @memberof IgxColumnComponent
*/
filters?: IgrFilteringOperand;
/**
* Gets the column `sortStrategy`.
* ```typescript
* let sortStrategy = this.column.sortStrategy
* ```
* @memberof IgxColumnComponent
*/
sortStrategy?: IgrSortingStrategy;
/**
* Returns a reference to the `summaryTemplate`.
* ```typescript
* let summaryTemplate = this.column.summaryTemplate;
* ```
* @memberof IgxColumnComponent
*/
summaryTemplate?: React.FunctionComponent<{
dataContext: IgrSummaryTemplateContext;
}> | React.Component<{
dataContext: IgrSummaryTemplateContext;
}>;
/**
* Returns a reference to the `bodyTemplate`.
* ```typescript
* let bodyTemplate = this.column.bodyTemplate;
* ```
* @memberof IgxColumnComponent
*/
bodyTemplate?: React.FunctionComponent<{
dataContext: IgrCellTemplateContext;
}> | React.Component<{
dataContext: IgrCellTemplateContext;
}>;
/**
* Returns a reference to the header template.
* ```typescript
* let headerTemplate = this.column.headerTemplate;
* ```
* @memberof IgxColumnComponent
*/
headerTemplate?: React.FunctionComponent<{
dataContext: IgrColumnTemplateContext;
}> | React.Component<{
dataContext: IgrColumnTemplateContext;
}>;
/**
* Returns a reference to the inline editor template.
* ```typescript
* let inlineEditorTemplate = this.column.inlineEditorTemplate;
* ```
* @memberof IgxColumnComponent
*/
inlineEditorTemplate?: React.FunctionComponent<{
dataContext: IgrCellTemplateContext;
}> | React.Component<{
dataContext: IgrCellTemplateContext;
}>;
/**
* Returns a reference to the validation error template.
* ```typescript
* let errorTemplate = this.column.errorTemplate;
* ```
*/
errorTemplate?: React.FunctionComponent<{
dataContext: IgrCellTemplateContext;
}> | React.Component<{
dataContext: IgrCellTemplateContext;
}>;
/**
* Returns a reference to the `filterCellTemplate`.
* ```typescript
* let filterCellTemplate = this.column.filterCellTemplate;
* ```
* @memberof IgxColumnComponent
*/
filterCellTemplate?: React.FunctionComponent<{
dataContext: IgrColumnTemplateContext;
}> | React.Component<{
dataContext: IgrColumnTemplateContext;
}>;
visibleWhenCollapsed?: boolean | string;
pipeArgs?: IgrColumnPipeArgs;
editorOptions?: IgrColumnEditorOptions;
/**
* Sets/gets the parent column.
* ```typescript
* let parentColumn = this.column.parent;
* ```
* ```typescript
* this.column.parent = higherLevelColumn;
* ```
* @memberof IgxColumnComponent
*/
parent?: any;
name?: string;
}