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
```