0
# jsPDF-AutoTable
1
2
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.
3
4
## Package Information
5
6
- **Package Name**: jspdf-autotable
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install jspdf jspdf-autotable`
10
11
## Core Imports
12
13
ES6 modules:
14
15
```typescript
16
import { autoTable, applyPlugin } from "jspdf-autotable";
17
import { jsPDF } from "jspdf";
18
```
19
20
For direct function usage:
21
22
```typescript
23
import { autoTable } from "jspdf-autotable";
24
```
25
26
CommonJS:
27
28
```javascript
29
const { autoTable, applyPlugin } = require("jspdf-autotable");
30
const { jsPDF } = require("jspdf");
31
```
32
33
Browser (with plugin applied automatically):
34
35
```html
36
<script src="jspdf.min.js"></script>
37
<script src="jspdf.plugin.autotable.min.js"></script>
38
```
39
40
## Basic Usage
41
42
### Direct Function Usage
43
44
```typescript
45
import { jsPDF } from "jspdf";
46
import { autoTable } from "jspdf-autotable";
47
48
const doc = new jsPDF();
49
50
// From JavaScript data
51
autoTable(doc, {
52
head: [['Name', 'Email', 'Country']],
53
body: [
54
['David', 'david@example.com', 'Sweden'],
55
['Castille', 'castille@example.com', 'Spain'],
56
],
57
});
58
59
// From HTML table
60
autoTable(doc, { html: '#my-table' });
61
62
doc.save('table.pdf');
63
```
64
65
### Plugin Integration Usage
66
67
```typescript
68
import { jsPDF } from "jspdf";
69
import { applyPlugin } from "jspdf-autotable";
70
71
applyPlugin(jsPDF);
72
const doc = new jsPDF();
73
74
doc.autoTable({
75
head: [['Name', 'Email', 'Country']],
76
body: [
77
['David', 'david@example.com', 'Sweden'],
78
['Castille', 'castille@example.com', 'Spain'],
79
],
80
});
81
82
doc.save('table.pdf');
83
```
84
85
## Architecture
86
87
jsPDF-AutoTable is built around several key components:
88
89
- **Core Function**: `autoTable()` function that creates and renders tables
90
- **Plugin System**: Integration with jsPDF prototype for method chaining
91
- **Data Models**: `Table`, `Row`, `Cell`, and `Column` classes for structured data representation
92
- **Configuration System**: Comprehensive options for styling, layout, and behavior
93
- **Hook System**: Event-driven customization points for rendering pipeline
94
- **Input Parsers**: Support for HTML tables, JavaScript objects, and arrays
95
- **Rendering Engine**: PDF drawing logic with automatic pagination and layout
96
97
## Capabilities
98
99
### Core Table Generation
100
101
Primary table creation functionality supporting multiple data input formats and comprehensive configuration options.
102
103
```typescript { .api }
104
function autoTable(doc: jsPDFDocument, options: UserOptions): void;
105
```
106
107
[Core Functionality](./core-functionality.md)
108
109
### Advanced Table Operations
110
111
Experimental table creation and drawing functions for advanced use cases requiring programmatic table manipulation.
112
113
```typescript { .api }
114
function __createTable(doc: jsPDFDocument, options: UserOptions): Table;
115
function __drawTable(doc: jsPDFDocument, table: Table): void;
116
```
117
118
[Core Functionality](./core-functionality.md)
119
120
### Plugin Integration
121
122
jsPDF plugin integration system that adds autoTable methods directly to jsPDF document instances.
123
124
```typescript { .api }
125
function applyPlugin(jsPDF: jsPDFConstructor): void;
126
127
type autoTableInstanceType = (options: UserOptions) => void;
128
```
129
130
[Plugin Integration](./plugin-integration.md)
131
132
### Configuration and Styling
133
134
Comprehensive configuration system with built-in themes, custom styling options, and layout controls.
135
136
```typescript { .api }
137
interface UserOptions {
138
// Content options
139
head?: RowInput[];
140
body?: RowInput[];
141
foot?: RowInput[];
142
html?: string | HTMLTableElement;
143
columns?: ColumnInput[];
144
145
// Layout options
146
startY?: number | false;
147
margin?: MarginPaddingInput;
148
tableWidth?: TableWidthType;
149
pageBreak?: PageBreakType;
150
151
// Styling options
152
theme?: ThemeType;
153
styles?: Partial<Styles>;
154
headStyles?: Partial<Styles>;
155
bodyStyles?: Partial<Styles>;
156
157
// Hook functions
158
didParseCell?: CellHook;
159
willDrawCell?: CellHook;
160
didDrawCell?: CellHook;
161
willDrawPage?: PageHook;
162
didDrawPage?: PageHook;
163
}
164
```
165
166
[Configuration and Styling](./configuration-styling.md)
167
168
### Data Models
169
170
Core data model classes representing table structure and cell content with full type safety.
171
172
```typescript { .api }
173
class Table {
174
readonly settings: Settings;
175
readonly styles: StylesProps;
176
readonly hooks: HookProps;
177
readonly columns: Column[];
178
readonly head: Row[];
179
readonly body: Row[];
180
readonly foot: Row[];
181
pageNumber: number;
182
finalY?: number;
183
}
184
185
class Row {
186
readonly index: number;
187
readonly section: Section;
188
readonly cells: { [key: string]: Cell };
189
height: number;
190
}
191
192
class Cell {
193
styles: Styles;
194
text: string[];
195
section: Section;
196
colSpan: number;
197
rowSpan: number;
198
width: number;
199
height: number;
200
x: number;
201
y: number;
202
}
203
204
class Column {
205
dataKey: string | number;
206
index: number;
207
width: number;
208
}
209
```
210
211
[Data Models](./data-models.md)
212
213
### Hook System
214
215
Event-driven customization system for intercepting and modifying table rendering at various stages.
216
217
```typescript { .api }
218
class HookData {
219
table: Table;
220
pageNumber: number;
221
settings: Settings;
222
doc: jsPDFDocument;
223
cursor: Pos | null;
224
}
225
226
class CellHookData extends HookData {
227
cell: Cell;
228
row: Row;
229
column: Column;
230
section: "head" | "body" | "foot";
231
}
232
233
type PageHook = (data: HookData) => void | boolean;
234
type CellHook = (data: CellHookData) => void | boolean;
235
```
236
237
[Hook System](./hook-system.md)
238
239
## Types
240
241
### Core Types
242
243
```typescript { .api }
244
type jsPDFDocument = any;
245
type jsPDFConstructor = any;
246
247
type Pos = { x: number; y: number };
248
type Section = "head" | "body" | "foot";
249
250
type Color = [number, number, number] | number | string | false;
251
type MarginPaddingInput = number | number[] | {
252
top?: number;
253
right?: number;
254
bottom?: number;
255
left?: number;
256
horizontal?: number;
257
vertical?: number;
258
};
259
```
260
261
### Input Types
262
263
```typescript { .api }
264
type RowInput = { [key: string]: CellInput } | HtmlRowInput | CellInput[];
265
type CellInput = null | string | string[] | number | boolean | CellDef;
266
type ColumnInput = string | number | {
267
header?: CellInput;
268
footer?: CellInput;
269
dataKey?: string | number;
270
};
271
272
interface CellDef {
273
rowSpan?: number;
274
colSpan?: number;
275
styles?: Partial<Styles>;
276
content?: string | string[] | number;
277
}
278
```