SheetXL - v0.8.0-beta.9+sites.210.e2d420901
    Preparing search index...

    Interface SheetElementProps

    Props for the SheetElement component.

    interface SheetElementProps {
        colorScheme?: ThemeMode;
        editable?: IEditable<() => ICell, string, EditCommitArgs>;
        gridColorScheme?: ThemeMode;
        layers?: LayerNode;
        onFillMenu?: (
            location: SheetLocation,
            menu: CommandContext.FillMenu,
        ) => void;
        onFirstRender?: () => void;
        onSheetContextMenu?: (location: SheetLocation) => void;
        onViewportChange?: (view: ViewportMetrics) => void;
        propsCellRender?: Partial<SheetCellRendererProps> & ColumnButtonConfigProps;
        propsColumnHeader?: Partial<SheetHeaderProps>;
        propsGrid?: GridSurfaceProps;
        propsHyperlink?: Omit<HyperlinkLayerProps, "sheet" | "renderCard">;
        propsOutline?: OutlineProps;
        propsRowHeader?: Partial<SheetHeaderProps>;
        propsScrollPane?: ScrollPaneProps;
        ref?: Ref<ISheetElement>;
        renderCommentCard?: (props: CommentCardRenderProps) => ReactNode;
        renderHyperlinkCard?: (props: HyperlinkCardRenderProps) => ReactNode;
        renderMovable?: (props: MovableElementProps) => ReactElement;
        renderTableToolbar?: (props: TableToolbarRenderProps) => ReactNode;
        sheet: ISheet;
        showCellErrors?: boolean;
        showCircularReferences?: boolean;
        showColumnHeaders?: boolean;
        showRowHeaders?: boolean;
        showScrollbars?: boolean;
        viewport?: Viewport;
        viewportComponent?: ReactNode;
    }

    Hierarchy

    • HTMLAttributes<HTMLDivElement>
    • Attributes
      • SheetElementProps
    Index
    colorScheme? editable? gridColorScheme? layers? onFillMenu? onFirstRender? onSheetContextMenu? onViewportChange? propsCellRender? propsColumnHeader? propsGrid? propsHyperlink? propsOutline? propsRowHeader? propsScrollPane? ref? renderCommentCard? renderHyperlinkCard? renderMovable? renderTableToolbar? sheet showCellErrors? showCircularReferences? showColumnHeaders? showRowHeaders? showScrollbars? viewport? viewportComponent?
    colorScheme?: ThemeMode

    The app (chrome / header) color scheme — selects the header/app surface mode.

    editable?: IEditable<() => ICell, string, EditCommitArgs>

    The app-created editor for the always-mounted cell editor. When provided, the grid edits through this shared IEditable; pass the SAME instance to the formula bar for free two-way sync. A stable reference. If omitted, a standalone SheetElement makes its own.

    gridColorScheme?: ThemeMode

    The grid-body color scheme (stays light in a dark app when Enable Dark Grid is off) — drives the grid darkMode rendering intent and the grid surface mode.

    layers?: LayerNode

    Render element(s) directly onto the GridSurface, bottom → top — the same LayerNode the grid takes for its children (a node or an array of them). Each layer reads its pane from context (useGridPane); for a layer that must be built from the pane, call it in a small wrapper.

    onFillMenu?: (location: SheetLocation, menu: CommandContext.FillMenu) => void

    Fired when a right-button drag of the fill handle is released — Excel's fill menu. Show a menu at location whose entries run menu (see CommandContext.FillMenu). Omit to leave the right-drag inert.

    onFirstRender?: () => void

    Called once when the sheet has been loaded but before it is rendered.

    onSheetContextMenu?: (location: SheetLocation) => void

    Fire when a contentMenu is requested

    onViewportChange?: (view: ViewportMetrics) => void

    Fired when the view port changes. This is in pixel coordinates and slightly different then viewable cells because off screen location bounds could change

    propsCellRender?: Partial<SheetCellRendererProps> & ColumnButtonConfigProps

    Allow for custom rendering of cell props.

    This is used to customize columnButton popup action and any other customizations desired. This does not invalidate the rendering

    propsColumnHeader?: Partial<SheetHeaderProps>

    Properties for the column headers

    propsGrid?: GridSurfaceProps

    Customize the grid.

    Not all props are passed through.

    propsHyperlink?: Omit<HyperlinkLayerProps, "sheet" | "renderCard">

    The hyperlink card's options — e.g. preview to show a picture of the linked page.

    propsOutline?: OutlineProps

    Props for the outline: the gutters that show row and column groups, and their level buttons.

    Omitted renderers fall back to plain, unstyled buttons.

    propsRowHeader?: Partial<SheetHeaderProps>

    Properties for the row headers

    propsScrollPane?: ScrollPaneProps

    Allow for customizations of scrollbar

    ref?: Ref<ISheetElement>

    Ref to the sheet element.

    renderCommentCard?: (props: CommentCardRenderProps) => ReactNode

    Renders the card of a threaded comment beside its cell: on hover, on selection, and as a draft when a command asks for one. Omit to show no card; the indicators are drawn either way.

    Type Declaration

    renderHyperlinkCard?: (props: HyperlinkCardRenderProps) => ReactNode

    Renders the card beside a hovered hyperlink cell: its address, copy, edit and remove. Omit for the plain default card.

    Type Declaration

    renderMovable?: (props: MovableElementProps) => ReactElement

    Render components for movable elements.

    Type Declaration

    renderTableToolbar?: (props: TableToolbarRenderProps) => ReactNode

    Renders the toolbar that floats at a hovered table's top-right corner: a quick action and a dropdown of the table's commands. Omit for the plain default split button.

    Type Declaration

    sheet: ISheet

    The ISheet to render.

    showCellErrors?: boolean

    Show hover tooltips on cells that carry calc errors / warnings.

    true
    showCircularReferences?: boolean

    Mark the cells that are in a circular reference (a corner glyph on each cycle member).

    The value of such a cell stays 0, as in Excel; the mark is metadata beside it. Cells that merely read a cycle are not marked — hover them for the tooltip.

    true
    showColumnHeaders?: boolean

    Show the column headers

    showRowHeaders?: boolean

    Show the row headers

    showScrollbars?: boolean

    Show the scrollbars

    viewport?: Viewport

    Share a scroll Viewport. Pass one to own/drive the sheet's scroll externally — e.g. WorkbookElement creates it and also hands it to its ScrollPane so they share one store (no Viewport-data round-trip). The sheet drives the main grid from it and hands it to its headers (each composes its own per-axis follower). When omitted, the sheet creates its own.

    viewportComponent?: ReactNode

    Fixed component that is layered within the viewport.

    Useful for dialogs and items that you want to place relative to the grid.

    Settings
    Member Visibility

    On This Page
    Properties