table-to-excel-react

Table To Excel - Reactjs

Export data in table to excel file using reactjs.

Now with enhanced security and performance using ExcelJS!

Installation

npm install table-to-excel-react

or

yarn add table-to-excel-react

Features

• Component to export table to excel
• Hook to export table to excel
• Download HTML table to excel in .xls or .xlsx format
• Export multiple tables to separate sheets
• Export custom data (not from HTML tables)
• Export to multiple sheets with different configurations
• Customize styles (headers, rows, cells)
• Cell formatting options
• Support for React 17, 18, and 19
• TypeScript support
• No server-side processing required
• Secure implementation with no vulnerabilities
• Powered by ExcelJS for better Excel file generation

Usage

Basic Usage

with Component

A list of available properties can be found below. These must be passed to the containing TableToExcelReact component

Property	Type	Description	Default
table	string	ID of table to export	-
fileName	string	Name of Excel file (without extension)	-
sheet	string	Name of sheet in Excel file	"Sheet1"
format	"xlsx" | "xls"	Format of the Excel file	"xlsx"
useLegacyExport	boolean	Whether to use the legacy export method	false
id	string	ID attribute for the component	-
className	string	CSS class for the component	-
children	ReactElement	Component that will obtain the onClick event to export to excel (the most common is a button).	-

Example

import { TableToExcelReact } from "table-to-excel-react";

function App() {
  return (
    <div className="App">
      <TableToExcelReact 
        table="table-to-xls" 
        fileName="myFile" 
        sheet="sheet 1"
        format="xlsx"
      >
        <button>Download</button>
      </TableToExcelReact>
      <table id="table-to-xls">
        <thead>
          <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Age</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Edison</td>
            <td>Padilla</td>
            <td>20</td>
          </tr>
          <tr>
            <td>Alberto</td>
            <td>Lopez</td>
            <td>94</td>
          </tr>
        </tbody>
      </table>
    </div>
  );
}

export default App;

with Hook

A list of available properties can be found below. These must be passed to the containing useDownloadExcel hook.

Property	Type	Description	Default
table	string	ID of table to export	-
fileName	string	Name of Excel file (without extension)	-
sheet	string	Name of sheet in Excel file	"Sheet1"
format	"xlsx" | "xls"	Format of the Excel file	"xlsx"
useLegacyExport	boolean	Whether to use the legacy export method	false
id	string	ID attribute for the component	-
className	string	CSS class for the component	-

Example

import { useDownloadExcel } from "table-to-excel-react";

function App() {
  const { onDownload } = useDownloadExcel({
    fileName: "myFile",
    table: "table-to-xls",
    sheet: "sheet 1",
    format: "xlsx"
  });
  
  return (
    <div className="App">
      <button onClick={onDownload}>Download</button>
      <table id="table-to-xls">
        <thead>
          <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Age</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Edison</td>
            <td>Padilla</td>
            <td>20</td>
          </tr>
          <tr>
            <td>Alberto</td>
            <td>Lopez</td>
            <td>94</td>
          </tr>
        </tbody>
      </table>
    </div>
  );
}

export default App;

Advanced Features

Export Multiple Tables to Separate Sheets

You can export multiple tables to separate sheets in a single Excel file:

import { TableToExcelReact } from "table-to-excel-react";

function App() {
  return (
    <div className="App">
      <TableToExcelReact
        tables={["users-table", "products-table"]}
        fileName="multiple-tables"
        format="xlsx"
      >
        <button>Export All Tables</button>
      </TableToExcelReact>
      
      <table id="users-table">
        {/* Users table content */}
      </table>
      
      <table id="products-table">
        {/* Products table content */}
      </table>
    </div>
  );
}

Export Custom Data (Not from HTML Tables)

You can export custom data arrays without needing HTML tables:

import { TableToExcelReact } from "table-to-excel-react";

function App() {
  // Sample data
  const userData = [
    ["John Doe", "john@example.com", 28],
    ["Jane Smith", "jane@example.com", 32],
    ["Bob Johnson", "bob@example.com", 45],
  ];
  
  const headers = ["Name", "Email", "Age"];
  
  return (
    <div className="App">
      <TableToExcelReact
        data={userData}
        headers={headers}
        fileName="custom-data"
        sheet="Users"
        format="xlsx"
      >
        <button>Export Custom Data</button>
      </TableToExcelReact>
    </div>
  );
}

Styled Excel Export

You can apply styles to your Excel exports:

import { TableToExcelReact } from "table-to-excel-react";

function App() {
  return (
    <div className="App">
      <TableToExcelReact
        table="styled-table"
        fileName="styled-export"
        sheet="Styled Data"
        format="xlsx"
        styles={{
          headerRow: {
            font: { 
              bold: true, 
              color: "#FFFFFF",
              size: 12
            },
            fill: { 
              backgroundColor: "#4472C4",
              patternType: "solid"
            },
            alignment: {
              horizontal: "center",
              vertical: "middle"
            }
          },
          dataRow: {
            font: { 
              name: "Arial",
              size: 11
            }
          },
          alternatingRow: {
            fill: { 
              backgroundColor: "#E9EDF4",
              patternType: "solid"
            }
          },
          cells: {
            "D2:D5": {
              font: { 
                bold: true,
                color: "#FF0000"
              }
            }
          }
        }}
      >
        <button>Export Styled Excel</button>
      </TableToExcelReact>
      
      <table id="styled-table">
        {/* Table content */}
      </table>
    </div>
  );
}

