SVG Table Type Reference(React)

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

  • GroupStyle
    type GroupStyle = SVGAttributes<SVGGElement>;

    Style properties for SVG g element.

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

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

  • GroupProps
    type GroupProps = { x: number; y: number; width: number; height: number; };

    Properties for SVG group elements, including position and dimensions.

  • BeforeOrAfterAsObj
    type BeforeOrAfterAsObj = { content: ReactNode | ContentAsFunc; textStyle?: TextStyle; cx?: number; cy?: number; };

    Object for before or after content when it needs to specify optional styles and dimensions.

  • BeforeOrAfter
    type BeforeOrAfter = BeforeOrAfterAsObj | ReactNode | ContentAsFunc;

    Represents the content that can be displayed before or after the main content in a cell.

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

    Properties for content within a cell, including position, dimensions, and text styling.

  • 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?: BeforeOrAfter; after?: BeforeOrAfter; colSpan?: number; rowSpan?: number; className?: string; } | 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; _standalone: 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; standalone?: boolean; svgAttrs?: SVGAttributes<SVGSVGElement>; 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.