react-export-table-to-excel
Version:
It allows you to export an HTML table just by sending the table reference and the name with which you want the file to be saved
228 lines (178 loc) • 6.63 kB
Markdown
# ReactExportTableToExcel
Provides a client side generation of Excel (.xls) file from HTML table element.
[](https://npmjs.org/package/react-export-table-to-excel)
---
#### No additional dependencies
---
#### [ReactExportTableToExcel's samples in React.js ( CodeSandbox )](https://codesandbox.io/s/react-export-table-to-excel-sample-dvzkms)
#### [ReactExportTableToExcel's samples in Next.js ( CodeSandbox )](https://codesandbox.io/s/react-export-table-to-excel-next-js-yzl74q)
---
## Installation
```
npm install react-export-table-to-excel
yarn add react-export-table-to-excel
```
## Features
- Download HTML table as Excel file in .xls format
- No server side code
- Set desired .xls filename and sheet
- Hook to export to excel
- Component to export to excel
- Method to export to excel
## Options
- #### Component
A list of available properties can be found below. These must be passed to the containing `DownloadTableExcel` component.
| Property | Type | Description |
| ------------------- | -------------- | ---------------------------------------------------------------------------------------------- |
| **filename** | _string_ | Name of Excel file. |
| **sheet** | _string_ | Name of Excel sheet. |
| **children** | _ReactElement_ | component that will obtain the onClick event to export to excel (the most common is a button). |
| **currentTableRef** | _HTMLElement_ | the current of the table reference. |
#### Example
```javascript
import React, {useRef} from 'react';
import { DownloadTableExcel } from 'react-export-table-to-excel';
const Test = () => {
const tableRef = useRef(null);
return (
<div>
<DownloadTableExcel
filename="users table"
sheet="users"
currentTableRef={tableRef.current}
>
<button> Export excel </button>
</DownloadTableExcel>
<table ref={tableRef}>
<tbody>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<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 Test
```
- #### Hook
A list of available properties can be found below. These must be passed to the containing `useDownloadExcel` hook.
| Property | Type | Description |
| ------------------- | ------------- | ----------------------------------- |
| **filename** | _string_ | Name of Excel file. |
| **sheet** | _string_ | Name of Excel sheet. |
| **currentTableRef** | _HTMLElement_ | the current of the table reference. |
#### Example
```javascript
import React, {useRef} from 'react';
import { useDownloadExcel } from 'react-export-table-to-excel';
const Test = () => {
const tableRef = useRef(null);
const { onDownload } = useDownloadExcel({
currentTableRef: tableRef.current,
filename: 'Users table',
sheet: 'Users'
})
return (
<div>
<button onClick={onDownload}> Export excel </button>
<table ref={tableRef}>
<tbody>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<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 Test
```
- #### Method
A list of available properties can be found below. These must be passed to the downloadExcel method.
| Property | Type | Description |
| ---------------- | -------- | -------------------------- |
| **filename** | _string_ | Name of Excel file. |
| **sheet** | _string_ | Name of Excel sheet. |
| **tablePayload** | _object_ | payload to download excel. |
#### Example
```javascript
import React from "react";
import { downloadExcel } from "react-export-table-to-excel";
const Test = () => {
const header = ["Firstname", "Lastname", "Age"];
const body = [
["Edison", "Padilla", 14],
["Cheila", "Rodrigez", 56],
];
/**
* @description:
* also accepts an array of objects; the method (downloadExcel) will take
* as order of each column, the order that each property of the object brings with it.
* the method(downloadExcel) will only take the value of each property.
*/
const body2 = [
{ firstname: "Edison", lastname: "Padilla", age: 14 },
{ firstname: "Cheila", lastname: "Rodrigez", age: 56 },
];
function handleDownloadExcel() {
downloadExcel({
fileName: "react-export-table-to-excel -> downloadExcel method",
sheet: "react-export-table-to-excel",
tablePayload: {
header,
// accept two different data structures
body: body || body2,
},
});
}
return (
<div>
<button onClick={handleDownloadExcel}>download excel</button>
<table>
<tbody>
<tr>
{header.map((head) => (
<th key={head}> {head} </th>
))}
</tr>
{body.map((item, i) => (
<tr key={i}>
{item.map((it) => (
<td key={it}>{it}</td>
))}
</tr>
))}
</tbody>
</table>
</div>
);
};
export default Test;
```