@progress/kendo-react-grid

/** * @license *------------------------------------------------------------------------------------------- * Copyright © 2025 Progress Software Corporation. All rights reserved. * Licensed under commercial license. See LICENSE.md in the package root for more information *------------------------------------------------------------------------------------------- */ import { BaseEvent } from '@progress/kendo-react-common'; import { CellProps } from '@progress/kendo-react-data-tools'; import { ClipboardSettings } from '@progress/kendo-react-data-tools'; import { ColumnBaseProps } from '@progress/kendo-react-data-tools'; import { ColumnSortSettings } from '@progress/kendo-react-data-tools'; import { ComponentType } from 'react'; import { CompositeFilterDescriptor } from '@progress/kendo-data-query'; import { DataResult } from '@progress/kendo-data-query'; import { DetailExpandDescriptor } from '@progress/kendo-react-data-tools'; import { DragClue } from '@progress/kendo-react-data-tools'; import { DropClue } from '@progress/kendo-react-data-tools'; import { EditDescriptor } from '@progress/kendo-react-data-tools'; import { FilterOperator } from '@progress/kendo-react-data-tools'; import { getSelectedState } from '@progress/kendo-react-data-tools'; import { getSelectedStateFromKeyDown } from '@progress/kendo-react-data-tools'; import { GridClassStructure } from '@progress/kendo-react-common'; import { GridClipboardEvent } from '@progress/kendo-react-data-tools'; import { GroupDescriptor } from '@progress/kendo-data-query'; import { GroupExpandDescriptor } from '@progress/kendo-react-data-tools'; import { GroupState } from '@progress/kendo-react-data-tools'; import { HeaderCellBaseProps } from '@progress/kendo-react-data-tools'; import { HeaderThElementProps } from '@progress/kendo-react-data-tools'; import { IntlService } from '@progress/kendo-react-intl'; import { JSX as JSX_2 } from 'react/jsx-runtime'; import { KendoReactComponentBaseProps } from '@progress/kendo-react-common'; import { LocalizationService } from '@progress/kendo-react-intl'; import { MenuItemModel } from '@progress/kendo-react-layout'; import { MenuSelectEvent } from '@progress/kendo-react-layout'; import { NavigatableSettings } from '@progress/kendo-react-data-tools'; import { NormalizedDragEvent } from '@progress/kendo-react-common'; import { Offset } from '@progress/kendo-react-popup'; import { PagerProps } from '@progress/kendo-react-data-tools'; import { PagerTargetEvent } from '@progress/kendo-react-data-tools'; import * as React_2 from 'react'; import { ReactElement } from 'react'; import { SearchField } from '@progress/kendo-react-data-tools'; import { SelectDescriptor } from '@progress/kendo-react-data-tools'; import { setSelectedState } from '@progress/kendo-react-data-tools'; import { SortDescriptor } from '@progress/kendo-data-query'; import { SortSettings } from '@progress/kendo-react-data-tools'; import { State } from '@progress/kendo-data-query'; import { SVGIcon } from '@progress/kendo-react-common'; import { SVGIcon as SVGIcon_2 } from '@progress/kendo-svg-icons'; import { TABLE_COL_INDEX_ATTRIBUTE } from '@progress/kendo-react-data-tools'; import { TableDragSelectionReleaseEvent } from '@progress/kendo-react-data-tools'; import { TableEditableSettings } from '@progress/kendo-react-data-tools'; import { TableGroupExpandableSettings } from '@progress/kendo-react-data-tools'; import { TableKeyDownEvent } from '@progress/kendo-react-data-tools'; import { TableSelectableMode } from '@progress/kendo-react-data-tools'; import { TableSelectableSettings } from '@progress/kendo-react-data-tools'; import { TableSelectionChangeEvent } from '@progress/kendo-react-data-tools'; import { TextBoxChangeEvent } from '@progress/kendo-react-inputs'; import { TextBoxProps } from '@progress/kendo-react-inputs'; /** * The value of the filter operators displayed in the boolean filter menu. */ export declare const booleanFilterValues: ({ text: string; operator: string; } | { text: string; operator: boolean; })[]; /** * Normalize data for calling onChange. */ export declare const cellBoolDropdownChange: (event: any, onChange: Function) => void; /** * Normalize data for calling onChange. */ export declare const cellInputChange: (value: any, e: React_2.SyntheticEvent<any>, props: any) => void; /** * Normalize data for calling onChange. */ export declare const cellOperatorChange: (event: any, currentValue: any, onChange: Function) => void; /** * @hidden */ export declare const contextMenuItemsMap: { create: { name: string; text: string; icon: string; svgIcon: SVGIcon_2; data: { action: string; }; }; edit: { name: string; text: string; icon: string; svgIcon: SVGIcon_2; data: { action: string; }; }; delete: { name: string; text: string; icon: string; svgIcon: SVGIcon_2; data: { action: string; }; }; select: { name: string; text: string; icon: string; svgIcon: SVGIcon_2; items: { name: string; text: string; icon: string; svgIcon: SVGIcon_2; data: { action: string; }; }[]; }; copySelection: { name: string; text: string; icon: string; svgIcon: SVGIcon_2; data: { action: string; }; options: string; }; copySelectionNoHeaders: { name: string; text: string; icon: string; svgIcon: SVGIcon_2; data: { action: string; }; }; paste: { name: string; text: string; icon: string; svgIcon: SVGIcon_2; data: { action: string; }; }; reorderRow: { name: string; text: string; icon: string; svgIcon: SVGIcon_2; items: { name: string; text: string; icon: string; svgIcon: SVGIcon_2; data: { action: string; }; }[]; }; exportPDF: { name: string; text: string; icon: string; svgIcon: SVGIcon_2; data: { action: string; }; }; exportExcel: { name: string; text: string; icon: string; svgIcon: SVGIcon_2; items: ({ name: string; text: string; data: { action: string; }; options?: undefined; } | { name: string; text: string; data: { action: string; }; options: string; })[]; }; separator: { name: string; separator: boolean; }; sortAsc: { name: string; text: string; icon: string; svgIcon: SVGIcon_2; data: { action: string; }; }; sortDesc: { name: string; text: string; icon: string; svgIcon: SVGIcon_2; data: { action: string; }; }; }; /** * @hidden */ declare interface ExtendedColumnProps extends GridColumnProps { declarationIndex: number; parentIndex: number; rowSpan: number; depth: number; colSpan: number; kFirst?: boolean; index: number; headerColSpan: number; children: ExtendedColumnProps[]; left: number; right: number; rightBorder: boolean; ariaColumnIndex: number; isAccessible: boolean; /** @hidden _internal usage only */ _type?: 'edit' | 'expand'; rowSpannable?: Required<GridRowSpannableSettings>; } /** * @hidden */ export declare const filterGroupByField: (field: string, filter: CompositeFilterDescriptor | undefined) => CompositeFilterDescriptor | null; export { getSelectedState } export { getSelectedStateFromKeyDown } /** * Calculates the status data. * * @param args StatusDataArgs * @returns StatusItem[] */ export declare const getStatusData: (args: StatusDataArgs) => StatusItem[]; /** * Represents the [KendoReact Grid component]({% slug overview_grid %}). * * @example * ```jsx * const App = () => { * const [data, setData] = useState([ * { foo: 'A1', bar: 'B1' }, * { foo: 'A2', bar: 'B2' }, * { foo: 'A3', bar: 'B2' } * ]); * * return ( * <Grid data={data} reorderable={true}> * <GridColumn field="foo" /> * <GridColumn field="bar" /> * </Grid> * ); * }; * * export default App; * ``` */ export declare const Grid: React_2.ForwardRefExoticComponent<GridProps & React_2.RefAttributes<GridHandle | null>>; /** The attribute required by the Grid selection on Grid `td` elements. */ export declare const GRID_COL_INDEX_ATTRIBUTE = "data-grid-col-index"; /** Attribute which disable selection start from this element. */ export declare const GRID_PREVENT_SELECTION_ELEMENT = "data-prevent-selection"; /** The attribute required by the Grid selection on Grid `tr` elements. */ export declare const GRID_ROW_INDEX_ATTRIBUTE = "data-grid-row-index"; export declare const GridCell: (props: GridCellProps) => JSX_2.Element | null; /** * Represents the `GridCellBaseOptions` object that are passed to the handler. */ export declare interface GridCellBaseOptions { dataItem?: any; field?: string; } /** * Represents the props of the GridCell component * ([more information]({% slug cells_grid %}#toc-grid-cells)). */ export declare interface GridCellProps extends Omit<CellProps, 'onChange' | 'render'> { /** * Zero-based index of the dataItem. */ dataIndex: number; /** * The index of the column in the rendered columns collection. */ columnIndex?: number; /** * The number of rendered columns in the Grid. */ columnsCount?: number; /** * Sets a set of cells components that the Grid will render instead of the built-in cell. */ cells?: GridCellsSettings; /** * The type of the row. */ rowType?: GridRowType; /** * @hidden */ level?: number; /** * The event that is fired when the cell is selected. */ selectionChange?: (event: { syntheticEvent: React.SyntheticEvent<any>; }) => void; /** * The event that is fired when the cell value is changed. */ onChange?: (event: { dataItem: any; dataIndex: number; syntheticEvent: React.SyntheticEvent<any>; field?: string; value?: any; /** @hidden */ _expand?: boolean; /** @hidden */ _group?: GroupState; }) => void; /** * The type of the editor which will be used when the cell is in edit mode. */ editor?: 'text' | 'numeric' | 'boolean' | 'date'; /** * A function for overriding the default rendering of the cell. */ render?: (defaultRendering: React.ReactElement<HTMLTableCellElement> | null, props: GridCellProps) => React.ReactElement<HTMLTableCellElement> | null; /** * @hidden */ locked?: boolean | undefined; /** * The event that is fired when the ContextMenu is activated. */ onContextMenu?: (event: React.MouseEvent<HTMLElement>, dataItem: any, field?: string) => void; /** * @hidden */ isRtl?: boolean; /** * @hidden */ unstyled?: GridClassStructure; /** * @hidden */ rowDataIndex?: number; /** * @hidden */ columnType?: GridColumnType; /** * @hidden */ rowReorderable?: boolean; /** * @hidden */ columnPosition: any; /** @hidden */ group?: GroupState; /** @hidden */ localization?: LocalizationService; /** @hidden */ intl?: IntlService; /** @hidden */ _rowSpan?: { count: number | null; value: any; }; } /** * The settings of the cells prop options. */ export declare interface GridCellsSettings { headerCell?: ComponentType<GridCustomHeaderCellProps>; filterCell?: ComponentType<GridCustomFilterCellProps>; footerCell?: ComponentType<GridCustomFooterCellProps>; groupHeader?: ComponentType<GridCustomCellProps>; data?: ComponentType<GridCustomCellProps>; groupFooter?: ComponentType<GridCustomCellProps>; select?: { groupHeader?: ComponentType<GridCustomCellProps>; data?: ComponentType<GridCustomCellProps>; groupFooter?: ComponentType<GridCustomCellProps>; }; hierarchy?: { groupHeader?: ComponentType<GridCustomCellProps>; data?: ComponentType<GridCustomCellProps>; groupFooter?: ComponentType<GridCustomCellProps>; }; group?: { groupHeader?: ComponentType<GridCustomCellProps>; data?: ComponentType<GridCustomCellProps>; groupFooter?: ComponentType<GridCustomCellProps>; }; edit?: { text?: ComponentType<GridCustomCellProps>; numeric?: ComponentType<GridCustomCellProps>; boolean?: ComponentType<GridCustomCellProps>; date?: ComponentType<GridCustomCellProps>; }; } /** * Represents the properties of the callback used when spanning a column. */ export declare type GridColSpanProps = { /** * Represents the properties of the spanned column. */ column: GridColumnProps; /** * Represents the current row data item. */ dataItem: any; }; /** * @hidden */ export declare const GridColumn: React_2.FunctionComponent<GridColumnProps>; /** * The type of elements that the children property of the Grid accepts. */ export declare interface GridColumnChildrenProps extends GridColumnProps, ReactElement<GridColumnProps> { } /** * @hidden */ declare interface GridColumnMenuBaseProps { /** * The current column options. */ column: GridColumnMenuColumnProps; /** * The method that will be called to close the column menu. */ onCloseMenu?: Function; } export declare const GridColumnMenuCheckboxFilter: (props: GridColumnMenuCheckboxFilterProps) => JSX_2.Element; /** * The props of the GridColumnMenuFilter component. */ export declare interface GridColumnMenuCheckboxFilterProps extends GridColumnMenuFilterBaseProps { /** * Controls the expand state of the filter component. */ expanded?: boolean; /** * Sets the items collection that will be rendered by the GridColumnMenuCheckboxFilter component. */ data: Array<string | object>; /** * Triggered on each subsequent expand state of the filter component. */ onExpandChange?: (nextExpandState: boolean) => void; /** * Defines the component that will be rendered as a search box. */ searchBox?: React_2.ComponentType<any>; /** * Defines the filter operator that will be used to filter the values via the search box. * "startswith" * "endswith" * "contains" * "doesnotcontain" * "isempty" * "isnotempty" * "eq" (equal to) * "eq" (equal to) * "neq" (not equal to) * "isnull" (is equal to null) * "isnotnull" (is not equal to null) */ searchBoxFilterOperator?: string | Function; /** * Determines if the data in the component will be unique. By default the property is set to true. */ uniqueData?: boolean; } /** * The column props passed by the ColumnMenu. */ export declare interface GridColumnMenuColumnProps { /** * The field to which the column is bound. */ field?: string; /** * Defines the filter type that is displayed inside the filter row. Defaults to `text`. */ filter?: 'text' | 'numeric' | 'boolean' | 'date'; /** * The column locked state. */ locked?: boolean; /** * @hidden */ title?: string; /** * The column id. */ id?: string; } /** * Represents the KendoReact GridColumnMenuColumnsChooser component. */ export declare const GridColumnMenuColumnsChooser: React_2.FunctionComponent<GridColumnMenuColumnsChooserProps>; /** * The props passed to the ColumnMenu ColumnsChooser component. */ declare interface GridColumnMenuColumnsChooserBaseProps extends GridColumnMenuBaseProps { /** * The columns state of the KendoReact GridColumnMenuColumnsChooser component. */ columnsState?: GridColumnState[]; /** * The method that will be called when the new columns state is applied. */ onColumnsStateChange?: Function; } /** * The props of the GridColumnMenuColumnsChooser component. */ export declare interface GridColumnMenuColumnsChooserProps extends GridColumnMenuColumnsChooserBaseProps { } /** * Represents the KendoReact GridColumnMenuColumnsList component. */ export declare const GridColumnMenuColumnsList: React_2.FunctionComponent<GridColumnMenuColumnsListProps>; /** * Represents the props of the KendoReact GridColumnMenuColumnsList component. */ export declare interface GridColumnMenuColumnsListProps { /** * The columns state of the KendoReact GridColumnMenuColumnsList component. */ columnsState: GridColumnProps[]; /** * The initial columns of the KendoReact GridColumnMenuColumnsList component. */ columns: GridColumnProps[]; /** * The onColumnsChange event handler of the KendoReact GridColumnMenuColumnsList component. */ onColumnsChange: (cols: GridColumnProps[]) => void; /** * The onCloseMenu event handler of the KendoReact GridColumnMenuColumnsList component. */ onCloseMenu: Function; } /** * @example * ```jsx-no-run * class TextColumnMenu extends React.Component { * render() { * return ( * <div> * <GridColumnMenuSort {...this.props} /> * <GridColumnMenuFilter {...this.props} /> * </div>); * } * } * * class App extends React.PureComponent { * constructor(props) { * super(props); * * this.state = this.createAppState({ * take: 10, * skip: 0 * }); * } * * createAppState(dataState) { * return { * result: process(products.slice(0), dataState), * dataState: dataState * }; * } * * dataStateChange = (event) => { * this.setState(this.createAppState(event.dataState)); * } * * render() { * return ( * <div> * <Grid * data={this.state.result} * {...this.state.dataState} * onDataStateChange={this.dataStateChange} * sortable={true} * pageable={true} * > * <Column field="ProductID" title="Product ID" /> * <Column field="ProductName" columnMenu={TextColumnMenu} /> * </Grid> * <br /> * </div> * ); * } * } * * ReactDOM.render(<App />, document.querySelector('my-app')); * ``` */ export declare const GridColumnMenuFilter: (props: GridColumnMenuFilterProps) => JSX_2.Element; /** * The props passed to the ColumnMenu filter component. */ declare interface GridColumnMenuFilterBaseProps extends GridColumnMenuBaseProps { /** * The current filter state of the Grid.It takes value of type [CompositeFilterDescriptor]({% slug api_kendo-data-query_compositefilterdescriptor %}) */ filter?: CompositeFilterDescriptor; /** * The filterable option of the column. */ filterable?: boolean | undefined; /** * The filter operators for the Grid filters. */ filterOperators: GridFilterOperators; /** * The method that will be called to notify the parent Grid about a filter change. */ onFilterChange?: (filter: CompositeFilterDescriptor | null, syntheticEvent: React.SyntheticEvent<any>) => any; } /** * @hidden */ export declare const GridColumnMenuFilterCell: (props: GridColumnMenuFilterCellProps) => JSX_2.Element; /** * @hidden */ export declare interface GridColumnMenuFilterCellProps { field?: string; filterType: 'text' | 'numeric' | 'boolean' | 'date'; value: any; operator?: string | Function; operators: GridFilterOperator[]; booleanValues: GridFilterOperator[]; onChange: (event: { value: any; operator: string | Function; syntheticEvent: React_2.SyntheticEvent<any>; }) => void; } /** * The props of the GridColumnMenuFilter component. */ export declare interface GridColumnMenuFilterProps extends GridColumnMenuFilterBaseProps { /** * Controls the expand state of the filter component. */ expanded?: boolean; /** * Triggered on each subsequent expand state of the filter component. */ onExpandChange?: (nextExpandState: boolean) => void; /** * If set to `false`, the second filter operator and the input will be hidden. */ hideSecondFilter?: boolean; /** * Specifies a React element that will be cloned and rendered inside the UI of the column-menu filter component * ([see example]({% slug column_menu_grid %}#toc-customizing-the-filter-component)). */ filterUI?: ComponentType<GridColumnMenuFilterUIProps>; children?: React_2.ReactNode; /** * If set to `true`, filter expand button will not be rendered and filter menu will be expanded. */ alwaysExpand?: boolean; } /** * @hidden */ export declare const GridColumnMenuFilterUI: (props: GridColumnMenuFilterUIProps) => JSX_2.Element; /** * The props that will be passed to the UI of the ColumnMenu filter component. */ export declare interface GridColumnMenuFilterUIProps { /** * The options of the first filter. */ firstFilterProps: GridFilterCellProps; /** * The options of the second filter. */ secondFilterProps: GridFilterCellProps; /** * The current value of the filter logic. */ logicValue?: GridFilterOperator; /** * The list of the filter logic options. */ logicData: GridFilterOperator[]; /** * The method that will be called to notify the parent about a change in the filter logic. */ onLogicChange: (e: any) => void; /** * Indicates if the second filter will be hidden. */ hideSecondFilter?: boolean; } /** * @example * ```jsx-no-run * const TextColumnMenu = (props) => { * return ( * <div> * <GridColumnMenuSort {...props} /> * <GridColumnMenuGroup {...props} /> * </div> * ); * }; * * const initialState = { * take: 10, * skip: 0 * }; * * const App = () => { * const [dataState, setDataState] = useState(initialState); * const [result, setResult] = useState(process(products.slice(0), initialState)); * * const dataStateChange = (event) => { * setDataState(event.dataState); * setResult(process(products.slice(0), event.dataState)); * } * * return ( * <div> * <Grid * data={result} * {...dataState} * onDataStateChange={dataStateChange} * sortable={true} * pageable={true} * > * <Column field="ProductID" title="Product ID" /> * <Column field="ProductName" columnMenu={TextColumnMenu} /> * </Grid> * <br /> * </div> * ); * }; * * export default App; * ``` */ export declare const GridColumnMenuGroup: (props: GridColumnMenuGroupProps) => JSX_2.Element; /** * The props passed to the ColumnMenu group component. */ declare interface GridColumnMenuGroupBaseProps extends GridColumnMenuBaseProps { /** * The groupable option of the column. */ groupable?: boolean; /** * The current group state of the Grid. It takes value of type [GroupDescriptor]({% slug api_kendo-data-query_groupdescriptor %})[] */ group?: GroupDescriptor[]; /** * The method that will be called to notify the parent Grid about a group change. */ onGroupChange?: (groups: GroupDescriptor[], event: React.MouseEvent<HTMLAnchorElement>) => void; } /** * The props of the GridColumnMenuGroup component. */ declare interface GridColumnMenuGroupProps extends GridColumnMenuGroupBaseProps { } /** * The GridColumnMenuItem component that is used inside the Grid ColumnMenu. */ export declare const GridColumnMenuItem: (props: GridColumnMenuItemProps) => JSX_2.Element; /** * The GridColumnMenuItemContent that will be used inside the Grid ColumnMenu. */ export declare const GridColumnMenuItemContent: (props: GridColumnMenuItemContentProps) => JSX_2.Element; /** * The props of the GridColumnMenuItemContent component. */ declare interface GridColumnMenuItemContentProps extends KendoReactComponentBaseProps { /** * The `show` state of the component. Each change is animated with the Reveal animation. */ show: boolean; } /** * The GridColumnMenuItemGroup that will be used inside the Grid ColumnMenu. */ export declare const GridColumnMenuItemGroup: (props: GridColumnMenuItemGroupProps) => JSX_2.Element; /** * The props of the GridColumnMenuItemGroup component. */ declare interface GridColumnMenuItemGroupProps extends KendoReactComponentBaseProps { } declare interface GridColumnMenuItemGroupProps extends KendoReactComponentBaseProps { } /** * The props of the GridColumnMenuItem component. */ declare interface GridColumnMenuItemProps { /** * Triggered each time the title is clicked. */ onClick: React_2.MouseEventHandler<HTMLElement>; /** * The title of the GridColumnMenuItem component. */ title: string; /** * The class of the icon that is rendered next to the title. */ iconClass: string; /** * The SVG icon that is rendered next to the title. */ svgIcon?: SVGIcon; /** * The selected state of the component. */ selected?: boolean; } /** * The props which the ColumnMenu passes to its children. */ export declare interface GridColumnMenuProps extends GridColumnMenuFilterBaseProps, GridColumnMenuSortBaseProps, GridColumnMenuGroupBaseProps, GridColumnMenuColumnsChooserBaseProps { navigatable?: boolean; show?: boolean; } /** * @example * ```jsx-no-run * const ColumnMenu = (props) => { * return ( * <div> * <GridColumnMenuSort {...props} /> * </div> * ); * }; * * const initialState = { * take: 10, * skip: 0 * }; * * const App = () => { * const [dataState, setDataState] = useState(initialState); * const [result, setResult] = useState(process(products.slice(0), initialState)); * * const dataStateChange = (event) => { * setDataState(event.dataState); * setResult(process(products.slice(0), event.dataState)); * }; * * return ( * <div> * <div> * <Grid * data={result} * {...dataState} * onDataStateChange={dataStateChange} * sortable={true} * pageable={true} * > * <Column field="ProductID" title="Product ID" columnMenu={ColumnMenu} /> * <Column field="ProductName" /> * </Grid> * <br /> * </div> * </div> * ); * }; * * export default App; * ``` */ export declare const GridColumnMenuSort: (props: GridColumnMenuSortProps) => JSX_2.Element; /** * The props passed to the ColumnMenu sort component. */ declare interface GridColumnMenuSortBaseProps extends GridColumnMenuBaseProps { /** * The sortable option of the column. */ sortable?: GridSortSettings; /** * The current sort state of the Grid. It takes a value of type [SortDescriptor]({% slug api_kendo-data-query_sortdescriptor %})[] */ sort?: SortDescriptor[]; /** * The method that will be called to notify the parent Grid about a sort change. */ onSortChange?: (descriptors: SortDescriptor[], e: React.SyntheticEvent<any>) => void; } /** * The props of the GridColumnMenuSort component. */ declare interface GridColumnMenuSortProps extends GridColumnMenuSortBaseProps { } /** * The GridColumnMenuWrapper component. */ export declare const GridColumnMenuWrapper: (props: GridColumnMenuWrapperProps) => JSX_2.Element; /** * The props of the GridColumnMenuWrapper component. */ export declare interface GridColumnMenuWrapperProps extends GridColumnMenuProps { /** * The component to be rendered as content of the Grid column menu. */ columnMenu?: React_2.ComponentType<GridColumnMenuProps> | null; /** * The icon that overrides the default(three vertical dots) icon displayed in the column menu of each column. */ columnMenuIcon?: SVGIcon; } /** * The props of the GridColumn component. */ export declare interface GridColumnProps extends Omit<ColumnBaseProps, 'cell'> { /** * Allows the column headers to be clicked and the `sortChange` event emitted. * You have to handle the `sortChange` event yourself and sort the data. * * @default true */ sortable?: boolean | GridColumnSortSettings; /** * Defines if the column is locked (frozen or sticky). * Locked columns are the columns that are visible at all times while the user scrolls the component horizontally. * * @default false */ locked?: boolean; /** * A collection of child columns. */ children?: GridColumnProps[] | ReactElement<GridColumnProps>[] | GridColumnChildrenProps[]; /** * 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?: ComponentType<GridColumnMenuProps>; /** * Specifies the contactMenu settings that will be applied to the column. */ contextMenu?: boolean | GridContextMenuOptions | ((options: GridCellBaseOptions) => boolean | GridContextMenuOptions); /** * Determines if the column can be dragged to the group panel. * * @default true */ groupable?: boolean; /** * Defines whether the column is editable ([more information and examples]({% slug editing_inline_grid %})). */ editable?: boolean; /** * Defines if a filter UI will be rendered for this column. * * @default true */ filterable?: boolean; /** * Defines the title which will be set to the input element in the filter cell. */ filterTitle?: string; /** * Defines the filter type that will be rendered inside the filter row. * * @default 'text' */ filter?: GridDataType; /** * Defines the editor type. Used when the column enters the edit mode ([more information and examples]({% slug editing_inline_grid %})). * * @default 'text' */ editor?: GridDataType; /** * Overrides the default(three vertical dots) column menu icon or the icon set through the ([`columnMenuIcon`]({% slug api_grid_gridprops %}#toc-columnmenuicon)) property. */ menuIcon?: SVGIcon; /** * Sets the colSpan of the column which will make the row content to span over multiple cells. * As arguments it takes either a number or a function that returns a number based on. * * @default 1 */ colSpan?: number | ((colSpanProps: GridColSpanProps) => number); /** * Controls the visibility of Grid's column. * * @default false */ hidden?: boolean; /** * Sets the screen size condition that needs to be satisfied for a column to remain visible. If you set the hidden property, the behavior of media is overridden. */ media?: string; /** * Defines the component that will be rendered as a cell. If not set, a `GridCell` will be rendered by default. * * @deprecated This prop is deprecated in favor of the ([cells]({% slug api_grid_gridcolumnprops %}#toc-cells)) prop. We’re removing this prop in version 11.0.0. */ cell?: ComponentType<GridCellProps>; /** * Sets a set of cells components that the Grid will render instead of the built-in cell. */ cells?: GridCellsSettings; /** * Defines the component that will be rendered as a filter cell. If not set, a `GridFilterCell` will be rendered by default. * * @deprecated This prop is deprecated in favor of the ([cells]({% slug api_grid_gridcolumnprops %}#toc-cells)) prop. We’re removing this prop in version 11.0.0. */ filterCell?: ComponentType<GridFilterCellProps>; /** * Defines the component that will be rendered as a header cell. If not set, a `GridHeaderCell` will be rendered by default. * * @deprecated This prop is deprecated in favor of the ([cells]({% slug api_grid_gridcolumnprops %}#toc-cells)) prop. We’re removing this prop in version 11.0.0. */ headerCell?: ComponentType<GridHeaderCellProps>; /** * Defines the component that will be rendered as a footer cell. * The footer has to render an HTML `<td>` element and applies the `style` and `colspan` values from its props. * * @example * ```jsx-no-run * <GridColumn * footerCell={props => ( * <td className='k-table-td' colSpan={props.colSpan} style={props.style} role={'gridcell'}>Sum: 50</td> * )} * /> * ``` * * @deprecated This prop is deprecated in favor of the ([cells]({% slug api_grid_gridcolumnprops %}#toc-cells)) prop. We’re removing this prop in version 11.0.0. */ footerCell?: ComponentType<GridFooterCellProps>; /** * Sets the type of the column and renders a dedicated column for interaction. * * @default "data" */ columnType?: GridColumnType; /** * Defines if the cells of the column should be spanned when their values are the same. */ rowSpannable?: boolean | GridRowSpannableSettings; } /** * Represents the object of the `onColumnReorder` Grid event. */ export declare interface GridColumnReorderEvent { /** * An event target. */ target: GridHandle; /** * A native DOM event. */ nativeEvent: any; /** * The current columns collection. */ columns: GridColumnProps[]; /** * The id of the dragged column. */ columnId?: string; } /** * Represents the object of the `onColumnResize` Grid event. */ export declare interface GridColumnResizeEvent { /** * An event target. */ target: GridHandle; /** * A native DOM event. * Can be `null` when the callback source is not user action (e.g.: method call). */ nativeEvent: any; /** * The current columns collection. */ columns: GridColumnProps[]; /** * **Deprecated**. Use `targetColumnId` instead. * The index of the column. */ index: number; /** * **Deprecated**. * The new width of the column. */ newWidth: number; /** * **Deprecated**. * The actual width of the column prior to resizing. */ oldWidth: number; /** * Indicates that resizing is complete and the user has dropped the resize handler. */ end: boolean; /** * The id of the clicked/dragged column. * When the callback source is not user action (e.g.: method call), contains only the first column id from the list. */ targetColumnId?: string; } /** * The settings for sorting the Grid columns. */ declare interface GridColumnSortSettings extends ColumnSortSettings { } /** * Represents the object of the `onColumnsStateChange` Grid event. */ export declare interface GridColumnsStateChangeEvent { /** * An event target. */ target: GridHandle; /** * The columns state collection. */ columnsState: GridColumnState[]; } /** * The state of the GridColumn */ export declare interface GridColumnState { /** * The id of the column. */ id: string; /** * The field of the column. */ field?: string; /** * The title of the column. */ title?: string; /** * The value indicating whether a column is visible or not. */ hidden?: boolean; /** * The width of the column (in pixels). */ width?: string | number; /** * The position of the column. */ orderIndex?: number; /** * A collection of child states. */ children?: GridColumnState[]; } /** * Sets the column type. * * @default "data" */ export declare type GridColumnType = 'data' | 'reorder' | 'checkbox'; /** * @hidden */ export declare class GridCommonDragLogic { refDragElementClue: React_2.RefObject<DragClue>; refDropElementClue: React_2.RefObject<DropClue>; columns: ExtendedColumnProps[]; reorderable: boolean; groupable: boolean; private startColumn; private startGroup; private currentColumn; private currentGroup; private columnReorder; private groupReorder; private columnToGroup; private groupPanelDivElement; get dragClueRef(): React_2.RefObject<DragClue | null>; get dropClueRef(): React_2.RefObject<DropClue | null>; get getCurrentGroupsLength(): number; private get dragElementClue(); private get dropElementClue(); constructor(columnReorder: handler, groupReorder: handler, columnToGroup: handler); refGroupPanelDiv: (e: any) => void; pressHandler: (event: any, element: HTMLTableRowElement | HTMLDivElement) => void; dragHandler: (event: any, element: HTMLTableRowElement | HTMLDivElement) => void; releaseHandler: (event: any) => void; private getColumnIndex; private isTargetGroupingContainer; private getGroupIndex; private isValid; private updateDragElementClue; private updateDropElementClue; } /** * @hidden */ export declare const GridContextMenu: (props: GridContextMenuProps) => JSX_2.Element; /** * Represents the available types for the `GridContextMenuAnchorPart`. * * The available anchor parts are: * - `head` * - `body` */ export declare enum GridContextMenuAnchorPart { head = "head", body = "body" } /** * Represents the object of the `onContextMenu` Grid event. */ export declare interface GridContextMenuEvent extends GridEvent { /** * The data object that represents the current row. */ dataItem: any; /** * The field to which the cell is bound. */ field?: string; /** * A React Synthetic Event. */ syntheticEvent: React.MouseEvent<any>; } /** * Represents the object of the `onContextMenuItemClick` Grid event. */ export declare interface GridContextMenuItemClickEvent extends GridEvent { /** * The Context menu item click event. */ event: MenuSelectEvent; /** * The data object that represents the current row. */ dataItem?: any; /** * The data object that represents the clicked menu item. */ menuItem: any; /** * The field to which the cell is bound. */ field?: string; } /** * Represents the available predefined items names for the `GridContextMenu` items. */ export declare enum GridContextMenuItemNames { create = "create", edit = "edit", delete = "delete", select = "select", copySelection = "copySelection", copySelectionNoHeaders = "copySelectionNoHeaders", paste = "paste", reorderRow = "reorderRow", exportPDF = "exportPDF", exportExcel = "exportExcel", separator = "separator", sortAsc = "sortAsc", sortDesc = "sortDesc" } /** * @hidden */ export declare interface GridContextMenuOpenArgs extends GridCellBaseOptions { event: React_2.MouseEvent<HTMLElement, MouseEvent>; } /** * Represents the `GridContextMenuOptions`. */ export declare interface GridContextMenuOptions { /** * The contextmenu settings for the head of the data table. */ head?: boolean | (GridContextMenuItemNames | MenuItemModel)[]; /** * The contextmenu settings for the body of the data table. */ body?: boolean | (GridContextMenuItemNames | MenuItemModel)[]; } /** * @hidden */ export declare interface GridContextMenuProps { show: boolean; offset: Offset; onClose: (event: React_2.SyntheticEvent<HTMLElement>) => void; onSelect: (e: { event: MenuSelectEvent; dataItem?: any; field?: string; }) => void; dataItem?: any; field?: string; items?: (GridContextMenuItemNames | MenuItemModel)[]; } /** * The properties of the default Grid Cell. */ export declare interface GridCustomCellProps extends GridCellProps { /** * The props and attributes that are applied to the td element by default. */ tdProps?: React.TdHTMLAttributes<HTMLTableCellElement> | null; /** * The props and attributes that are applied to the second td. Such element is * rendered in very rare cases when we have grouping and sticky columns. */ td2Props?: React.TdHTMLAttributes<HTMLTableCellElement> | null; /** * The default children of the table cell. */ children?: React.ReactNode | React.ReactNode[]; } /** * The properties of the filter Grid Cell. */ export declare interface GridCustomFilterCellProps extends GridFilterCellProps { /** * The props and attributes that are applied to the th element by default. */ thProps?: GridThAttributes | null; /** * The props and attributes that are applied to the td element by default. */ tdProps?: GridTdAttributes | null; /** * The default children of the table cell. */ children?: React.ReactNode | React.ReactNode[]; /** * The index of the column. */ index?: number; } /** * The properties of the footer Grid Cell. */ export declare interface GridCustomFooterCellProps extends GridFooterCellProps { /** * The props and attributes that are applied to the td element by default. */ tdProps?: React.TdHTMLAttributes<HTMLTableCellElement> | null; /** * The index of the column that is rendered. */ index?: number; } /** * The properties of the header Grid Cell. */ export declare interface GridCustomHeaderCellProps extends GridHeaderCellProps { /** * The props and attributes that are applied to the `th` element by default. The property should be used with the [HeaderThElement](slug:api_data-tools_headerthelement) component as demonstrated in [this example](slug:cells_grid#toc-group-header-group-footer-header-cell-footer-cell-filter-cell-and-data-cell). */ thProps?: GridThAttributes | null; /** * The default children of the table cell. */ children: React.ReactNode | React.ReactNode[]; /** * The index of the column. */ index?: number; } /** * The properties of the default Grid Row. */ export declare interface GridCustomRowProps extends GridRowProps { /** * The props and attributes that are applied to the tr element by default. */ trProps?: React.HTMLAttributes<HTMLTableRowElement> | null; /** * The default children of the table row. */ children?: React.ReactNode | React.ReactNode[]; } /** * Represents the object of the `onDataStateChange` Grid event. */ export declare interface GridDataStateChangeEvent extends GridEvent { /** * The [State]({% slug api_kendo-data-query_state %}) of the Grid based on the user action. */ dataState: State; targetEvent?: PagerTargetEvent; } /** * Exposes the data types available when setting the [filter](slug:api_grid_gridcolumnprops#toc-filter) or * [editor](slug:api_grid_gridcolumnprops#toc-editor) property of the Grid columns. */ export declare type GridDataType = 'text' | 'numeric' | 'boolean' | 'date'; /** * Represents the object of the `onDetailExpandChange` Grid event. */ export declare interface GridDetailExpandChangeEvent extends GridEvent { detailExpand: DetailExpandDescriptor; } /** * Represents the detail row class of the KendoReact Grid. Used to define custom details for each row. Can be applied for building the hierarchy. If `expandField` is set, the details for each row will be visible or hidden depending on the current data item and its `expandField` value. * * @example * ```jsx * const CustomGridDetailRow = (props) => { * const detailData = props.dataItem.MasterField2; * return ( * <div> * This is detail template with another grid inside it * <Grid scrollable="none" data={detailData} /> * </div> * ); * }; * * const App = () => { * const [data, setData] = useState([ * { MasterField1: 'A1', MasterField2: [{ DetailField1: 1, DetailField2: 2 }] }, * { MasterField1: 'B1', MasterField2: [{ DetailField1: 3, DetailField2: 4 }] }, * { MasterField1: 'C1', MasterField2: [{ DetailField1: 5, DetailField2: 6 }] } * ]); * * return ( * <Grid data={data} detail={CustomGridDetailRow}> * <GridColumn field="MasterField1" /> * </Grid> * ); * }; * * export default App; * ``` */ export declare const GridDetailRow: (props: GridDetailRowProps) => null; /** * The props of the GridDetailRow component ([see example]({% slug detailrow_grid %})). */ export declare interface GridDetailRowProps { /** * The data object that represents the current row. */ dataItem: any; /** * Zero-based index of the dataItem. */ dataIndex: number; } /** @hidden */ export declare interface GridDragSelectionReleaseEvent extends TableDragSelectionReleaseEvent { } /** * Represents the Grid editable settings: * - `enabled` — Determines if the editing is enabled. * - `mode` — Determines the editing mode. * */ declare interface GridEditableSettings extends TableEditableSettings { } /** * @hidden */ export declare const GridEditCell: (props: GridCellProps) => JSX_2.Element; /** * Represents the object of the `onEditChange` Grid event. */ export declare interface GridEditChangeEvent extends GridEvent { edit: EditDescriptor; } /** * Represents the base event object of the Grid. */ export declare interface GridEvent extends BaseEvent<GridHandle> { } /** * Represents the object of the `onExpandChange` Grid event. */ export declare interface GridExpandChangeEvent extends GridEvent { /** * The data item that is expanded or collapsed. */ dataItem: any; /** * Indicates whether the data item is expanded or collapsed */ value: boolean; /** * Zero based index of the data item. */ dataIndex: number; } export declare const GridFilterCell: (props: GridFilterCellProps) => string | number | boolean | Iterable<React_2.ReactNode> | JSX_2.Element | null | undefined; /** * The props of the GridFilterCell component * ([more information]({% slug cells_grid %}#toc-filter-cells) * and [example]({% slug filtering_grid %}#toc-custom-filter-cells)). */ export declare interface GridFilterCellProps { /** * The column field in which the cell is located. */ field?: string; /** * The method that will be called if the cell needs to inform its parent Grid about a change. */ onChange: (event: { value: any; operator: string | Function; syntheticEvent: React.SyntheticEvent<any>; }) => void; /** * The list of the default operators for the current filter type. */ operators: GridFilterOperator[]; /** * The title which will be set to the input element in the filter cell. */ title?: string; /** * The type of the filter. Determines which edit