ReactExportTableToExcel
Provides a client side generation of Excel (.xls) 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 .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
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
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
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;