///
import { JSX as JSX_2 } from 'react';
import type { Key } from 'react';
import { Provider } from 'react';
import type { ReactElement } from 'react';
import { ReactNode } from 'react';
import { RefAttributes } from 'react';
export declare interface CalculatedColumn extends Column {
readonly idx: number;
readonly width: number | string;
readonly minWidth: number;
readonly maxWidth: number | undefined;
readonly resizable: boolean;
readonly sortable: boolean;
readonly frozen: boolean;
readonly isLastFrozenColumn: boolean;
readonly rowGroup: boolean;
readonly renderCell: (props: RenderCellProps) => ReactNode;
}
export declare interface CellClickArgs {
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, 'style' | 'children' | 'onClick' | 'onDoubleClick' | 'onContextMenu'> {
column: CalculatedColumn;
colSpan: number | undefined;
isCopied: boolean;
isDraggedOver: boolean;
isCellSelected: boolean;
dragHandle: ReactElement> | undefined;
onClick: RenderRowProps['onCellClick'];
onDoubleClick: RenderRowProps['onCellDoubleClick'];
onContextMenu: RenderRowProps['onCellContextMenu'];
onRowChange: (column: CalculatedColumn, newRow: TRow) => void;
}
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 */
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)>;
/** 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 cells */
readonly renderCell?: Maybe<(props: RenderCellProps) => 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;
/** 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 CopyEvent {
sourceColumnKey: string;
sourceRow: TRow;
}
export declare const DataGridDefaultRenderersProvider: Provider>>;
export declare interface DataGridHandle {
element: HTMLDivElement | null;
scrollToCell: (position: PartialPosition) => 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 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: 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>;
onCopy?: Maybe<(event: CopyEvent) => void>;
onPaste?: Maybe<(event: PasteEvent) => R>;
/**
* Event props
*/
/** Function called whenever a cell is clicked */
onCellClick?: Maybe<(args: CellClickArgs, event: CellMouseEvent) => void>;
/** Function called whenever a cell is double clicked */
onCellDoubleClick?: Maybe<(args: CellClickArgs, event: CellMouseEvent) => void>;
/** Function called whenever a cell is right clicked */
onCellContextMenu?: Maybe<(args: CellClickArgs, event: CellMouseEvent) => void>;
onCellKeyDown?: Maybe<(args: CellKeyDownArgs, event: CellKeyboardEvent) => 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>;
/**
* Toggles and modes
*/
/** @default true */
enableVirtualization?: Maybe;
/**
* Miscellaneous
*/
renderers?: Maybe>;
rowClass?: Maybe<(row: R, rowIdx: number) => Maybe>;
/** @default 'ltr' */
direction?: Maybe;
'data-testid'?: Maybe;
}
declare const _default: (props: DataGridProps & RefAttributes) => JSX.Element;
export default _default;
declare type DefaultColumnOptions = Pick, 'renderCell' | 'width' | 'minWidth' | 'maxWidth' | 'resizable' | 'sortable'>;
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;
isCellEditable: boolean;
tabIndex: number;
onRowChange: (row: TRow) => void;
}
export declare function renderCheckbox({ onChange, ...props }: RenderCheckboxProps): JSX_2.Element;
export declare interface RenderCheckboxProps extends Pick, 'aria-label' | 'aria-labelledby' | 'checked' | 'tabIndex' | 'disabled'> {
onChange: (checked: boolean, shift: boolean) => void;
}
export declare interface RenderEditCellProps {
column: CalculatedColumn;
row: TRow;
onRowChange: (row: TRow, commitChanges?: boolean) => void;
onClose: (commitChanges?: boolean, shouldFocusCell?: boolean) => void;
}
export declare interface Renderers {
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, onSort, tabIndex }: RenderHeaderCellProps): string | JSX_2.Element;
export declare interface RenderHeaderCellProps {
column: CalculatedColumn;
sortDirection: SortDirection | undefined;
priority: number | undefined;
tabIndex: number;
onSort: (ctrlClick: boolean) => void;
}
export declare interface RenderRowProps extends Omit_2, 'style' | 'children'>, Pick, 'onCellClick' | 'onCellDoubleClick' | 'onCellContextMenu'> {
viewportColumns: readonly CalculatedColumn[];
row: TRow;
rowIdx: number;
selectedCellIdx: number | undefined;
copiedCellIdx: number | undefined;
draggedOverCellIdx: number | undefined;
lastFrozenColumnIndex: number;
isRowSelected: boolean;
gridRowStart: number;
height: number;
selectedCellEditor: ReactElement> | undefined;
selectedCellDragHandle: ReactElement> | undefined;
onRowChange: (column: CalculatedColumn, rowIdx: number, newRow: TRow) => void;
rowClass: Maybe<(row: TRow, rowIdx: number) => Maybe>;
setDraggedOverRowIdx: ((overRowIdx: number) => void) | undefined;
selectCell: (position: Position, enableEditor?: Maybe) => void;
}
export declare function renderSortIcon({ sortDirection }: RenderSortIconProps): JSX_2.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_2.Element;
export declare function renderValue(props: RenderCellProps): ReactNode;
export declare const Row: (props: RenderRowProps & RefAttributes) => 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 = "select-row";
export declare function SelectCellFormatter({ value, tabIndex, disabled, onChange, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy }: SelectCellFormatterProps): ReactNode;
declare interface SelectCellFormatterProps extends SharedInputProps {
value: boolean;
onChange: (value: boolean, isShiftClick: boolean) => void;
}
declare interface SelectCellKeyDownArgs {
mode: 'SELECT';
row: TRow;
column: CalculatedColumn;
rowIdx: number;
selectCell: (position: Position, enableEditor?: Maybe) => void;
}
export declare const SelectColumn: Column;
export declare type SelectRowEvent = {
type: 'HEADER';
checked: boolean;
} | {
type: 'ROW';
row: TRow;
checked: boolean;
isShiftClick: boolean;
};
declare type SharedDivProps = Pick, 'aria-label' | 'aria-labelledby' | 'aria-describedby' | '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_2.Element;
export declare function ToggleGroup({ groupKey, isExpanded, tabIndex, toggleGroup }: RenderGroupCellProps): JSX_2.Element;
export declare function useRowSelection(): [boolean, (selectRowEvent: SelectRowEvent) => void];
export { }