Skip to content

Latest commit

 

History

History
201 lines (171 loc) · 4.81 KB

README.md

File metadata and controls

201 lines (171 loc) · 4.81 KB
Raw

Table To Excel - Reactjs

Export data in table to excel file using reactjs.

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 file
  • Set desired .xls filename and sheet
  • No need server side

Usage

with Component

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

Property Type Description
table string Id of table to export
fileName string Name of Excel file
sheet string Name of sheet in Excel file
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">
        <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
table string id of table to export
fileName string Name of Excel file.
sheet string Name of Excel sheet.

Example

import { useDownloadExcel } from "table-to-excel-react";
function App() {
  const { onDownload } = useDownloadExcel({
    fileName: "myFile",
    table: "table-to-xls",
    sheet: "sheet 1",
  });
  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;

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;

License

ISC License (ISC)

Coming soon

  • Export multiple tables to excel
  • Customize styles
  • Export to multiple sheets