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

jsPDF-AutoTable

jsPDF-AutoTable is a powerful plugin for jsPDF that enables automatic generation of PDF tables from HTML table elements or JavaScript data. It provides flexible content sourcing, extensive styling capabilities with built-in themes, and advanced table features like column spanning, pagination control, and a comprehensive hook system for custom rendering.

Package Information

  • Package Name: jspdf-autotable
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install jspdf jspdf-autotable

Core Imports

ES6 modules:

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

For direct function usage:

import { autoTable } from "jspdf-autotable";

CommonJS:

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

Browser (with plugin applied automatically):

<script src="jspdf.min.js"></script>
<script src="jspdf.plugin.autotable.min.js"></script>

Basic Usage

Direct Function Usage

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

const doc = new jsPDF();

// From JavaScript data
autoTable(doc, {
  head: [['Name', 'Email', 'Country']],
  body: [
    ['David', 'david@example.com', 'Sweden'],
    ['Castille', 'castille@example.com', 'Spain'],
  ],
});

// From HTML table
autoTable(doc, { html: '#my-table' });

doc.save('table.pdf');

Plugin Integration Usage

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

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

doc.autoTable({
  head: [['Name', 'Email', 'Country']],
  body: [
    ['David', 'david@example.com', 'Sweden'],
    ['Castille', 'castille@example.com', 'Spain'],
  ],
});

doc.save('table.pdf');

Architecture

jsPDF-AutoTable is built around several key components:

  • Core Function: autoTable() function that creates and renders tables
  • Plugin System: Integration with jsPDF prototype for method chaining
  • Data Models: Table, Row, Cell, and Column classes for structured data representation
  • Configuration System: Comprehensive options for styling, layout, and behavior
  • Hook System: Event-driven customization points for rendering pipeline
  • Input Parsers: Support for HTML tables, JavaScript objects, and arrays
  • Rendering Engine: PDF drawing logic with automatic pagination and layout

Capabilities

Core Table Generation

Primary table creation functionality supporting multiple data input formats and comprehensive configuration options.

function autoTable(doc: jsPDFDocument, options: UserOptions): void;

Core Functionality

Advanced Table Operations

Experimental table creation and drawing functions for advanced use cases requiring programmatic table manipulation.

function __createTable(doc: jsPDFDocument, options: UserOptions): Table;
function __drawTable(doc: jsPDFDocument, table: Table): void;

Core Functionality

Plugin Integration

jsPDF plugin integration system that adds autoTable methods directly to jsPDF document instances.

function applyPlugin(jsPDF: jsPDFConstructor): void;

type autoTableInstanceType = (options: UserOptions) => void;

Plugin Integration

Configuration and Styling

Comprehensive configuration system with built-in themes, custom styling options, and layout controls.

interface UserOptions {
  // Content options
  head?: RowInput[];
  body?: RowInput[];
  foot?: RowInput[];
  html?: string | HTMLTableElement;
  columns?: ColumnInput[];
  
  // Layout options
  startY?: number | false;
  margin?: MarginPaddingInput;
  tableWidth?: TableWidthType;
  pageBreak?: PageBreakType;
  
  // Styling options
  theme?: ThemeType;
  styles?: Partial<Styles>;
  headStyles?: Partial<Styles>;
  bodyStyles?: Partial<Styles>;
  
  // Hook functions
  didParseCell?: CellHook;
  willDrawCell?: CellHook;
  didDrawCell?: CellHook;
  willDrawPage?: PageHook;
  didDrawPage?: PageHook;
}

Configuration and Styling

Data Models

Core data model classes representing table structure and cell content with full type safety.

class Table {
  readonly settings: Settings;
  readonly styles: StylesProps;
  readonly hooks: HookProps;
  readonly columns: Column[];
  readonly head: Row[];
  readonly body: Row[];
  readonly foot: Row[];
  pageNumber: number;
  finalY?: number;
}

class Row {
  readonly index: number;
  readonly section: Section;
  readonly cells: { [key: string]: Cell };
  height: number;
}

class Cell {
  styles: Styles;
  text: string[];
  section: Section;
  colSpan: number;
  rowSpan: number;
  width: number;
  height: number;
  x: number;
  y: number;
}

class Column {
  dataKey: string | number;
  index: number;
  width: number;
}

Data Models

Hook System

Event-driven customization system for intercepting and modifying table rendering at various stages.

class HookData {
  table: Table;
  pageNumber: number;
  settings: Settings;
  doc: jsPDFDocument;
  cursor: Pos | null;
}

class CellHookData extends HookData {
  cell: Cell;
  row: Row;
  column: Column;
  section: "head" | "body" | "foot";
}

type PageHook = (data: HookData) => void | boolean;
type CellHook = (data: CellHookData) => void | boolean;

Hook System

Types

Core Types

type jsPDFDocument = any;
type jsPDFConstructor = any;

type Pos = { x: number; y: number };
type Section = "head" | "body" | "foot";

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

Input Types

type RowInput = { [key: string]: CellInput } | HtmlRowInput | CellInput[];
type CellInput = null | string | string[] | number | boolean | CellDef;
type ColumnInput = string | number | {
  header?: CellInput;
  footer?: CellInput; 
  dataKey?: string | number;
};

interface CellDef {
  rowSpan?: number;
  colSpan?: number;
  styles?: Partial<Styles>;
  content?: string | string[] | number;
}
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/jspdf-autotable@5.0.x
Publish Source
CLI
Badge
tessl/npm-jspdf-autotable badge