import { Context } from 'react'; import { JSX } from 'react/jsx-runtime'; import type { Key } from 'react'; import type { ReactElement } from 'react'; import { ReactNode } from 'react'; declare interface BaseRenderRowProps extends Omit_2, 'style' | 'children'>, Pick, 'onCellClick' | 'onCellDoubleClick' | 'onCellContextMenu'> { viewportColumns: readonly CalculatedColumn[]; rowIdx: number; selectedCellIdx: number | undefined; isRowSelectionDisabled: boolean; isRowSelected: boolean; gridRowStart: number; selectCell: (position: Position, enableEditor?: Maybe) => void; } export declare interface CalculatedColumn extends Column { readonly parent: CalculatedColumnParent | undefined; readonly idx: number; readonly level: number; readonly width: number | string; readonly minWidth: number; readonly maxWidth: number | undefined; readonly resizable: boolean; readonly sortable: boolean; readonly draggable: boolean; readonly frozen: boolean; readonly renderCell: (props: RenderCellProps) => ReactNode; readonly renderHeaderCell: (props: RenderHeaderCellProps) => ReactNode; } export declare type CalculatedColumnOrColumnGroup = CalculatedColumnParent | CalculatedColumn; export declare interface CalculatedColumnParent { readonly name: string | ReactElement; readonly parent: CalculatedColumnParent | undefined; readonly idx: number; readonly colSpan: number; readonly level: number; readonly headerCellClass?: Maybe; } export declare const Cell: (props: CellRendererProps) => React.JSX.Element; export declare interface CellClickArgs { rowIdx: number; row: TRow; column: CalculatedColumn; selectCell: (enableEditor?: boolean) => void; } declare type CellEvent> = E & { preventGridDefault: () => void; isGridDefaultPrevented: () => boolean; }; export declare type CellKeyboardEvent = CellEvent>; export declare type CellKeyDownArgs = SelectCellKeyDownArgs | EditCellKeyDownArgs; export declare type CellMouseEvent = CellEvent>; export declare interface CellRendererProps extends Pick, 'row' | 'rowIdx' | 'selectCell'>, Omit_2, 'children' | 'onClick' | 'onDoubleClick' | 'onContextMenu'> { column: CalculatedColumn; colSpan: number | undefined; isCopied: boolean; isDraggedOver: boolean; isCellSelected: boolean; onClick: RenderRowProps['onCellClick']; onDoubleClick: RenderRowProps['onCellDoubleClick']; onContextMenu: RenderRowProps['onCellContextMenu']; onRowChange: (column: CalculatedColumn, newRow: TRow) => void; } export declare interface CellSelectArgs { rowIdx: number; row: TRow | undefined; column: CalculatedColumn; } export declare type ColSpanArgs = { type: 'HEADER'; } | { type: 'ROW'; row: TRow; } | { type: 'SUMMARY'; row: TSummaryRow; }; export declare interface Column { /** The name of the column. By default it will be displayed in the header cell */ readonly name: string | ReactElement; /** A unique key to distinguish each column */ readonly key: string; /** * Column width. If not specified, it will be determined automatically based on grid width and specified widths of other columns * @default 'auto' */ readonly width?: Maybe; /** * Minimum column width in px * @default '50px' */ readonly minWidth?: Maybe; /** Maximum column width in px. */ readonly maxWidth?: Maybe; readonly cellClass?: Maybe Maybe)>; readonly headerCellClass?: Maybe; readonly summaryCellClass?: Maybe Maybe)>; /** Render function used to render the content of cells */ readonly renderCell?: Maybe<(props: RenderCellProps) => ReactNode>; /** Render function used to render the content of the column's header cell */ readonly renderHeaderCell?: Maybe<(props: RenderHeaderCellProps) => ReactNode>; /** Render function used to render the content of summary cells */ readonly renderSummaryCell?: Maybe<(props: RenderSummaryCellProps) => ReactNode>; /** Render function used to render the content of group cells */ readonly renderGroupCell?: Maybe<(props: RenderGroupCellProps) => ReactNode>; /** Render function used to render the content of edit cells. When set, the column is automatically set to be editable */ readonly renderEditCell?: Maybe<(props: RenderEditCellProps) => ReactNode>; /** Enables cell editing. If set and no editor property specified, then a textinput will be used as the cell editor */ readonly editable?: Maybe boolean)>; readonly colSpan?: Maybe<(args: ColSpanArgs) => Maybe>; /** Determines whether column is frozen or not */ readonly frozen?: Maybe; /** Enable resizing of a column */ readonly resizable?: Maybe; /** Enable sorting of a column */ readonly sortable?: Maybe; /** Enable dragging of a column */ readonly draggable?: Maybe; /** Sets the column sort order to be descending instead of ascending the first time the column is sorted */ readonly sortDescendingFirst?: Maybe; readonly editorOptions?: Maybe<{ /** * Render the cell content in addition to the edit cell. * Enable this option when the editor is rendered outside the grid, like a modal for example. * By default, the cell content is not rendered when the edit cell is open. * @default false */ readonly displayCellContent?: Maybe; /** @default true */ readonly commitOnOutsideClick?: Maybe; }>; } export declare interface ColumnGroup { /** The name of the column group, it will be displayed in the header cell */ readonly name: string | ReactElement; readonly headerCellClass?: Maybe; readonly children: readonly ColumnOrColumnGroup[]; } export declare type ColumnOrColumnGroup = Column | ColumnGroup; export declare interface CopyEvent { sourceColumnKey: string; sourceRow: TRow; } /** * Main API Component to render a data grid of rows and columns * * @example * * */ export declare function DataGrid(props: DataGridProps): JSX.Element; export declare const DataGridDefaultRenderersContext: Context>>; export declare interface DataGridHandle { element: HTMLDivElement | null; scrollToCell: (position: PartialPosition) => void; selectCell: (position: Position, enableEditor?: Maybe) => void; } export declare interface DataGridProps extends SharedDivProps { ref?: Maybe>; /** * Grid and data Props */ /** An array of objects representing each column on the grid */ columns: readonly ColumnOrColumnGroup, NoInfer>[]; /** A function called for each rendered row that should return a plain key/value pair object */ rows: readonly R[]; /** * Rows to be pinned at the top of the rows view for summary, the vertical scroll bar will not scroll these rows. */ topSummaryRows?: Maybe; /** * Rows to be pinned at the bottom of the rows view for summary, the vertical scroll bar will not scroll these rows. */ bottomSummaryRows?: Maybe; /** The getter should return a unique key for each row */ rowKeyGetter?: Maybe<(row: NoInfer) => K>; onRowsChange?: Maybe<(rows: NoInfer[], data: RowsChangeData, NoInfer>) => void>; /** * Dimensions props */ /** * The height of each row in pixels * @default 35 */ rowHeight?: Maybe) => number)>; /** * The height of the header row in pixels * @default 35 */ headerRowHeight?: Maybe; /** * The height of each summary row in pixels * @default 35 */ summaryRowHeight?: Maybe; /** * Feature props */ /** Set of selected row keys */ selectedRows?: Maybe>; /** Determines if row selection is disabled, per row */ isRowSelectionDisabled?: Maybe<(row: NoInfer) => boolean>; /** Function called whenever row selection is changed */ onSelectedRowsChange?: Maybe<(selectedRows: Set>) => void>; /** Used for multi column sorting */ sortColumns?: Maybe; onSortColumnsChange?: Maybe<(sortColumns: SortColumn[]) => void>; defaultColumnOptions?: Maybe, NoInfer>>; onFill?: Maybe<(event: FillEvent>) => NoInfer>; onCopy?: Maybe<(event: CopyEvent>) => void>; onPaste?: Maybe<(event: PasteEvent>) => NoInfer>; /** * Event props */ /** Function called whenever a cell is clicked */ onCellClick?: Maybe<(args: CellClickArgs, NoInfer>, event: CellMouseEvent) => void>; /** Function called whenever a cell is double clicked */ onCellDoubleClick?: Maybe<(args: CellClickArgs, NoInfer>, event: CellMouseEvent) => void>; /** Function called whenever a cell is right clicked */ onCellContextMenu?: Maybe<(args: CellClickArgs, NoInfer>, event: CellMouseEvent) => void>; onCellKeyDown?: Maybe<(args: CellKeyDownArgs, NoInfer>, event: CellKeyboardEvent) => void>; /** Function called whenever cell selection is changed */ onSelectedCellChange?: Maybe<(args: CellSelectArgs, NoInfer>) => void>; /** Called when the grid is scrolled */ onScroll?: Maybe<(event: React.UIEvent) => void>; /** Called when a column is resized */ onColumnResize?: Maybe<(column: CalculatedColumn, width: number) => void>; /** Called when a column is reordered */ onColumnsReorder?: Maybe<(sourceColumnKey: string, targetColumnKey: string) => void>; /** * Toggles and modes */ /** @default true */ enableVirtualization?: Maybe; /** * The minimum number of rows to render when virtualization is enabled */ minimumRowsToRender?: Maybe; /** * Miscellaneous */ renderers?: Maybe, NoInfer>>; rowClass?: Maybe<(row: NoInfer, rowIdx: number) => Maybe>; /** @default 'ltr' */ direction?: Maybe; 'data-testid'?: Maybe; 'data-cy'?: Maybe; } export declare type DefaultColumnOptions = Pick, 'renderCell' | 'renderHeaderCell' | 'width' | 'minWidth' | 'maxWidth' | 'resizable' | 'sortable' | 'draggable'>; declare type Direction = 'ltr' | 'rtl'; declare interface EditCellKeyDownArgs { mode: 'EDIT'; row: TRow; column: CalculatedColumn; rowIdx: number; navigate: () => void; onClose: (commitChanges?: boolean, shouldFocusCell?: boolean) => void; } export declare interface FillEvent { columnKey: string; sourceRow: TRow; targetRow: TRow; } declare interface GroupRow { readonly childRows: readonly TRow[]; readonly id: string; readonly parentId: unknown; readonly groupKey: unknown; readonly isExpanded: boolean; readonly level: number; readonly posInSet: number; readonly setSize: number; readonly startRowIndex: number; } declare type Maybe = T | undefined | null; declare type Omit_2 = Pick>; declare interface PartialPosition { readonly idx?: number | undefined; readonly rowIdx?: number | undefined; } export declare interface PasteEvent { sourceColumnKey: string; sourceRow: TRow; targetColumnKey: string; targetRow: TRow; } declare interface Position { readonly idx: number; readonly rowIdx: number; } export declare interface RenderCellProps { column: CalculatedColumn; row: TRow; rowIdx: number; isCellEditable: boolean; tabIndex: number; onRowChange: (row: TRow) => void; } export declare function renderCheckbox({ onChange, indeterminate, ...props }: RenderCheckboxProps): JSX.Element; export declare interface RenderCheckboxProps extends Pick, 'aria-label' | 'aria-labelledby' | 'checked' | 'tabIndex' | 'disabled'> { indeterminate?: boolean | undefined; onChange: (checked: boolean, shift: boolean) => void; } export declare interface RenderEditCellProps { column: CalculatedColumn; row: TRow; rowIdx: number; onRowChange: (row: TRow, commitChanges?: boolean) => void; onClose: (commitChanges?: boolean, shouldFocusCell?: boolean) => void; } export declare interface Renderers { renderCell?: Maybe<(key: Key, props: CellRendererProps) => ReactNode>; renderCheckbox?: Maybe<(props: RenderCheckboxProps) => ReactNode>; renderRow?: Maybe<(key: Key, props: RenderRowProps) => ReactNode>; renderSortStatus?: Maybe<(props: RenderSortStatusProps) => ReactNode>; noRowsFallback?: Maybe; } export declare interface RenderGroupCellProps { groupKey: unknown; column: CalculatedColumn; row: GroupRow; childRows: readonly TRow[]; isExpanded: boolean; tabIndex: number; toggleGroup: () => void; } export declare function renderHeaderCell({ column, sortDirection, priority }: RenderHeaderCellProps): string | JSX.Element; export declare interface RenderHeaderCellProps { column: CalculatedColumn; sortDirection: SortDirection | undefined; priority: number | undefined; tabIndex: number; } export declare interface RenderRowProps extends BaseRenderRowProps { row: TRow; lastFrozenColumnIndex: number; copiedCellIdx: number | undefined; draggedOverCellIdx: number | undefined; selectedCellEditor: ReactElement> | undefined; onRowChange: (column: CalculatedColumn, rowIdx: number, newRow: TRow) => void; rowClass: Maybe<(row: TRow, rowIdx: number) => Maybe>; setDraggedOverRowIdx: ((overRowIdx: number) => void) | undefined; } export declare function renderSortIcon({ sortDirection }: RenderSortIconProps): JSX.Element | null; export declare interface RenderSortIconProps { sortDirection: SortDirection | undefined; } export declare function renderSortPriority({ priority }: RenderSortPriorityProps): number | undefined; export declare interface RenderSortPriorityProps { priority: number | undefined; } export declare interface RenderSortStatusProps extends RenderSortIconProps, RenderSortPriorityProps { } export declare interface RenderSummaryCellProps { column: CalculatedColumn; row: TSummaryRow; tabIndex: number; } export declare function renderToggleGroup(props: RenderGroupCellProps): JSX.Element; export declare function renderValue(props: RenderCellProps): ReactNode; export declare const Row: (props: RenderRowProps) => React.JSX.Element; export declare type RowHeightArgs = { type: 'ROW'; row: TRow; } | { type: 'GROUP'; row: GroupRow; }; export declare interface RowsChangeData { indexes: number[]; column: CalculatedColumn; } export declare const SELECT_COLUMN_KEY = "rdg-select-column"; export declare function SelectCellFormatter({ value, tabIndex, indeterminate, disabled, onChange, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy }: SelectCellFormatterProps): ReactNode; declare interface SelectCellFormatterProps extends SharedInputProps { value: boolean; } declare interface SelectCellKeyDownArgs { mode: 'SELECT'; row: TRow; column: CalculatedColumn; rowIdx: number; selectCell: (position: Position, enableEditor?: Maybe) => void; } export declare const SelectColumn: Column; export declare interface SelectHeaderRowEvent { checked: boolean; } export declare interface SelectRowEvent { row: TRow; checked: boolean; isShiftClick: boolean; } declare type SharedDivProps = Pick, 'role' | 'aria-label' | 'aria-labelledby' | 'aria-description' | 'aria-describedby' | 'aria-rowcount' | 'className' | 'style'>; declare type SharedInputProps = Pick; export declare interface SortColumn { readonly columnKey: string; readonly direction: SortDirection; } export declare type SortDirection = 'ASC' | 'DESC'; export declare function textEditor({ row, column, onRowChange, onClose }: RenderEditCellProps): JSX.Element; export declare function ToggleGroup({ groupKey, isExpanded, tabIndex, toggleGroup }: RenderGroupCellProps): JSX.Element; export declare function TreeDataGrid({ columns: rawColumns, rows: rawRows, rowHeight: rawRowHeight, rowKeyGetter: rawRowKeyGetter, onCellKeyDown: rawOnCellKeyDown, onRowsChange, selectedRows: rawSelectedRows, onSelectedRowsChange: rawOnSelectedRowsChange, renderers, groupBy: rawGroupBy, rowGrouper, expandedGroupIds, onExpandedGroupIdsChange, ...props }: TreeDataGridProps): JSX.Element; export declare interface TreeDataGridProps extends Omit_2, 'columns' | 'role' | 'aria-rowcount' | 'rowHeight' | 'onFill' | 'isRowSelectionDisabled'> { columns: readonly Column, NoInfer>[]; rowHeight?: Maybe>) => number)>; groupBy: readonly string[]; rowGrouper: (rows: readonly NoInfer[], columnKey: string) => Record[]>; expandedGroupIds: ReadonlySet; onExpandedGroupIdsChange: (expandedGroupIds: Set) => void; } export declare function useHeaderRowSelection(): { isIndeterminate: boolean; isRowSelected: boolean; onRowSelectionChange: (selectRowEvent: SelectHeaderRowEvent) => void; }; export declare function useRowSelection(): { isRowSelectionDisabled: boolean; isRowSelected: boolean; onRowSelectionChange: (selectRowEvent: SelectRowEvent) => void; }; export { }