react-xlsx-wrapper v2.6.0
React-XLSX-wrapper
A data export library built with and for React, Next.js
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:
npm install --save react-xlsx-wrapper@latest
pnpm add react-xlsx-wrapper@latest
yarn add react-xlsx-wrapper@latest
Code Examples
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
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 forfill.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
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago