ReactGridProps

The ReactGridProps interface defines the properties and callbacks that can be used to configure the ReactGrid component. This interface allows to customize the grid's appearance, behavior, and interactions.

Definition

interface ReactGridProps {
  id?: string;
  styles?: NestedStylesPartial<RGTheme>;
  styledRanges?: StyledRange[];
  rows?: Row[];
  columns?: Column[];
  cells: Cell[];
  onAreaSelected?: (selectedArea: NumericalRange) => void;
  onCellFocused?: (cellLocation: IndexedLocation) => void;
  stickyTopRows?: number;
  stickyRightColumns?: number;
  stickyBottomRows?: number;
  stickyLeftColumns?: number;
  enableColumnSelectionOnFirstRow?: boolean;
  enableRowSelectionOnFirstColumn?: boolean;
  behaviors?: Partial<Record<BehaviorId, Behavior>>;
  initialFocusLocation?: IndexedLocation;
  initialSelectedRange?: Range;
  disableCut?: boolean;
  disableCopy?: boolean;
  disablePaste?: boolean;
  disableFillHandle?: boolean;
  onFocusLocationChanging?: ({ location }: { location: IndexedLocation }) => boolean;
  onFocusLocationChanged?: ({ location }: { location: IndexedLocation }) => void;
  onFillHandle?: (selectedArea: NumericalRange, fillRange: NumericalRange, cellsLookup: CellsLookup) => boolean;
  onCut?: (event: React.ClipboardEvent<HTMLDivElement>, cellsRange: NumericalRange, cellsLookup: CellsLookup) => boolean;
  onCopy?: (event: React.ClipboardEvent<HTMLDivElement>, cellsRange: NumericalRange, cellsLookup: CellsLookup) => boolean;
  onPaste?: (event: React.ClipboardEvent<HTMLDivElement>, cellsRange: NumericalRange, cellsLookup: CellsLookup) => boolean;
  onColumnReorder?: (selectedColIndexes: number[], destinationColIdx: number) => void;
  onRowReorder?: (selectedRowIndexes: number[], destinationRowIdx: number) => void;
  onResizeColumn?: (width: number, columnIdx: number[]) => void;
}

Properties

Name	Type	Description
`id`	`string`	Optional unique identifier for the grid. It should be passed if the `useReactGridAPI` hook is to be used.
`styles`	`NestedStylesPartial<RGTheme>`	Optional styles for the grid.
`styledRanges`	`StyledRange[]`	Optional styled ranges within the grid.
`rows`	`Row[]`	Optional array of rows.
`columns`	`Column[]`	Optional array of columns.
`cells`	`Cell[]`	Array of cells.
`stickyTopRows`	`number`	Number of sticky rows at the top.
`stickyRightColumns`	`number`	Number of sticky columns on the right.
`stickyBottomRows`	`number`	Number of sticky rows at the bottom.
`stickyLeftColumns`	`number`	Number of sticky columns on the left.
`enableColumnSelectionOnFirstRow`	`boolean`	Enable column selection on the first row.
`enableRowSelectionOnFirstColumn`	`boolean`	Enable row selection on the first column.
`moveRightOnEnter`	`boolean`	Moves the focus to the right cell when the Enter key is pressed. By default, it is set to `false`.
`behaviors`	`Partial<Record<BehaviorId, Behavior>>`	Optional property that allows to override default ReactGrid behaviors.
`initialFocusLocation`	`IndexedLocation`	Initial focus location in the grid.
`initialSelectedRange`	`Range`	Initial selected range in the grid.
`disableCut`	`boolean`	Disables the cut functionality in the grid.
`disableCopy`	`boolean`	Disables the copy functionality in the grid.
`disablePaste`	`boolean`	Disables the paste functionality in the grid.
`disableFillHandle`	`boolean`	Disables the fill handle functionality in the grid.

Callbacks

Name	Type	Description
`onAreaSelected`	`(selectedArea: NumericalRange) => void`	Callback when an area is selected.
`onCellFocused`	`(cellLocation: IndexedLocation) => void`	Callback when a cell is focused.
`onFocusLocationChanging`	`({ location }: { location: IndexedLocation }) => boolean`	Callback before focus location changes.
`onFocusLocationChanged`	`({ location }: { location: IndexedLocation }) => void`	Callback after focus location changes.
`onFillHandle`	`(selectedArea: NumericalRange, fillRange: NumericalRange, cellsLookup: CellsLookup) => boolean`	Callback for fill handle action.
`onCut`	`(event: React.ClipboardEvent<HTMLDivElement>, cellsRange: NumericalRange, cellsLookup: CellsLookup) => boolean`	Callback for cut action.
`onCopy`	`(event: React.ClipboardEvent<HTMLDivElement>, cellsRange: NumericalRange, cellsLookup: CellsLookup) => boolean`	Callback for copy action.
`onPaste`	`(event: React.ClipboardEvent<HTMLDivElement>, cellsRange: NumericalRange, cellsLookup: CellsLookup) => boolean`	Callback for paste action.
`onColumnReorder`	`(selectedColIndexes: number[], destinationColIdx: number) => void`	Callback for column reorder action.
`onRowReorder`	`(selectedRowIndexes: number[], destinationRowIdx: number) => void`	Callback for row reorder action.
`onResizeColumn`	`(width: number, columnIdx: number[]) => void`	Callback for column resize action.

ReactGridAPI Behavior