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

    Interface SheetHeaderRendererProps

    interface SheetHeaderRendererProps {
        axis: RangeAxis;
        bounds: Bounds;
        cell: CellCoords;
        "data-rc"?: string;
        headerText?: (index: number) => string;
        horizontalPadding?: number;
        index: number;
        isFiltered?: (index: number) => boolean;
        isSelected?: (index: number) => boolean;
        isSelectedAll?: (index: number) => boolean;
        onColumnButtonMouseDown?: (
            event: MouseEvent<HTMLDivElement, MouseEvent>,
            column: IColumn,
        ) => void;
        propsColumnButton?: ColumnButtonProps;
        range?: RangeCoords;
        renderColumnButton?: (props: ColumnButtonProps) => ReactElement;
        value: any;
        verticalPadding?: number;
        zoom?: number;
        zoomScale?: number;
    }

    Hierarchy

    • CellRendererProps
      • SheetHeaderRendererProps
    Index
    axis: RangeAxis
    bounds: Bounds

    The range bounds relative to the current viewport and zoom.

    cell: CellCoords

    The cell coords that is being rendered.

    "data-rc"?: string

    Absolute cell-coordinate stamp ("rowIndex:colIndex"), provided by the layer.

    A renderer that spreads its rest props onto its root element carries this automatically; a custom renderer must place it on its root itself. It is the hook the layer's live suppression rule targets (see CellLayerProps.suppressCell) — per-coordinate CSS over immutable cached tiles, so transient state (an open editor) never invalidates the tile cache. Coordinates are SHEET-absolute (never tile- or pane-relative): a cell rendered in more than one pane (a merge spanning a freeze line) matches the one selector in every instance.

    headerText?: (index: number) => string
    horizontalPadding?: number
    index: number
    isFiltered?: (index: number) => boolean

    Whether a filter holds a condition over this header (ISheetHeader.getFilteredRanges): a row header draws it as filtered, as Excel's blue row numbers.

    isSelected?: (index: number) => boolean
    isSelectedAll?: (index: number) => boolean
    onColumnButtonMouseDown?: (
        event: MouseEvent<HTMLDivElement, MouseEvent>,
        column: IColumn,
    ) => void

    Callback for when a filter has been clicked.

    Type Declaration

      • (event: MouseEvent<HTMLDivElement, MouseEvent>, column: IColumn): void
      • Parameters

        • event: MouseEvent<HTMLDivElement, MouseEvent>

          The mouse event

        • column: IColumn

        Returns void

    propsColumnButton?: ColumnButtonProps

    Custom properties for the filter button

    range?: RangeCoords

    The RangeCoords that is being rendered.

    A range representing the coords
    

    For most cells this is the same as the coords. This will only be different for spanning cells.

    renderColumnButton?: (props: ColumnButtonProps) => ReactElement

    Callback for creating a custom column button.

    Type Declaration

    value: any

    A value to render.

    verticalPadding?: number
    zoom?: number

    The zoom CellRendererProps.bounds were measured at.

    1
    

    A renderer is handed the zoom, never the pane it came from: everything it needs to draw one cell is data (the value, the bounds, the scale), so it stays a pure function of its props and can be rendered anywhere a caller can supply bounds — a preview, a tooltip, a cell drawn outside its own column. A renderer that genuinely needs the live view (hover, scroll) reads it from context with useGridPane.

    The bounds already have the zoom applied; this is for what CSS pixels do not carry — an unscaled inset, a glyph size, a stroke width the renderer picks itself.

    zoomScale?: number

    This is not the default grid zoom this is just for rendering.

    100