# React-XLSX-wrapper
[![Npm-version][npm-shield]][npm-url]
[![Forks][forks-shield]][forks-url]
[![Stargazers][stars-shield]][stars-url]
[![Issues][issues-shield]][issues-url]
A data export library built with and for [React](https://react.dev/), [Next.js](https://nextjs.org/)
### Note
> Please don't use this package with [2.0.0 - 2.0.7] versions. It has major issues. Either Stick to 1.1.5 or move to 2.0.8 and so on.
## Installation
With [npm](https://www.npmjs.org/package/react-xlsx-wrapper):
```sh
npm install --save react-xlsx-wrapper@latest
```
```sh
pnpm add react-xlsx-wrapper@latest
```
```sh
yarn add react-xlsx-wrapper@latest
```
## Framework Support
### Next.js (App Router)
This library is a **client-only** component — it uses browser APIs (`Blob`, `URL.createObjectURL`) to trigger downloads. Wrap it with `'use client'` in your component:
```tsx
'use client';
import { ExcelFile, ExcelSheet, ExcelColumn } from 'react-xlsx-wrapper';
export function ExportButton({ data }: { data: any[] }) {
return (
Download}>
);
}
```
If the parent is a Server Component, lazy-load to avoid SSR:
```tsx
import dynamic from 'next/dynamic';
const ExportButton = dynamic(() => import('./ExportButton'), { ssr: false });
```
> **Note:** Server-side Excel generation (e.g. from an API route) is not supported. The library is designed for browser downloads only.
### Vite
Works out of the box with Vite via the ESM entry point (`dist/index.mjs`). No additional config needed.
If you encounter CJS interop warnings with an older version of this package, add to `vite.config.ts`:
```ts
optimizeDeps: { include: ['react-xlsx-wrapper', 'xlsx-js-style'] }
```
### TanStack (Router / Query / Table)
Fully compatible. Pass filtered/sorted rows from TanStack Table directly as the `data` prop:
```tsx
'use client'; // if using Next.js App Router
import { useReactTable, getCoreRowModel } from '@tanstack/react-table';
import { ExcelFile, ExcelSheet, ExcelColumn } from 'react-xlsx-wrapper';
export function DataTable({ data }) {
const table = useReactTable({ data, columns, getCoreRowModel: getCoreRowModel() });
return (
<>
{/* your table UI */}
Export}>
r.original)}>
);
}
```
## Code Examples
- [Simple Excel Export](examples/simple_excel_export_01.md)
- [Excel Export with Dataset](examples/simple_excel_export_02.md)
- [Excel Export with custom cells style](examples/styled_excel_sheet.md)
## Excel Props
| Prop | Type | Default | Required | Description |
| :------------ | :------------------ | :--------- | :------- | :------------------------------------------------ |
| hideElement | `bool` | false | `false` | To hide the button & directly download excel file |
| filename | `string` | Download | `false` | Excel file name to be downloaded |
| fileExtension | `string` | xlsx | `false` | Download file extension [xlsx] |
| element | `HTMLElement` | `