React-Data-Export

A data export library built with and for React.

Installation

With npm:

npm install react-data-export --save

Code Examples

• Simple Excel Export
• Excel Export with Dataset
• Excel Export with Custom Download Button
• Excel Export with custom cells style

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 | Array<ExcelSheet> | null | true | ExcelSheet Represents data

ExcelSheet Props

| Prop | Type | Default | Required | Description
| :------------ | :---------------------- | :--------- | :------- | :------------------------------- | name | string | "" | true | Sheet name in file | data | array<object> | null | false | Excel Sheet data | dataSet | array<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:

• 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'}
 ]