react-xlsx-wrapper
Version:
An important tool to make it easy to work with excel file formats. It supports lots of file formats as well. As this an wrapper around JS API for XLSX package. It does supports basic Cell styling as well as width based on characters. etc. Can be used in a
128 lines (102 loc) • 8.61 kB
Markdown
# React-XLSX-wrapper
[](https://badge.fury.io/js/react-xlsx-wrapper)
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
```
## 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` | `<button>` | `false` | Element to download excel file |
| children | `React.ReactElement<ExcelSheetProps>` | `null` | `true` | ExcelSheet Represents data |
### ExcelSheet Props
| Prop | Type | Default | Required | Description |
| :------- | :---------------------- | :------ | :------- | :----------------- |
| name | `string` | `""` | `true` | Sheet name in file |
| bigHeading | ` ExcelSheetCol` |`undefined`|`false`| Big Merged Cell Heading
| autoFilterForAllColumn | `boolean` | `false` | `false` | Auto Filter Generated Based on Colums
| data | `any[]` | `null` | `false` | Excel Sheet data |
| dataSet | `ExcelSheetData[]` | `null` | `false` | Excel Sheet data |
| children | `ExcelColumn` | `null` | `false` | ExcelColumns |
**Note:** In ExcelSheet props `dataSet` has `precedence` over `data` and `children` props.
For further types and definitions [Read More](types/types.md)
## Cell Style
Cell styles are specified by a style object that roughly parallels the OpenXML structure. The style object has five
top-level attributes: `fill`, `font`, `numFmt`, `alignment`, and `border`.
| Style Attribute | Sub Attributes | Values |
| :-------------- | :------------- | :-------------------------------------------------------------------------------------------- |
| fill | patternType | `"solid"` or `"none"` |
| | fgColor | `COLOR_SPEC` |
| | bgColor | `COLOR_SPEC` |
| font | name | `"Calibri"` // default |
| | sz | `11` // font size in points |
| | color | `COLOR_SPEC` |
| | bold | `true` or `false` |
| | underline | `true` or `false` |
| | italic | `true` or `false` |
| | strike | `true` or `false` |
| | outline | `true` or `false` |
| | shadow | `true` or `false` |
| | vertAlign | `true` or `false` |
| numFmt | | `"0"` // integer index to built in formats, see StyleBuilder.SSF property |
| | | `"0.00%"` // string matching a built-in format, see StyleBuilder.SSF |
| | | `"0.0%"` // string specifying a custom format |
| | | `"0.00%;\\(0.00%\\);\\-;@"` // string specifying a custom format, escaping special characters |
| | | `"m/dd/yy"` // string a date format using Excel's format notation |
| alignment | vertical | `"bottom"` or `"center"` or `"top"` |
| | horizontal | `"bottom"` or `"center"` or `"top"` |
| | wrapText | `true ` or ` false` |
| | readingOrder | `2` // for right-to-left |
| | textRotation | Number from `0` to `180` or `255` (default is `0`) |
| | | `90` is rotated up 90 degrees |
| | | `45` is rotated up 45 degrees |
| | | `135` is rotated down 45 degrees |
| | | `180` is rotated down 180 degrees |
| | | `255` is special, aligned vertically |
| border | top | `{ style: BORDER_STYLE, color: COLOR_SPEC }` |
| | bottom | `{ style: BORDER_STYLE, color: COLOR_SPEC }` |
| | left | `{ style: BORDER_STYLE, color: COLOR_SPEC }` |
| | right | `{ style: BORDER_STYLE, color: COLOR_SPEC }` |
| | diagonal | `{ style: BORDER_STYLE, color: COLOR_SPEC }` |
| | diagonalUp | `true` or `false` |
| | diagonalDown | `true` or `false` |
**COLOR_SPEC**: Colors for `fill`, `font`, and `border` are specified as objects, either:
- `{ auto: 1}` specifying automatic values
- `{ rgb: "FFFFAA00" }` specifying a hex ARGB value
- `{ theme: "1", tint: "-0.25"}` specifying an integer index to a theme color and a tint value (default 0)
- `{ indexed: 64}` default value for `fill.bgColor`
**BORDER_STYLE**: Border style is a string value which may take on one of the following values:
- `thin`
- `medium`
- `thick`
- `dotted`
- `hair`
- `dashed`
- `mediumDashed`
- `dashDot`
- `mediumDashDot`
- `dashDotDot`
- `mediumDashDotDot`
- `slantDashDot`
Borders for merged areas are specified for each cell within the merged area. So to apply a box border to a merged area of 3x3 cells, border styles would need to be specified for eight different cells:
- left borders for the three cells on the left,
- right borders for the cells on the right
- top borders for the cells on the top
- bottom borders for the cells on the left