0.5.0 • Published 6 years ago

react-data-export-wow v0.5.0

Weekly downloads
1
License
MIT
Repository
github
Last release
6 years ago

React-Data-Export

npm version dependencies Status devDependencies Status Build Status Vulnerabilities Coverage Status

A data export library built with and for React.

Installation

With npm:

npm install react-data-export --save

Code Examples

Excel Props

PropTypeDefaultRequiredDescription
hideElementboolfalsefalseTo hide the button & directly download excel file
filenamestringDownloadfalseExcel file name to be downloaded
fileExtensionstringxlsxfalseDownload file extension xlsx
elementHTMLElement<button>falseElement to download excel file
childrenArray<ExcelSheet>nulltrueExcelSheet Represents data

ExcelSheet Props

PropTypeDefaultRequiredDescription
namestring""trueSheet name in file
dataarray<object>nullfalseExcel Sheet data
dataSetarray<ExcelSheetData>nullfalseExcel Sheet data
childrenExcelColumnnullfalseExcelColumns

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 AttributeSub AttributesValues
fillpatternType"solid" or "none"
fgColorCOLOR_SPEC
bgColorCOLOR_SPEC
fontname"Calibri" // default
sz"11" // font size in points
colorCOLOR_SPEC
boldtrue or false
underlinetrue or false
italictrue or false
striketrue or false
outlinetrue or false
shadowtrue or false
vertAligntrue 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
alignmentvertical"bottom" or "center" or "top"
horizontal"bottom" or "center" or "top"
wrapTexttrue or false
readingOrder2 // for right-to-left
textRotationNumber 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
bordertop{ 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 }
diagonalUptrue or false
diagonalDowntrue 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

Dependencies

This library uses file-saver and xlsx and using json-loader will do the magic for you.

///webpack.config.js
vendor: [
        .....
        'xlsx',
        'file-saver'
],
.....
node: {fs: 'empty'},
externals: [
    {'./cptable': 'var cptable'},
    {'./jszip': 'jszip'}
 ]