CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-jspdf-autotable

Generate PDF tables with JavaScript (jsPDF plugin)

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

configuration-styling.mddocs/

Configuration and Styling

Comprehensive configuration system with built-in themes, custom styling options, and layout controls for creating professionally styled PDF tables.

Capabilities

UserOptions Interface

Complete configuration interface providing all available options for table generation and styling.

interface UserOptions {
  // Content Options
  /** Header rows data */
  head?: RowInput[];
  /** Body rows data */
  body?: RowInput[];
  /** Footer rows data */
  foot?: RowInput[];
  /** HTML table element or selector to parse */
  html?: string | HTMLTableElement;
  /** Column definitions for data mapping */
  columns?: ColumnInput[];
  /** Unique identifier for the table */
  tableId?: string | number;

  // Layout Options
  /** Starting Y position on the page, or false to start immediately after previous content */
  startY?: number | false;
  /** Table margins */
  margin?: MarginPaddingInput;
  /** Table width behavior: 'auto' (full width), 'wrap' (content width), or specific number */
  tableWidth?: TableWidthType;
  /** Page break behavior for the table */
  pageBreak?: PageBreakType;
  /** Row page break behavior */
  rowPageBreak?: RowPageBreakType;
  /** When to show the header: 'everyPage', 'firstPage', or 'never' */
  showHead?: ShowHeadType;
  /** When to show the footer: 'everyPage', 'lastPage', or 'never' */
  showFoot?: ShowFootType;

  // Table Border Options
  /** Width of table border lines */
  tableLineWidth?: number;
  /** Color of table border lines */
  tableLineColor?: Color;

  // HTML Parsing Options
  /** Include hidden HTML elements when parsing */
  includeHiddenHtml?: boolean;
  /** Use CSS styles from HTML when parsing */
  useCss?: boolean;

  // Horizontal Page Break Options
  /** Enable horizontal page breaks for wide tables */
  horizontalPageBreak?: boolean;
  /** Columns to repeat on each horizontal page */
  horizontalPageBreakRepeat?: string[] | number[] | string | number;
  /** When to perform horizontal page breaks */
  horizontalPageBreakBehaviour?: HorizontalPageBreakBehaviourType;

  // Styling Options
  /** Predefined theme */
  theme?: ThemeType;
  /** Default cell styles */
  styles?: Partial<Styles>;
  /** Header cell styles */
  headStyles?: Partial<Styles>;
  /** Body cell styles */
  bodyStyles?: Partial<Styles>;
  /** Footer cell styles */
  footStyles?: Partial<Styles>;
  /** Alternating row styles */
  alternateRowStyles?: Partial<Styles>;
  /** Column-specific styles */
  columnStyles?: { [key: string]: Partial<Styles> };

  // Hook Functions
  /** Called after parsing cell content */
  didParseCell?: CellHook;
  /** Called before drawing a cell */
  willDrawCell?: CellHook;
  /** Called after drawing a cell */
  didDrawCell?: CellHook;
  /** Called before drawing a page */
  willDrawPage?: PageHook;
  /** Called after drawing a page */
  didDrawPage?: PageHook;
}

Styles Interface

Complete styling options for cells including fonts, colors, alignment, and borders.

interface Styles {
  /** Font family */
  font: FontType;
  /** Font style */
  fontStyle: FontStyle;
  /** Font size in points */
  fontSize: number;
  /** Text color */
  textColor: Color;
  /** Background fill color */
  fillColor: Color;
  /** Horizontal text alignment */
  halign: HAlignType;
  /** Vertical text alignment */
  valign: VAlignType;
  /** Cell padding */
  cellPadding: MarginPaddingInput;
  /** Border line color */
  lineColor: Color;
  /** Border line width */
  lineWidth: number | Partial<LineWidths>;
  /** Cell width behavior */
  cellWidth: CellWidthType;
  /** Minimum cell height */
  minCellHeight: number;
  /** Minimum cell width */
  minCellWidth: number;
  /** Text overflow behavior */
  overflow: OverflowType;
}

Built-in Themes

Pre-configured themes providing professional styling out of the box.

type ThemeType = "striped" | "grid" | "plain" | null;

/**
 * Get theme configuration
 * @param name - Theme name
 * @returns Theme style definitions
 */
function getTheme(name: ThemeName): { [key: string]: Partial<Styles> };

/**
 * Get default base styles
 * @param scaleFactor - PDF scale factor
 * @returns Default style configuration
 */
