import * as React from 'react'; import { Column, TableColumnWidthInfo } from '@devexpress/dx-react-grid'; // ------------------------------------------------------------------------------------------------- // ColumnChooser // ------------------------------------------------------------------------------------------------- import { ColumnChooser as ColumnChooserBase, } from '@devexpress/dx-react-grid'; export interface ColumnChooserProps { /** A component that renders the column chooser overlay. */ overlayComponent?: React.ComponentType; /** A component that renders a button that invokes the column chooser. */ toggleButtonComponent?: React.ComponentType; /** A component that renders the column chooser container. */ containerComponent?: React.ComponentType; /** A component that renders a column chooser item. */ itemComponent?: React.ComponentType; /** An object that specifies localization messages. */ messages?: ColumnChooserBase.LocalizationMessages; } /** The ColumnChooser plugin allows a user to toggle grid columns' visibility at runtime. The column chooser lists columns with checkboxes that control a corresponding column's visibility. */ export declare const ColumnChooser: React.ComponentType & { /** A component that renders a button that invokes the column chooser. */ ToggleButton: React.ComponentType; /** A component that renders the column chooser overlay. */ Overlay: React.ComponentType; /** A component that renders the column chooser container. */ Container: React.ComponentType; /** A component that renders a column chooser item. */ Item: React.ComponentType; }; // ------------------------------------------------------------------------------------------------- // DragDropProvider // ------------------------------------------------------------------------------------------------- import { DragDropProvider as DragDropProviderBase, } from '@devexpress/dx-react-grid'; export interface DragDropProviderProps { /** A component that renders a container for columns being dragged. */ containerComponent?: React.ComponentType; /** A component that renders a column being dragged. */ columnComponent?: React.ComponentType; } /** A plugin that implements the drag-and-drop functionality and visualizes columns that are being dragged. */ export declare const DragDropProvider: React.ComponentType & { /** A component that renders a container for columns being dragged. */ Container: React.ComponentType; /** A component that renders a column being dragged. */ Column: React.ComponentType; }; // ------------------------------------------------------------------------------------------------- // Grid // ------------------------------------------------------------------------------------------------- import { Grid as GridBase, } from '@devexpress/dx-react-grid'; export interface GridProps { /** An array containing custom data. A user defines the access to this data. Refer to Data Accessors for details. */ rows: Array; /** Specifies for which row fields columns are created. */ columns: Array; /** Specifies the function used to get a unique row identifier. */ getRowId?: (row: any) => number | string; /** Specifies the function used to get a cell's value. */ getCellValue?: (row: any, columnName: string) => any; /** A component that renders the grid root layout. */ rootComponent?: React.ComponentType; } /** The Grid is a root container component designed to process and display data specified via the `rows` property. You can configure columns using the `columns` property. The Grid's functionality is implemented in several plugins specified as child components. See the plugins concept for details. */ export declare const Grid: React.ComponentType & { /** A component that renders the grid root layout. */ Root: React.ComponentType; }; // ------------------------------------------------------------------------------------------------- // GroupingPanel // ------------------------------------------------------------------------------------------------- import { GroupingPanel as GroupingPanelBase, } from '@devexpress/dx-react-grid'; export interface GroupingPanelProps { /** Specifies whether to render controls that toggle the column's sorting state. Requires the SortingState dependency. */ showSortingControls?: boolean; /** Specifies whether column headers display a button that cancels grouping by that column. */ showGroupingControls?: boolean; /** A component that renders a group panel container. */ containerComponent?: React.ComponentType; /** A component that renders a group panel item. */ itemComponent?: React.ComponentType; /** A component that renders an empty group panel message. */ emptyMessageComponent?: React.ComponentType; /** An object that specifies the localization messages. */ messages?: GroupingPanelBase.LocalizationMessages; } /** A plugin that renders the Grouping Panel in the Grid's header. This panel displays grouped columns and allows a user to modify grouping options.Optionally, the plugin allows an end-user to change grouped columns' sorting order and render sorting indicators. */ export declare const GroupingPanel: React.ComponentType & { /** A component that renders a grouping panel container. */ Container: React.ComponentType; /** A component that renders a grouping panel item. */ Item: React.ComponentType; /** A component that renders an empty grouping panel message. */ EmptyMessage: React.ComponentType; }; // ------------------------------------------------------------------------------------------------- // PagingPanel // ------------------------------------------------------------------------------------------------- import { PagingPanel as PagingPanelBase, } from '@devexpress/dx-react-grid'; export interface PagingPanelProps { /** A component that renders the paging panel. */ containerComponent?: React.ComponentType; /** The page sizes that a user can select. */ pageSizes?: Array; /** An object that specifies the localization messages. */ messages?: PagingPanelBase.LocalizationMessages; } /** A plugin that renders the paging panel used for navigation through data pages. */ export declare const PagingPanel: React.ComponentType & { /** A component that renders the paging panel. */ Container: React.ComponentType; }; // ------------------------------------------------------------------------------------------------- // SearchPanel // ------------------------------------------------------------------------------------------------- import { SearchPanel as SearchPanelBase, } from '@devexpress/dx-react-grid'; export interface SearchPanelProps { /** A component that renders the Search Panel input element */ inputComponent?: React.ComponentType; /** An object that specifies localization messages */ messages?: SearchPanelBase.LocalizationMessages; } /** A plugin that renders the Search Panel. */ export declare const SearchPanel: React.ComponentType & { /** A component that renders the Search Panel input element */ Input: React.ComponentType; }; // ------------------------------------------------------------------------------------------------- // TableBandHeader // ------------------------------------------------------------------------------------------------- import { TableBandHeader as TableBandHeaderBase, } from '@devexpress/dx-react-grid'; export interface TableBandHeaderProps { /** A component that renders a band cell. */ cellComponent?: React.ComponentType; /** A component that renders a band cells' row. */ rowComponent?: React.ComponentType; /** Specifies column bands for multi-level table header. */ columnBands?: Array; } /** A plugin that renders the banded cells. */ export declare const TableBandHeader: React.ComponentType & { /** A component that renders a band cell. */ Cell: React.ComponentType & { className?: string; style?: React.CSSProperties; [x: string]: any }>; /** A component that renders a band cells' row. */ Row: React.ComponentType & { className?: string; style?: React.CSSProperties; [x: string]: any }>; }; // ------------------------------------------------------------------------------------------------- // TableColumnReordering // ------------------------------------------------------------------------------------------------- import { TableColumnReordering as TableColumnReorderingBase, } from '@devexpress/dx-react-grid'; export interface TableColumnReorderingProps { /** The column order. */ order?: Array; /** The initial column order in the uncontrolled mode. */ defaultOrder?: Array; /** Handles changes to the column order. */ onOrderChange?: (nextOrder: Array) => void; } /** A plugin that manages the displayed columns' order. */ export declare const TableColumnReordering: React.ComponentType; // ------------------------------------------------------------------------------------------------- // TableColumnResizing // ------------------------------------------------------------------------------------------------- import { TableColumnResizing as TableColumnResizingBase, } from '@devexpress/dx-react-grid'; export interface TableColumnResizingProps { /** Specifies column widths. */ columnWidths?: Array; /** Specifies a column's minimum width. */ minColumnWidth?: number; /** Specifies initial column widths in uncontrolled mode. */ defaultColumnWidths?: Array; /** Handles column width changes. */ onColumnWidthsChange?: (nextColumnWidths: Array) => void; } /** A plugin that manages table column widths. */ export declare const TableColumnResizing: React.ComponentType; // ------------------------------------------------------------------------------------------------- // TableColumnVisibility // ------------------------------------------------------------------------------------------------- import { TableColumnVisibility as TableColumnVisibilityBase, } from '@devexpress/dx-react-grid'; export interface TableColumnVisibilityProps { /** Hidden column names. */ hiddenColumnNames?: Array; /** Names of initially hidden columns in the uncontrolled mode. */ defaultHiddenColumnNames?: Array; /** Specifies whether an end-user can change column visibility. */ columnTogglingEnabled?: boolean; /** Additional column properties that the plugin can handle. */ columnExtensions?: Array; /** Handles hidden columns adding or removing. */ onHiddenColumnNamesChange?: (hiddenColumnNames: Array) => void; /** A component that renders a message that is displayed when all columns are hidden. */ emptyMessageComponent?: React.ComponentType; /** An object that specifies localization messages. */ messages?: TableColumnVisibilityBase.LocalizationMessages; } /** A plugin that manages Grid columns' visibility. */ export declare const TableColumnVisibility: React.ComponentType & { /** A component that renders a message displayed when all columns are hidden. */ EmptyMessage: React.ComponentType; }; // ------------------------------------------------------------------------------------------------- // TableEditColumn // ------------------------------------------------------------------------------------------------- import { TableEditColumn as TableEditColumnBase, } from '@devexpress/dx-react-grid'; export interface TableEditColumnProps { /** A component that renders a command cell within a data row. */ cellComponent?: React.ComponentType; /** A component that renders a command cell within the header row. */ headerCellComponent?: React.ComponentType; /** A component that renders command control within a command cell. */ commandComponent?: React.ComponentType; /** Specifies whether to render the 'New' command within the header row's command cell. */ showAddCommand?: boolean; /** Specifies whether to render the 'Edit' command within the data row's command cell. */ showEditCommand?: boolean; /** Specifies whether to render the 'Delete' command within the data row's command cell. */ showDeleteCommand?: boolean; /** Specifies the command column's width. */ width?: number | string; /** An object that specifies the localization messages. */ messages?: TableEditColumnBase.LocalizationMessages; } /** A plugin that renders a command column. This column contains controls used for row editing, creating, or deleting and committing/canceling changes. */ export declare const TableEditColumn: React.ComponentType & { /** A component that renders a command control within a command cell. */ Command: React.ComponentType; /** A component that renders a command cell within a data row. */ Cell: React.ComponentType; /** A component that renders a command cell within the header row. */ HeaderCell: React.ComponentType; }; // ------------------------------------------------------------------------------------------------- // TableEditRow // ------------------------------------------------------------------------------------------------- import { TableEditRow as TableEditRowBase, } from '@devexpress/dx-react-grid'; export interface TableEditRowProps { /** A component that renders an editable cell. */ cellComponent?: React.ComponentType; /** A component that renders an editable row. */ rowComponent?: React.ComponentType; /** Specifies the editable row's height. */ rowHeight?: number; } /** A plugin that renders a row being edited. */ export declare const TableEditRow: React.ComponentType & { /** A component that renders an editable cell. */ Cell: React.ComponentType; /** A component that renders an editable row. */ Row: React.ComponentType; }; // ------------------------------------------------------------------------------------------------- // TableFilterRow // ------------------------------------------------------------------------------------------------- import { TableFilterRow as TableFilterRowBase, } from '@devexpress/dx-react-grid'; export interface TableFilterRowProps { /** A component that renders a filter cell. */ cellComponent?: React.ComponentType; /** A component that renders a filter row. */ rowComponent?: React.ComponentType; /** The filter row's height. */ rowHeight?: number; /** An object that specifies localization messages. */ messages?: TableFilterRowBase.LocalizationMessages; } /** A plugin that renders a filter row. */ export declare const TableFilterRow: React.ComponentType & { /** A component that renders a filter row cell. */ Cell: React.ComponentType; /** A component that renders a filter row. */ Row: React.ComponentType; }; // ------------------------------------------------------------------------------------------------- // TableGroupRow // ------------------------------------------------------------------------------------------------- import { TableGroupRow as TableGroupRowBase, } from '@devexpress/dx-react-grid'; export interface TableGroupRowProps { /** A Boolean value that specifies whether the grid's table displays a column by which data is grouped. */ showColumnsWhenGrouped?: boolean; /** Additional column properties that the plugin can handle. */ columnExtensions?: Array; /** A component that renders a group cell. */ cellComponent?: React.ComponentType; /** A component that renders a group row. */ rowComponent?: React.ComponentType; /** A component that renders a group indent cell. */ indentCellComponent?: React.ComponentType; /** The group indent column's width. */ indentColumnWidth?: number; } /** A plugin that renders group rows and enables them to expand and collapse. */ export declare const TableGroupRow: React.ComponentType & { /** A component that renders a group row. */ Row: React.ComponentType; /** A component that renders a group cell. */ Cell: React.ComponentType; }; // ------------------------------------------------------------------------------------------------- // TableHeaderRow // ------------------------------------------------------------------------------------------------- import { TableHeaderRow as TableHeaderRowBase, } from '@devexpress/dx-react-grid'; export interface TableHeaderRowProps { /** A component that renders a header cell. */ cellComponent?: React.ComponentType; /** A component that renders a header row. */ rowComponent?: React.ComponentType; /** Specifies whether to render controls that toggle the column's sorting state. Requires the SortingState dependency. */ showSortingControls?: boolean; /** Specifies whether to display a button that groups data by column. Requires the GroupingState dependency. */ showGroupingControls?: boolean; /** An object that specifies localization messages. */ messages?: TableHeaderRowBase.LocalizationMessages; } /** A plugin that renders the table's header row. The Column's `title` field specifies the column's title in the header row.The plugin also allows you to manage a column's sorting and grouping state and initiate column dragging. */ export declare const TableHeaderRow: React.ComponentType & { /** A component that renders a header row. */ Row: React.ComponentType; /** A component that renders a header cell. */ Cell: React.ComponentType; }; // ------------------------------------------------------------------------------------------------- // TableRowDetail // ------------------------------------------------------------------------------------------------- import { TableRowDetail as TableRowDetailBase, } from '@devexpress/dx-react-grid'; export interface TableRowDetailProps { /** A component that renders the detail row's content within the detail cell. */ contentComponent?: React.ComponentType; /** A component that renders a detail cell. */ cellComponent?: React.ComponentType; /** A component that renders a detail row. */ rowComponent?: React.ComponentType; /** A component that renders a cell containing the expand/collapse control. */ toggleCellComponent?: React.ComponentType; /** Specifies the width of the column containing expand/collapse controls. */ toggleColumnWidth?: number; /** Specifies the detail row height. */ rowHeight?: number; } /** A plugin that renders detail rows. */ export declare const TableRowDetail: React.ComponentType & { /** A component that renders a detail cell. */ Cell: React.ComponentType; /** A component that renders a detail row. */ Row: React.ComponentType; /** A component that renders a cell containing the expand/collapse control. */ ToggleCell: React.ComponentType; }; // ------------------------------------------------------------------------------------------------- // TableSelection // ------------------------------------------------------------------------------------------------- import { TableSelection as TableSelectionBase, } from '@devexpress/dx-react-grid'; export interface TableSelectionProps { /** Specifies whether to highlight the selected rows. Note that `Table` plugin's `rowComponent` is ignored in this case. */ highlightRow?: boolean; /** Specifies whether a user can select/deselect a row by clicking it. Note that `Table` plugin's `rowComponent` is ignored in this case. */ selectByRowClick?: boolean; /** Specifies whether to render the Select All checkbox in the header row. */ showSelectAll?: boolean; /** Specifies whether to render the selection column that displays selection checkboxes. */ showSelectionColumn?: boolean; /** A component that renders a selection cell . */ cellComponent?: React.ComponentType; /** A component that renders a cell containing the Select All checkbox. */ headerCellComponent?: React.ComponentType; /** The selection column's width. */ selectionColumnWidth?: number; } /** A plugin that visualizes table rows' selection state by rendering selection checkboxes and highlighting the selected rows. */ export declare const TableSelection: React.ComponentType & { /** A component that renders a cell with the selection control inside the heading row. */ HeaderCell: React.ComponentType; /** A component that renders a cell with selection control. */ Cell: React.ComponentType; }; // ------------------------------------------------------------------------------------------------- // TableTreeColumn // ------------------------------------------------------------------------------------------------- import { TableTreeColumn as TableTreeColumnBase, } from '@devexpress/dx-react-grid'; export interface TableTreeColumnProps { /** The name of a column that should be represented as a tree. */ for?: string; /** A component that renders a cell within a data row. */ cellComponent?: React.ComponentType; /** A component that renders a cell's content. */ contentComponent?: React.ComponentType; /** A component that renders an indent used to identify a row level. */ indentComponent?: React.ComponentType; /** A component that renders a button that controls the row's expanded state. */ expandButtonComponent?: React.ComponentType; /** A component that renders a checkbox used to control selection. */ checkboxComponent?: React.ComponentType; /** Specifies whether to render selection controls. Requires the SelectionState dependency. */ showSelectionControls?: boolean; /** Specifies whether to render Select All checkbox. Requires the IntegratedSelection dependency. */ showSelectAll?: boolean; } /** A plugin that renders a table column with toggle button and sorting indicators. */ export declare const TableTreeColumn: React.ComponentType & { /** A component that renders a cell within a data row. */ Cell: React.ComponentType; /** A component that renders a cell's content. */ Content: React.ComponentType; /** A component that renders an indent used to identify a row level. */ Indent: React.ComponentType; /** A component that renders a button used to controls a row's expanded state. */ ExpandButton: React.ComponentType; /** A component that renders a checkbox used to control selection. */ Checkbox: React.ComponentType; }; // ------------------------------------------------------------------------------------------------- // Table // ------------------------------------------------------------------------------------------------- import { Table as TableBase, } from '@devexpress/dx-react-grid'; export interface TableProps { /** Additional column properties that the plugin can handle. */ columnExtensions?: Array; /** A component that renders a table. */ tableComponent?: React.ComponentType