eastern-cyan

How to implement export buttons

I'm using @tanstack/react-table v8 for my Table component and I'd like to add export buttons for pdf, XLSX, and CSV. Kindly provide code snippets or links to helpful resources. Thanks.

1 Reply

sunny-green•3y ago

npm install jspdf jspdf-autotable xlsx

import React from "react";
import { useTable } from "@tanstack/react-table";
import jsPDF from "jspdf";
import "jspdf-autotable";
import { saveAs } from "file-saver";
import XLSX from "xlsx";

// Export to PDF
function exportToPDF(columns, data) {
  const doc = new jsPDF("p", "pt");
  doc.autoTable({ columns, data });
  doc.save("table_data.pdf");
}

// Export to XLSX
function exportToXLSX(columns, data) {
  const wb = XLSX.utils.book_new();
  const ws = XLSX.utils.json_to_sheet(data, { header: columns.map((col) => col.Header) });
  XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
  const xlsxData = XLSX.write(wb, { type: "binary", bookType: "xlsx" });
  saveAs(new Blob([s2ab(xlsxData)], { type: "application/octet-stream" }), "table_data.xlsx");
}

// Export to CSV
function exportToCSV(columns, data) {
  const headers = columns.map((col) => col.Header).join(",") + "\n";
  const rows = data.map((row) => columns.map((col) => row[col.accessor]).join(",")).join("\n");
  const csvData = new Blob([headers + rows], { type: "text/csv" });
  saveAs(csvData, "table_data.csv");
}

// Helper function for XLSX export
function s2ab(s) {
  const buf = new ArrayBuffer(s.length);
  const view = new Uint8Array(buf);
  for (let i = 0; i < s.length; i++) view[i] = s.charCodeAt(i) & 0xff;
  return buf;
}

function TableComponent({ columns, data }) {
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
  } = useTable({ columns, data });

  return (
    <div>
      <div>
        <button onClick={() => exportToPDF(columns, data)}>Export to PDF</button>
        <button onClick={() => exportToXLSX(columns, data)}>Export to XLSX</button>
        <button onClick={() => exportToCSV(columns, data)}>Export to CSV</button>
      </div>
      <table {...getTableProps()}>
        <thead>
          {headerGroups.map((headerGroup) => (
            <tr {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map((column) => (
                <th {...column.getHeaderProps()}>{column.render("Header")}</th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody {...getTableBodyProps()}>
          {rows.map((row) => {
            prepareRow(row
            return (
              <tr {...row.getRowProps()}>
                {row.cells.map((cell) => {
                  return <td {...cell.getCellProps()}>{cell.render("Cell")}</td>;
                })}
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

export default TableComponent;

npm install jspdf jspdf-autotable xlsx

import React from "react";
import { useTable } from "@tanstack/react-table";
import jsPDF from "jspdf";
import "jspdf-autotable";
import { saveAs } from "file-saver";
import XLSX from "xlsx";

// Export to PDF
function exportToPDF(columns, data) {
  const doc = new jsPDF("p", "pt");
  doc.autoTable({ columns, data });
  doc.save("table_data.pdf");
}

// Export to XLSX
function exportToXLSX(columns, data) {
  const wb = XLSX.utils.book_new();
  const ws = XLSX.utils.json_to_sheet(data, { header: columns.map((col) => col.Header) });
  XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
  const xlsxData = XLSX.write(wb, { type: "binary", bookType: "xlsx" });
  saveAs(new Blob([s2ab(xlsxData)], { type: "application/octet-stream" }), "table_data.xlsx");
}

// Export to CSV
function exportToCSV(columns, data) {
  const headers = columns.map((col) => col.Header).join(",") + "\n";
  const rows = data.map((row) => columns.map((col) => row[col.accessor]).join(",")).join("\n");
  const csvData = new Blob([headers + rows], { type: "text/csv" });
  saveAs(csvData, "table_data.csv");
}

// Helper function for XLSX export
function s2ab(s) {
  const buf = new ArrayBuffer(s.length);
  const view = new Uint8Array(buf);
  for (let i = 0; i < s.length; i++) view[i] = s.charCodeAt(i) & 0xff;
  return buf;
}

function TableComponent({ columns, data }) {
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
  } = useTable({ columns, data });

  return (
    <div>
      <div>
        <button onClick={() => exportToPDF(columns, data)}>Export to PDF</button>
        <button onClick={() => exportToXLSX(columns, data)}>Export to XLSX</button>
        <button onClick={() => exportToCSV(columns, data)}>Export to CSV</button>
      </div>
      <table {...getTableProps()}>
        <thead>
          {headerGroups.map((headerGroup) => (
            <tr {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map((column) => (
                <th {...column.getHeaderProps()}>{column.render("Header")}</th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody {...getTableBodyProps()}>
          {rows.map((row) => {
            prepareRow(row
            return (
              <tr {...row.getRowProps()}>
                {row.cells.map((cell) => {
                  return <td {...cell.getCellProps()}>{cell.render("Cell")}</td>;
                })}
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

export default TableComponent;

👍 👍 👍

import React from "react";
import TableComponent from "./TableComponent";

const columns = [
  { Header: "ID", accessor: "id" },
  { Header: "Name", accessor: "name" },
  { Header: "Age", accessor: "age" },
];

const data = [
  { id: 1, name: "John Doe", age: 28 },
  { id: 2, name: "Jane Doe", age: 26 },
  { id: 3, name: "Alice", age: 24 },
];

function App() {
  return (
    <div>
      <TableComponent columns={columns} data={data} />
    </div>
  );
}

export default App;

import React from "react";
import TableComponent from "./TableComponent";

const columns = [
  { Header: "ID", accessor: "id" },
  { Header: "Name", accessor: "name" },
  { Header: "Age", accessor: "age" },
];

const data = [
  { id: 1, name: "John Doe", age: 28 },
  { id: 2, name: "Jane Doe", age: 26 },
  { id: 3, name: "Alice", age: 24 },
];

function App() {
  return (
    <div>
      <TableComponent columns={columns} data={data} />
    </div>
  );
}

export default App;

💪

Gaming

Programming

How to implement export buttons

Did you find this page helpful?