Export table data in React JS

Exporting table data in React JS is a common requirement for many applications. In this article, we will discuss how to export table data to print and PDF in a React JS application using HTML tags.

Print table data

To print table data in a React JS application, you can use the window.print() method provided by the browser. You can create a button in your React component that triggers the window.print() method when clicked. Below is an example of how to achieve this:

    
      <button onClick={() => window.print()}>Print Table</button>
    
  

Export table data to PDF

To export table data to PDF in a React JS application, you can use a library like jspdf. First, you need to install jspdf using npm:

    
      npm install jspdf
    
  

Then, you can create a button in your React component that triggers the export to PDF functionality using jspdf. Below is an example of how to achieve this:

    
      import jsPDF from 'jspdf';

      const exportToPDF = () => {
        const doc = new jsPDF();
        // Add table data to the PDF
        doc.text('Table data', 10, 10);
        doc.save('table.pdf');
      }

      <button onClick={exportToPDF}>Export to PDF</button>
    
  

Conclusion

Exporting table data to print and PDF in a React JS application can be achieved using simple HTML tags and JavaScript libraries. By following the examples provided in this article, you can easily add this functionality to your React JS application.