{"id":11184,"library":"jspdf-autotable","title":"jsPDF-AutoTable","description":"jsPDF-AutoTable is a widely-used plugin for the jsPDF library, enabling the generation of tabular data within PDF documents directly from JavaScript. It supports parsing existing HTML tables or constructing tables programmatically using JavaScript arrays for header, body, and footer content. The current stable version is 5.0.7, with active development indicated by frequent releases addressing bug fixes, dependency updates, and feature enhancements. Key differentiators include its tight integration with jsPDF, flexibility in content sources (HTML or raw data), and comprehensive styling options, making it a robust solution for dynamically generating structured reports and documents. It provides fine-grained control over cell spanning, styling, and column definitions, and ships with TypeScript types for improved developer experience.","status":"active","version":"5.0.7","language":"javascript","source_language":"en","source_url":"https://github.com/simonbengtsson/jsPDF-AutoTable","tags":["javascript","pdf","table","jspdf","typescript"],"install":[{"cmd":"npm install jspdf-autotable","lang":"bash","label":"npm"},{"cmd":"yarn add jspdf-autotable","lang":"bash","label":"yarn"},{"cmd":"pnpm add jspdf-autotable","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core PDF generation library. jsPDF-AutoTable is a plugin for jsPDF.","package":"jspdf","optional":false}],"imports":[{"note":"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.","wrong":"const autoTable = require('jspdf-autotable').autoTable","symbol":"autoTable","correct":"import { autoTable } from 'jspdf-autotable'"},{"note":"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.","wrong":"import autoTable from 'jspdf-autotable'","symbol":"applyPlugin","correct":"import { applyPlugin } from 'jspdf-autotable'"},{"note":"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.","symbol":"HookData","correct":"import { type HookData } from 'jspdf-autotable'"},{"note":"This TypeScript type was previously exported as `autoTable` before v4.0.0. It represents the interface for the plugin's instance methods.","symbol":"autoTableInstanceType","correct":"import { type autoTableInstanceType } from 'jspdf-autotable'"}],"quickstart":{"code":"import { jsPDF } from 'jspdf';\nimport { autoTable, applyPlugin } from 'jspdf-autotable';\n\n// Apply the plugin to the jsPDF class. This makes `doc.autoTable()` available\n// and is required in non-browser environments since v5.0.0 if using that syntax.\napplyPlugin(jsPDF);\n\nconst doc = new jsPDF();\n\nconsole.log('Generating PDF...');\n\n// Example 1: Generate a simple table using the direct `autoTable` function call\nautoTable(doc, {\n  head: [['ID', 'Name', 'Email', 'Country']],\n  body: [\n    ['1', 'David', 'david@example.com', 'Sweden'],\n    ['2', 'Castille', 'castille@example.com', 'Spain'],\n    ['3', 'Alice', 'alice@example.com', 'Canada'],\n    ['4', 'Bob', 'bob@example.com', 'Germany'],\n    ['5', 'Charlie', 'charlie@example.com', 'France'],\n  ],\n  startY: 20,\n  didDrawPage: (data) => {\n    // Optional: Add a footer with page numbers on each page\n    doc.setFontSize(10);\n    const pageText = `Page ${data.pageNumber} of ${data.pageCount}`;\n    const x = data.settings.margin.left;\n    const y = doc.internal.pageSize.height - 10;\n    doc.text(pageText, x, y);\n  },\n});\n\n// Example 2: Generate a more complex table with merged cells and styles\n// using the `doc.autoTable()` method (enabled by `applyPlugin(jsPDF)`)\ndoc.addPage();\ndoc.setFontSize(16);\ndoc.text('Detailed Report', 10, 15);\ndoc.autoTable({\n  head: [\n    [{ content: 'Sales Summary Q1', colSpan: 4, styles: { halign: 'center', fillColor: [200, 220, 255] } }],\n    ['Product', 'Region', 'Revenue', 'Notes']\n  ],\n  body: [\n    ['Laptop Pro', 'North', '1,200,000', 'Best seller'],\n    ['Desktop Evo', { content: 'South (Merged)', colSpan: 2, styles: { fillColor: [255, 240, 200] } }, 'Stable'],\n    ['Tablet Mini', 'West', '450,000', 'New release'],\n    [{ content: 'Total Sales', colSpan: 2, styles: { halign: 'right', fontStyle: 'bold' } }, '2,000,000', { content: 'Overall', styles: { fontStyle: 'bold' } }]\n  ],\n  startY: 25,\n  styles: { font: 'helvetica', fontSize: 10, cellPadding: 2 },\n  headStyles: { fillColor: [100, 150, 200], textColor: 255, fontStyle: 'bold' },\n  bodyStyles: { textColor: 50 },\n  footStyles: { fillColor: [200, 200, 200] },\n  alternateRowStyles: { fillColor: [240, 240, 240] },\n});\n\ndoc.save('autotable_example.pdf');\nconsole.log('PDF generated as autotable_example.pdf');","lang":"typescript","description":"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."},"warnings":[{"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.","message":"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.","severity":"breaking","affected_versions":">=5.0.0"},{"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.","message":"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.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Remove any `/es` suffix from your import paths. For example, change `import { autoTable } from 'jspdf-autotable/es'` to `import { autoTable } from 'jspdf-autotable'`.","message":"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.","severity":"gotcha","affected_versions":">=5.0.0"},{"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).","message":"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.","severity":"gotcha","affected_versions":">=3.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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:\n`import { jsPDF } from 'jspdf';\nimport { applyPlugin } from 'jspdf-autotable';\napplyPlugin(jsPDF);\nconst doc = new jsPDF();\ndoc.autoTable({...});`\nAlternatively, use the direct function call: `autoTable(doc, { ... });`","cause":"The `jspdf-autotable` plugin was not correctly applied to the jsPDF instance or class, particularly in non-browser environments since v5.0.0.","error":"TypeError: doc.autoTable is not a function"},{"fix":"Remove the `/es` suffix from your import path: `import { autoTable } from 'jspdf-autotable'`.","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.","error":"Cannot find module 'jspdf-autotable/es'"},{"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).","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.","error":"Property 'autoTable' does not exist on type 'jsPDF' (TypeScript error)"},{"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`.","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.","error":"Error: Deprecated option 'styles.columnWidth' used. Use 'columnStyles.0.cellWidth' instead."}],"ecosystem":"npm"}