Multiple Sheets with Different Configurations

You can configure multiple sheets with different data sources and styles:

import { TableToExcelReact } from "table-to-excel-react";

function App() {
  // Sample data for custom sheet
  const salesData = [
    ["Q1", "North", 45000],
    ["Q1", "South", 38000],
    ["Q2", "North", 52000],
    ["Q2", "South", 41000],
  ];
  
  return (
    <div className="App">
      <TableToExcelReact
        fileName="multi-sheet-config"
        format="xlsx"
        sheets={[
          {
            name: "Employees",
            tableId: "employees-table",
            styles: {
              headerRow: {
                font: { bold: true, color: "#FFFFFF" },
                fill: { backgroundColor: "#4472C4" }
              }
            }
          },
          {
            name: "Sales Data",
            data: salesData,
            headers: ["Quarter", "Region", "Revenue"],
            styles: {
              headerRow: {
                font: { bold: true, color: "#FFFFFF" },
                fill: { backgroundColor: "#548235" }
              }
            }
          }
        ]}
      >
        <button>Export Multiple Sheets</button>
      </TableToExcelReact>
      
      <table id="employees-table">
        {/* Employees table content */}
      </table>
    </div>
  );
}

Export with Callbacks

You can use callbacks to handle events before and after export:

import React, { useState } from "react";
import { useDownloadExcel } from "table-to-excel-react";

function App() {
  const [isExporting, setIsExporting] = useState(false);
  const [exportStatus, setExportStatus] = useState(null);
  
  const { onDownload } = useDownloadExcel({
    table: "data-table",
    fileName: "with-callbacks",
    sheet: "Data",
    format: "xlsx",
    onBeforeExport: () => {
      setIsExporting(true);
      setExportStatus("Exporting...");
    },
    onAfterExport: (success) => {
      setIsExporting(false);
      setExportStatus(success ? "Export successful!" : "Export failed");
      
      // Clear status after 3 seconds
      setTimeout(() => {
        setExportStatus(null);
      }, 3000);
    }
  });
  
  return (
    <div className="App">
      <button 
        onClick={onDownload} 
        disabled={isExporting}
      >
        {isExporting ? "Exporting..." : "Export with Status"}
      </button>
      
      {exportStatus && <div>{exportStatus}</div>}
      
      <table id="data-table">
        {/* Table content */}
      </table>
    </div>
  );
}

Multiple tables in one file

Here is a trick when formatting from HTML table to excel, you can wrap multiple tables in a parent tag and set its id to match the config like the examples above

Example

import { TableToExcelReact } from "table-to-excel-react";

function App() {
  return (
    <div className="App">
      <TableToExcelReact table="table-to-xls" fileName="myFile" sheet="sheet 1">
        <button>Download</button>
      </TableToExcelReact>
      <div id="table-to-xls">
        <table>
          <thead>
            <tr>
              <th>Firstname</th>
              <th>Lastname</th>
              <th>Age</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Edison</td>
              <td>Padilla</td>
              <td>20</td>
            </tr>
            <tr>
              <td>Alberto</td>
              <td>Lopez</td>
              <td>94</td>
            </tr>
          </tbody>
        </table>
        <table>
          <thead>
            <tr>
              <th>Firstname</th>
              <th>Lastname</th>
              <th>Age</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Edison</td>
              <td>Padilla</td>
              <td>20</td>
            </tr>
            <tr>
              <td>Alberto</td>
              <td>Lopez</td>
              <td>94</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  );
}

export default App;

API Reference

TableToExcelReact Props

Property	Type	Description	Default
table	string	ID of table to export (for single table export)	-
tables	string[]	IDs of multiple tables to export to separate sheets	-
sheets	SheetConfig[]	Configuration for multiple sheets with different data sources and styles	-
data	any[][]	Custom data array (2D) for export	-
headers	string[]	Headers for custom data	-
fileName	string	Name of Excel file (without extension)	-
sheet	string	Name of sheet in Excel file (for single table/data export)	"Sheet1"
format	"xlsx" | "xls"	Format of the Excel file	"xlsx"
useLegacyExport	boolean	Whether to use the legacy export method	false
styles	TableStyles	Styles to apply to the Excel file	-
onBeforeExport	() => void	Callback function to execute before export	-
onAfterExport	(success: boolean) => void	Callback function to execute after export	-
id	string	ID attribute for the component	-
className	string	CSS class for the component	-
children	ReactElement	Component that will obtain the onClick event to export to excel (the most common is a button).	-

SheetConfig Interface

Property	Type	Description
name	string	Name of the sheet
tableId	string	Table ID to export (if using HTML tables)
data	any[][]	Custom data to export (if not using HTML tables)
headers	string[]	Headers for custom data
styles	TableStyles	Styles for this sheet

TableStyles Interface

Property	Type	Description
headerRow	CellStyle	Header row styles
dataRow	CellStyle	Data row styles
alternatingRow	CellStyle	Alternating data row styles
cells	Record<string, CellStyle>	Custom cell styles by selector (e.g., "A1:B5")

CellStyle Interface

Property	Type	Description
font	object	Font properties (name, size, color, bold, italic, underline)
fill	object	Fill/background properties (backgroundColor, patternType)
border	object	Border properties for each side (top, bottom, left, right)
alignment	object	Alignment properties (horizontal, vertical, wrapText)
numberFormat	string	Number format

Changelog

For a detailed list of changes for each version, please see the CHANGELOG.md file.

License

ISC License (ISC)