Style: {
    backgroundColor?: string;
    columnBackgroundColor?: ((index) => string);
    cursorBorderColor?: string;
    cursorFillColor?: string;
    gridLineColor?: string;
    headerBackgroundColor?: string;
    headerGridLineColor?: string;
    headerHorizontalGridLineColor?: string;
    headerSelectionBorderColor?: string;
    headerSelectionFillColor?: string;
    headerVerticalGridLineColor?: string;
    horizontalGridLineColor?: string;
    rowBackgroundColor?: ((index) => string);
    scrollShadow?: {
        color1: string;
        color2: string;
        color3: string;
        size: number;
    };
    selectionBorderColor?: string;
    selectionFillColor?: string;
    verticalGridLineColor?: string;
    voidColor?: string;
}

An object which defines the style for a data grid.

Notes

All style colors support the full CSS color syntax.

Type declaration

  • Optional Readonly backgroundColor?: string

    The background color for the body cells.

    This color is layered on top of the voidColor.

  • Optional Readonly columnBackgroundColor?: ((index) => string)

    A function which returns the background color for a column.

    This color is layered on top of the backgroundColor and can be used to implement "zebra striping" of the grid columns.

      • (index): string
      • Parameters

        • index: number

        Returns string

  • Optional Readonly cursorBorderColor?: string

    The border color for the cursor.

  • Optional Readonly cursorFillColor?: string

    The fill color for the cursor.

  • Optional Readonly gridLineColor?: string

    The color for the grid lines of the body cells.

    The grid lines are draw on top of the cell contents.

  • Optional Readonly headerBackgroundColor?: string

    The background color for the header cells.

    This color is layered on top of the voidColor.

  • Optional Readonly headerGridLineColor?: string

    The color for the grid lines of the header cells.

    The grid lines are draw on top of the cell contents.

  • Optional Readonly headerHorizontalGridLineColor?: string

    The color for the horizontal grid lines of the header cells.

    This overrides the headerGridLineColor option.

  • Optional Readonly headerSelectionBorderColor?: string

    The border color for a header selection.

  • Optional Readonly headerSelectionFillColor?: string

    The fill color for a header selection.

  • Optional Readonly headerVerticalGridLineColor?: string

    The color for the vertical grid lines of the header cells.

    This overrides the headerGridLineColor option.

  • Optional Readonly horizontalGridLineColor?: string

    The color for the horizontal grid lines of the body cells.

    This overrides the gridLineColor option.

  • Optional Readonly rowBackgroundColor?: ((index) => string)

    A function which returns the background color for a row.

    This color is layered on top of the backgroundColor and can be used to implement "zebra striping" of the grid rows.

      • (index): string
      • Parameters

        • index: number

        Returns string

  • Optional Readonly scrollShadow?: {
        color1: string;
        color2: string;
        color3: string;
        size: number;
    }

    The drop shadow effect when the grid is scrolled.

    • Readonly color1: string

      The first color stop for the shadow.

    • Readonly color2: string

      The second color stop for the shadow.

    • Readonly color3: string

      The third color stop for the shadow.

    • Readonly size: number

      The size of the shadow, in pixels.

  • Optional Readonly selectionBorderColor?: string

    The border color for a selection.

  • Optional Readonly selectionFillColor?: string

    The fill color for a selection.

  • Optional Readonly verticalGridLineColor?: string

    The color for the vertical grid lines of the body cells.

    This overrides the gridLineColor option.

  • Optional Readonly voidColor?: string

    The void color for the data grid.

    This is the base fill color for the entire data grid.