├── .babelrc
├── .eslintrc
├── .gitignore
├── LICENSE
├── README.md
├── example
├── src
│ ├── index.ejs
│ └── index.js
└── webpack.config.js
├── lib
└── index.js
├── package.json
├── src
└── index.js
└── yarn.lock
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["es2015", "react"],
3 | "plugins": [
4 | "transform-class-properties"
5 | ]
6 | }
7 |
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "parserOptions": {
3 | "ecmaFeatures": {
4 | "jsx": true,
5 | "jquery" : true
6 | }
7 | },
8 | "parser": "babel-eslint",
9 | "plugins": [
10 | "react"
11 | ],
12 | "extends": ["eslint:recommended", "plugin:react/recommended"],
13 | "rules":{
14 | "no-console":1,
15 | "semi": ["error", "never"],
16 | "curly": ["error", "multi-line"],
17 | "no-extra-bind": "error",
18 | "no-floating-decimal": "error",
19 | "no-multi-spaces": "error",
20 | "yoda": ["error", "never", {"exceptRange":true}],
21 | "array-bracket-spacing": ["error", "never"],
22 | "block-spacing": ["error", "never"],
23 | "brace-style": ["error", "1tbs", {"allowSingleLine": true}],
24 | "comma-spacing": ["error", {"before": false, "after": true}],
25 | "computed-property-spacing": ["error", "never"],
26 | "func-call-spacing": ["error", "never"],
27 | "indent": ["error", 2],
28 | "jsx-quotes": ["error", "prefer-double"],
29 | "keyword-spacing": "error",
30 | "no-trailing-spaces": "error",
31 | "object-curly-newline": ["error", { "multiline": true }],
32 | "object-curly-spacing": ["error", "never"],
33 | "space-before-blocks": "error",
34 | "space-before-function-paren": "error",
35 | "space-in-parens": ["error", "never"],
36 | "spaced-comment": "error",
37 | "arrow-spacing": "error"
38 | },
39 | "globals": {
40 | "$": false,
41 | "global": true,
42 | "APP_ENV": false,
43 | "NODE_ENV": false,
44 | "document": false,
45 | "console": false,
46 | "localStorage": false,
47 | "window": false,
48 | "require": false,
49 | "Promise": false,
50 | "setInterval": false,
51 | "clearInterval": false,
52 | "setTimeout": false,
53 | "clearTimeout": false,
54 | "Blob": false,
55 | "ArrayBuffer": false,
56 | "Uint8Array": false,
57 | "describe": false,
58 | "before": false,
59 | "beforeEach": false,
60 | "it": false,
61 | "exports": false,
62 | "module": false
63 | }
64 | }
65 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | npm-debug.log
4 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2016-present Clear C2, Inc.
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # React Excel Workbook
2 |
3 | React Excel Workbook is a library for defining downloadable excel workbooks with react components.
4 |
5 | ## Example
6 |
7 | ```jsx
8 | import Workbook from 'react-excel-workbook'
9 |
10 | const data1 = [
11 | {
12 | foo: '123',
13 | bar: '456',
14 | baz: '789'
15 | },
16 | {
17 | foo: 'abc',
18 | bar: 'dfg',
19 | baz: 'hij'
20 | },
21 | {
22 | foo: 'aaa',
23 | bar: 'bbb',
24 | baz: 'ccc'
25 | }
26 | ]
27 |
28 | const data2 = [
29 | {
30 | aaa: 1,
31 | bbb: 2,
32 | ccc: 3
33 | },
34 | {
35 | aaa: 4,
36 | bbb: 5,
37 | ccc: 6
38 | }
39 | ]
40 |
41 | const example = (
42 |
43 | Try me!}>
44 |
45 |
46 |
47 |
48 |
49 | row.aaa * 2}/>
50 | Math.pow(row.ccc, 3)}/>
51 |
52 |
53 |
54 | )
55 |
56 | render(example, document.getElementById('app'))
57 | ```
58 |
59 | 
60 | 
61 |
62 | Workbooks can have multiple sheets. Sheets can use the same or different data sets(an array of objects).
63 | Sheets have columns. Columns define a column label and value. Values can either be a string(the property name) or a function
64 | that takes the current object and returns a value.
65 |
66 | ## Dependencies
67 |
68 | This package uses [file-saver](https://www.npmjs.com/package/file-saver) and [xlsx](https://www.npmjs.com/package/xlsx) packages. I am only familiar with webpack and in order for everything to work with webpack you must use the [json-loader](https://www.npmjs.com/package/json-loader) and have this defined in your webpack config.
69 |
70 | ```js
71 | node: {fs: 'empty'},
72 | externals: [
73 | {'./cptable': 'var cptable'},
74 | {'./jszip': 'jszip'}
75 | ]
76 | ```
77 |
78 | See the `example` directory for a working example.
79 |
80 | ## Testing
81 |
82 | I have no idea how to test this.
83 |
--------------------------------------------------------------------------------
/example/src/index.ejs:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | React Excel Workbook
8 |
9 |
10 |
15 |
16 |
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/example/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import {render} from 'react-dom'
3 | import Workbook from '../../src/index'
4 |
5 | const data1 = [
6 | {
7 | foo: '123',
8 | bar: '456',
9 | baz: '789'
10 | },
11 | {
12 | foo: 'abc',
13 | bar: 'dfg',
14 | baz: 'hij'
15 | },
16 | {
17 | foo: 'aaa',
18 | bar: 'bbb',
19 | baz: 'ccc'
20 | }
21 | ]
22 |
23 | const data2 = [
24 | {
25 | aaa: 1,
26 | bbb: 2,
27 | ccc: 3
28 | },
29 | {
30 | aaa: 4,
31 | bbb: 5,
32 | ccc: 6
33 | }
34 | ]
35 |
36 | const example = (
37 |
38 |
39 | Try me!}>
40 | data1} name="Sheet A">
41 |
42 |
43 |
44 |
45 | row.aaa * 2}/>
46 | Math.pow(row.ccc, 3)}/>
47 |
48 |
49 |
50 |