@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 { ButtonProps } from '@progress/kendo-react-buttons'; 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 { DialogProps } from '@progress/kendo-react-dialogs'; 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 { FieldProps } from '@progress/kendo-react-form'; 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 } 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'; import { ToolbarProps } from '@progress/kendo-react-buttons'; import { ToolbarSeparatorProps } from '@progress/kendo-react-buttons'; import { ToolbarSpacerProps } from '@progress/kendo-react-buttons'; /** * 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>; defaultCell?: any; defaultHeaderCell?: any; } /** * @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 %}). * * @remarks * Supported children components are: {@link GridColumn}, {@link GridToolbar}, {@link GridNoRecords}, {@link StatusBar}. * * @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"; /** * @hidden */ export declare const GridCell: (props: { cellProps: GridCellProps; }) => JSX.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'> { /** * The zero-based index of the data item in the data collection. */ dataIndex: number; /** * The index of the column in the rendered columns collection. Optional. */ columnIndex?: number; /** * The total number of rendered columns in the Grid. Optional. */ columnsCount?: number; /** * Defines a set of custom cell components that the Grid will render instead of the default cell. */ cells?: GridCellsSettings; /** * Specifies the type of the row (e.g., data row, group header, etc.). Optional. */ rowType?: GridRowType; /** * @hidden */ level?: number; /** * Triggered when the cell is selected. Provides the event object. */ selectionChange?: (event: { syntheticEvent: React.SyntheticEvent<any>; }) => void; /** * Triggered when the cell value is changed. Provides details about the change event. */ onChange?: (event: { dataItem: any; dataIndex: number; syntheticEvent: React.SyntheticEvent<any>; field?: string; value?: any; /** @hidden */ _expand?: boolean; /** @hidden */ _group?: GroupState; }) => void; /** * Specifies the type of editor to be used when the cell is in edit mode. * Supported values are `text`, `numeric`, `boolean`, and `date`. */ editor?: 'text' | 'numeric' | 'boolean' | 'date'; /** * @hidden */ locked?: boolean | undefined; /** * Triggered when the ContextMenu is activated on the cell. * Provides the event object, data item, and field name. */ 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; }; /** * Represents the GridColumn component. * * @returns null */ 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.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; /** * If set to `true`, checkbox filter expand button will not be rendered and chechbox filter menu will be expanded. */ alwaysExpand?: boolean; /** * 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 { /** * If set to `true`, column chooser expand button will not be rendered and column chooser menu will be expanded. */ alwaysExpand?: boolean; /** * Controls the expand state of the column chooser component. */ expanded?: boolean; /** * Triggered on each subsequent expand state of the column chooser component. */ onExpandChange?: (nextExpandState: boolean) => void; } /** * 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.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.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.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.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.Element; /** * The GridColumnMenuItemContent that will be used inside the Grid ColumnMenu. */ export declare const GridColumnMenuItemContent: (props: GridColumnMenuItemContentProps) => JSX.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.Element; /** * The props of the GridColumnMenuItemGroup component. */ 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; /** * @hidden * States if the Column Menu item is expandable. */ expandable?: boolean; /** * @hidden * States if the Column Menu item is expanded. */ expanded?: 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.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.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. * * @example * ```jsx * <GridColumn sortable={true} /> * ``` * @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. * * @example * ```jsx * <GridColumn locked={true} /> * ``` * @default false */ locked?: boolean; /** * A collection of child columns. * * @example * ```jsx * <GridColumn> * <GridColumn field="child1" /> * <GridColumn field="child2" /> * </GridColumn> * ``` */ 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)). * * @example * ```jsx * <GridColumn columnMenu={CustomColumnMenu} /> * ``` */ columnMenu?: ComponentType<GridColumnMenuProps>; /** * Specifies the context menu settings that will be applied to the column. * * @example * ```jsx * <GridColumn contextMenu={{ enabled: true }} /> * ``` */ contextMenu?: boolean | GridContextMenuOptions | ((options: GridCellBaseOptions) => boolean | GridContextMenuOptions); /** * Determines if the column can be dragged to the group panel. * * @example * ```jsx * <GridColumn groupable={false} /> * ``` * @default true */ groupable?: boolean; /** * Defines whether the column is editable ([more information and examples]({% slug editing_inline_grid %})). * * @example * ```jsx * <GridColumn editable={true} /> * ``` */ editable?: boolean; /** * Defines if a filter UI will be rendered for this column. * * @example * ```jsx * <GridColumn filterable={false} /> * ``` * @default true */ filterable?: boolean; /** * Defines the title which will be set to the input element in the filter cell. * * @example * ```jsx * <GridColumn filterTitle="Custom Filter Title" /> * ``` */ filterTitle?: string; /** * Defines the filter type that will be rendered inside the filter row. * * @example * ```jsx * <GridColumn filter="numeric" /> * ``` * @default 'text' */ filter?: GridDataType; /** * Defines the editor type. Used when the column enters the edit mode ([more information and examples]({% slug editing_inline_grid %})). * * @example * ```jsx * <GridColumn editor="date" /> * ``` * @default 'text' */ editor?: GridDataType; /** * The validation method for the edit field when editting is in mode `dialog`. * * The method arguments are: * * * value - The current value of the field. * * valueGetter - Function which can be used to get other fields value. * Usable when validator depends on more than one field. Supports field paths. * * fieldProps - Props of the Field component. Currently contains only the `name` prop. * Usable when one validator is used across multiple fields. * * Returns `string` to signify error or `undefined` to signify validation success. */ validator?: FieldProps['validator']; /** * Overrides the default (three vertical dots) column menu icon or the icon set through the ([`columnMenuIcon`]({% slug api_grid_gridprops %}#toc-columnmenuicon)) property. * * @example * ```jsx * <GridColumn menuIcon={CustomIcon} /> * ``` */ menuIcon?: SVGIcon; /** * Sets the colSpan of the column which will make the row content span over multiple cells. * As arguments, it takes either a number or a function that returns a number. * * @example * ```jsx * <GridColumn colSpan={2} /> * ``` * @default 1 */ colSpan?: number | ((colSpanProps: GridColSpanProps) => number); /** * Controls the visibility of the Grid's column. * * @example * ```jsx * <GridColumn hidden={true} /> * ``` * @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. * * @example * ```jsx * <GridColumn media="(min-width: 600px)" /> * ``` */ media?: string; /** * Specifies a set of cell components that the Grid will render instead of the built-in cell. * * @example * ```jsx * <GridColumn cells={{ data: CustomDataCell }} /> * ``` */ cells?: GridCellsSettings; /** * Sets the type of the column and renders a dedicated column for interaction. * * @example * ```jsx * <GridColumn columnType="checkbox" /> * ``` * @default "data" */ columnType?: GridColumnType; /** * Defines if the cells of the column should be spanned when their values are the same. * * @example * ```jsx * <GridColumn rowSpannable={true} /> * ``` */ 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 | null>; refDropElementClue: React_2.RefObject<DropClue | null>; columns: ExtendedColumnProps[]; reorderable: boolean; groupable: boolean; dir: string | undefined; 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 getEventTarget; private isTargetGroupingContainer; private getGroupIndex; private isValid; private updateDragElementClue; private updateDropElementClue; } /** * @hidden */ export declare const GridContextMenu: (props: GridContextMenuProps) => JSX.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. The details for each row will be visible or hidden depending on the current `detailExpand` prop. * * @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