ReactGridProps interface

ReactGrid component has two essential properties which you must pass in properties to render - columns and rows.

Definition

interface ReactGridProps {
    readonly columns: Column[];
    readonly rows: Row<Cell>[];
    readonly customCellTemplates?: CellTemplates;
    readonly focusLocation?: CellLocation;
    readonly initialFocusLocation?: CellLocation;
    readonly highlights?: Highlight[];
    readonly stickyTopRows?: number;
    readonly stickyBottomRows?: number;
    readonly stickyLeftColumns?: number;
    readonly stickyRightColumns?: number;
    readonly enableFillHandle?: boolean;
    readonly enableRangeSelection?: boolean;
    readonly enableRowSelection?: boolean;
    readonly enableColumnSelection?: boolean;
    readonly labels?: TextLabels;
    readonly enableFullWidthHeader?: boolean;
    readonly enableGroupIdRender?: boolean;
    readonly horizontalStickyBreakpoint?: number;
    readonly verticalStickyBreakpoint?: number;


    readonly onCellsChanged?: (cellChanges: CellChange[]) => void;
    readonly onFocusLocationChanged?: (location: CellLocation) => void;
    readonly onFocusLocationChanging?: (location: CellLocation) => boolean;
    readonly onColumnResized?: (columnId: Id, width: number, selectedColIds: Id[]) => void;
    readonly onRowsReordered?: (targetRowId: Id, rowIds: Id[], dropPosition: DropPosition) => void;
    readonly onColumnsReordered?: (targetColumnId: Id, columnIds: Id[], dropPosition: DropPosition) => void;
    readonly onContextMenu?: (selectedRowIds: Id[], selectedColIds: Id[], selectionMode: SelectionMode, menuOptions: MenuOption[], selectedRanges: Array<CellLocation[]>) => MenuOption[];
    readonly canReorderColumns?: (targetColumnId: Id, columnIds: Id[], dropPosition: DropPosition) => boolean;
    readonly canReorderRows?: (targetRowId: Id, rowIds: Id[], dropPosition: DropPosition) => boolean;
}

Properties

NameTypeDescription
columns Columns []Column’s data
rows Rows<Cell> []Row’s data
customCellTemplates?CellTemplatesSet of available custom cell templates
focusLocation? CellLocation Focus position (managed constantly by outer app)
initialFocusLocation? CellLocation Initial position of focus
highlights? Highlight []Array of highlight positions
stickyTopRows?numberAmount of rows which are sticky at the top
stickyBottomRows?numberAmount of rows which are sticky at the bottom
stickyLeftColumns?numberAmount of columns which are sticky on the left side
stickyRightColumns?numberAmount of columns which are sticky on the right side
enableFillHandle?booleanSet true to enable cell fill feature (by default false)
enableRangeSelection?booleanSet true to enable selection feature (by default false)
enableRowSelection?booleanSet true to enable row selection feature (by default false)
enableColumnSelection?booleanSet true to enable column selection feature (by default false)
labels? TextLabels Object that contains labels of texts used by ReactGrid
enableFullWidthHeader?booleanSet true to enable full width header (by default false, feature is experimental)
enableGroupIdRender?booleanSet true to enable groupId element rendering (by default false)
readonly horizontalStickyBreakpoint?numberHorizontal breakpoint in percents (%) of ReactGrid scrollable parent element width. Disables sticky when the sum of the sizes of sticky panes overflows given breakpoint value (by default 50)
verticalStickyBreakpoint?numberVertical breakpoint in percents (%) of ReactGrid scrollable parent element height. Disables sticky when the sum of the sizes of sticky panes overflows given breakpoint value (by default 50)

Callbacks

NameTypeDescription
onCellsChanged?(cellChanges: CellChange []) => void;Called when cell property (e.g. value) was changed
onFocusLocationChanged?(location: CellLocation ) => void;Focus position has been changed
onFocusLocationChanging?(location: CellLocation ) => boolean;Called when trying to change focus location. Return false to prevent position changing
onColumnResized?(columnId: Id , dropPosition: DropPosition ) => void;Callback called when column resize action was ended
onRowsReordered?(targetRowId: Id , rowIds: Id [], dropPosition: DropPosition ) => void;Callback called when row reorder action was ended
onColumnsReordered?(targetColumnId: Id , columnIds: Id [], dropPosition: DropPosition ) => void;Callback called when column reorder action was ended
onContextMenu?(selectedRowIds: Id [], selectedColIds: Id [], selectionMode: SelectionMode , menuOptions: MenuOption [], selectedRanges: Array< CellLocation []>) => MenuOption [];Called when user opens context menu inside grid, used to compose own menu options
canReorderColumns?(targetColumnId: Id , columnIds: Id [], dropPosition: DropPosition ) => boolean;Allow or not to change specific columns order
canReorderRows?(targetRowId: Id , rowIds: Id [], dropPosition: DropPosition ) => boolean;Allow or not to change specific rows order

Prev:

Interfaces

Next:

Row