Styling

Add borders, colours, stroke styles or custom gradients very easily

CellData support adding cell format in the below format

type CellData = {
  ... // Omitted for brevity
  userEnteredFormat?: CellFormat
  effectiveFormat?: CellFormat;
}

export type CellFormat = {
  backgroundColor?: string;
  borders?: Borders;
  textFormat?: TextFormat;
  numberFormat?: NumberFormat;
  horizontalAlignment?: HorizontalAlign;
  verticalAlignment?: VerticalAlign;
  wrapStrategy?: WrapStrategy;
};

export type WrapStrategy = "none" | "word";

export type NumberFormat = {
  type: NumberFormatType;
  pattern?: string;
};

export type NumberFormatType =
  | "TEXT"
  | "NUMBER"
  | "PERCENT"
  | "CURRENCY"
  | "DATE"
  | "TIME"
  | "DATE_TIME"
  | "SCIENTIFIC";

export type HorizontalAlign = "left" | "right" | "center";
export type VerticalAlign = "top" | "middle" | "bottom";

export type Borders = {
  top?: Border;
  right?: Border;
  bottom?: Border;
  left?: Border;
};

export type Border = {
  style: BorderStyle;
  width: number;
  color?: string;
};

export type BorderStyle =
  | "dotted"
  | "dashed"
  | "solid"
  | "solid_medium"
  | "solid_thick";

export type TextFormat = {
  color?: string;
  fontFamily?: string;
  fontSize?: number;
  bold?: boolean;
  italic?: boolean;
  strikethrough?: boolean;
  underline?: boolean;
};

Please note only effectiveFormat is used to render cell styles