jsPDF-AutoTable

Common errors

• TypeError: doc.autoTable is not a function

  cause The `jspdf-autotable` plugin was not correctly applied to the jsPDF instance or class, particularly in non-browser environments since v5.0.0.
  fix If using an ESM setup or in Node.js since v5, ensure you explicitly call `applyPlugin(jsPDF)` after importing jsPDF and `applyPlugin`. For example: `import { jsPDF } from 'jspdf'; import { applyPlugin } from 'jspdf-autotable'; applyPlugin(jsPDF); const doc = new jsPDF(); doc.autoTable({...});` Alternatively, use the direct function call: `autoTable(doc, { ... });`

• Cannot find module 'jspdf-autotable/es'

  cause This import path was specific to older versions (pre-v5) for explicitly loading the ESM build. Since v5.0.0, the correct build is chosen automatically based on your project setup.
  fix Remove the `/es` suffix from your import path: `import { autoTable } from 'jspdf-autotable'`.

• Property 'autoTable' does not exist on type 'jsPDF' (TypeScript error)

  cause TypeScript compiler error indicating that the `jsPDF` object does not have the `autoTable` method. This typically means the `jspdf-autotable` plugin's type augmentations haven't been correctly picked up by TypeScript, or the plugin hasn't been enabled in your code.
  fix Ensure `jspdf-autotable` is installed and `applyPlugin(jsPDF)` is called in your application's initialization logic. If the issue persists, verify your `tsconfig.json` correctly includes `jspdf` and `jspdf-autotable` in the `types` array or `typeRoots` (though usually installing the packages is sufficient for type discovery).

• Error: Deprecated option 'styles.columnWidth' used. Use 'columnStyles.0.cellWidth' instead.

  cause You are attempting to use an old option or style property that was deprecated in earlier versions and completely removed in v4.0.0.
  fix Refer to the `jspdf-autotable` documentation for v4.0.0+ options and styles. Update your table configuration to use the current properties, for instance, replacing `styles.columnWidth` with `columnStyles.<column_index_or_dataKey>.cellWidth`.

Warnings

• breaking Since v5.0.0, the `jspdf-autotable` plugin is no longer automatically applied to jsPDF instances in non-browser environments (e.g., Node.js). If you are using `doc.autoTable()` in such an environment, you must explicitly call `applyPlugin(jsPDF)` or `applyPlugin(doc)` to enable this method.
  Fix: Ensure you `import { applyPlugin } from 'jspdf-autotable'` and call `applyPlugin(jsPDF)` after importing jsPDF. Alternatively, use the direct function call: `autoTable(doc, { ... })` instead of the `doc.autoTable({ ... })` method.
• breaking With v4.0.0, several long-time deprecated options and styling properties were completely removed. Additionally, the `autoTable` TypeScript type was renamed to `autoTableInstanceType`. This version also upgraded its peer dependency to jsPDF v3.0, which dropped support for Internet Explorer.
  Fix: Review the v4.0.0 changelog and update any usage of removed options or styles to their current equivalents. For TypeScript users, update type references from `autoTable` to `autoTableInstanceType` if you were typing plugin instance methods. Be aware of the dropped IE support if targeting legacy browsers.
• gotcha Since v5.0.0, `jspdf-autotable` automatically selects the correct ESM build file for your environment. Explicitly importing from `jspdf-autotable/es` is no longer necessary and may lead to import errors.
  Fix: Remove any `/es` suffix from your import paths. For example, change `import { autoTable } from 'jspdf-autotable/es'` to `import { autoTable } from 'jspdf-autotable'`.
• gotcha jsPDF-AutoTable has a peer dependency on `jspdf`, requiring versions `^2 || ^3 || ^4`. Using an incompatible version of `jspdf` (e.g., v1.x or v5.x if released) can lead to runtime errors or unexpected behavior due to API changes.
  Fix: Verify that your installed `jspdf` version falls within the required range. Use `npm list jspdf` to check your current version and update/downgrade `jspdf` with `npm install jspdf@^4` (or the appropriate version).

Install

• npm install jspdf-autotable npm
• yarn add jspdf-autotable yarn
• pnpm add jspdf-autotable pnpm

