Generate PDF tables with JavaScript (jsPDF plugin)
—
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Pending
The risk profile of this skill
Comprehensive configuration system with built-in themes, custom styling options, and layout controls for creating professionally styled PDF tables.
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;
}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;
}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',
});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],
},
});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 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";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[]);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;
};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 },
});autoTable(doc, {
head: [['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H']],
body: wideData,
horizontalPageBreak: true,
horizontalPageBreakRepeat: [0, 1], // Keep first two columns
horizontalPageBreakBehaviour: 'afterAllRows',
});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
},
});