import type { Key } from 'react'; import type { ReactElement } from 'react'; import type { RefAttributes } from 'react'; export declare interface CalculatedColumn extends Column { readonly idx: number; readonly resizable: boolean; readonly sortable: boolean; readonly frozen: boolean; readonly isLastFrozenColumn: boolean; readonly rowGroup: boolean; readonly formatter: React.ComponentType>; } export declare type CellNavigationMode = 'NONE' | 'CHANGE_ROW' | 'LOOP_OVER_ROW'; export declare interface CellRendererProps extends Pick, 'onRowClick' | 'onRowDoubleClick' | 'selectCell'>, Omit_2, 'style' | 'children'> { column: CalculatedColumn; colSpan: number | undefined; row: TRow; isCopied: boolean; isDraggedOver: boolean; isCellSelected: boolean; dragHandle: ReactElement> | undefined; onRowChange: (newRow: TRow) => void; } export declare type ColSpanArgs = { type: 'HEADER'; } | { type: 'ROW'; row: R; } | { type: 'SUMMARY'; row: SR; }; 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 */ readonly width?: Maybe; /** Minimum column width in px. */ readonly minWidth?: Maybe; /** Maximum column width in px. */ readonly maxWidth?: Maybe; readonly cellClass?: Maybe Maybe)>; readonly headerCellClass?: Maybe; readonly summaryCellClass?: Maybe Maybe)>; /** Formatter to be used to render the cell content */ readonly formatter?: Maybe>>; /** Formatter to be used to render the summary cell content */ readonly summaryFormatter?: Maybe>>; /** Formatter to be used to render the group cell content */ readonly groupFormatter?: Maybe>>; /** 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; /** Sets the column sort order to be descending instead of ascending the first time the column is sorted */ readonly sortDescendingFirst?: Maybe; /** Editor to be rendered when cell of column is being edited. If set, then the column is automatically set to be editable */ readonly editor?: Maybe>>; readonly editorOptions?: Maybe<{ /** @default false */ readonly renderFormatter?: Maybe; /** @default false */ readonly editOnClick?: Maybe; /** Prevent default to cancel editing */ readonly onCellKeyDown?: Maybe<(event: React.KeyboardEvent) => void>; /** Control the default cell navigation behavior while the editor is open */ readonly onNavigation?: Maybe<(event: React.KeyboardEvent) => boolean>; }>; /** Header renderer for each header cell */ readonly headerRenderer?: Maybe>>; } export declare interface DataGridHandle { element: HTMLDivElement | null; scrollToColumn: (colIdx: number) => void; scrollToRow: (rowIdx: number) => void; selectCell: (position: Position, enableEditor?: Maybe) => void; } export declare interface DataGridProps extends SharedDivProps { /** * Grid and data Props */ /** An array of objects representing each column on the grid */ columns: readonly Column[]; /** 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 bottom of the rows view for summary, the vertical scroll bar will not scroll these rows. * Bottom horizontal scroll bar can move the row left / right. Or a customized row renderer can be used to disabled the scrolling support. */ summaryRows?: Maybe; /** The getter should return a unique key for each row */ rowKeyGetter?: Maybe<(row: R) => K>; onRowsChange?: Maybe<(rows: R[], data: RowsChangeData) => 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>; /** 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>; groupBy?: Maybe; rowGrouper?: Maybe<(rows: readonly R[], columnKey: string) => Record>; expandedGroupIds?: Maybe>; onExpandedGroupIdsChange?: Maybe<(expandedGroupIds: Set) => void>; onFill?: Maybe<(event: FillEvent) => R>; onPaste?: Maybe<(event: PasteEvent) => R>; /** * Event props */ /** Function called whenever a row is clicked */ onRowClick?: Maybe<(row: R, column: CalculatedColumn) => void>; /** Function called whenever a row is double clicked */ onRowDoubleClick?: Maybe<(row: R, column: CalculatedColumn) => void>; /** Called when the grid is scrolled */ onScroll?: Maybe<(event: React.UIEvent) => void>; /** Called when a column is resized */ onColumnResize?: Maybe<(idx: number, width: number) => void>; /** Function called whenever selected cell is changed */ onSelectedCellChange?: Maybe<(position: Position) => void>; /** * Toggles and modes */ /** @default 'NONE' */ cellNavigationMode?: Maybe; /** @default true */ enableVirtualization?: Maybe; /** * Miscellaneous */ rowRenderer?: Maybe>>; noRowsFallback?: React.ReactNode; rowClass?: Maybe<(row: R) => Maybe>; 'data-testid'?: Maybe; } declare const _default: (props: DataGridProps & RefAttributes) => JSX.Element; export default _default; declare type DefaultColumnOptions = Pick, 'formatter' | 'minWidth' | 'resizable' | 'sortable'>; export declare interface EditorProps { column: CalculatedColumn; row: TRow; onRowChange: (row: TRow, commitChanges?: boolean) => void; onClose: (commitChanges?: boolean) => void; } export declare interface FillEvent { columnKey: string; sourceRow: TRow; targetRow: TRow; } export declare interface FormatterProps { column: CalculatedColumn; row: TRow; isCellSelected: boolean; onRowChange: (row: TRow) => void; } export declare interface GroupFormatterProps { groupKey: unknown; column: CalculatedColumn; row: GroupRow; childRows: readonly TRow[]; isExpanded: boolean; isCellSelected: boolean; toggleGroup: () => void; } 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; } export declare interface HeaderRendererProps { column: CalculatedColumn; sortDirection: SortDirection | undefined; priority: number | undefined; onSort: (ctrlClick: boolean) => void; allRowsSelected: boolean; onAllRowsSelectionChange: (checked: boolean) => void; isCellSelected: boolean; } declare type Maybe = T | undefined | null; declare type Omit_2 = Pick>; export declare interface PasteEvent { sourceColumnKey: string; sourceRow: TRow; targetColumnKey: string; targetRow: TRow; } declare interface Position { readonly idx: number; readonly rowIdx: number; } declare interface Props extends SharedHeaderCellProps { children: React.ReactNode; } export declare const Row: (props: RowRendererProps & RefAttributes) => JSX.Element; export declare type RowHeightArgs = { type: 'ROW'; row: R; } | { type: 'GROUP'; row: GroupRow; }; export declare interface RowRendererProps extends Omit_2, 'style' | 'children'> { viewportColumns: readonly CalculatedColumn[]; row: TRow; rowIdx: number; selectedCellIdx: number | undefined; copiedCellIdx: number | undefined; draggedOverCellIdx: number | undefined; lastFrozenColumnIndex: number; isRowSelected: boolean; top: number; height: number; selectedCellEditor: ReactElement> | undefined; selectedCellDragHandle: ReactElement> | undefined; onRowChange: (rowIdx: number, newRow: TRow) => void; onRowClick: Maybe<(row: TRow, column: CalculatedColumn) => void>; onRowDoubleClick: Maybe<(row: TRow, column: CalculatedColumn) => void>; rowClass: Maybe<(row: TRow) => Maybe>; setDraggedOverRowIdx: ((overRowIdx: number) => void) | undefined; selectCell: (row: TRow, column: CalculatedColumn, enableEditor?: Maybe) => void; } export declare interface RowsChangeData { indexes: number[]; column: CalculatedColumn; } export declare const SELECT_COLUMN_KEY = "select-row"; export declare function SelectCellFormatter({ value, isCellSelected, disabled, onClick, onChange, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy }: SelectCellFormatterProps): JSX.Element; declare interface SelectCellFormatterProps extends SharedInputProps { isCellSelected: boolean; value: boolean; onChange: (value: boolean, isShiftClick: boolean) => void; } export declare const SelectColumn: Column; export declare interface SelectRowEvent { row: TRow; checked: boolean; isShiftClick: boolean; } declare type SharedDivProps = Pick, 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'className' | 'style'>; declare type SharedHeaderCellProps = Pick, 'sortDirection' | 'onSort' | 'priority' | 'isCellSelected'>; declare type SharedInputProps = Pick, 'disabled' | 'onClick' | 'aria-label' | 'aria-labelledby'>; export declare function SortableHeaderCell({ onSort, sortDirection, priority, children, isCellSelected }: Props): JSX.Element; export declare interface SortColumn { readonly columnKey: string; readonly direction: SortDirection; } export declare type SortDirection = 'ASC' | 'DESC'; export declare interface SummaryFormatterProps { column: CalculatedColumn; row: TSummaryRow; isCellSelected: boolean; } export declare function TextEditor({ row, column, onRowChange, onClose }: EditorProps): JSX.Element; export declare function ToggleGroupFormatter({ groupKey, isExpanded, isCellSelected, toggleGroup }: GroupFormatterProps): JSX.Element; export declare function useRowSelection(): [boolean, (selectRowEvent: SelectRowEvent) => void]; export declare function ValueFormatter(props: FormatterProps): JSX.Element | null; export { }