SheetXL - v1.0.2
    Preparing search index...

    Interface WorksheetElementProps

    Props for the WorksheetElement component.

    interface WorksheetElementProps {
        colorScheme?: "auto" | ThemeMode;
        editable?: IEditable<() => ICell, string, EditCommitArgs>;
        gridColorScheme?: "auto" | ThemeMode;
        layers?: LayerNode;
        onFillMenu?: (
            location: SheetLocation,
            menu: CommandContext.FillMenu,
        ) => void;
        onFirstRender?: () => void;
        onSheetChange?: (sheet: IWorksheet | null) => void;
        onSheetContextMenu?: (location: SheetLocation) => void;
        onViewportChange?: (view: ViewportMetrics) => void;
        propsCellRender?: Partial<CellTextRendererProps> & ColumnButtonConfigProps & PivotButtonConfigProps;
        propsColumnHeader?: Partial<SheetHeaderProps>;
        propsGrid?: GridSurfaceProps;
        propsHyperlink?: Omit<HyperlinkLayerProps, "sheet" | "renderCard">;
        propsOutline?: OutlineProps;
        propsRowHeader?: Partial<SheetHeaderProps>;
        propsScrollPane?: ScrollPaneProps;
        propsSheetLoading?: Partial<LoadingPanelProps>;
        ref?: Ref<IWorksheetElement>;
        renderCellErrorTip?: RenderSlotFn<CellErrorTip> | null;
        renderCommentCard?: RenderSlotFn<CommentCardRenderProps> | null;
        renderHyperlinkCard?: RenderSlotFn<HyperlinkCardRenderProps> | null;
        renderMovable?: RenderSlotFn<MovableElementProps>;
        renderPivotToolbar?: RenderSlotFn<PivotToolbarRenderProps> | null;
        renderSheetError?: RenderSlotFn<ErrorPanelProps> | null;
        renderSheetLoading?: RenderSlotFn<LoadingPanelProps> | null;
        renderTableToolbar?: RenderSlotFn<TableToolbarRenderProps> | null;
        renderValidationAlert?: RenderSlotFn<ValidationAlertRenderProps> | null;
        renderValidationPrompt?: RenderSlotFn<ValidationPromptRenderProps> | null;
        sheet: IWorksheet | Promise<IWorksheet>;
        showCellErrors?: boolean;
        showCircularReferences?: boolean;
        showColumnHeaders?: boolean;
        showRowHeaders?: boolean;
        showScrollbars?: boolean;
        tokens?: Partial<
            Record<
                ThemeMode,
                Partial<Record<ExplicitSurface, Partial<TokenTheme>>>,
            >,
        >;
        viewport?: Viewport;
        viewportComponent?: ReactNode;
    }

    Hierarchy

    • HTMLAttributes<HTMLDivElement>
    • Attributes
      • WorksheetElementProps
    Index
    colorScheme? editable? gridColorScheme? layers? onFillMenu? onFirstRender? onSheetChange? onSheetContextMenu? onViewportChange? propsCellRender? propsColumnHeader? propsGrid? propsHyperlink? propsOutline? propsRowHeader? propsScrollPane? propsSheetLoading? ref? renderCellErrorTip? renderCommentCard? renderHyperlinkCard? renderMovable? renderPivotToolbar? renderSheetError? renderSheetLoading? renderTableToolbar? renderValidationAlert? renderValidationPrompt? sheet showCellErrors? showCircularReferences? showColumnHeaders? showRowHeaders? showScrollbars? tokens? viewport? viewportComponent?
    colorScheme?: "auto" | ThemeMode

    The app (chrome / header) color scheme — selects the header/app surface mode. 'auto' follows the page: a dark/light class on <html>/<body>, else the OS.

    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 WorksheetElement makes its own.

    gridColorScheme?: "auto" | 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. 'auto' follows the page as colorScheme does.

    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.

    onSheetChange?: (sheet: IWorksheet | null) => void

    Called with the sheet once WorksheetElementProps.sheet resolves, and again whenever a new input resolves to a different one. Until the first input resolves, or if an input fails, the sheet is null.

    Lets an app pass a Promise here and hold the live sheet in its own state, without awaiting or suspending.

    const [pending] = useState(() => createInvoice());
    const [sheet, setSheet] = useState<IWorksheet | null>(null);
    const [total] = useCellValue<number>(sheet, 'D23');
    return <WorksheetElement sheet={pending} onSheetChange={setSheet} />;
    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<CellTextRendererProps> & ColumnButtonConfigProps & PivotButtonConfigProps

    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

    propsSheetLoading?: Partial<LoadingPanelProps>

    Props passed to the loading panel.

    ref?: Ref<IWorksheetElement>

    Ref to the sheet element.

    renderCellErrorTip?: RenderSlotFn<CellErrorTip> | null

    Renders the tip beside a hovered cell that carries an error, a warning, a reference cycle or a failed validation. Omit for the plain default tip; null for none.

    CellErrorTip

    renderCommentCard?: RenderSlotFn<CommentCardRenderProps> | null

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

    CommentCardRenderProps

    renderHyperlinkCard?: RenderSlotFn<HyperlinkCardRenderProps> | null

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

    HyperlinkCardRenderProps

    renderMovable?: RenderSlotFn<MovableElementProps>

    Render a movable element (a chart, shape or picture).

    MovableElementProps

    renderPivotToolbar?: RenderSlotFn<PivotToolbarRenderProps> | null

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

    PivotToolbarRenderProps

    renderSheetError?: RenderSlotFn<ErrorPanelProps> | null

    Custom error panel, shown when a Promise WorksheetElementProps.sheet fails to resolve. Defaults to a minimal message.

    renderSheetLoading?: RenderSlotFn<LoadingPanelProps> | null

    Custom loading panel, shown while a Promise WorksheetElementProps.sheet resolves or the text engine loads. Defaults to a spinner.

    renderTableToolbar?: RenderSlotFn<TableToolbarRenderProps> | null

    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; null for none.

    TableToolbarRenderProps

    renderValidationAlert?: RenderSlotFn<ValidationAlertRenderProps> | null

    Renders the alert a refused or questioned entry raises in the prompt's place. Spread floatProps on the returned element. Omit for the plain default card; null for none.

    renderValidationPrompt?: RenderSlotFn<ValidationPromptRenderProps> | null

    Renders the input prompt of a data validation under the selected cell. Spread floatProps on the returned element. Omit for the plain default box: the title in bold over the message; null for none.

    sheet: IWorksheet | Promise<IWorksheet>

    The sheet to render, or a Promise for one. The element is empty until the sheet resolves and its text can be measured; a later input keeps the current sheet showing until it resolves.

    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

    tokens?: Partial<
        Record<ThemeMode, Partial<Record<ExplicitSurface, Partial<TokenTheme>>>>,
    >

    Token values for this sheet, per mode and surface: the React form of a stylesheet in @layer sxl-overrides, scoped to this instance. Same shape as the workbook's tokens; inside a workbook, set them there instead.

    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