@progress/kendo-react-grid
Version:
KendoReact Grid package
103 lines (102 loc) • 3.96 kB
TypeScript
import { ComponentType, ReactElement } from 'react';
import { GridCellProps } from '../interfaces/GridCellProps';
import { GridFilterCellProps } from '../interfaces/GridFilterCellProps';
import { GridHeaderCellProps } from '../interfaces/GridHeaderCellProps';
import { GridColumnMenuProps } from '../interfaces/GridColumnMenuProps';
/**
* The props of the GridColumnProps component.
*/
export interface GridColumnProps {
/**
* The field to which the column is bound.
*/
field?: string;
/**
* The title of the column.
*/
title?: string;
/**
* Defines whether the column is editable ([more information and examples]({% slug editing_inline_grid %})).
*/
editable?: boolean;
/**
* Allows the column headers to be clicked and the `sortChange` event emitted. You have to handle the `sortChange` event yourself and sort the data.
*/
sortable?: boolean;
/**
* Defines the component that will be rendered as a cell. If not set, a `GridCell` will be rendered by default.
*/
cell?: ComponentType<GridCellProps>;
/**
* Defines the component that will be rendered as a filter cell. If not set, a `GridFilterCell` will be rendered by default.
*/
filterCell?: ComponentType<GridFilterCellProps>;
/**
* Defines if a filter UI will be displayed for this column. Defaults to `true`.
*/
filterable?: boolean;
/**
* Defines the filter type that is displayed inside the filter row. Defaults to `text`.
*/
filter?: 'text' | 'numeric' | 'boolean' | 'date';
/**
* Defines the editor type. Used when the column enters the edit mode ([more information and examples]({% slug editing_inline_grid %})). Defaults to `text`.
*/
editor?: 'text' | 'numeric' | 'boolean' | 'date';
/**
* The width of the column (in pixels).
*/
width?: string | number;
/**
* The width of the column (in pixels) below which the user is not able to resize the column through the UI. Defaults to `10`.
*/
minResizableWidth?: number;
/**
* Defines the component that will be rendered as a header cell. If not set, a `GridHeaderCell` will be rendered by default.
*/
headerCell?: ComponentType<GridHeaderCellProps>;
/**
* Defines if the header selection checkbox is checked.
*/
headerSelectionValue?: boolean;
/**
* The format that is applied to the value before it is displayed. Takes the `{0:format}` form where `format` is a standard number format, a custom number format, a standard date format, or a custom date format. For more information on the supported date and number formats, refer to the [kendo-intl](https://github.com/telerik/kendo-intl/blob/develop/docs/index.md) documentation.
*/
format?: string;
/**
* Sets the custom CSS classes to the column header cell.
*/
headerClassName?: string;
/**
* Sets the custom CSS classes to the column cells.
*/
className?: string;
/**
* Indicates whether the column is reorderable.
*/
reorderable?: boolean;
/**
* Indicates whether the column is resizable.
*/
resizable?: boolean;
/**
* Determinates the position of the column. Columns with smaller `orderIndex` will appear before columns with bigger `orderIndex`. Defaults to `0`.
*/
orderIndex?: number;
/**
* Determines if the column can be dragged to the group panel. Defaults to `true`.
*/
groupable?: boolean;
/**
* A collection of child columns.
*/
children?: (GridColumnProps | ReactElement<GridColumnProps>)[] | ReactElement<GridColumnProps>;
/**
* Specifies a React element that will be cloned and rendered inside the column menu of the Grid ([see example]({% slug column_menu_grid %}#toc-basic-usage)).
*/
columnMenu?: null | ComponentType<GridColumnMenuProps>;
/**
*
*/
locked?: boolean;
}