import { ComponentType } from 'react';
import { DataResult, SortDescriptor, CompositeFilterDescriptor, GroupDescriptor } from '@progress/kendo-data-query';
import { GridGroupableSettings } from './GridGroupableSettings';
import { GridSortChangeEvent, GridFilterChangeEvent, GridPageChangeEvent, GridExpandChangeEvent, GridSelectionChangeEvent, GridHeaderSelectionChangeEvent, GridRowClickEvent, GridItemChangeEvent, GridDataStateChangeEvent, GridColumnResizeEvent, GridColumnReorderEvent, GridGroupChangeEvent, GridEvent } from './events';
import { ScrollMode } from '../ScrollMode';
import { GridCellProps } from './GridCellProps';
import { GridFilterCellProps } from './GridFilterCellProps';
import { GridSortSettings } from './GridSortSettings';
import { GridPagerSettings } from '../paging/GridPagerSettings';
import { GridRowProps } from '../interfaces/GridRowProps';
import { GridHeaderCellProps } from '../interfaces/GridHeaderCellProps';
import { GridDetailRowProps } from '../interfaces/GridDetailRowProps';
import { GridColumnMenuProps } from '../interfaces/GridColumnMenuProps';
/**
 * Represents the props of the [KendoReact Grid component]({% slug overview_grid %}).
 */
export interface GridProps {
    /**
     * 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.
     */
    data?: any[] | DataResult | null;
    /**
     * Enables the sorting for the columns with their `field` option set ([see example]({% slug sorting_grid %})).
     */
    sortable?: GridSortSettings;
    /**
     * 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 by which the data is sorted. Applies the sorting styles and buttons to the affected columns.
     */
    sort?: SortDescriptor[];
    /**
     * Enables the filtering of the columns with their `field` option set ([more information and examples]({% slug filtering_grid %})).
     */
    filterable?: boolean;
    /**
     * The descriptor 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;
    /**
     * 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 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<GridColumnMenuProps>;
    /**
     * The descriptors by which the data will be grouped
     * ([more information and examples]({% slug groupingbasics_grid %})).
     */
    group?: 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`&mdash;Sets the maximum numeric buttons count before the buttons are collapsed.
     * - `info: Boolean`&mdash;Toggles the information about the current page and the total number of records.
     * - `type: PagerType`&mdash;Accepts the `numeric` (buttons with numbers) and `input` (input for typing the page number) values.
     * - `pageSizes: Boolean` or `Array<number>`&mdash;Shows a menu for selecting the page size.
     * - `previousNext: Boolean`&mdash;Toggles the **Previous** and **Next** buttons.
     */
    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;
    /**
     * Alias of `pageSize` property. If `take` is set, `pageSize` will be ignored.
     */
    take?: 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;
    /**
     * Fires when the user tries to expand or collapse a row.
     */
    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 %})).
     */
    expandField?: string;
    /**
     * Specifies the name of the field which will provide a Boolean representation of the selected state of the item ([see example]({% slug selection_grid %})).
     */
    selectedField?: string;
    /**
     * Fires when the user tries to select or deselect a row ([more information and example]({% slug selection_grid %})).
     */
    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 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;
    /**
     * 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 %})).
     */
    editField?: string;
    /**
     * Defines the scroll mode that is used by the Grid ([see example]({% slug scrollmmodes_grid %})).
     *
     * The available options are:
     *  - `none`&mdash;Renders no scrollbar.
     *  - `scrollable`&mdash;This is the default scroll mode. It requires the setting of the `height` option.
     *  - `virtual`&mdash;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 scrollmmodes_grid %})).
     */
    rowHeight?: 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<GridDetailRowProps>;
    /**
     * 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;
    /**
     * 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.
     */
    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.
     */
    rowRender?: (row: React.ReactElement<HTMLTableRowElement>, 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 %})).
     */
    cellRender?: (defaultRendering: React.ReactElement<HTMLTableCellElement> | null, props: GridCellProps) => React.ReactElement<HTMLTableCellElement> | null;
    /**
     * Fires when a filter cell is about to be rendered. Overrides the default appearance of the filter cell.
     */
    filterCellRender?: (defaultRendering: React.ReactElement<any> | null, props: GridFilterCellProps) => React.ReactElement<any> | null;
    /**
     * Fires when a filter cell is about to be rendered. Overrides the default appearance of the filter cell.
     */
    headerCellRender?: (defaultRendering: React.ReactNode | null, props: GridHeaderCellProps) => React.ReactNode;
    /**
     * Fires when Grid is scrolled.
     */
    onScroll?: (event: GridEvent) => void;
    /**
     * Enables virtualization of the columns. If virtualization is enabled, the columns outside the view are not rendered.
     */
    columnVirtualization?: boolean;
}