Currently the Grid depends on there being a root level "portal" div in your HTML. Insert this snippet as the last child of your <body> tag:
Copy < div id = "portal" style = "position: fixed; left: 0; top: 0; z-index: 9999;" /> Once you've got that done, the easiest way to use the Data Grid is to give it a fixed size:
Copy < DataEditor width = { 500 } height = { 300 } { ... props} /> The Grid will never change any of your underlying data. You have to do so yourself when one of the callbacks is invoked. For example, when the user edits the value in a cell, the Grid will invoke the onCellEdited callback. If you don't implement that callback, or if it doesn't change the undelying data to the new value, the Grid will keep displaying the old value.
Copy interface DataEditorProps {
allowedFillDirections ?: "horizontal" | "vertical" | "orthogonal" | "any" ,
className ?: string ;
coercePasteValue ?: ((val , cell) => undefined | GridCell );
columnSelect ?: "none" | "single" | "multi" ;
columnSelectionBlending ?: SelectionBlending ;
columns : readonly GridColumn [];
copyHeaders ?: boolean ;
customRenderers ?: readonly CustomRenderer < any >[];
drawCell ?: DrawCellCallback ;
drawFocusRing ?: boolean ;
drawHeader ?: DrawHeaderCallback ;
experimental ?: {
disableAccessibilityTree ?: boolean ;
disableMinimumCellWidth ?: boolean ;
enableFirefoxRescaling ?: boolean ;
hyperWrapping ?: boolean ;
isSubGrid ?: boolean ;
kineticScrollPerfHack ?: boolean ;
paddingBottom ?: number ;
paddingRight ?: number ;
renderStrategy ?: "single-buffer" | "double-buffer" | "direct" ;
scrollbarWidthOverride ?: number ;
strict ?: boolean ;
};
fillHandle ?: boolean ;
fixedShadowX ?: boolean ;
fixedShadowY ?: boolean ;
freezeColumns ?: number ;
freezeTrailingRows ?: number ;
getCellContent : ((cell) => GridCell );
getCellsForSelection ?: true | ((selection , abortSignal) => GetCellsThunk | CellArray );
getGroupDetails ?: GroupDetailsCallback ;
getRowThemeOverride ?: GetRowThemeCallback ;
gridSelection ?: GridSelection ;
groupHeaderHeight ?: number ;
headerHeight ?: number ;
headerIcons ?: SpriteMap ;
height ?: string | number ;
highlightRegions ?: readonly Highlight [];
imageEditorOverride ?: ImageEditorType ;
imageWindowLoader ?: ImageWindowLoader ;
initialSize ?: readonly [ number , number ];
isDraggable ?: boolean | "header" | "cell" ;
isOutsideClick ?: ((e) => boolean );
keybindings ?: Partial < Keybinds >;
markdownDivCreateNode ?: ((content) => DocumentFragment );
maxColumnAutoWidth ?: number ;
maxColumnWidth ?: number ;
minColumnWidth ?: number ;
onCellActivated ?: ((cell) => void );
onCellClicked ?: ((cell , event) => void );
onCellContextMenu ?: ((cell , event) => void );
onCellEdited ?: ((cell , newValue) => void );
onCellsEdited ?: ((newValues) => boolean | void );
onColumnMoved ?: ((startIndex , endIndex) => void );
onColumnResize ?: ((column , newSize , colIndex , newSizeWithGrow) => void );
onColumnResizeEnd ?: ((column , newSize , colIndex , newSizeWithGrow) => void );
onColumnResizeStart ?: ((column , newSize , colIndex , newSizeWithGrow) => void );
onDelete ?: ((selection) => boolean | GridSelection );
onDragLeave ?: (() => void );
onDragOverCell ?: ((cell , dataTransfer) => void );
onDragStart ?: ((args) => void );
onDrop ?: ((cell , dataTransfer) => void );
onFillPattern ?: ((event) => void );
onFinishedEditing ?: ((newValue , movement) => void );
onGridSelectionChange ?: ((newSelection) => void );
onGroupHeaderClicked ?: ((colIndex , event) => void );
onGroupHeaderContextMenu ?: ((colIndex , event) => void );
onGroupHeaderRenamed ?: ((groupName , newVal) => void );
onHeaderClicked ?: ((colIndex , event) => void );
onHeaderContextMenu ?: ((colIndex , event) => void );
onHeaderMenuClick ?: ((col , screenPosition) => void );
onItemHovered ?: ((args) => void );
onKeyDown ?: ((event) => void );
onKeyUp ?: ((event) => void );
onMouseMove ?: ((args) => void );
onPaste ?: boolean | ((target , values) => boolean );
onRowAppended ?: (() => void | Promise < undefined | number | "bottom" | "top" >);
onRowMoved ?: ((startIndex , endIndex) => void );
onSearchClose ?: (() => void );
onSearchResultsChanged ?: ((results , navIndex) => void );
onSearchValueChange ?: ((newVal) => void );
onSelectionCleared ?: (() => void );
onVisibleRegionChanged ?: ((range , tx , ty , extras) => void );
overscrollX ?: number ;
overscrollY ?: number ;
preventDiagonalScrolling ?: boolean ;
provideEditor ?: ProvideEditorCallback < GridCell >;
rangeSelect ?: "rect" | "none" | "cell" | "multi-cell" | "multi-rect" ;
rangeSelectionBlending ?: SelectionBlending ;
rightElement ?: ReactNode ;
rightElementProps ?: {
fill ?: boolean ;
sticky ?: boolean ;
};
rowHeight ?: number | ((index) => number );
rowMarkerStartIndex ?: number ;
rowMarkerTheme ?: Partial < Theme >;
rowMarkerWidth ?: number ;
rowMarkers ?: "number" | "none" | "checkbox" | "both" | "checkbox-visible" | "clickable-number" ;
rowSelect ?: "none" | "single" | "multi" ;
rowSelectionBlending ?: SelectionBlending ;
rowSelectionMode ?: "auto" | "multi" ;
rows : number ;
scaleToRem ?: boolean ;
scrollOffsetX ?: number ;
scrollOffsetY ?: number ;
searchResults ?: readonly Item [];
searchValue ?: string ;
showSearch ?: boolean ;
smoothScrollX ?: boolean ;
smoothScrollY ?: boolean ;
spanRangeBehavior ?: "default" | "allowPartial" ;
theme ?: Partial < Theme >;
trailingRowOptions ?: {
addIcon ?: string ;
hint ?: string ;
sticky ?: boolean ;
targetColumn ?: number | GridColumn ;
tint ?: boolean ;
};
validateCell ?: ((cell , newValue , prevValue) => boolean | ValidatedGridCell );
verticalBorder ?: boolean | ((col) => boolean );
width ?: string | number ;
} All data grids must set these props. These props are the bare minimum required to set up a functional data grid. Not all features will function with only these props but basic functionality will be present.
Most data grids will want to set the majority of these props one way or another.
