SVG Table Type Reference

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

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.