Imports

• autoTable
  wrong:

  const autoTable = require('jspdf-autotable').autoTable

  correct:

  import { autoTable } from 'jspdf-autotable'

  Since v4, `autoTable` is a named export. For CommonJS environments, relying on jsPDF's `autoTable` method after applying the plugin via `applyPlugin` is often more straightforward than `require`ing the named export directly.
• applyPlugin
  wrong:

  import autoTable from 'jspdf-autotable'

  correct:

  import { applyPlugin } from 'jspdf-autotable'

  Used to explicitly apply the plugin to a jsPDF instance or the jsPDF class itself. This is essential for non-browser (e.g., Node.js) environments since v5.0.0 if you intend to use the `doc.autoTable()` method.
• HookData

  import { type HookData } from 'jspdf-autotable'

  A TypeScript type export available since v5.0.0. Use `type` keyword for type-only imports in modern TypeScript to avoid bundling unnecessary runtime code.
• autoTableInstanceType

  import { type autoTableInstanceType } from 'jspdf-autotable'

  This TypeScript type was previously exported as `autoTable` before v4.0.0. It represents the interface for the plugin's instance methods.

Quickstart

This quickstart demonstrates generating PDF tables using `jspdf-autotable` with both the direct `autoTable` function call and the `doc.autoTable()` method (enabled after applying the plugin). It includes basic data-driven table generation, a more complex example with merged cells and custom styling, and adds a page number footer to each page.

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

// Apply the plugin to the jsPDF class. This makes `doc.autoTable()` available
// and is required in non-browser environments since v5.0.0 if using that syntax.
applyPlugin(jsPDF);

const doc = new jsPDF();

console.log('Generating PDF...');

// Example 1: Generate a simple table using the direct `autoTable` function call
autoTable(doc, {
  head: [['ID', 'Name', 'Email', 'Country']],
  body: [
    ['1', 'David', 'david@example.com', 'Sweden'],
    ['2', 'Castille', 'castille@example.com', 'Spain'],
    ['3', 'Alice', 'alice@example.com', 'Canada'],
    ['4', 'Bob', 'bob@example.com', 'Germany'],
    ['5', 'Charlie', 'charlie@example.com', 'France'],
  ],
  startY: 20,
  didDrawPage: (data) => {
    // Optional: Add a footer with page numbers on each page
    doc.setFontSize(10);
    const pageText = `Page ${data.pageNumber} of ${data.pageCount}`;
    const x = data.settings.margin.left;
    const y = doc.internal.pageSize.height - 10;
    doc.text(pageText, x, y);
  },
});

// Example 2: Generate a more complex table with merged cells and styles
// using the `doc.autoTable()` method (enabled by `applyPlugin(jsPDF)`)
doc.addPage();
doc.setFontSize(16);
doc.text('Detailed Report', 10, 15);
doc.autoTable({
  head: [
    [{ content: 'Sales Summary Q1', colSpan: 4, styles: { halign: 'center', fillColor: [200, 220, 255] } }],
    ['Product', 'Region', 'Revenue', 'Notes']
  ],
  body: [
    ['Laptop Pro', 'North', '1,200,000', 'Best seller'],
    ['Desktop Evo', { content: 'South (Merged)', colSpan: 2, styles: { fillColor: [255, 240, 200] } }, 'Stable'],
    ['Tablet Mini', 'West', '450,000', 'New release'],
    [{ content: 'Total Sales', colSpan: 2, styles: { halign: 'right', fontStyle: 'bold' } }, '2,000,000', { content: 'Overall', styles: { fontStyle: 'bold' } }]
  ],
  startY: 25,
  styles: { font: 'helvetica', fontSize: 10, cellPadding: 2 },
  headStyles: { fillColor: [100, 150, 200], textColor: 255, fontStyle: 'bold' },
  bodyStyles: { textColor: 50 },
  footStyles: { fillColor: [200, 200, 200] },
  alternateRowStyles: { fillColor: [240, 240, 240] },
});

doc.save('autotable_example.pdf');
console.log('PDF generated as autotable_example.pdf');