Exporting React Data Grid to PDF

In many web applications, exporting data is a must-have feature for users who need to download and analyse data offline. In this article, we’ll learn how to fetch data and export it as a PDF file using the jspdf library.

This article is ideal for React developers seeking to integrate PDF download functionality into their applications.

Prerequisites

To follow along, make sure you have,

• Basic knowledge of React
• Node.js and npm are installed
• A React project set up

Set Up Your React App

If you haven’t already created a React project, you can do so using the following steps.

I'll explain this again shortly. These steps.

npx create-react-app react-data-grid-export

1. The command' npx create-react-app react-data-grid-export' is used to create a new React application named' react-data-grid-export' using the Create React App tool.
2. It creates a ready-to-use React project with all the necessary files and configurations.
3. After the project is created, cd react-data-grid-export changes the current directory to the new project folder, allowing you to start working inside it.
4. Finally, running' npm start' launches the development server and opens the app in your default browser, allowing you to view your React application running locally.

Image01: Create React App

I'm updating the table component using the React Data Table Component.

Developing a web app for a startup highlighted the need for a better React table library. Existing options often lacked built-in sorting and pagination, required extensive customization, or demanded deep HTML table knowledge. For a simple yet flexible solution, consider using the React Data Table Component. If you need an Excel clone, this library isn't for you.

Key Features in the React Data Table Component.

• Declarative configuration
• Built-in and configurable
  • Sorting
  • Selectable Rows
  • Expandable Rows
  • Pagination
• Themeable/Customizable
• Accessibility
• Responsive (via x-scroll/flex)

npm i react-data-table-component

Install the package

And I have some sample data.

const columns = [
  { name: "ID", selector: (row) => row.id, sortable: true },
  { name: "Name", selector: (row) => row.name, sortable: true },
  { name: "Email", selector: (row) => row.email },
  { name: "Role", selector: (row) => row.role }
];

const data = [
  { id: 1, name: "Alice", email: "[email protected]", role: "Admin" },
  { id: 2, name: "Bob", email: "[email protected]", role: "Editor" },
  { id: 3, name: "Charlie", email: "[email protected]", role: "HR" },
  { id: 4, name: "David", email: "[email protected]", role: "Accountant" },
  { id: 5, name: "Eve", email: "[email protected]", role: "Editor" },
  { id: 6, name: "Frank", email: "[email protected]", role: "HR" },
  { id: 7, name: "Grace", email: "[email protected]", role: "Admin" },
  { id: 8, name: "Heidi", email: "[email protected]", role: "Editor" },
  { id: 9, name: "Ivan", email: "[email protected]", role: "HR" },
  { id: 10, name: "Judy", email: "[email protected]", role: "Admin" }
];

And I update the component like this.

<DataTable
  columns={columns}
  data={data}
  pagination
  highlightOnHover
/>

Now I'm going to create a DataGridExport.jsx page in the component folder.

DataGridExport.jsx

import React from "react";
import DataTable from "react-data-table-component";

const columns = [
  { name: "ID", selector: (row) => row.id, sortable: true },
  { name: "Name", selector: (row) => row.name, sortable: true },
  { name: "Email", selector: (row) => row.email },
  { name: "Role", selector: (row) => row.role }
];
const data = [
  { id: 1, name: "Alice", email: "[email protected]", role: "Admin" },
  { id: 2, name: "Bob", email: "[email protected]", role: "Editor" },
  { id: 3, name: "Charlie", email: "[email protected]", role: "HR" },
  { id: 4, name: "David", email: "[email protected]", role: "Accountant" },
  { id: 5, name: "Eve", email: "[email protected]", role: "Editor" },
  { id: 6, name: "Frank", email: "[email protected]", role: "HR" },
  { id: 7, name: "Grace", email: "[email protected]", role: "Admin" },
  { id: 8, name: "Heidi", email: "[email protected]", role: "Editor" },
  { id: 9, name: "Ivan", email: "[email protected]", role: "HR" },
  { id: 10, name: "Judy", email: "[email protected]", role: "Admin" }
];
const DataGridExport = () => {
  return (
    <div style={{ padding: "20px" }}>
      <h2>User Data Grid</h2>


      <DataTable columns={columns} data={data} pagination highlightOnHover />
    </div>
  );
};
export default DataGridExport;

And update the App.js also.

import './App.css';
import DataGridExport from './Component/DataGridExport';
function App() {
  return (
    <div className="App">
      <main>
        <DataGridExport />
      </main>
    </div>
  );
}
export default App;

Now we can see our display.

Image 02: Showing the DataGrid

Now I'm going to install the npm packages (Jspdf-autotable and Jspdf).

1. Jspdf: The npm package jspdf is the core JavaScript library for generating PDF files in the browser (or in Node.js environments). It allows you to programmatically create and download PDF documents.
2. Jspdf-autotable: The jspdf-autotable package is a plugin for jspdf that enables the easy generation of tables in PDF documents.

npm install jspdf jspdf-autotable

Import this

import jsPDF from "jspdf";
import "jspdf-autotable";
import autoTable from "jspdf-autotable";

Update this code

const DataGridExport = () => {
  const exportPDF = () => {
    const doc = new jsPDF();
    doc.text("User Data", 14, 10);
    autoTable(doc, {
      head: [columns.map((col) => col.name)],
      body: data.map((row) => columns.map((col) => col.selector(row))),
    });
    doc.save("user_data.pdf");
  };
};

Explain In Simple Words,

1. Make a PDF: const doc = new jsPDF(); – starts a new PDF file.
2. Add a title: doc.text("User Data", 14, 10); – writes "User Data" at the top of the PDF.
3. Create a table: autoTable(...) – builds a table using:
   • head: column names (like "Name", "Email")
   • body: actual data for each row (like the list of users)
4. Download the PDF: doc.save("user_data.pdf"); – lets the user download the file with that name.

Update the button.

<div style={{ padding: "20px" }}>
  <h2>User Data Grid</h2>
  <div style={{ marginBottom: "10px" }}>
    <button onClick={exportPDF}>Export PDF</button>{" "}
  </div>
  <DataTable columns={columns} data={data} pagination highlightOnHover />
</div>

Run the application.

Image 03: final view, and click the export button

Image 04: Finally PDF is successfully downloaded

Image 05: PDF View

Summary

This article demonstrates how to build a React component that displays user data in a table and provides export options to PDF. Using libraries such as react-data-table-component and jspdf-autotable, the app enables users to download table data in various formats with a single click.