Configuration
These are some of the available options to customize SpreadSheet Grid
sheets
Initial sheets that will be displayed in the grid
And initialize the grid by passing the sheets
prop
Cells
Typescript definition
activeSheet
Initial active sheet id
onChange
Callback when sheets is changed
onChangeSelectedSheet
Callback fired when selected sheet changes
onChangeCell
Callback fired when a cell or group of cells change
onChangeCells
Callback fired when a single cell or a group of cells are changed. Fired during onDelete, onFill etc
CellRenderer
React component to customize cell rendering
HeaderCellRenderer
Customize header cell component
hiddenRows
Array of rowIndexes to be hidden
hiddenColumns
Array of columnIndexes to be hidden
showFormulabar
Boolean to show hide formula bar
showToolbar
Boolean to show hide bottom toolbar
showGridLines
Boolean to show hide grid lines
minHeight
Min height of the Sheet
fontFamily
Font family of text that is rendered on the grid. Defaults to system font
formattter
Formatter function that will be run for each cell.
selectionPolicy?: 'single' | 'range' | 'multiple'
Boolean to enable to disable multiple cell and range selection,
onActiveCellChange
Callback fired when activeCell changes
onActiveCellValueChange
Callback fired when value of active cell changes
onSelectionChange?: (sheetId: string, activeCell: CellInterface | null, selections: SelectionArea[]) => void;
Callback fired when selection changes
selectionMode
One of row|cell|column
. Highlights the selected cell area
fontList: string[]
List of all fonts that will appear in the font selector toolbar
fontLoaderConfig
WebFont loader Configuration. Learn more about loading custom fonts using WebfontLoader
onValidate (value: React.ReactText, id: SheetID, cell: CellInterface, cellConfig: CellConfig | undefined ) => Promise<ValidationResponse>)
Custom Sync/Async validation of user input
stateReducer(state: StateInterface, action: ActionTypes) => StateInterface;
Hook into internal state dispatch calls.
snap?: boolean;
Enable scroll snap
onScaleChange?: (scale: number) => void;
Callback when user scales up/down the grid
StatusBar?: React.ReactType<StatusBarProps>;
Custom StatusBar component
ContextMenu?: React.ReactType<ContextMenuComponentProps>;
Custom Context Menu component
Tooltip?: React.ReactType<TooltipProps>;
Custom tooltip component
showTabStrip?: boolean;
Show or hide tab strip
isTabEditable?: boolean;
Enable or disable users to edit tabs
allowNewSheet?: boolean;
Enable or disable users from adding new sheets
CellEditor?: React.ReactType<CustomEditorProps>;
Custom Cell Editor
enableDarkMode?: true;
Enable or disable dark mode support
enableGlobalKeyHandlers?: boolean
Enable global key handlers for undo, redo events
columnHeaderHeight
Default column header height
rowHeaderWidth
Default row header width
disableFormula
Disable formula mode.