React-xlsx-wrapper NPM

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 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: