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

Core Functionality

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

Primary table generation functionality for creating PDF tables from various data sources with comprehensive configuration support.

Capabilities

autoTable Function

Main table generation function that creates and renders a table in the PDF document. Supports multiple input formats including HTML tables and JavaScript data.

/**
 * Creates and draws a table in the PDF document
 * @param doc - jsPDF document instance
 * @param options - Configuration options for table generation
 */
function autoTable(doc: jsPDFDocument, options: UserOptions): void;

Usage Examples:

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

const doc = new jsPDF();

// Basic table from JavaScript data
autoTable(doc, {
  head: [['Name', 'Age', 'City']],
  body: [
    ['John', 25, 'New York'],
    ['Jane', 30, 'London'],
  ],
});

// Table from HTML element
autoTable(doc, {
  html: '#data-table',
  theme: 'striped',
});

// Advanced configuration
autoTable(doc, {
  columns: [
    { header: 'Full Name', dataKey: 'name' },
    { header: 'Age', dataKey: 'age' },
    { header: 'Location', dataKey: 'city' },
  ],
  body: [
    { name: 'John Doe', age: 25, city: 'New York' },
    { name: 'Jane Smith', age: 30, city: 'London' },
  ],
  startY: 20,
  theme: 'grid',
  styles: { fontSize: 12 },
  headStyles: { fillColor: [22, 160, 133] },
});

__createTable Function (Experimental)

Creates a table object without rendering it. Useful for advanced use cases where you need to manipulate the table structure before drawing.

/**
 * Creates a table object without drawing it to the document
 * @param doc - jsPDF document instance
 * @param options - Configuration options for table creation
 * @returns Table object for further manipulation or rendering
 */
function __createTable(doc: jsPDFDocument, options: UserOptions): Table;

Usage Example:

import { jsPDF } from "jspdf";
import { __createTable, __drawTable } from "jspdf-autotable";

const doc = new jsPDF();

// Create table without drawing
const table = __createTable(doc, {
  head: [['Name', 'Score']],
  body: [['Alice', 95], ['Bob', 87]],
});

// Manipulate table properties
table.pageNumber = 2;

// Draw the table
__drawTable(doc, table);

__drawTable Function (Experimental)

Draws an existing table object to the PDF document. Used in conjunction with __createTable for advanced table manipulation.

/**
 * Draws an existing table object to the PDF document
 * @param doc - jsPDF document instance
 * @param table - Table object to draw
 */
function __drawTable(doc: jsPDFDocument, table: Table): void;

Data Input Formats

The core functionality supports multiple data input formats:

JavaScript Array Format

// Array of arrays (simple format)
autoTable(doc, {
  head: [['Header 1', 'Header 2', 'Header 3']],
  body: [
    ['Row 1 Col 1', 'Row 1 Col 2', 'Row 1 Col 3'],
    ['Row 2 Col 1', 'Row 2 Col 2', 'Row 2 Col 3'],
  ],
});

Object Array Format

// Array of objects with column definitions
autoTable(doc, {
  columns: [
    { header: 'Name', dataKey: 'name' },
    { header: 'Email', dataKey: 'email' },
  ],
  body: [
    { name: 'John Doe', email: 'john@example.com' },
    { name: 'Jane Smith', email: 'jane@example.com' },
  ],
});

HTML Table Format

// From existing HTML table element
autoTable(doc, {
  html: '#my-table-id',
  includeHiddenHtml: false,
  useCss: true,
});

// From HTML table element reference
const tableElement = document.getElementById('my-table');
autoTable(doc, {
  html: tableElement,
});

Content Sections

Tables can include header, body, and footer sections:

autoTable(doc, {
  head: [['Column 1', 'Column 2']],
  body: [
    ['Body Row 1', 'Data 1'],
    ['Body Row 2', 'Data 2'],
  ],
  foot: [['Footer 1', 'Footer 2']],
  showHead: 'everyPage',
  showFoot: 'lastPage',
});

Advanced Features

Cell Spanning

autoTable(doc, {
  body: [
    [
      { content: 'Merged Cell', colSpan: 2 },
      // Second cell omitted due to colSpan
    ],
    [
      { content: 'Tall Cell', rowSpan: 2 },
      'Normal Cell',
    ],
    [
      // First cell omitted due to rowSpan
      'Another Cell',
    ],
  ],
});

Pagination Control

autoTable(doc, {
  head: [['Name', 'Details']],
  body: data,
  startY: 30,
  pageBreak: 'auto',
  rowPageBreak: 'avoid',
  showHead: 'everyPage',
});

Horizontal Page Breaks

autoTable(doc, {
  head: [['Col1', 'Col2', 'Col3', 'Col4', 'Col5']],
  body: data,
  horizontalPageBreak: true,
  horizontalPageBreakRepeat: [0, 1], // Repeat first two columns
  horizontalPageBreakBehaviour: 'afterAllRows',
});