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

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Plugin Integration

Name: tessl/npm-jspdf-autotable
Author: tessl

jsPDF plugin integration system that adds autoTable methods directly to jsPDF document instances, enabling method chaining and simplified usage patterns.

Capabilities

applyPlugin Function

Adds autoTable methods to the jsPDF constructor prototype, enabling usage through jsPDF document instances.

/**
 * Applies the autoTable plugin to jsPDF constructor
 * @param jsPDF - jsPDF constructor function
 */
function applyPlugin(jsPDF: jsPDFConstructor): void;

Usage Examples:

import { jsPDF } from "jspdf";
import { applyPlugin } from "jspdf-autotable";

// Apply plugin to jsPDF
applyPlugin(jsPDF);

// Now all jsPDF instances have autoTable methods
const doc = new jsPDF();

doc.autoTable({
  head: [['Name', 'Email']],
  body: [
    ['John Doe', 'john@example.com'],
    ['Jane Smith', 'jane@example.com'],
  ],
});

// Method chaining is supported
doc.autoTable({ /* first table */ })
   .autoTable({ /* second table */ });

doc.save('output.pdf');

Document Instance Methods

When the plugin is applied, the following methods are added to jsPDF document instances:

doc.autoTable

Main table generation method on document instances.

/**
 * Creates and draws a table on the document instance
 * @param options - Table configuration options
 * @returns The jsPDF document instance for method chaining
 */
doc.autoTable(options: UserOptions): jsPDFDocument;

Usage Example:

import { jsPDF } from "jspdf";
import { applyPlugin } from "jspdf-autotable";

applyPlugin(jsPDF);
const doc = new jsPDF();

// Multiple tables with method chaining
doc.autoTable({
    head: [['Product', 'Price']],
    body: [['Laptop', '$999'], ['Phone', '$599']],
    startY: 20,
  })
  .autoTable({
    head: [['Service', 'Cost']],
    body: [['Support', '$50'], ['Installation', '$100']],
    startY: doc.lastAutoTable.finalY + 10,
  });

doc.lastAutoTable

Reference to the last created table, useful for positioning subsequent tables.

/**
 * Reference to the last created table on this document
 * Contains table properties including finalY position
 */
doc.lastAutoTable: Table | false;

Usage Example:

doc.autoTable({
  head: [['First Table']],
  body: [['Data']],
});

// Position next table after the previous one
doc.autoTable({
  head: [['Second Table']],
  body: [['More Data']],
  startY: doc.lastAutoTable.finalY + 10,
});

doc.autoTableText

Text rendering method with autoTable styling support.

/**
 * Renders text with autoTable styling
 * @param text - Text content to render
 * @param x - X coordinate
 * @param y - Y coordinate
 * @param styles - Text styling options
 */
doc.autoTableText(
  text: string | string[],
  x: number,
  y: number,
  styles: TextStyles
): void;

doc.autoTableSetDefaults

Sets default options for all subsequent autoTable calls on this document.

/**
 * Sets default options for this document instance
 * @param defaults - Default configuration options
 * @returns The jsPDF document instance for method chaining
 */
doc.autoTableSetDefaults(defaults: UserOptions): jsPDFDocument;

Usage Example:

doc.autoTableSetDefaults({
  theme: 'grid',
  styles: { fontSize: 10 },
  headStyles: { fillColor: [41, 128, 185] },
  margin: { top: 20 },
});

// All subsequent tables will use these defaults
doc.autoTable({
  head: [['Name', 'Value']],
  body: [['Item 1', '100'], ['Item 2', '200']],
});

doc.autoTableHtmlToJson

Converts HTML table elements to JSON format for use with autoTable.

/**
 * Converts HTML table to JSON format
 * @param tableElem - HTML table element to convert
 * @param includeHiddenElements - Whether to include hidden elements
 * @returns JSON representation of the table or null if in non-browser environment
 */
doc.autoTableHtmlToJson(
  tableElem: HTMLTableElement,
  includeHiddenElements?: boolean
): { columns: string[]; rows: any[][]; data: any[][] } | null;

Usage Example:

// Get HTML table element
const tableElement = document.getElementById('data-table') as HTMLTableElement;

// Convert to JSON
const tableData = doc.autoTableHtmlToJson(tableElement, false);

if (tableData) {
  doc.autoTable({
    head: [tableData.columns],
    body: tableData.data,
  });
}

Static Methods

Static utility methods available on the jsPDF constructor after plugin application:

jsPDF.autoTableSetDefaults

Sets global default options for all autoTable instances.

/**
 * Sets global default options for all jsPDF instances
 * @param defaults - Default configuration options
 * @param doc - Optional specific document instance
 */
jsPDF.autoTableSetDefaults(defaults: UserOptions, doc?: jsPDFDocument): void;

Usage Example:

import { jsPDF } from "jspdf";
import { applyPlugin } from "jspdf-autotable";

applyPlugin(jsPDF);

// Set global defaults
jsPDF.autoTableSetDefaults({
  theme: 'striped',
  styles: { 
    fontSize: 8,
    textColor: [80, 80, 80],
  },
  headStyles: {
    fillColor: [52, 152, 219],
    textColor: [255, 255, 255],
  },
});

// All new documents will use these defaults
const doc1 = new jsPDF();
const doc2 = new jsPDF();

doc1.autoTable({ /* uses global defaults */ });
doc2.autoTable({ /* also uses global defaults */ });

Integration Patterns

Browser Environment (Automatic)

In browser environments, the plugin is applied automatically when included via script tags:

<script src="jspdf.min.js"></script>
<script src="jspdf.plugin.autotable.min.js"></script>
<script>
  // Plugin is automatically applied
  const doc = new jsPDF();
  doc.autoTable({
    head: [['Column 1', 'Column 2']],
    body: [['Data 1', 'Data 2']],
  });
</script>

ES6 Module Integration

import { jsPDF } from "jspdf";
import { applyPlugin } from "jspdf-autotable";

// Manual plugin application
applyPlugin(jsPDF);

const doc = new jsPDF();
doc.autoTable({ /* options */ });

CommonJS Integration

const { jsPDF } = require("jspdf");
const { applyPlugin } = require("jspdf-autotable");

applyPlugin(jsPDF);

const doc = new jsPDF();
doc.autoTable({ /* options */ });

Mixed Usage Pattern

You can use both direct function calls and plugin methods in the same application:

import { jsPDF } from "jspdf";
import { autoTable, applyPlugin } from "jspdf-autotable";

applyPlugin(jsPDF);
const doc = new jsPDF();

// Direct function usage
autoTable(doc, { /* options */ });

// Plugin method usage
doc.autoTable({ /* options */ });

// Both approaches produce identical results

Type Definitions

type autoTableInstanceType = (options: UserOptions) => void;
type jsPDFConstructor = any;
type jsPDFDocument = any;

interface TextStyles {
  fontSize?: number;
  fontStyle?: FontStyle;
  textColor?: Color;
  halign?: HAlignType;
  valign?: VAlignType;
}