Skip to content

Commit bccc953

Browse files
afzalahsecuredeveloper
afzalah
authored and
securedeveloper
committed
Improve documentation and implement excel Style, Introduce typing.
1 parent 7a5802b commit bccc953

File tree

22 files changed

+698
-593
lines changed

22 files changed

+698
-593
lines changed

‎.eslintignore‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
node_modules
2-
coverage/
3-
dist/
1+
node_modules/*
2+
coverage/*
3+
dist/*

‎.eslintrc‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22
"extends": "eslint:recommended",
33
"root": true,
44
"parser": "babel-eslint",
5-
"plugins": [ /*"import", */
5+
"plugins": [
6+
/*"import", */
67
"jsx-a11y",
78
"react"
89
],
@@ -290,4 +291,4 @@
290291
// "jsx-a11y/img-redundant-alt": "warn",
291292
// "jsx-a11y/no-access-key": "warn"
292293
}
293-
}
294+
}

‎.npmignore‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
11
.babelrc
2-
lib
32
/.nyc_output/
43
/coverage/

‎README.md‎

Lines changed: 100 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -9,128 +9,110 @@
99

1010
A data export library built with and for [React](http://facebook.github.io/react/index.html).
1111

12-
## Getting Started
12+
## Installation
1313

14-
```javascript
15-
import React from "react"
16-
import * from "react-data-export"
17-
18-
const dataSet1 = [
19-
{
20-
name: "Johson",
21-
amount: 30000,
22-
sex: 'M',
23-
is_married: true
24-
},
25-
{
26-
name: "Monika",
27-
amount: 355000,
28-
sex: 'F',
29-
is_married: false
30-
},
31-
{
32-
name: "John",
33-
amount: 250000,
34-
sex: 'M',
35-
is_married: false
36-
},
37-
{
38-
name: "Josef",
39-
amount: 450500,
40-
sex: 'M',
41-
is_married: true
42-
}
43-
];
44-
45-
var dataSet2 = [
46-
{
47-
name: "Johnson",
48-
total: 25,
49-
remainig: 16
50-
},
51-
{
52-
name: "Josef",
53-
total: 25,
54-
remainig: 7
55-
}
56-
];
57-
58-
class App extends React.Component {
59-
render() {
60-
return (
61-
<ExcelFile>
62-
<ExcelSheet data={dataSet1} name="Employees">
63-
<ExcelColumn label="Name" value="name" />
64-
<ExcelColumn label="Wallet Money" value="amount" />
65-
<ExcelColumn label="Gender" value="sex" />
66-
<ExcelColumn label="Marital Status"
67-
value={(col) => col.is_married ? "Married" : "Single"} />
68-
</ExcelSheet>
69-
<ExcelSheet data={dataSet2} name="Leaves">
70-
<ExcelColumn label="Name" value="name" />
71-
<ExcelColumn label="Total Leaves" value="total" />
72-
<ExcelColumn label="Remaining Leaves" value="remaining" />
73-
</ExcelSheet>
74-
</ExcelFile>
75-
);
76-
}
77-
}
78-
```
79-
80-
![Example](https://i.imgur.com/6fwdJeo.png)
14+
With [npm](https://www.npmjs.org/package/react-data-export):
8115

82-
With release `0.3.0` and upwards you can also pass **multiple** dataset to *ExcelSheet*, and you can have more than one *ExcelSheets* in 1 excel file.
83-
84-
```javascript
85-
/*When you want to use dataSet directly, you can specify multiple data to single ExcelSheet with following structure,
86-
//i.e You can have multiple dataSets on Multiple Sheets in Single Excel File
87-
interface {
88-
xSteps?: number; //How many cells to skips from left (Optional)
89-
ySteps?: number; //How many rows to skips from last data (Optional)
90-
columns: [array | string] //array (required)
91-
data: [array_of_array | string|boolean|number] //array of arrays (required)
92-
}
93-
*/
94-
import React from "react"
95-
import {default as ExcelFile, ExcelSheet} from "react-data-export"
96-
97-
const multiDataSet = [
98-
{
99-
columns: ["Name", "Salary", "Sex"],
100-
data: [
101-
["Johnson", 30000, "Male"],
102-
["Monika", 355000, "Female"],
103-
["Konstantina", 20000, "Female"],
104-
["John", 250000, "Male"],
105-
["Josef", 450500, "Male"],
106-
]
107-
},
108-
{
109-
xSteps: 1, // Will start putting cell with 1 empty cell on left most
110-
ySteps: 5, //will put space of 5 rows,
111-
columns: ["Name", "Department"],
112-
data: [
113-
["Johnson", "Finance"],
114-
["Monika", "IT"],
115-
["Konstantina", "IT Billing"],
116-
["John", "HR"],
117-
["Josef", "Testing"],
118-
]
119-
}
120-
];
121-
122-
class App extends React.Component {
123-
render() {
124-
return (
125-
<ExcelFile>
126-
<ExcelSheet dataSet={multiDataSet} name="Organization" />
127-
<!-- You can add more ExcelSheets if you need -->
128-
</ExcelFile>
129-
);
130-
}
131-
}
16+
```sh
17+
npm install react-data-export --save
13218
```
13319

20+
## Code Examples
21+
* [Simple Excel Export](examples/simple_excel_export_01.md)
22+
* [Excel Export with Dataset](examples/simple_excel_export_02.md)
23+
* [Excel Export with Custom Download Button](examples/with_custom_download_element.md)
24+
* [Excel Export with custom cells style](examples/styled_excel_sheet.md)
25+
26+
## Excel Props
27+
| Prop | Type | Default | Required | Description
28+
| :------------ | :------------------- | :--------- | :------- | :-------------------------------
29+
| filename | `string` | Download | `false` | Excel file name to be downloaded
30+
| fileExtension | `string` | xlsx | `false` | Download file extension [xlsx]
31+
| element | `HTMLElement` | `<button>` | `false` | Element to download excel file
32+
| children | `Array<ExcelSheet>` | `null` | `true` | ExcelSheet Represents data
33+
34+
### ExcelSheet Props
35+
| Prop | Type | Default | Required | Description
36+
| :------------ | :---------------------- | :--------- | :------- | :-------------------------------
37+
| name | `string` | `""` | `true` | Sheet name in file
38+
| data | `array<object>` | `null` | `false` | Excel Sheet data
39+
| dataSet | `array<ExcelSheetData>` | `null` | `false` | Excel Sheet data
40+
| children | `ExcelColumn` | `null` | `false` | ExcelColumns
41+
42+
**Note:** In ExcelSheet props `dataSet` has `presedence` over `data` and `children` props.
43+
44+
For further types and definitions [Read More](types/types.md)
45+
46+
## Cell Style
47+
48+
Cell styles are specified by a style object that roughly parallels the OpenXML structure. The style object has five
49+
top-level attributes: `fill`, `font`, `numFmt`, `alignment`, and `border`.
50+
51+
| Style Attribute | Sub Attributes | Values |
52+
| :-------------- | :------------- | :------------- |
53+
| fill | patternType | `"solid"` or `"none"`
54+
| | fgColor | `COLOR_SPEC`
55+
| | bgColor | `COLOR_SPEC`
56+
| font | name | `"Calibri"` // default
57+
| | sz | `"11"` // font size in points
58+
| | color | `COLOR_SPEC`
59+
| | bold | `true` or `false`
60+
| | underline | `true` or `false`
61+
| | italic | `true` or `false`
62+
| | strike | `true` or `false`
63+
| | outline | `true` or `false`
64+
| | shadow | `true` or `false`
65+
| | vertAlign | `true` or `false`
66+
| numFmt | | `"0"` // integer index to built in formats, see StyleBuilder.SSF property
67+
| | | `"0.00%"` // string matching a built-in format, see StyleBuilder.SSF
68+
| | | `"0.0%"` // string specifying a custom format
69+
| | | `"0.00%;\\(0.00%\\);\\-;@"` // string specifying a custom format, escaping special characters
70+
| | | `"m/dd/yy"` // string a date format using Excel's format notation
71+
| alignment | vertical | `"bottom"` or `"center"` or `"top"`
72+
| | horizontal | `"bottom"` or `"center"` or `"top"`
73+
| | wrapText | `true ` or ` false`
74+
| | readingOrder | `2` // for right-to-left
75+
| | textRotation | Number from `0` to `180` or `255` (default is `0`)
76+
| | | `90` is rotated up 90 degrees
77+
| | | `45` is rotated up 45 degrees
78+
| | | `135` is rotated down 45 degrees
79+
| | | `180` is rotated down 180 degrees
80+
| | | `255` is special, aligned vertically
81+
| border | top | `{ style: BORDER_STYLE, color: COLOR_SPEC }`
82+
| | bottom | `{ style: BORDER_STYLE, color: COLOR_SPEC }`
83+
| | left | `{ style: BORDER_STYLE, color: COLOR_SPEC }`
84+
| | right | `{ style: BORDER_STYLE, color: COLOR_SPEC }`
85+
| | diagonal | `{ style: BORDER_STYLE, color: COLOR_SPEC }`
86+
| | diagonalUp | `true` or `false`
87+
| | diagonalDown | `true` or `false`
88+
89+
**COLOR_SPEC**: Colors for `fill`, `font`, and `border` are specified as objects, either:
90+
* `{ auto: 1}` specifying automatic values
91+
* `{ rgb: "FFFFAA00" }` specifying a hex ARGB value
92+
* `{ theme: "1", tint: "-0.25"}` specifying an integer index to a theme color and a tint value (default 0)
93+
* `{ indexed: 64}` default value for `fill.bgColor`
94+
95+
**BORDER_STYLE**: Border style is a string value which may take on one of the following values:
96+
* `thin`
97+
* `medium`
98+
* `thick`
99+
* `dotted`
100+
* `hair`
101+
* `dashed`
102+
* `mediumDashed`
103+
* `dashDot`
104+
* `mediumDashDot`
105+
* `dashDotDot`
106+
* `mediumDashDotDot`
107+
* `slantDashDot`
108+
109+
110+
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:
111+
* left borders for the three cells on the left,
112+
* right borders for the cells on the right
113+
* top borders for the cells on the top
114+
* bottom borders for the cells on the left
115+
134116

135117
## Dependencies
136118
This library uses [file-saver](https://www.npmjs.com/package/file-saver) and [xlsx](https://www.npmjs.com/package/xlsx) and using [json-loader](https://www.npmjs.com/package/json-loader) will do the magic for you.

‎dist/components/ExcelFile.js‎

Lines changed: 0 additions & 130 deletions
This file was deleted.

0 commit comments

Comments
 (0)