/** * @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, 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; } /** * @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 ( * * * * * ); * }; * * export default App; * ``` */ export declare const Grid: React_2.ForwardRefExoticComponent>; /** 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 { /** * 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; }) => void; /** * The event that is fired when the cell value is changed. */ onChange?: (event: { dataItem: any; dataIndex: number; syntheticEvent: React.SyntheticEvent; 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 | null, props: GridCellProps) => React.ReactElement | null; /** * @hidden */ locked?: boolean | undefined; /** * The event that is fired when the ContextMenu is activated. */ onContextMenu?: (event: React.MouseEvent, 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; filterCell?: ComponentType; footerCell?: ComponentType; groupHeader?: ComponentType; data?: ComponentType; groupFooter?: ComponentType; select?: { groupHeader?: ComponentType; data?: ComponentType; groupFooter?: ComponentType; }; hierarchy?: { groupHeader?: ComponentType; data?: ComponentType; groupFooter?: ComponentType; }; group?: { groupHeader?: ComponentType; data?: ComponentType; groupFooter?: ComponentType; }; edit?: { text?: ComponentType; numeric?: ComponentType; boolean?: ComponentType; date?: ComponentType; }; } /** * 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; /** * The type of elements that the children property of the Grid accepts. */ export declare interface GridColumnChildrenProps extends GridColumnProps, ReactElement { } /** * @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; /** * 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; /** * 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; /** * 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; /** * 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 ( *
* * *
); * } * } * * 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 ( *
* * * * *
*
* ); * } * } * * ReactDOM.render(, 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; } /** * @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; }) => 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; 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 ( *
* * *
* ); * }; * * 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 ( *
* * * * *
*
* ); * }; * * 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) => 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; /** * 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 ( *
* *
* ); * }; * * 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 ( *
*
* * * * *
*
*
* ); * }; * * 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) => 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 | 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 { /** * 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[] | 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; /** * 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; /** * 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; /** * 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; /** * Defines the component that will be rendered as a footer cell. * The footer has to render an HTML `` element and applies the `style` and `colspan` values from its props. * * @example * ```jsx-no-run * ( * Sum: 50 * )} * /> * ``` * * @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; /** * 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; refDropElementClue: React_2.RefObject; 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; get dropClueRef(): React_2.RefObject; 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; } /** * 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; } /** * 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) => 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 | 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 | 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 | 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 | 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 ( *
* This is detail template with another grid inside it * *
* ); * }; * * 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 ( * * * * ); * }; * * 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 { } /** * 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 | 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; }) => 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 editor will be rendered for filtering. */ filterType: 'text' | 'numeric' | 'boolean' | 'date'; /** * The value of the cell. */ value: any; /** * The operator that will be used for the cell filtering. */ operator?: string | Function; /** * The list of values for the Boolean filter. */ booleanValues: GridFilterOperator[]; /** * A function for overriding the default rendering of the filter cell. */ render?: (row: React.ReactElement, dataItem: GridFilterCellProps) => React.ReactNode; /** * Accessible label of the filter. */ ariaLabel?: string; /** * Configures the `size` of the cell. * * The available options are: * - small * - medium * - large * - null—Does not set a size `className`. * * @default `medium` */ size?: null | 'small' | 'medium' | 'large'; } /** * Represents the object of the `onFilterChange` Grid event. */ export declare interface GridFilterChangeEvent extends GridEvent { /** * The new [CompositeFilterDescriptor]({% slug api_kendo-data-query_compositefilterdescriptor %}) based on the user action. */ filter: CompositeFilterDescriptor; } /** * The filter operator for the Grid filters. */ export declare interface GridFilterOperator extends FilterOperator { } /** * The filter operators for the Grid filters. * * @example * ```jsx-no-run * // Default Grid filter operators: * const filterOperators: { * 'text': [ * { text: 'grid.filterContainsOperator', operator: 'contains' }, * { text: 'grid.filterNotContainsOperator', operator: 'doesnotcontain' }, * { text: 'grid.filterEqOperator', operator: 'eq' }, * { text: 'grid.filterNotEqOperator', operator: 'neq' }, * { text: 'grid.filterStartsWithOperator', operator: 'startswith' }, * { text: 'grid.filterEndsWithOperator', operator: 'endswith' }, * { text: 'grid.filterIsNullOperator', operator: 'isnull' }, * { text: 'grid.filterIsNotNullOperator', operator: 'isnotnull' }, * { text: 'grid.filterIsEmptyOperator', operator: 'isempty' }, * { text: 'grid.filterIsNotEmptyOperator', operator: 'isnotempty' } * ], * 'numeric': [ * { text: 'grid.filterEqOperator', operator: 'eq' }, * { text: 'grid.filterNotEqOperator', operator: 'neq' }, * { text: 'grid.filterGteOperator', operator: 'gte' }, * { text: 'grid.filterGtOperator', operator: 'gt' }, * { text: 'grid.filterLteOperator', operator: 'lte' }, * { text: 'grid.filterLtOperator', operator: 'lt' }, * { text: 'grid.filterIsNullOperator', operator: 'isnull' }, * { text: 'grid.filterIsNotNullOperator', operator: 'isnotnull' } * ], * 'date': [ * { text: 'grid.filterEqOperator', operator: 'eq' }, * { text: 'grid.filterNotEqOperator', operator: 'neq' }, * { text: 'grid.filterAfterOrEqualOperator', operator: 'gte' }, * { text: 'grid.filterAfterOperator', operator: 'gt' }, * { text: 'grid.filterBeforeOperator', operator: 'lt' }, * { text: 'grid.filterBeforeOrEqualOperator', operator: 'lte' }, * { text: 'grid.filterIsNullOperator', operator: 'isnull' }, * { text: 'grid.filterIsNotNullOperator', operator: 'isnotnull' } * ], * 'boolean': [ * { text: 'grid.filterEqOperator', operator: 'eq' } * ] * } * ``` */ export declare interface GridFilterOperators { [type: string]: GridFilterOperator[]; } /** * The props of the GridFooterCell component * ([see example]({% slug cells_grid %}#toc-footer-cells)). */ export declare interface GridFooterCellProps { /** * The field to which the footer cell is bound. */ field?: string; /** * The styles of the footer cell. */ style?: React.CSSProperties; /** * The `colSpan` of the footer cell. */ colSpan?: number; /** * The index to be applied to the `aria-colindex` attribute. */ ariaColumnIndex: number; } /** * The settings for grouping the data of the Grid ([see example]({% slug groupingaggregates_grid %})). */ export declare interface GridGroupableSettings { /** * Determines if grouping by dragging and dropping the column headers is allowed and if the group header is visible. */ enabled?: boolean; /** * Determines if the group footer row is visible when the group is collapsed. Defaults to `none`. */ footer?: 'always' | 'visible' | 'none'; /** * The group expandable settings. */ expandable?: boolean | GridGroupExpandableSettings; } /** * @hidden */ export declare const GridGroupCell: (props: GridCellProps) => JSX_2.Element; /** * Represents the object of the `onGroupChange` Grid event. */ export declare interface GridGroupChangeEvent extends GridEvent { /** * An array of [GroupDescriptor]({% slug api_kendo-data-query_groupdescriptor %})[] that corresponds to the user action. */ group: GroupDescriptor[]; } /** * Represents the Grid group expandable settings. */ declare interface GridGroupExpandableSettings extends TableGroupExpandableSettings { } /** * Represents the object of the `onGroupExpandChange` Grid event. */ export declare interface GridGroupExpandChangeEvent extends GridEvent { groupExpand: GroupExpandDescriptor[]; } /** * Represent the `ref` of the Grid component. */ export declare interface GridHandle { /** * Returns the HTML element of the Grid component. */ element: HTMLDivElement | null; /** * The props values of the Spreadsheet. */ props: GridProps; /** * A getter of the current columns. Gets the current column width or current columns, or any other [`GridColumnProps`]({% slug api_grid_gridcolumnprops %}) for each defined column. Can be used on each Grid instance. To obtain the instance of the rendered Grid, use the `ref` callback. The following example demonstrates how to reorder the columns by dragging their handlers and check the properties afterwards. You can check the result in the browser console. * * @example * ```jsx * const App = () => { * const [data, setData] = useState([ * { foo: 'A1', bar: 'B1' }, * { foo: 'A2', bar: 'B2' }, * { foo: 'A3', bar: 'B2' } * ]); * * const grid = useRef(); * * return ( *
* * * * * *
* ); * }; * * export default App; * ReactDOM.render(, document.querySelector('my-app')); * ``` */ columns: GridColumnProps[]; /** * Method to allow the scroll to be set to a specific row index when the Grid is scrollable. It is zero based. * * @param options - Object, containing the rowIndex to which is going to be scrolled. */ scrollIntoView: (options: { rowIndex: number; }) => void; /** * Method to fit columns according to their content. * * @param columnIds - Array of column ids to be fitted. */ fitColumns: (columnIds: string[]) => void; } /** * @example * ```jsx * const App = () => { * const [data, setData] = useState([ * { foo: 'A1', bar: 'B1', b1: 1, b2: 2 }, * { foo: 'A2', bar: 'B2', b1: 3, b2: 4 }, * { foo: 'A3', bar: 'B2', b1: 5, b2: 6 } * ]); * const [barDetails, setBarDetails] = useState(false); * * const CustomHeaderCell = (props) => ( * * {props.title || props.field + ' '} * * {props.children} * * ); * * return ( * * * * {barDetails && [, ]} * * * ); * }; * * export default App; * ``` */ export declare const GridHeaderCell: (props: GridHeaderCellProps) => string | number | boolean | Iterable | JSX_2.Element | null | undefined; /** * The props of the GridHeaderCell component * ([more information]({% slug cells_grid %}#toc-header-cells)). */ export declare interface GridHeaderCellProps extends Omit { /** * A function for overriding the default rendering of the header cell. */ render?: (defaultRendering: React.ReactNode | null, props: GridHeaderCellProps) => React.ReactNode; /** * The props of the Grid column menu wrapper. */ columnMenuWrapperProps: GridColumnMenuWrapperProps; /** * @hidden */ id?: string; } /** * Represents the object of the `onHeaderSelectionChange` Grid event. */ export declare interface GridHeaderSelectionChangeEvent extends GridEvent { /** * The new [SelectDescriptor]({% slug api_data-tools_selectdescriptor %}) based on the user action. */ select: SelectDescriptor; /** * The field of the column in which the cell is located. */ field?: string; /** * The current Grid leaf data items. */ dataItems: any[]; /** * The `selectedField` prop of the Grid. */ selectedField: string; } /** * @hidden */ export declare const GridHierarchyCell: (props: GridCellProps) => JSX_2.Element; /** * Represents the object of the `onItemChange` Grid event. */ export declare interface GridItemChangeEvent extends GridEvent { /** * The data object that represents the current row. */ dataItem: any; /** * The field to which the cell is bound. */ field?: string; /** * The value of the item. */ value: any; /** * Zero based index of the data item. */ dataIndex: number; } /** * Represents the object of the `GridKeyDownEvent` Grid event. */ export declare interface GridKeyDownEvent extends GridEvent, TableKeyDownEvent { } /** * @hidden */ export declare const gridMessages: { "grid.detailExpand": string; "grid.detailCollapse": string; "grid.groupExpand": string; "grid.groupCollapse": string; "grid.noRecords": string; "grid.groupPanelEmpty": string; "grid.filterApplyButton": string; "grid.filterClearButton": string; "grid.filterResetButton": string; "grid.filterSubmitButton": string; "grid.filterTitle": string; "grid.sortAscending": string; "grid.sortDescending": string; "grid.sortAriaLabel": string; "grid.groupColumn": string; "grid.ungroupColumn": string; "grid.columnMenu": string; "grid.pagerItemsPerPage": string; "grid.pagerInfo": string; "grid.pagerFirstPage": string; "grid.pagerPreviousPage": string; "grid.pagerNextPage": string; "grid.pagerLastPage": string; "grid.pagerPage": string; "grid.pagerPageSizeAriaLabel": string; "grid.pagerOf": string; "grid.pagerTotalPages": string; "grid.searchPlaceholder": string; "grid.searchboxPlaceholder": string; "grid.filterCheckAll": string; "grid.filterChooseOperator": string; "grid.filterSelectedItems": string; "grid.filterSelectAll": string; "grid.filterAriaLabel": string; "grid.groupPanelAriaLabel": string; "grid.gridAriaLabel": string; "grid.gridRowReorderAriaLabel": string; "grid.selectRow": string; 'grid.filterEqOperator': string; 'grid.filterNotEqOperator': string; 'grid.filterIsNullOperator': string; 'grid.filterIsNotNullOperator': string; 'grid.filterIsEmptyOperator': string; 'grid.filterIsNotEmptyOperator': string; 'grid.filterStartsWithOperator': string; 'grid.filterContainsOperator': string; 'grid.filterNotContainsOperator': string; 'grid.filterEndsWithOperator': string; 'grid.filterGteOperator': string; 'grid.filterGtOperator': string; 'grid.filterLteOperator': string; 'grid.filterLtOperator': string; 'grid.filterIsTrue': string; 'grid.filterIsFalse': string; 'grid.filterBooleanAll': string; 'grid.filterAfterOrEqualOperator': string; 'grid.filterAfterOperator': string; 'grid.filterBeforeOperator': string; 'grid.filterBeforeOrEqualOperator': string; 'grid.filterAndLogic': string; 'grid.filterOrLogic': string; }; /** * Represents the object of the `GridNavigationActionEvent` Grid event. */ export declare interface GridNavigationActionEvent extends GridEvent { /** * The focused element. */ focusElement: any; } /** * Represents the GridNoRecords component. The component is rendered when the `data` property of the Grid is empty or `null`. * * @example * ```jsx * const App = () => { * return ( * * There is no data available * * * * ); * }; * * export default App; * ``` */ export declare const GridNoRecords: { (props: GridNoRecordsProps): JSX_2.Element; displayName: string; }; /** * The props of the GridNoRecords component. */ export declare interface GridNoRecordsProps { /** * The React elements that will be rendered inside the Grid when no records are available. */ children?: React.ReactNode; } /** * Represents the object of the `onPageChange` Grid event. */ export declare interface GridPageChangeEvent extends GridEvent { page: Page; targetEvent?: PagerTargetEvent; } /** * The pager settings of the Grid ([see example]({% slug paging_grid %})). * * @example * ```tsx-no-run * * * * ``` */ export declare interface GridPagerSettings { /** * Sets the selected value of the page size Dropdownlist. * It is useful when the selected value could also be a string not only a number. */ pageSizeValue?: string | number; /** * Sets the maximum numeric buttons count before the buttons are collapsed. */ buttonCount?: number; /** * Toggles the information about the current page and the total number of records. */ info?: boolean; /** * Defines the type of the Grid pager. */ type?: GridPagerType; /** * Shows a menu for selecting the page size. */ pageSizes?: boolean | Array | Array; /** * Toggles the **Previous** and **Next** buttons. */ previousNext?: boolean; /** * Defines if the pager will be responsive. Defaults to `true`. */ responsive?: boolean; /** * Defines if the pager will be navigatable. */ navigatable?: boolean; } /** * The type of the Grid pager. * * The available values are: * * `numeric`—Buttons with numbers. * * `input`—Input for typing the page number. * * @example * ```tsx-no-run * * * * ``` */ declare type GridPagerType = 'numeric' | 'input'; /** * Represents the props of the [KendoReact Grid component]({% slug overview_grid %}). */ export declare interface GridProps extends KendoReactComponentBaseProps { /** * Enables data-processing inside the GridComponent based on it's state. * Provides an easy, built-in way to handle data operations like sorting, filtering, grouping, and paging. * * @default false */ autoProcessData?: boolean | { filter?: boolean; search?: boolean; sort?: boolean; group?: boolean; page?: boolean; }; /** * Sets the Grid row key prop to the value of this field in the dataItem. * If not set, the dataItem index will be used for the row key, which might lead to row not updated during paging or scrolling. */ dataItemKey?: string; /** * Sets a class of the Grid DOM element. */ className?: string; /** * Sets a set of custom components that the Grid will render instead of the built-in cell. */ cells?: GridCellsSettings; /** * Sets a set of custom components that the Grid will render instead of the built-in row. */ rows?: GridRowsSettings; /** * Sets the data of the Grid ([see example]({% slug paging_grid %})). If you use paging, the `data` option has to contain only the items for the current page. It takes values of type null, any or [DataResult]({% slug api_kendo-data-query_dataresult%}) */ data?: any[] | DataResult | null; /** * Enables the sorting for the columns with their `field` option set ([see example]({% slug sorting_grid %})). */ sortable?: GridSortSettings; /** * When set enables the clipboard copy, cut and paste manipulations. It takes values of type [ClipboardSettings]({% slug api_data-tools_clipboardsettings %}) or boolean. */ clipboard?: ClipboardSettings | boolean; /** * Fires when clipboard support is enabled and the one of the actions 'copy'. The event accepts type [GridClipboardEvent]({% slug api_data-tools_gridclipboardevent %}). Only fired when the Grid is run as a client component. */ onClipboard?: (event: GridClipboardEvent) => void; /** * Fires when the sorting of the Grid is changed ([see example]({% slug sorting_grid %})). You have to handle the event yourself and sort the data. */ onSortChange?: (event: GridSortChangeEvent) => void; /** * The ([descriptors]({% slug api_kendo-data-query_sortdescriptor %})) by which the data is sorted. Applies the sorting styles and buttons to the affected columns. */ sort?: SortDescriptor[]; /** * The default `sort` state that will be applied to the Grid when using uncontrolled mode. */ defaultSort?: SortDescriptor[]; /** * Enables the filtering of the columns with their `field` option set ([more information and examples]({% slug filtering_grid %})). */ filterable?: boolean; /** * The [descriptor]({% slug api_kendo-data-query_compositefilterdescriptor %}) by which the data is filtered ([more information and examples]({% slug filtering_grid %})). This affects the values and buttons in the `FilterRow` of the Grid. */ filter?: CompositeFilterDescriptor; /** * The default `filter` state that will be applied to the Grid when using uncontrolled mode. */ defaultFilter?: CompositeFilterDescriptor; /** * The filter operators for the Grid filters. */ filterOperators?: GridFilterOperators; /** * Fires when the Grid filter is modified through the UI ([more information and examples]({% slug filtering_grid %})). You have to handle the event yourself and filter the data. */ onFilterChange?: (event: GridFilterChangeEvent) => void; /** * Specifies if the loader of the Grid will be displayed. */ showLoader?: boolean; /** * A custom component that the Grid will render instead of the built-in loader. */ loader?: React.ReactNode; /** * Fires when the user reorders a row. */ onRowReorder?: (event: GridRowReorderEvent) => void; /** * Specifies a React element that will be cloned and rendered inside the column menu of the Grid. Can be overridden on column level. */ columnMenu?: null | ComponentType; /** * Specifies the contactMenu settings that will be applied to the Grid. */ contextMenu?: boolean | GridContextMenuOptions | ((options: GridCellBaseOptions) => boolean | GridContextMenuOptions); /** * Globally overrides the default(three vertical dots) column menu icon for the whole Grid. If set, the prop can be overridden on column level using the ([menuIcon]({% slug api_grid_gridcolumnprops %}#toc-menuicon)) property. */ columnMenuIcon?: SVGIcon_2; /** * The [descriptors]({% slug api_kendo-data-query_groupdescriptor %})[] by which the data will be grouped * ([more information and examples]({% slug groupingbasics_grid %})). */ group?: GroupDescriptor[]; /** * The default `group` state that will be applied to the Grid when using uncontrolled mode. */ defaultGroup?: GroupDescriptor[]; /** * Fires when the grouping of the Grid is changed. You have to handle the event yourself and group the data * ([more information and examples]({% slug groupingbasics_grid %})). */ onGroupChange?: (event: GridGroupChangeEvent) => void; /** * Configures the pager of the Grid ([see example]({% slug paging_grid %})). * * The available options are: * - `buttonCount: Number`—Sets the maximum numeric buttons count before the buttons are collapsed. * - `info: Boolean`—Toggles the information about the current page and the total number of records. * - `type: PagerType`—Accepts the `numeric` (buttons with numbers) and `input` (input for typing the page number) values. * - `pageSizes: Boolean` or `Array`—Shows a menu for selecting the page size. * - `previousNext: Boolean`—Toggles the **Previous** and **Next** buttons. * - `navigatable: Boolean`—Defines if the pager will be navigatable. */ pageable?: GridPagerSettings | boolean; /** * Defines the page size that is used by the Grid pager ([see example]({% slug paging_grid %})). Required by the paging functionality. */ pageSize?: number; /** * The pager component that the Grid will render instead of the built-in pager. It takes values of type null and ComponentType<[PagerProps]({% slug api_data-tools_pagerprops %})> */ pager?: null | ComponentType; /** * Alias of `pageSize` property. If `take` is set, `pageSize` will be ignored. */ take?: number; /** * The default `take` state that will be applied to the Grid when using uncontrolled mode. */ defaultTake?: number; /** * Fires when the page of the Grid is changed ([see example]({% slug paging_grid %})). You have to handle the event yourself and page the data. */ onPageChange?: (event: GridPageChangeEvent) => void; /** * Defines the total number of data items in all pages ([see example]({% slug paging_grid %})). Required by the paging functionality. */ total?: number; /** * Defines the number of records that will be skipped by the pager ([see example]({% slug paging_grid %})). Required by the paging functionality. */ skip?: number; /** * The default `skip` state that will be applied to the Grid when using uncontrolled mode. */ defaultSkip?: number; /** * Determines if the scroll position will be updated after data change. If set to `true` the scroll will remain on the same position. */ fixedScroll?: boolean; /** * The [descriptor]({% slug api_data-tools_detailexpanddescriptor %}) by which the detail-row is expanded. */ detailExpand?: DetailExpandDescriptor; /** * The default `detailExpand` state that will be applied to the Grid when using uncontrolled mode. */ defaultDetailExpand?: DetailExpandDescriptor; /** * Fires when the user expand or collapse a detail-row. */ onDetailExpandChange?: (event: GridDetailExpandChangeEvent) => void; /** * The [descriptor]({% slug api_data-tools_groupexpanddescriptor %}) by which the group is expanded. */ groupExpand?: GroupExpandDescriptor[]; /** * The default `groupExpand` state that will be applied to the Grid when using uncontrolled mode. */ defaultGroupExpand?: GroupExpandDescriptor[]; /** * Fires when the user expands or collapse a group. */ onGroupExpandChange?: (event: GridGroupExpandChangeEvent) => void; /** * Fires when the user tries to expand or collapse a row. * * @deprecated This prop is deprecated in favor of the [onDetailExpandChange]({% slug api_grid_gridprops %}#toc-ondetailexpandchange) and [onGroupExpandChange]({% slug api_grid_gridprops %}#toc-ongroupexpandchange) props. * We’re removing this prop in version 11.0.0. */ onExpandChange?: (event: GridExpandChangeEvent) => void; /** * Specifies the name of the field which will provide a Boolean representation of the expanded state of the item ([see example]({% slug detailrow_grid %})). * * @deprecated This prop is deprecated in favor of the ([detailExpand]({% slug api_grid_gridprops %}#toc-detailexpand)) and ([groupExpand]({% slug api_grid_gridprops %}#toc-groupexpand)) props. * We’re removing this prop in version 11.0.0. */ expandField?: string; /** * The [descriptor]({% slug api_data-tools_selectdescriptor %}) by which the selected state of an item is defined. * Passing a boolean value will select the whole row, while passing an array of strings will select individual. */ select?: SelectDescriptor; /** * The default `select` state that will be applied to the Grid when using uncontrolled mode. */ defaultSelect?: SelectDescriptor; /** * The Grid selectable settings. */ selectable?: boolean | GridSelectableSettings; /** * Specifies the name of the field which will provide a: * - Boolean representation of the selected state of the item ([see example]({% slug selection_grid %})) for row selection * - String array of the selected columns of the item for cell selection * * @deprecated This prop is deprecated in favor of the ([select]({% slug api_grid_gridprops %}#toc-select)) prop. * We’re removing this prop in version 11.0.0. */ selectedField?: string; /** * Fires when the user tries to select or deselect a row or cell. */ onSelectionChange?: (event: GridSelectionChangeEvent) => void; /** * Fires when the user clicks the checkbox of a column header whose `field` matches `selectedField` ([more information and example]({% slug selection_grid %})). */ onHeaderSelectionChange?: (event: GridHeaderSelectionChangeEvent) => void; /** * Fires when the user clicks a row. */ onRowClick?: (event: GridRowClickEvent) => void; /** * Fires when the user double clicks a row. */ onRowDoubleClick?: (event: GridRowDoubleClickEvent) => void; /** * Fires when the user changes the values of the item. The event is not debounced and fires on every `onChange` event of the input in the current `EditCell` ([more information and examples]({% slug editing_inline_grid %})). */ onItemChange?: (event: GridItemChangeEvent) => void; /** * The [descriptor]({% slug api_data-tools_editdescriptor %}) by which the in-edit mode of an item is defined. */ edit?: EditDescriptor; /** * The default `edit` state that will be applied to the Grid when using uncontrolled mode. */ defaultEdit?: EditDescriptor; /** * The Grid editable settings. */ editable?: boolean | GridEditableSettings; /** * Fires when the user enters or exits an in-edit mode of a row or cell. */ onEditChange?: (event: GridEditChangeEvent) => void; /** * Specifies the name of the field which will provide a Boolean representation of the edit state of the current item ([more information and examples]({% slug editing_inline_grid %})). * * @deprecated This prop is deprecated in favor of the ([edit]({% slug api_grid_gridprops %}#toc-edit)) prop. * We’re removing this prop in version 11.0.0. */ editField?: string; /** * Defines the scroll mode that is used by the Grid ([see example]({% slug scrollmodes_grid %})). * * The available options are: * - `none`—Renders no scrollbar. * - `scrollable`—This is the default scroll mode. It requires the setting of the `height` option. * - `virtual`—Displays no pager and renders a portion of the data (optimized rendering) while the user is scrolling the content. */ scrollable?: ScrollMode; /** * Defines the row height and forces an equal height to all rows ([see example]({% slug scrollmodes_grid %})). */ rowHeight?: number; /** * Defines the detail row height and forces an equal height to all detail rows. */ detailRowHeight?: number; /** * Specifies a React element that will be cloned and rendered inside the detail rows of the currently expanded items ([see example]({% slug hierarchy_grid %})). An item will be rendered as expanded if the value of its `expandField` is `true`. */ detail?: null | ComponentType; /** * The [descriptor]({% slug api_kendo-data-query_compositefilterdescriptor %}) by which the data is searched. Its first FilterDescriptor populates the GridSearchBox. */ search?: CompositeFilterDescriptor; /** * The [descriptor]({% slug api_kendo-data-query_compositefilterdescriptor %}) by which the data is searched by default. Its first FilterDescriptor populates the GridSearchBox. */ defaultSearch?: CompositeFilterDescriptor; /** * Defines the fields of the data that are filtered by the GridSearchBox. */ searchFields?: (string | SearchField)[]; /** * Fires when the search value of the GridSearchBox is changed. */ onSearchChange?: (event: GridSearchChangeEvent) => void; /** * Represents the `style` HTML attribute. */ style?: React.CSSProperties; /** * Fires when the data state of the Grid is changed ([more information]({% slug localoperations_grid %}) and [example]({% slug odataserveroperations_grid %})). */ onDataStateChange?: (event: GridDataStateChangeEvent) => void; /** * If set to `true`, the user can resize columns by dragging the edges (resize handles) of their header cells ([see example]({% slug resizing_columns_grid %})). */ resizable?: boolean; /** * If set to `true`, the user can reorder columns by dragging their header cells ([see example]({% slug reordering_columns_grid %})). */ reorderable?: boolean; /** * Defines the row reorder settings. * * @default false */ rowReorderable?: boolean | GridRowReorderSettings; /** * Determines if grouping by dragging and dropping the column headers is allowed ([more information and examples]({% slug groupingbasics_grid %})). */ groupable?: GridGroupableSettings | boolean; /** * Fires when a column is resized. Only fired when the Grid is run as a client component. */ onColumnResize?: (event: GridColumnResizeEvent) => void; /** * Fires when the columns are reordered. */ onColumnReorder?: (event: GridColumnReorderEvent) => void; /** * Fires when a row is about to be rendered. Overrides the default appearance of the row. * * @deprecated This prop is deprecated in favor of the ([rows]({% slug api_grid_gridprops %}#toc-rows)) prop. We’re removing this prop in version 11.0.0. */ rowRender?: (row: React.ReactElement, props: GridRowProps) => React.ReactNode; /** * Fires when a cell is about to be rendered. Used to override the default appearance of the cell ([see example]({% slug groupingaggregates_grid %})). * * @deprecated This prop is deprecated in favor of the ([cells]({% slug api_grid_gridprops %}#toc-cells)) prop. We’re removing this prop in version 11.0.0. */ cellRender?: (defaultRendering: React.ReactElement | null, props: GridCellProps) => React.ReactElement | React.ReactElement[] | null; /** * Fires when a filter cell is about to be rendered. Overrides the default appearance of the filter cell. * * @deprecated This prop is deprecated in favor of the ([cells]({% slug api_grid_gridprops %}#toc-cells)) prop. We’re removing this prop in version 11.0.0. */ filterCellRender?: (defaultRendering: React.ReactElement | null, props: GridFilterCellProps) => React.ReactElement | null; /** * Fires when a header cell is about to be rendered. Overrides the default appearance of the header cell. * * @deprecated This prop is deprecated in favor of the ([cells]({% slug api_grid_gridprops %}#toc-cells)) prop. We’re removing this prop in version 11.0.0. */ headerCellRender?: (defaultRendering: React.ReactNode | null, props: GridHeaderCellProps) => React.ReactNode; /** * Fires when Grid is scrolled. Only fired when the Grid is run as a client component. */ onScroll?: (event: GridEvent) => void; /** * Enables virtualization of the columns. If virtualization is enabled, the columns outside the view are not rendered. */ columnVirtualization?: boolean; /** * If set to `true`, the user can use dedicated shortcuts to interact with the Grid. * By default, navigation is disabled and the Grid content is accessible in the normal tab sequence. */ navigatable?: boolean | NavigatableSettings; /** * Fires when Grid keyboard navigation position is changed. Only fired when the Grid is run as a client component. */ onNavigationAction?: (event: GridNavigationActionEvent) => void; /** * Fires when the user press keyboard key. Only fired when the Grid is run as a client component. */ onKeyDown?: (event: GridKeyDownEvent) => void; /** * The accessible label of the Grid. */ /** * **Deprecated**. The accessible label of the Grid. Use ([messages]({% slug globalization_grid %})) instead. * * @deprecated */ ariaLabel?: string; /** * Defines if the group descriptor columns are locked (frozen or sticky). * Locked columns are the columns that are visible at all times while the user scrolls the component horizontally. * Defaults to `false`. */ lockGroups?: boolean; /** * Configures the `size` of the Grid. * * The available options are: * - small * - medium * * @default `medium` */ size?: 'small' | 'medium'; /** * The event that is fired when the ContextMenu is activated. Only fired when the Grid is run as a client component. */ onContextMenu?: (event: GridContextMenuEvent) => void; /** * The event that is fired when the ContextMenu item is clicked. Only fired when the Grid is run as a client component. */ onContextMenuItemClick?: (event: GridContextMenuItemClickEvent) => void; /** * Sets the `id` property of the top div element of the component. */ id?: string; /** * @hidden */ unstyled?: GridClassStructure; /** * Enables the built-in row span feature of the Grid. */ rowSpannable?: boolean | GridRowSpannableSettings; /** * The collection of column states of the grid. */ columnsState?: GridColumnState[]; /** * The default columns state, used only for the initial load. */ defaultColumnsState?: GridColumnState[]; /** * Fires when the columns state of the Grid is changed. */ onColumnsStateChange?: (event: GridColumnsStateChangeEvent) => void; /** * Sets the locale of the Grid when used as a server component. * Have not effect when the Grid is used as a client component. */ locale?: string; /** * Sets the language of the Grid when used as a server component. * Have not effect when the Grid is used as a client component. */ language?: string; } /** * The direction in which a row can be dragged and dropped. */ export declare type GridReorderDropPosition = 'before' | 'after' | 'forbidden'; /** * The component for each of the items in the `data` property which the Grid renders. */ export declare const GridRow: (props: GridRowProps) => string | number | boolean | Iterable | JSX_2.Element | null | undefined; /** * Represents the object of the `onRowClick` Grid event. */ export declare interface GridRowClickEvent extends GridEvent { /** * The item from the `data` property of the Grid which corresponds to the row that is clicked. */ dataItem: any; } /** * Represents the object of the `onRowDoubleClick` Grid event. */ export declare interface GridRowDoubleClickEvent extends GridEvent { /** * The item from the `data` property of the Grid which corresponds to the row that is clicked. */ dataItem: any; } /** * The props that the Grid passes to the GridRow component when creating it. Accessible during the `rowRender` callback of the Grid. */ export declare interface GridRowProps extends KendoReactComponentBaseProps { /** * The `data` object that represents the current row. */ dataItem: any; /** * Indicates whether the row is an alternating row. */ isAltRow: boolean; /** * Indicates whether the row has at least one edit cell. */ isInEdit: boolean; /** * Indicates if the row is hidden. The hidden row is rendered above the visible area of the Grid. Occurs when the Grid uses virtualization and the row is on the current page. When `rowHeight` is set, `isHidden` is always `true`. */ isHidden: boolean; /** * The event that is fired when the row is clicked. */ onClick: any; /** * The event that is fired when the row is double clicked. */ onDoubleClick: any; /** * The name of the field which will provide a Boolean representation of the selected state of the item. */ selectedField?: string; /** * Sets the height of the row. */ rowHeight?: number; /** * The type of the row. */ rowType: GridRowType; /** * A function for overriding the default rendering of the row. */ render?: (row: React.ReactElement, props: GridRowProps) => React.ReactNode; /** * Sets a set of rows components that the Grid will render instead of the built-in row. */ rows?: GridRowsSettings; /** * The index to be applied to the `aria-rowindex` attribute. */ ariaRowIndex?: number; /** * The index of the leaf dataItem in data. Used by selection. */ dataIndex: number; /** * Indicates if the row is selected. */ isSelected: boolean; /** * @hidden */ absoluteRowIndex: number; /** * @hidden */ isRowReorderable?: boolean; } /** * Represents the object of the `onReorderRow` Grid event. */ export declare interface GridRowReorderEvent extends Omit { /** * Represents the currently dragged row. */ draggedDataItems: any[]; /** * Represents the row over which the dragged row is dropped. */ droppedDataItem: any; /** * The exact dragged row position relative to the position of the drop target row.. */ dropPosition: GridReorderDropPosition; /** * A native DOM event. */ nativeEvent: PointerEvent | MouseEvent | TouchEvent | Event; /** * Represents a unified drag event that is triggered regardless if the native event underneath is a pointer, mouse, touch, or scroll event. */ dragEvent: NormalizedDragEvent; /** * The reference of the Grid in which the row is dropped. */ target: GridHandle; } /** * Represents the settings for the row reordering functionality of the Grid. */ export declare type GridRowReorderSettings = { /** * Determines if the row reordering functionality is enabled. * * @default false */ enabled?: boolean; /** * Determines what the text of the drag clue will be. * Can also be a function giving the dataItem as an argument and returning a new custom drag clue as a ReactNode. * * Default value will be the text of the first visible data column of the row. */ dragClue?: string | ((dataItem: any) => React.ReactNode); }; /** * Represents the settings for the row-spanning functionality of the Grid. */ export declare type GridRowSpannableSettings = { /** * Determines if the row-spanning functionality is enabled or disabled */ enabled?: boolean; /** * A function that returns the value of the cell that should span the row. * The value could be combined from multiple fields of the dataItem to create a unique identifier and prevent the cell from being row-spanned. */ valueGetter?: (dataItem: any, field: string) => any; }; /** * The settings of the rows prop options. */ export declare interface GridRowsSettings { groupHeader?: ComponentType; data?: ComponentType; groupFooter?: ComponentType; } /** * The type of the GridRow component. * * The available values are: * - `groupHeader`—The row is a group header. * - `groupFooter`—The row is a group footer. * - `data`—The row corresponds to an item from the `data` collection which is passed to the Grid. */ export declare type GridRowType = 'groupFooter' | 'groupHeader' | 'data'; /** * Represents the properties of the KendoReact GridSearchBox component. */ export declare const GridSearchBox: (props: GridSearchBoxProps) => JSX_2.Element; export declare interface GridSearchBoxChangeEvent extends TextBoxChangeEvent { } export declare interface GridSearchBoxProps extends TextBoxProps { onChange?: (event: GridSearchBoxChangeEvent) => void; } /** * Represents the object of the `onSearchChange` Grid event. */ export declare interface GridSearchChangeEvent extends GridEvent { /** * The new search based on the user action. */ search: CompositeFilterDescriptor; } /** * Represents the available selection modes. */ export declare type GridSelectableMode = TableSelectableMode; /** * Represents the Grid selectable settings. */ export declare interface GridSelectableSettings extends TableSelectableSettings { /** * The available values are: * * `single` * * `multiple` * * @default "multiple" */ mode?: GridSelectableMode; } /** * @hidden */ export declare const GridSelectionCell: (props: GridCellProps) => JSX_2.Element; /** * Represents the object of the `onSelectionChange` Grid event. */ export declare interface GridSelectionChangeEvent extends GridEvent, TableSelectionChangeEvent { /** * The new [SelectDescriptor]({% slug api_data-tools_selectdescriptor %}) based on the user action. */ select: SelectDescriptor; /** * The dataItem from which the selection starts(Valid for scenarios without checkbox selection). */ startDataItem?: any; /** * The dataItem to which the selection ends(Valid for scenarios without checkbox selection) */ endDataItem?: any; } /** * Represents the object of the `onSortChange` Grid event. */ export declare interface GridSortChangeEvent extends GridEvent { /** * The new ([SortDescriptor]({% slug api_kendo-data-query_sortdescriptor %})) according to the user action. */ sort: SortDescriptor[]; } /** * The sorting settings of the Grid ([see example]({% slug sorting_grid %})). * * @example * ```tsx-no-run * * * * ``` */ export declare type GridSortSettings = SortSettings; export declare interface GridTdAttributes extends React.TdHTMLAttributes { [TABLE_COL_INDEX_ATTRIBUTE]?: number; columnId?: string; key?: string; } export declare interface GridThAttributes extends HeaderThElementProps { columnId: string; key?: string; } /** * Represents the GridToolbar component. * * @example * ```jsx * const App = () => { * const [data, setData] = useState([ * { Column1: 'A1', Column2: 'A2' }, * { Column1: 'B1', Column2: 'B2' }, * { Column1: 'C1', Column2: 'C2' } * ]); * * const customClick = () => { * alert('Custom handler in custom toolbar'); * }; * * return ( * * * * * * ); * }; * * export default App; * ``` */ export declare const GridToolbar: { (props: GridToolbarProps): JSX_2.Element; displayName: string; }; /** * The properties of the GridToolbar component. */ export declare interface GridToolbarProps { /** * The React elements that will be rendered inside the toolbar of the Grid. */ children?: React.ReactNode; /** * Specifies the name of the CSS class which is set to the GridToolbar. */ className?: string; /** * Configures the `size` of the Toolbar. * * The available options are: * - small * - medium * - large * - null—Does not set a size `className`. * * @default `medium` */ size?: null | 'small' | 'medium' | 'large'; /** * The accessible label of the GridToolbar component. */ ariaLabel?: string; /** * @hidden */ ariaControls?: string; } /** * @hidden */ declare type handler = (prevIndex: number, nextIndex: number, nativeEvent: any) => void; /** * Can be used to check if filtering is applied to a specific field ([see example]({% slug column_menu_grid %}#toc-styling-the-column-menu-icon)). Useful for creating active filter indicators. */ export declare const isColumnMenuFilterActive: (field: string, filter?: CompositeFilterDescriptor) => boolean; /** * Can be used to check if sorting is applied to a specific field ([see example]({% slug column_menu_grid %}#toc-styling-the-column-menu-icon)). Useful for creating active sort indicators. */ export declare const isColumnMenuSortActive: (field: string, sort?: SortDescriptor[]) => boolean; /** * @hidden */ export declare const leafColumns: (columns: GridColumnProps[]) => GridColumnProps[]; /** * The text of the filter operators displayed in the filter menu. */ export declare const operators: GridFilterOperators; /** * Represents the `skip` and `take` configurations which are wrapped in the `Page` object. */ declare interface Page { /** * The number of records that will be skipped. */ skip: number; /** * The number of records that will be taken. */ take: number; } /** * @hidden */ export declare const pagerFirstPage = "grid.pagerFirstPage"; /** * @hidden */ export declare const pagerInfo = "grid.pagerInfo"; /** * @hidden */ export declare const pagerItemPerPage = "grid.pagerItemsPerPage"; /** * @hidden */ export declare const pagerLastPage = "grid.pagerLastPage"; /** * @hidden */ export declare const pagerNextPage = "grid.pagerNextPage"; /** * @hidden */ export declare const pagerPreviousPage = "grid.pagerPreviousPage"; /** * @hidden */ export declare const rootFilterOrDefault: (rootFilter: CompositeFilterDescriptor | undefined) => CompositeFilterDescriptor; declare type ScrollMode = 'none' | 'scrollable' | 'virtual'; /** * Represents a server counterpart of every Grid event. It strips out all arguments from the event that are not serializable to the server. */ export declare type ServerEvent = Omit; export { setSelectedState } /** * Represents the KendoReact Grid's StatusBar component. */ export declare const StatusBar: React_2.FunctionComponent; /** * Represents the props of the KendoReact Grid's StatusBar component. */ export declare interface StatusBarProps { data: StatusItem[]; } /** * Represents the arguments of the getStatusData function. */ export declare type StatusDataArgs = Pick | (Pick & { dataItemKey: Required['dataItemKey']; }); /** * Represents the KendoReact Grid's StatusItem object. */ export declare interface StatusItem { /** * The type of the status item. * Could be `sum`, `min`, `max`, `average`, `count`, `isTrue`, `isFalse`, `earliest` or `latest`. */ type: string; /** * The calculated value of the status item. */ value: number | boolean | Date; /** * The formatted value of the status item. */ formattedValue: string; } export { }