{"id":13593483,"url":"https://github.com/simonbengtsson/jsPDF-AutoTable","last_synced_at":"2025-04-09T05:31:19.952Z","repository":{"id":20379073,"uuid":"23654633","full_name":"simonbengtsson/jsPDF-AutoTable","owner":"simonbengtsson","description":"jsPDF plugin for generating PDF tables with javascript","archived":false,"fork":false,"pushed_at":"2024-04-05T21:27:21.000Z","size":8104,"stargazers_count":2213,"open_issues_count":34,"forks_count":612,"subscribers_count":56,"default_branch":"master","last_synced_at":"2024-04-14T07:33:10.681Z","etag":null,"topics":["hacktoberfest","javascript","jspdf","jspdf-plugin","pdftables"],"latest_commit_sha":null,"homepage":"https://simonbengtsson.github.io/jsPDF-AutoTable/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/simonbengtsson.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"ko_fi":"A535IR4"}},"created_at":"2014-09-04T08:31:33.000Z","updated_at":"2024-05-02T21:35:50.964Z","dependencies_parsed_at":"2023-02-10T07:01:47.908Z","dependency_job_id":"d5edc269-4b17-4748-b0ae-c95f320343b4","html_url":"https://github.com/simonbengtsson/jsPDF-AutoTable","commit_stats":{"total_commits":1020,"total_committers":52,"mean_commits":"19.615384615384617","dds":0.5117647058823529,"last_synced_commit":"896a73dc57bc99b922d9fd76e547b065424217b9"},"previous_names":["someatoms/jspdf-autotable"],"tags_count":152,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonbengtsson%2FjsPDF-AutoTable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonbengtsson%2FjsPDF-AutoTable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonbengtsson%2FjsPDF-AutoTable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonbengtsson%2FjsPDF-AutoTable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/simonbengtsson","download_url":"https://codeload.github.com/simonbengtsson/jsPDF-AutoTable/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":213548970,"owners_count":15603878,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hacktoberfest","javascript","jspdf","jspdf-plugin","pdftables"],"created_at":"2024-08-01T16:01:20.739Z","updated_at":"2024-08-01T16:13:40.710Z","avatar_url":"https://github.com/simonbengtsson.png","language":"TypeScript","readme":"# jsPDF-AutoTable - Table plugin for jsPDF\n\n**Generate PDF tables with Javascript**\n\nThis jsPDF plugin adds the ability to generate PDF tables either by parsing HTML tables or by using Javascript data directly. Check out the [demo](https://simonbengtsson.github.io/jsPDF-AutoTable/) or [examples](https://github.com/simonbengtsson/jsPDF-AutoTable/tree/master/examples).\n\n![sample javascript table pdf](samples.png)\n\n## Installation\n\nGet jsPDF and this plugin by doing one of these things:\n\n- `npm install jspdf jspdf-autotable`\n- Download [jspdf](https://raw.githubusercontent.com/MrRio/jsPDF/master/dist/jspdf.umd.min.js) and [jspdf-autotable](https://raw.githubusercontent.com/simonbengtsson/jsPDF-AutoTable/master/dist/jspdf.plugin.autotable.js) from github\n- Use a CDN, for example: [https://unpkg.com/jspdf](https://unpkg.com/jspdf) and [https://unpkg.com/jspdf-autotable](https://unpkg.com/jspdf-autotable)\n\n## Usage\n\n```js\nimport jsPDF from 'jspdf'\nimport autoTable from 'jspdf-autotable'\n\nconst doc = new jsPDF()\n\n// It can parse html:\n// \u003ctable id=\"my-table\"\u003e\u003c!-- ... --\u003e\u003c/table\u003e\nautoTable(doc, { html: '#my-table' })\n\n// Or use javascript directly:\nautoTable(doc, {\n  head: [['Name', 'Email', 'Country']],\n  body: [\n    ['David', 'david@example.com', 'Sweden'],\n    ['Castille', 'castille@example.com', 'Spain'],\n    // ...\n  ],\n})\n\n// Sometimes you might have to call the default function on the export (for example in Deno)\nautoTable.default(doc, { html: '#my-table' })\n\ndoc.save('table.pdf')\n```\n\nYou can also use the plugin methods directly on the jsPDF documents:\n\n```js\nimport jsPDF from 'jspdf'\nimport 'jspdf-autotable'\n\nconst doc = new jsPDF()\ndoc.autoTable({ html: '#my-table' })\ndoc.save('table.pdf')\n```\n\nThe third usage option is with downloaded or CDN dist files\n\n```html\n\u003cscript src=\"jspdf.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"jspdf.plugin.autotable.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  var doc = new jsPDF()\n  doc.autoTable({ html: '#my-table' })\n  doc.save('table.pdf')\n\u003c/script\u003e\n```\n\nCheckout more examples in [examples.js](examples) which is also the source code for the [demo](https://simonbengtsson.github.io/jsPDF-AutoTable/) documents.\n\n## Options\n\nBelow is a list of all options supported in the plugin. All of them are used in the [examples](examples).\n\n#### Content options\n\nThe only thing required is either the html or body option. If you want more control over the columns you can specify the columns property. If columns are not set they will be automatically computed based on the content of the html content or head, body and foot.\n\n- `html: string|HTMLTableElement` A css selector (for example \"#table\") or an html table element.\n- `head: CellDef[][]` For example [['ID', 'Name', 'Country']]\n- `body: CellDef[][]` For example [['1', 'Simon', 'Sweden'], ['2', 'Karl', 'Norway']]\n- `foot: CellDef[][]` For example [['ID', 'Name', 'Country']]\n- `columns: ColumnDef[]` For example [{header: 'ID', dataKey: 'id'}, {header: 'Name', dataKey: 'name'}]. Only use this option if you want more control over the columns. If not specified the columns will be automatically generated based on the content in html or head/body/foot\n- `includeHiddenHtml: boolean = false` If hidden html with `display: none` should be included or not when the content comes from an html table\n\n`CellDef: string|{content: string, rowSpan: number, colSpan: number, styles: StyleDef}`\nNote that cell styles can also be set dynamically with hooks.\n\n`ColumnDef: string|{header?: string, dataKey: string}`\nThe header property is optional and the values of any content in `head` will be used if not set. Normally it's easier to use the html or head/body/foot style of initiating a table, but columns can be useful if your body content comes directly from an api or if you would like to specify a dataKey on each column to make it more readable to style specific columns in the hooks or columnStyles.\n\nUsage with colspan, rowspan and inline cell styles:\n\n```js\nautoTable(doc, {\n  body: [\n    [{ content: 'Text', colSpan: 2, rowSpan: 2, styles: { halign: 'center' } }],\n  ],\n})\n```\n\n#### Styling options\n\n- `theme: 'striped'|'grid'|'plain' = 'striped'`\n- `styles: StyleDef`\n- `headStyles: StyleDef`\n- `bodyStyles: StyleDef`\n- `footStyles: StyleDef`\n- `alternateRowStyles: StyleDef`\n- `columnStyles: {\u0026columnDataKey: StyleDef}` Note that the columnDataKey is normally the index of the column, but could also be the `dataKey` of a column if content initialized with the columns property\n\n`StyleDef`:\n\n- `font: 'helvetica'|'times'|'courier' = 'helvetica'`\n- `fontStyle: 'normal'|'bold'|'italic'|'bolditalic' = 'normal'`\n- `overflow: 'linebreak'|'ellipsize'|'visible'|'hidden' = 'linebreak'`\n- `fillColor: Color? = null`\n- `textColor: Color? = 20`\n- `cellWidth: 'auto'|'wrap'|number = 'auto'`\n- `minCellWidth: number? = 10`\n- `minCellHeight: number = 0`\n- `halign: 'left'|'center'|'right' = 'left'`\n- `valign: 'top'|'middle'|'bottom' = 'top'`\n- `fontSize: number = 10`\n- `cellPadding: Padding = 10`\n- `lineColor: Color = 10`\n- `lineWidth: border = 0` // If 0, no border is drawn\n\n`Color`:\nEither false for transparent, hex string, gray level 0-255 or rbg array e.g. [255, 0, 0]\nfalse|string|number|[number, number, number]\n\n`Padding`:\nEither a number or object `{top: number, right: number, bottom: number, left: number}`\n\n`border`:\nEither a number or object `{top: number, right: number, bottom: number, left: number}`\n\nStyles work similar to css and can be overridden by more specific styles. Overriding order:\n\n1. Theme styles\n2. `styles`\n3. `headStyles`, `bodyStyles` and `footStyles`\n4. `alternateRowStyles`\n5. `columnStyles`\n\nStyles for specific cells can also be applied using either the hooks (see hooks section above) or the `styles` property on the cell definition object (see content section above).\n\nExample usage of column styles (note that the 0 in the columnStyles below should be dataKey if columns option used)\n\n```js\n// Example usage with columnStyles,\nautoTable(doc, {\n  styles: { fillColor: [255, 0, 0] },\n  columnStyles: { 0: { halign: 'center', fillColor: [0, 255, 0] } }, // Cells in first column centered and green\n  margin: { top: 10 },\n  body: [\n    ['Sweden', 'Japan', 'Canada'],\n    ['Norway', 'China', 'USA'],\n    ['Denmark', 'China', 'Mexico'],\n  ],\n})\n\n// Example usage of columns property. Note that America will not be included even though it exist in the body since there is no column specified for it.\nautoTable(doc, {\n  columnStyles: { europe: { halign: 'center' } }, // European countries centered\n  body: [\n    { europe: 'Sweden', america: 'Canada', asia: 'China' },\n    { europe: 'Norway', america: 'Mexico', asia: 'Japan' },\n  ],\n  columns: [\n    { header: 'Europe', dataKey: 'europe' },\n    { header: 'Asia', dataKey: 'asia' },\n  ],\n})\n```\n\n#### Other options\n\n- `useCss: boolean = false`\n- `startY: number = null` Where the table should start to be printed (basically a margin top value only for the first page)\n- `margin: Margin = 40`\n- `pageBreak: 'auto'|'avoid'|'always'` If set to `avoid` the plugin will only split a table onto multiple pages if table height is larger than page height.\n- `rowPageBreak: 'auto'|'avoid' = 'auto'` If set to `avoid` the plugin will only split a row onto multiple pages if row height is larger than page height.\n- `tableWidth: 'auto'|'wrap'|number = 'auto'`\n- `showHead: 'everyPage'|'firstPage'|'never' = 'everyPage''`\n- `showFoot: 'everyPage'|'lastPage'|'never' = 'everyPage''`\n- `tableLineWidth: number = 0`\n- `tableLineColor: Color = 200` The table line/border color\n- `horizontalPageBreak: boolean = false` To split/break the table into multiple pages if the given table width exceeds the page width\n- `horizontalPageBreakRepeat: string|number|string[]|number[]` To repeat the given column in the split pages, works when `horizontalPageBreak = true`. The accepted values are column dataKeys, such as `'id'`, `recordId` or column indexes, such as `0`, `1` or array for multiple columns.\n- `horizontalPageBreakBehaviour: 'immediately'|'afterAllRows' = 'afterAllRows'` How the horizontal page breaks behave, works when `horizontalPageBreak = true`\n\n`Margin`:\nEither a number or object `{top: number, right: number, bottom: number, left: number}`\n\n### Hooks\n\nYou can customize the content and styling of the table by using the hooks. See the custom styles example for usage of the hooks.\n\n- `didParseCell: (HookData) =\u003e {}` - Called when the plugin finished parsing cell content. Can be used to override content or styles for a specific cell.\n- `willDrawCell: (HookData) =\u003e {}` - Called before a cell or row is drawn. Can be used to call native jspdf styling functions such as `doc.setTextColor` or change position of text etc before it is drawn.\n- `didDrawCell: (HookData) =\u003e {}` - Called after a cell has been added to the page. Can be used to draw additional cell content such as images with `doc.addImage`, additional text with `doc.addText` or other jspdf shapes.\n- `willDrawPage: (HookData) =\u003e {}` - Called before starting to draw on a page. Can be used to add headers or any other content that you want on each page there is an autotable.\n- `didDrawPage: (HookData) =\u003e {}` - Called after the plugin has finished drawing everything on a page. Can be used to add footers with page numbers or any other content that you want on each page there is an autotable.\n\nAll hooks functions get passed an HookData object with information about the state of the table and cell. For example the position on the page, which page it is on etc.\n\n`HookData`:\n\n- `table: Table`\n- `pageNumber: number` The page number specific to this table\n- `settings: object` Parsed user supplied options\n- `doc` The jsPDF document instance of this table\n- `cursor: { x: number, y: number }` To draw each table this plugin keeps a cursor state where the next cell/row should be drawn. You can assign new values to this cursor to dynamically change how the cells and rows are drawn.\n\nFor cell hooks these properties are also passed:\n\n- `cell: Cell`\n- `row: Row`\n- `column: Column`\n- `section: 'head'|'body'|'foot'`\n\nTo see what is included in the `Table`, `Row`, `Column` and `Cell` types, either log them to the console or take a look at `src/models.ts`\n\n```js\n// Example with an image drawn in each cell in the first column\nautoTable(doc, {\n  didDrawCell: (data) =\u003e {\n    if (data.section === 'body' \u0026\u0026 data.column.index === 0) {\n      var base64Img = 'data:image/jpeg;base64,iVBORw0KGgoAAAANS...'\n      doc.addImage(base64Img, 'JPEG', data.cell.x + 2, data.cell.y + 2, 10, 10)\n    }\n  },\n})\n```\n\n## API\n\n- `doc.autoTable({ /* options */ })`\n- `autoTable(doc, { /* options */ })`\n- `jsPDF.autoTableSetDefaults({ /* ... */ })` Use for setting global defaults which will be applied for all tables\n\nIf you want to know something about the last table that was drawn you can use `doc.lastAutoTable`. It has a `doc.lastAutoTable.finalY` property among other things that has the value of the last printed y coordinate on a page. This can be used to draw text, multiple tables or other content after a table.\n\nIn addition to the exported autoTable(doc, options) method you can also use applyPlugin to add the autoTable api to any jsPDF instance.\n\n```\nimport jsPDF from 'jspdf/dist/jspdf.node.debug'\nimport { applyPlugin } from 'jspdf-autotable'\napplyPlugin(jsPDF)\n```\n\n## Contributions\n\nContributions are always welcome, especially on open issues. If you have something major you want to add or change, please post an issue about it first to discuss it further. The workflow for contributing would be something like this:\n\n- Start watcher with `npm start`\n- Make code changes\n- Make sure all examples works\n- Commit and submit pull request\n\n**If you don't use [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) on autosave, please run `yarn run format-all` before opening your PR**\n\n### Release workflow\n\n- Run Release workflow on github (or run `npm version \u003csemver\u003e` and npm run deploy)\n- Verify release at https://simonbengtsson.github.io/jsPDF-AutoTable\n\n### Pull requests locally\n\n- `PR=472 npm run checkout-pr`\n\n### Release prerelease\n\n- `npm version prerelease`\n- `git push \u0026\u0026 git push --tags \u0026\u0026 npm publish --tag alpha`\n","funding_links":["https://ko-fi.com/A535IR4"],"categories":["TypeScript","Javascript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimonbengtsson%2FjsPDF-AutoTable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsimonbengtsson%2FjsPDF-AutoTable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimonbengtsson%2FjsPDF-AutoTable/lists"}