--- title: "Generate PDF Tables in JavaScript (PDF Grid) Using Syncfusion PDF Library" published_at: "2026-11-10T15:30:00+00:00" modified_at: "2026-11-10T15:30:00+00:00" url: "https://www.syncfusion.com/blogs/post/generate-pdf-table-in-javascript" excerpt: "Learn to generate JavaScript PDF tables (Grid) using Syncfusion PDF Library. Explore data binding, custom styling, hyperlinks, nested tables, and multi-page layouts." taxonomy_category: - "JavaScript" - "PDF" - "Web" - "What's new" taxonomy_post_tag: - "JavaScript" - "PDF" - "Web" - "What's New" --- # Generate PDF Tables in JavaScript (PDF Grid) Using Syncfusion PDF Library [Sumathi Uthayakumar](https://www.syncfusion.com/blogs/author/sumathi-uthayakuma) ![Generate PDF Tables in JavaScript (PDF Grid) Using Syncfusion PDF Library](https://www.syncfusion.com/blogs/images/posts/generate-pdf-table-in-javascript/generate-pdf-tables-in-javascript-with-syncfusion-pdf-grid.png) **TL;DR:** Working with PDF tables in JavaScript involves handling dynamic data, formatting, and pagination. The new PDF Grid feature in Syncfusion JavaScript PDF Library provides a structured API with data binding, custom styling, hyperlinks, nested tables, and automatic pagination. Learn how to use these capabilities for invoices, reports, and other data-driven documents. Creating a PDF table involves more than arranging data into rows and columns. Consider generating an invoice with customer details, product information, tax calculations, and payment summaries. A simple table might be enough initially. But what happens when the invoice spans multiple pages, requires different cell styles, or includes links to related documents? These requirements make PDF table generation more than a simple formatting task. Developers also need to manage layout, content, and pagination. To simplify this process, Syncfusion® introduced the new PDF Grid feature in its [JavaScript PDF Library](https://www.syncfusion.com/document-sdk/javascript-pdf-library "JavaScript PDF Library") with [Essential Studio 2026 Volume 3](https://help.syncfusion.com/common/essential-studio/release-notes/v35.1.37 "2026 Volume 3"). It provides a structured API for generating and customizing PDF tables. In this guide, you'll learn how to generate PDF tables from application data, customize their appearance, add interactive elements, and manage large datasets and multi-page layouts. ## Why PDF tables matter Most business applications eventually need to generate documents that contain structured data. Whether you're exporting information for customers, internal teams, or compliance purposes, tables are often the easiest way to present large amounts of information clearly. Common examples include: - Invoices showing products, pricing, taxes, and totals. - Financial reports containing transactions and budget data. - Order summaries with shipment and payment information. - Inventory reports for stock monitoring and auditing. - Operational reports generated from business systems. ## PDF Grid feature The Syncfusion JavaScript PDF Library now includes the PDF Grid feature, which provides a structured API for generating and customizing PDF tables. It supports data binding, custom styling, hyperlinks, nested tables, and automatic pagination, helping developers create tables for invoices, reports, and other data-driven PDF documents without manually managing every layout detail. By handling these common table-generation requirements through a structured API, PDF Grid reduces the need for manual layout management and simplifies the process of creating complex PDF tables. With PDF Grid, you can: - Generate tables directly from application data. - Define rows and columns manually when needed. - Apply built-in styling to improve readability. - Add hyperlinks and images to table cells. - Create nested tables for hierarchical information. - Automatically paginate large datasets. - Handle tables that exceed page width. These capabilities are particularly useful when building invoices, reports, statements, audit logs, and other document-heavy business applications. ## Generate PDF tables from data In most applications, the data already exists in APIs, databases, or business objects. The real challenge is transforming that data into a readable PDF without manually creating every row and cell. PDF Grid allows you to bind data directly to a table structure, making it easier to generate consistent reports from changing application data. For example, if you're generating a customer report every day, the table structure remains the same while the underlying data changes. Instead of rebuilding the layout each time, you simply supply updated data and regenerate the document. ### Configure the PDF Library Before generating PDF tables, add the Syncfusion [JavaScript PDF Library](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/overview "JavaScript PDF Library documentation") to your application. #### Step 1: Add the CDN reference ```html ``` **Note:** PDF Grid is available starting from Syncfusion Essential Studio 2026 Volume 3. Ensure you are using the corresponding Syncfusion JavaScript PDF Library version or later before running the examples in this article. #### Step 2: Serve the application Run your project using a local web server, such as: ```bash npx serve ``` #### Step 3: Start creating PDF documents Once the library is loaded, you can access the **ej.pdf** namespace to create PDF documents and generate PDF tables directly in the browser. ```javascript // Create a new PDF document var pdfDocument = new ej.pdf.PdfDocument(); // Add a page var page = pdfDocument.addPage(); // Create the data source var dataSource = [ { id: 'E01', name: 'Clay' }, { id: 'E02', name: 'Thomas' } ]; // Define the column mappings var columns = [ { field: 'id', headerText: 'Employee ID', width: 90 }, { field: 'name', headerText: 'Employee Name', width: 140 } ]; // Create and draw the grid var grid = new ej.pdf.PdfGrid(dataSource, columns); var result = grid.draw(page, { x: 10, y: 10 }); // Save and close the document pdfDocument.save('Output.pdf'); pdfDocument.destroy(); ``` ![Creating a PDF table using JavaScript PDF Library](< https://www.syncfusion.com/blogs/images/posts/generate-pdf-table-in-javascript/create-pdf-table-javascript.png> "Creating a PDF table using JavaScript PDF Library") ## Generate customer invoices Consider an order management application that generates PDF invoices. Each invoice may contain: - Customer information - Product line items - Quantities and pricing - Discounts and taxes - Payment summaries While a small invoice may fit on a single page, larger orders can span multiple pages and include dozens of rows. ## Apply built-in styles Good table design isn't just about appearance. Clear formatting helps users process information faster and reduces errors when reviewing reports or invoices. Rather than manually styling every element, you can apply built-in styles that format headers, rows, borders, and colors consistently across your document. ```javascript // Create a new PDF document var pdfDocument = new ej.pdf.PdfDocument(); // Add a page to the document var page = pdfDocument.addPage(); // Create the data source var source = [{ id: 'E01', name: 'Clay' }, { id: 'E02', name: 'Thomas' }]; // Define columns var columns = [{ field: 'id', headerText: 'ID' }, { field: 'name', headerText: 'Name' }]; // Create grid with a built-in style applied var grid = new ej.pdf.PdfGrid(source, columns, { builtInStyle: ej.pdf.PdfGridBuiltinStyle.gridTable4Accent1 }); // Draw the grid on the page grid.draw(page, { x: 10, y: 10 }); // Save the document as Output.pdf pdfDocument.save('Output.pdf'); // Dispose of the document resources pdfDocument.destroy(); ``` Refer to the following image. ![Creating PDF table using built-in styles](< https://www.syncfusion.com/blogs/images/posts/generate-pdf-table-in-javascript/pdf-table-built-in-styles.png> "Creating PDF table using built-in styles") ## Customize PDF Tables Every document has different presentation requirements. For example: - Financial reports often require precise alignment. - Inventory reports may use conditional formatting. - Internal dashboards may include images and visual indicators. - Customer-facing documents often follow company branding guidelines. PDF Grid provides customization options for rows, columns, and individual cells, allowing you to tailor table layouts without manually drawing PDF content. Additional customization features include: - Row and column spanning - Custom cell formatting - Image insertion within cells - Table-wide styling options The following example customizes column widths, text alignment, row height, and cell styling: ```javascript // Create the data source var source = [{ id: 'E01', name: 'John' }, { id: 'E02', name: 'Thomas' }]; // Define columns with alignment and width settings var columns = [ { field: 'id', headerText: 'Employee ID', width: 80, style: { textProperties: { // Center horizontally and vertically horizontalAlignment: ej.pdf.PdfTemplateHorizontalAlignment.center, verticalAlignment: ej.pdf.PdfTemplateVerticalAlignment.middle } } }, { field: 'name', headerText: 'Employee Name', width: 150 } ]; // Create grid from data source and columns var grid = new ej.pdf.PdfGrid(source, columns); // Customize the first row: set height to 50 grid.getRow(0).height = 50; // Apply style to the first row grid.getRow(0).style = { // Set light yellow background background: new ej.pdf.PdfBrush({ r: 255, g: 255, b: 200 }), textProperties: { // Set courier font with size 10 font: new ej.pdf.PdfStandardFont(ej.pdf.PdfFontFamily.courier, 10), // Set text color to blue color: new ej.pdf.PdfBrush({ r: 0, g: 0, b: 255 }) } }; ``` ![Creating PDF tables using customization options](< https://www.syncfusion.com/blogs/images/posts/generate-pdf-table-in-javascript/pdf-table-customization.png> "Creating PDF tables using customization options") ## Add hyperlinks to PDF tables PDF documents often serve as more than static reports. In many cases, users need quick access to related resources, product pages, downloadable files, or internal documentation. Instead of forcing users to copy and paste URLs manually, you can embed hyperlinks directly inside table cells and create a more interactive document experience. The following example adds hyperlinks to PDF table cells: ```javascript // Create a new PDF document var pdfDocument = new ej.pdf.PdfDocument(); // Add a page to the document var page = pdfDocument.addPage(); // Define column widths var widths = new Map([[0, 130], [1, 180]]); // Create rows with hyperlinks var rows = [ { cells: [ { value: 'Product page' }, // Cell with external link { value: 'Syncfusion', link: { type: ej.pdf.PdfLinkType.externalLink, uri: 'https://www.syncfusion.com' } } ] }, { cells: [ { value: 'Report' }, // Cell with file link { value: 'Open file', link: { type: ej.pdf.PdfLinkType.file, uri: 'Report.pdf' } } ] } ]; // Create grid with 2 columns var grid = new ej.pdf.PdfGrid(2, widths, rows); // Draw the grid on the page grid.draw(page, { x: 10, y: 10 }); // Save the document as Output.pdf pdfDocument.save('Output.pdf'); // Dispose of the document resources pdfDocument.destroy(); ``` **Note:** File links require the target file to be available at the specified path when the PDF is opened. ![Adding hyperlinks in PDF tables using JavaScript PDF Grid](< https://www.syncfusion.com/blogs/images/posts/generate-pdf-table-in-javascript/pdf-grid-hyperlinks.png> "Adding hyperlinks in PDF tables using JavaScript PDF Grid") ## Create nested PDF tables Not all data fits neatly into a flat table structure. Imagine generating a sales report where each order contains multiple products. Trying to represent that information on a single table can quickly become difficult to read. Nested PDF tables make these scenarios easier by allowing related data to remain grouped together. This approach works especially well for: - Invoice line items - Order details - Product breakdowns - Project task hierarchies - Parent-child business records Refer to the following code example. ```javascript // Create a new PDF document var pdfDocument = new ej.pdf.PdfDocument(); // Add a page to the document var page = pdfDocument.addPage(); // Create the nested grid (inner table) var childGridWidths = new Map([[0, 80], [1, 100]]); var childGridRows = [ { cells: [{ value: 'Product' }, { value: 'Quantity' }] }, { cells: [{ value: 'Keyboard' }, { value: '2' }] }, { cells: [{ value: 'Mouse' }, { value: '1' }] } ]; // Create the nested grid instance var childGrid = new ej.pdf.PdfGrid(2, childGridWidths, childGridRows); // Create the parent grid (outer table) var parentWidths = new Map([[0, 100], [1, 200]]); var parentRows = [{ cells: [ { value: 'Order details' }, // Embed the nested grid as a cell value { value: childGrid } ] }]; // Create the parent grid instance var parentGrid = new ej.pdf.PdfGrid(2, parentWidths, parentRows); // Draw the parent grid (which includes the nested grid) parentGrid.draw(page, { x: 10, y: 10 }); // Save the document as Output.pdf pdfDocument.save('Output.pdf'); // Dispose of the document resources pdfDocument.destroy(); ``` ![Creating nested tables using JavaScript PDF Grid](< https://www.syncfusion.com/blogs/images/posts/generate-pdf-table-in-javascript/nested-pdf-tables.png> "Creating nested tables using JavaScript PDF Grid") Want to build advanced table layouts? Learn more about nested PDF tables in the PDF Grid [documentation](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/tables#add-a-nested-table "Add a nested table using JavaScript PDF Grid documentation"). ## Handle large PDF tables Generating a PDF is often easy. Generating a PDF that remains readable when it contains hundreds of rows or dozens of columns is where things become challenging. Large reports typically create two common problems: 1. The table exceeds the page width. 2. The table exceeds the page height. The new JavaScript PDF Grid includes features for both scenarios, helping developers avoid manual layout calculations. ### Manage table width Business reports often contain many columns, especially when displaying analytics, inventory data, or operational metrics. Rather than shrinking all content until it becomes unreadable, PDF Grid provides multiple [overflow modes](https://ej2.syncfusion.com/documentation/api/pdf/pdfgridhorizontaloverflowtype "Overflow modes in JavaScript PDF Grid") that allow wide tables to continue across additional pages. - **onePage (default)**: Fits all columns within the available page width by scaling the table to a single page. - **nextPage**: Moves overflowing columns to subsequent pages while maintaining row correspondence across pages. - **lastPage**: Groups all overflowing columns and renders them together on a single continuation page. This flexibility helps you display wide datasets without manually splitting tables or adjusting column layouts. The following example moves overflowing columns to additional pages when the table exceeds the available page width: ```javascript // Create a new PDF document var pdfDocument = new ej.pdf.PdfDocument(); // Add the first page var firstPage = pdfDocument.addPage(); // Create the grid var grid = new ej.pdf.PdfGrid( createEmployeeRows(40), createEmployeeColumns() ); // Enable horizontal overflow to the next page grid.horizontalOverflow = ej.pdf.PdfGridHorizontalOverflowType.nextPage; // Repeat header rows on overflow pages grid.repeatHeader = true; // Configure pagination settings var format = new ej.pdf.PdfLayoutFormat(); format.layout = ej.pdf.PdfLayoutType.paginate; format.break = ej.pdf.PdfLayoutBreakType.fitPage; // Draw the grid grid.draw( firstPage, { x: 10, y: 10 }, format ); // Save the document pdfDocument.save('Output.pdf'); // Dispose resources pdfDocument.destroy(); function createEmployeeColumns() { return [ { field: 'employeeId', headerText: 'Employee ID', width: 75 }, { field: 'firstName', headerText: 'First Name', width: 80 }, { field: 'lastName', headerText: 'Last Name', width: 80 }, { field: 'department', headerText: 'Department', width: 90 }, { field: 'designation', headerText: 'Designation', width: 100 }, { field: 'email', headerText: 'Email Address', width: 150 }, { field: 'phone', headerText: 'Phone Number', width: 100 }, { field: 'city', headerText: 'City', width: 80 }, { field: 'state', headerText: 'State', width: 90 }, { field: 'country', headerText: 'Country', width: 75 } // Additional employee columns can be added here. ]; } function createEmployeeRows(rowCount) { return [ { employeeId: 'EMP0001', firstName: 'Arun', lastName: 'Kumar', department: 'Engineering', designation: 'Software Engineer', email: 'arun.kumar@example.com', phone: '+91 90000 10001', city: 'Chennai', state: 'Tamil Nadu', country: 'India' } // Additional employee records can be added here. ]; } ``` ![Text overflow option in JavaScript PDF Grid](< https://www.syncfusion.com/blogs/images/posts/generate-pdf-table-in-javascript/pdf-grid-overflow.gif> "Text overflow option in JavaScript PDF Grid") ### Enable automatic pagination Manually managing page breaks is one of the most frustrating parts of PDF generation. When reports contain hundreds or thousands of rows, developers often need to calculate page boundaries and repeat headers manually. PDF Grid can automatically paginate tables while preserving readability and optionally repeat headers on continuation pages. ```javascript // Create a new PDF document var pdfDocument = new ej.pdf.PdfDocument(); // Add the first page var page = pdfDocument.addPage(); // Create a large data source with 100 employee records var source = []; for (var i = 1; i <= 100; i++) { source.push({ id: 'E' + i, name: 'Employee ' + i }); } // Define columns with widths var columns = [{ field: 'id', headerText: 'ID', width: 80 }, { field: 'name', headerText: 'Name', width: 160 }]; // Create grid from data source and columns var grid = new ej.pdf.PdfGrid(source, columns); // Enable header repetition on continuation pages grid.repeatHeader = true; // Create a layout format for pagination var format = new ej.pdf.PdfLayoutFormat(); // Set layout type to paginate (flow across pages) format.layout = ej.pdf.PdfLayoutType.paginate; // Set break type to fit entire page format.break = ej.pdf.PdfLayoutBreakType.fitPage; // Draw grid with pagination across multiple pages var result = grid.draw(page, { x: 10, y: 10, width: 300, height: 500 }, format); // Save the document as Output.pdf pdfDocument.save('Output.pdf'); // Dispose of the document resources pdfDocument.destroy(); ``` ## Tips for large PDF reports When generating large PDF reports, a few practices can improve maintainability and readability: - Use data binding when generating tables from APIs or databases. - Enable header repetition for multi-page reports. - Use nested tables only when hierarchical data is required. - Apply consistent styling to improve report readability. - Let pagination features handle page breaks instead of manually splitting datasets. Want to explore PDF Grid before implementing it in your application? Check out the interactive [demo](https://document.syncfusion.com/demos/document-library/javascript/#/tailwind3/pdf/grid-drawing.html "Generate PDF tables using JavaScript PDF Library demo") to see how the Syncfusion JavaScript PDF Library generates and customizes PDF tables. ## Frequently Asked Questions ### Can I create PDF tables manually without using a data source? Absolutely. PDF Grid allows you to build tables manually by defining columns, headers, and rows in code. This approach is ideal when you need full control over the table structure or when your data isn't available as a collection. ### Can I add multiple PDF tables to the same page? Yes. You can render multiple PDF tables on a single page. PDF Grid provides layout information after each table is drawn, making it easy to position additional tables without overlapping existing content. ### Can I merge cells in a PDF table? Yes. PDF Grid supports both row and column spanning, allowing you to merge cells and create more advanced layouts for grouped information, summary sections, invoices, and custom reports. ### Can I insert images into PDF table cells? Yes. Images can be added directly to table cells, with control over size, alignment, and fit mode. This makes it easy to create product catalogs, employee directories, inventory reports, and other visually rich PDF documents. ### How can I create borderless PDF tables in JavaScript? PDF Grid supports borderless table layouts by applying a zero-width border style at the grid level. This is useful when you want data to remain organized in rows and columns without displaying visible table borders. ### Can I prevent table rows from splitting across multiple PDF pages? Yes. By using **PdfLayoutBreakType.fitElement**, you can keep an entire row together on the same page. If a row doesn't fit in the remaining space, it's automatically moved to the next page, helping preserve readability and create more professional-looking documents. ## Simplify PDF table generation PDF Grid simplifies PDF table generation in [JavaScript](https://www.syncfusion.com/document-sdk/javascript-pdf-library "JavaScript PDF Library") by providing built-in support for data binding, styling, hyperlinks, nested tables, overflow handling, and pagination. Whether you're creating invoices, reports, financial documents, or application exports, it helps you build professional PDF tables with less manual layout code and a consistent document structure. If you're evaluating approaches for PDF table generation in JavaScript, exploring the available [examples](https://document.syncfusion.com/demos/document-library/javascript/#/tailwind3/pdf/grid-drawing.html "Generate PDF tables using JavaScript PDF Library demo") and [documentation](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/tables "PDF Grid in JavaScript PDF Library documentation") can be a useful next step before implementing it in production applications. This feature is available in our [2026 Volume 3](https://www.syncfusion.com/forums/198591/essential-studio-2026-volume-3-main-release-v35-1-37-is-available-for-download "Essential Studio 2026 Volume 3") release. You can also explore the [Release Notes](https://help.syncfusion.com/common/essential-studio/release-notes/v35.1.37 "Syncfusion Release Notes") and [What's New](https://www.syncfusion.com/products/whatsnew "What's New in Syncfusion products") pages for additional details. Existing customers can access these features through the [License and Downloads](https://www.syncfusion.com/sales/pricing "Syncfusion license and downloads page") page. New users can start a 30-day [free trial](https://www.syncfusion.com/downloads/ "Free evaluation of the Essential Studio products") to explore these features. For queries, you can contact us through our [support forums](https://www.syncfusion.com/forums "Syncfusion support forum"), [support portal](https://support.syncfusion.com/ "Syncfusion support portal"), or [feedback portal](https://www.syncfusion.com/feedback "Syncfusion feedback portal"). We are always happy to assist you!