react-export-table-to-excel-xlsx
v1.0.1
Published
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
Downloads
811
Maintainers
Readme
ReactExportTableToExcel
This is a fork of a plugin which is no longer receiving updates.
Provides a client side generation of Excel (.xlsx) file from HTML table element.
No additional dependencies
ReactExportTableToExcel's samples in React.js ( CodeSandbox )
ReactExportTableToExcel's samples in Next.js ( CodeSandbox )
Installation
npm install react-export-table-to-excel
yarn add react-export-table-to-excel
Features
- Download HTML table as Excel file in .xlsx format
- No server side code
- Set desired .xlsx 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
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
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
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;