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