This page provides a comprehensive reference for all the types used in the SVG Table library. Click on a type name to jump to its description.

Table of Contents

• Widths
• ColorsOnWidth
• PatternArrays
• PatternShape
• PatternShapes
• BorderStyles
• TextHAlign
• TextVAlign
• TextStyle
• CellStyle
• ContentProps
• ContentAsFunc
• TableInCellProps
• CellProps
• CellPropsAsObj
• CalculatedCellProps
• RowStyle
• RowProps
• RowPropsAsObj
• CalculatedRowProps
• TableStyle
• TableProps
• WidthPos

Type Definitions

• Widths
  type Widths = | [number, number] /** top/bottom, left/right */ | [number, number, number, number] /** top, right, bottom, left */ | number; /** top/bottom/left/right */

  Represents widths for various elements, allowing for uniform or individual side specification.

• ColorsOnWidth
  type ColorsOnWidth = | [string, string] // [top/bottom, left/right] | [string, string, string, string] // [top, right, bottom, left] | string; // single value

  Defines colors for borders, allowing for single, dual, or quad color specifications.

• PatternArrays
  type PatternArrays = | [number[], number[]] // [top/bottom, left/right] | [number[], number[], number[], number[]] // [top, right, bottom, left] | number[] // single pattern | undefined; // no pattern

  Specifies dash patterns for borders, supporting various configurations for different sides.

• PatternShape
  type PatternShape = SVGAttributes<SVGPathElement>['strokeLinecap'];

  Specifies the shape of the stroke caps for dashed borders.

• PatternShapes
  type PatternShapes = | [PatternShape, PatternShape] // [top/bottom, left/right] | [PatternShape, PatternShape, PatternShape, PatternShape] // [top, right, bottom, left] | PatternShape; // single shape

  Defines stroke cap shapes for borders, with configurations for different sides.

• BorderStyles
  type BorderStyles = { borderWidths: Widths; borderColors: ColorsOnWidth; borderPatterns: PatternArrays; borderShapes: PatternShapes; };

  Combines all border style properties into a single type.

• TextHAlign
  type TextHAlign = 'left' | 'center' | 'right';

  Horizontal alignment options for text.

• TextVAlign
  type TextVAlign = 'top' | 'center' | 'bottom';

  Vertical alignment options for text.

• TextStyle
  type TextStyle = SVGAttributes<SVGTextElement>;

  Style properties for SVG text elements.

• CellStyle
  type CellStyle = { bgColor?: string; paddings: Widths; textColor: string; allowOverflow: boolean; textStyle?: TextStyle; beforeTextStyle?: TextStyle; afterTextStyle?: TextStyle; cx?: number; cy?: number; svgStyle?: HTMLAttributes<SVGSVGElement>['style']; } & Partial<BorderStyles>;

  Style properties for table cells, including background color, padding, and text styling.

• ContentProps
  type ContentProps = { x: number; y: number; width: number; height: number; textColor: string; textStyle: TextStyle; };
• ContentAsFunc
  type ContentAsFunc = (props: ContentProps) => ReactNode;
• TableInCellProps
  type TableInCellProps = { table: Omit<TableProps, 'width'> & { width?: number }; };
• CellProps
  type CellProps = | { style?: Partial<CellStyle>; content: ReactNode | ContentAsFunc | TableInCellProps; before?: ReactNode | ContentAsFunc; after?: ReactNode | ContentAsFunc; colSpan?: number; rowSpan?: number; } | string;

  Properties for defining a cell within a table, including content and optional styling.

• CellPropsAsObj
  type CellPropsAsObj = Exclude<CellProps, string>;
• CalculatedCellProps
  type CalculatedCellProps = | (CellPropsAsObj & { _ignored: false; _heightAdjust: boolean; x: number; y: number; width: number; height: number; }) | { _ignored: true; };

  Extended cell properties including calculated dimensions and positioning.

• RowStyle
  type RowStyle = { height: number; bgColor?: string; };

  Style properties for table rows, including height and optional background color.

• RowProps
  type RowProps = | { style?: Partial<RowStyle>; cells: CellProps[]; } | CellProps[];

  Properties for defining a row within a table, including cells and optional styling.

• RowPropsAsObj
  type RowPropsAsObj = Exclude<RowProps, CellProps[]>;
• CalculatedRowProps
  type CalculatedRowProps = Omit<RowPropsAsObj, 'cells'> & { x: number; y: number; width: number; height: number; cells: CalculatedCellProps[]; };

  Extended row properties including calculated dimensions and positioning.

• TableStyle
  type TableStyle = { margins: Widths; bgColor?: string; colGaps: number; rowGaps: number; svgStyle: HTMLAttributes<SVGSVGElement>['style']; } & Partial<BorderStyles>;

  Style properties for the table, including margins, gaps, and optional background color.

• TableProps
  type TableProps = { className?: string; defs?: ReactNode; width: number; height?: number; columnWidths?: number[]; rowHeights?: number[]; defaultCellStyle?: Partial<CellStyle>; defaultRowStyle?: Partial<RowStyle>; rows: RowProps[]; style?: Partial<TableStyle>; };

  Properties for defining a table, including dimensions, rows, and optional styling.

• WidthPos
  type WidthPos = 'left' | 'right' | 'top' | 'bottom';

  Represents the position of a width value, used for specifying which side of an element a particular width applies to.