function defaultStyles(scaleFactor: number): Styles;

Usage Examples:

// Striped theme (default)
autoTable(doc, {
  head: [['Name', 'Score']],
  body: [['Alice', 95], ['Bob', 87]],
  theme: 'striped',
});

// Grid theme with borders
autoTable(doc, {
  head: [['Name', 'Score']],
  body: [['Alice', 95], ['Bob', 87]],
  theme: 'grid',
});

// Plain theme (minimal styling)
autoTable(doc, {
  head: [['Name', 'Score']],
  body: [['Alice', 95], ['Bob', 87]],
  theme: 'plain',
});

Custom Styling

Basic Style Customization

autoTable(doc, {
  head: [['Product', 'Price', 'Stock']],
  body: [
    ['Laptop', '$999', '15'],
    ['Phone', '$599', '23'],
  ],
  styles: {
    fontSize: 12,
    font: 'helvetica',
    textColor: [0, 0, 0],
    fillColor: [255, 255, 255],
    halign: 'center',
    valign: 'middle',
  },
  headStyles: {
    fillColor: [52, 73, 94],
    textColor: [255, 255, 255],
    fontStyle: 'bold',
  },
  alternateRowStyles: {
    fillColor: [245, 245, 245],
  },
});

Column-Specific Styling

autoTable(doc, {
  columns: [
    { header: 'Name', dataKey: 'name' },
    { header: 'Amount', dataKey: 'amount' },
    { header: 'Status', dataKey: 'status' },
  ],
  body: [
    { name: 'Invoice #1', amount: '$1,200', status: 'Paid' },
    { name: 'Invoice #2', amount: '$850', status: 'Pending' },
  ],
  columnStyles: {
    0: { halign: 'left' },
    1: { halign: 'right', fontStyle: 'bold' },
    2: { halign: 'center' },
  },
});

Type Definitions

Font and Alignment Types

type FontStyle = "normal" | "bold" | "italic" | "bolditalic";
type StandardFontType = "helvetica" | "times" | "courier";
type CustomFontType = string;
type FontType = StandardFontType | CustomFontType;

type HAlignType = "left" | "center" | "right" | "justify";
type VAlignType = "top" | "middle" | "bottom";

Layout and Behavior Types

type TableWidthType = "auto" | "wrap" | number;
type PageBreakType = "auto" | "avoid" | "always";
type RowPageBreakType = "auto" | "avoid";
type ShowHeadType = "everyPage" | "firstPage" | "never" | boolean;
type ShowFootType = "everyPage" | "lastPage" | "never" | boolean;
type HorizontalPageBreakBehaviourType = "immediately" | "afterAllRows";

type CellWidthType = "auto" | "wrap" | number;
type OverflowType = "linebreak" | "ellipsize" | "visible" | "hidden" | 
  ((text: string | string[], width: number) => string | string[]);

Border and Spacing Types

interface LineWidths {
  bottom: number;
  top: number;
  left: number;
  right: number;
}

interface MarginPadding {
  top: number;
  right: number;
  bottom: number;
  left: number;
}

type MarginPaddingInput = number | number[] | {
  top?: number;
  right?: number;
  bottom?: number;
  left?: number;
  horizontal?: number;
  vertical?: number;
};

Advanced Layout Options

Pagination Control

autoTable(doc, {
  head: [['Column 1', 'Column 2']],
  body: largeDataSet,
  startY: 40,
  pageBreak: 'auto',
  rowPageBreak: 'avoid',
  showHead: 'everyPage',
  margin: { top: 20, right: 20, bottom: 20, left: 20 },
});

Wide Table Handling

autoTable(doc, {
  head: [['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H']],
  body: wideData,
  horizontalPageBreak: true,
  horizontalPageBreakRepeat: [0, 1], // Keep first two columns
  horizontalPageBreakBehaviour: 'afterAllRows',
});

Responsive Width

autoTable(doc, {
  head: [['Description', 'Value']],
  body: [
    ['Short text', 'Value 1'],
    ['This is a much longer description that will wrap', 'Value 2'],
  ],
  tableWidth: 'wrap', // Adjust to content
  styles: {
    cellWidth: 'auto',
    overflow: 'linebreak',
  },
  columnStyles: {
    0: { cellWidth: 100 }, // Fixed width for first column
    1: { cellWidth: 'auto' }, // Auto width for second column
  },
});

docs

configuration-styling.md

core-functionality.md

data-models.md

hook-system.md

index.md

plugin-integration.md

tile.json