How to export tables to Excel in React
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Exporting table data to Excel format is essential for business applications where users need to share or analyze data offline. As the creator of CoreUI, a widely used open-source UI library, I’ve implemented Excel export functionality in countless enterprise dashboards over my 25 years of software development experience. The most reliable solution is to use the SheetJS library (xlsx) which provides comprehensive Excel file generation capabilities. This approach works seamlessly with any table data structure in React.
Use the xlsx library with writeFile to export table data directly to Excel format.
import { saveAs } from 'file-saver'
import * as XLSX from 'xlsx'
const ExportToExcel = ({ data, fileName }) => {
const exportToExcel = () => {
const worksheet = XLSX.utils.json_to_sheet(data)
const workbook = XLSX.utils.book_new()
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' })
const blob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
saveAs(blob, `${fileName}.xlsx`)
}
return <button onClick={exportToExcel}>Export to Excel</button>
}
Best Practice Note
This code creates a worksheet from your JSON data using json_to_sheet, then builds a workbook and exports it as an Excel file. The file-saver library handles the download trigger in the browser. First install the dependencies with npm install xlsx file-saver. You can customize the sheet name, add multiple sheets, or apply Excel formatting using SheetJS advanced options. This is the same reliable approach we use in CoreUI Pro dashboard templates to provide professional data export capabilities for enterprise clients.
