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
• CalculatedCellProps
• RowStyle
• RowProps
• CalculatedRowProps
• TableStyle
• TableProps
• WidthPos

Type Definitionscode

• Widths

  type Widths = [number, number] | [number, number, number, number] | number;

  Represents widths for various elements, allowing for uniform or individual side specification. Can be a single number for all sides, a pair of numbers for top/bottom and left/right, or four numbers for top, right, bottom, and left respectively.

• ColorsOnWidth

  type ColorsOnWidth = [string, string] | [string, string, string, string] | string;

  Defines colors for borders, allowing for single, dual, or quad color specifications. Can be a single string for all sides, a pair of strings for top/bottom and left/right, or four strings for top, right, bottom, and left respectively.

• PatternArrays

  type PatternArrays = [number[], number[]] | [number[], number[], number[], number[]] | number[] | undefined;

  Specifies dash patterns for borders, supporting various configurations for different sides. Can be a single array for all sides, a pair of arrays for top/bottom and left/right, four arrays for each side, or undefined for no pattern.

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

  Specifies the shape of the stroke caps for dashed borders. Uses the same values as the SVG strokeLinecap attribute.

• PatternShapes

  type PatternShapes = [PatternShape, PatternShape] | [PatternShape, PatternShape, PatternShape, PatternShape] | PatternShape;

  Defines stroke cap shapes for borders, with configurations for different sides. Can be a single PatternShape for all sides, a pair for top/bottom and left/right, or four for each side individually.

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

  Combines all border style properties into a single type, including widths, colors, patterns, and shapes for borders.

• TextHAlign

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

  Horizontal alignment options for text within a cell.

• TextVAlign

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

  Vertical alignment options for text within a cell.

• TextStyle

  type TextStyle = SVGAttributes;

  Style properties for SVG text elements, allowing for full customization of text appearance.

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

  Style properties for table cells, including background color, padding, text styling, and optional border styles. Allows for fine-grained control over cell appearance.

• ContentProps
  type ContentProps = { x: number; y: number; width: number; height: number; textColor: string; textStyle: TextStyle; };

  Properties passed to content rendering functions, providing position, dimensions, and text styling information.

• ContentAsFunc

  type ContentAsFunc = (props: ContentProps) => ReactNode;

  A function type that takes ContentProps and returns a ReactNode, allowing for dynamic content generation within cells.

• TableInCellProps

  type TableInCellProps = {
    table: Omit & { width?: number };
  };

  Properties for defining a nested table within a cell, omitting the width property which is automatically determined based on the cell's width.

• CellProps
  type CellProps = { style?: Partial<CellStyle>; content: ReactNode | ContentAsFunc | TableInCellProps; before?: ReactNode | ContentAsFunc; after?: ReactNode | ContentAsFunc; colSpan?: number; rowSpan?: number; };

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

• CalculatedCellProps

  type CalculatedCellProps =
    | (CellProps & {
        _ignored: false;
        x: number;
        y: number;
        width: number;
        height: number;
      })
    | {
        _ignored: true;
      };

  Extended cell properties including calculated dimensions and positioning, or an indicator that the cell should be ignored.

• 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[]; };

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

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

  Extended row properties including calculated dimensions, positioning, and calculated cell properties.

• 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, optional background color, and SVG styling. Also includes optional border styles.

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

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

• 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.