React html table to excel

ReactHTMLTableToExcel_XLSX

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

Property	Type	Description
table	string	ID attribute of HTML table element.
filename	string	Name of Excel file.
sheet	string	Name of Excel sheet.
id	string	ID attribute of button element.
className	string	Class attribute of button element.
buttonText	string	Button text.

Example

import React, Component> from 'react'; import ReactHTMLTableToExcel from 'react-html-table-to-excel'; class Test extends Component  constructor(props)  super(props); > render()  return ( div> ReactHTMLTableToExcel id="test-table-xls-button" className="download-table-xls-button" table="table-to-xls" filename="tablexls" sheet="tablexls" buttonText="Download as XLS"/> table id="table-to-xls"> tr> th>Firstname/th> th>Lastname/th> th>Age/th> /tr> tr> td>Jill/td> td>Smith/td> td>50/td> /tr> tr> td>Eve/td> td>Jackson/td> td>94/td> /tr> /table> /div> ); > > export default Test

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

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. It gives you two options; a hook and a component . you use whichever one best suits your goal

EdisonJpp/react-export-table-to-excel

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

Provides a client side generation of Excel (.xls) file from HTML table element.

No additional dependencies

npm install react-export-table-to-excel yarn add react-export-table-to-excel 

• 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

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.

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.

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.

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;

About

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. It gives you two options; a hook and a component . you use whichever one best suits your goal

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

License

pineso/react-html-table-to-excel

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

Provides a client side generation of Excel (.xls) file from HTML table element.

No additional dependencies

npm install --save react-html-table-to-excel 

• Download HTML table as Excel file in .xls format
• No server side code
• Set desired .xls filename and sheet
• Set desired class name and id for styling
• Supported IE 11

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

Property	Type	Description
table	string	ID attribute of HTML table element.
filename	string	Name of Excel file.
sheet	string	Name of Excel sheet.
id	string	ID attribute of button element.
className	string	Class attribute of button element.
buttonText	string	Button text.

import React, Component> from 'react'; import ReactHTMLTableToExcel from 'react-html-table-to-excel'; class Test extends Component  constructor(props)  super(props); > render()  return ( div> ReactHTMLTableToExcel id="test-table-xls-button" className="download-table-xls-button" table="table-to-xls" filename="tablexls" sheet="tablexls" buttonText="Download as XLS"/> table id="table-to-xls"> tr> th>Firstname/th> th>Lastname/th> th>Age/th> /tr> tr> td>Jill/td> td>Smith/td> td>50/td> /tr> tr> td>Eve/td> td>Jackson/td> td>94/td> /tr> /table> /div> ); > > export default Test

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Convert HTML table to Excel file and download

License

zsusac/ReactHTMLTableToExcel

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

Provides a client side generation of Excel (.xls) file from HTML table element.

No additional dependencies

npm install --save react-html-table-to-excel 

• Download HTML table as Excel file in .xls format
• No server side code
• Set desired .xls filename and sheet
• Set desired class name and id for styling
• Supported IE 11

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

Property	Type	Description
table	string	ID attribute of HTML table element.
filename	string	Name of Excel file.
sheet	string	Name of Excel sheet.
id	string	ID attribute of button element.
className	string	Class attribute of button element.
buttonText	string	Button text.

import React, Component> from 'react'; import ReactHTMLTableToExcel from 'react-html-table-to-excel'; class Test extends Component  constructor(props)  super(props); > render()  return ( div> ReactHTMLTableToExcel id="test-table-xls-button" className="download-table-xls-button" table="table-to-xls" filename="tablexls" sheet="tablexls" buttonText="Download as XLS"/> table id="table-to-xls"> tr> th>Firstname/th> th>Lastname/th> th>Age/th> /tr> tr> td>Jill/td> td>Smith/td> td>50/td> /tr> tr> td>Eve/td> td>Jackson/td> td>94/td> /tr> /table> /div> ); > > export default Test

About

Convert HTML table to Excel file and download

Источник