├── .babelrc ├── .eslintrc ├── .gitignore ├── .jshintrc ├── .npmignore ├── .travis.yml ├── LICENSE ├── README.md ├── bin └── server.js ├── dist ├── react-nested-json-table.js ├── react-nested-json-table.map ├── react-nested-json-table.min.js └── react-nested-json-table.min.map ├── example ├── App.js └── index.js ├── gif ├── expand-all.png ├── react-nested-json-table.-2gif.gif └── react-nested-json-table.gif ├── index.template.html ├── karma.conf.js ├── lib ├── index.js └── lib │ ├── JsonNode.js │ ├── NestedJsonTable.js │ ├── Table.js │ └── styles.css ├── package.json ├── server-old.js ├── server.js ├── server ├── index.js ├── lib │ └── apply-express-middleware.js └── middleware │ ├── webpack-dev.js │ └── webpack-hmr.js ├── src ├── index.js └── lib │ ├── JsonNode.js │ ├── NestedJsonTable.js │ ├── Table.js │ └── styles.css ├── static └── images │ ├── expand-all.png │ ├── favicon.ico │ └── react-nested-json-table.gif ├── webpack.config.js └── webpack.prod.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "react", "stage-0"] 3 | } 4 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "ecmaFeatures": { 3 | "jsx": true, 4 | "modules": true 5 | }, 6 | "env": { 7 | "browser": true, 8 | "node": true 9 | }, 10 | "parser": "babel-eslint", 11 | "rules": { 12 | // "quotes": [2, "single"], 13 | // "strict": [2, "never"], 14 | "no-var": 0, 15 | "react/jsx-uses-react": 2, 16 | "react/jsx-uses-vars": 2, 17 | "react/react-in-jsx-scope": 2 18 | }, 19 | "plugins": [ 20 | "react" 21 | ] 22 | } 23 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | npm-debug.log 3 | .DS_Store 4 | jsconfig.json 5 | 6 | react-codemod 7 | dev 8 | journal 9 | journal 10 | gh-pages/ 11 | 12 | static/images/logo.ico 13 | build/ 14 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "node": true, 3 | "browser": true, 4 | "esnext": true, 5 | "newcap": false 6 | } 7 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .eslintrc 2 | .gitignore 3 | .npmignore 4 | .jshintrc 5 | jsconfig.json 6 | 7 | react-codemod 8 | dev 9 | journal 10 | gh-pages 11 | 12 | build/ 13 | example 14 | src/ 15 | server/ 16 | static/ 17 | bin/ 18 | server.js 19 | webpack.config.js 20 | index.template.html 21 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "4" 4 | - "5" 5 | script: 6 | - npm run lint 7 | - npm test 8 | - npm run build 9 | before_install: 10 | - "export DISPLAY=:99.0" 11 | - "sh -e /etc/init.d/xvfb start" 12 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Henry Tao 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-nested-json-table 2 | ======================= 3 | A simple React component that renders any deeply nested json into a collapsible table 4 | 5 | #####Install 6 | ```bash 7 | npm install react-nested-json-table 8 | ``` 9 | 10 | #####Turn this deeply nested json: 11 | 12 | ```javascript 13 | [ 14 | { "foo": 'bar' }, 15 | { 16 | "nested": { "nested-arr": [ 17 | { "simple": "object" }, 18 | { "another-simple": "object" }, 19 | { "arr": ["1", 2, { "variant": "3" }] } ] } 20 | }, 21 | { 22 | "attr0": 6789, 23 | "attr1": [{"key-0": "foo", "key-1": "bar"}], 24 | "attr2": ["mem-0", "mem-1"] 25 | } 26 | ] 27 | ``` 28 | 29 | #####Into this: 30 | ![react-nested-json-table](https://github.com/once-ler/react-nested-json-table/blob/master/static/images/react-nested-json-table.gif) 31 | 32 | #####Since version 0.2.x 33 | Set __expandAll={true}__ to expand all nodes on initial render 34 | ![expand-all](https://github.com/once-ler/react-nested-json-table/blob/master/static/images/expand-all.png) 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /bin/server.js: -------------------------------------------------------------------------------- 1 | // use bluebird for Promises 2 | require('babel-runtime/core-js/promise').default = require('bluebird'); 3 | import server from '../server/index'; 4 | 5 | const port = 3001; 6 | 7 | server.listen(port); 8 | 9 | console.log('Listening at http://localhost:3001'); 10 | -------------------------------------------------------------------------------- /dist/react-nested-json-table.js: -------------------------------------------------------------------------------- 1 | (function webpackUniversalModuleDefinition(root, factory) { 2 | if(typeof exports === 'object' && typeof module === 'object') 3 | module.exports = factory(require("react")); 4 | else if(typeof define === 'function' && define.amd) 5 | define(["react"], factory); 6 | else if(typeof exports === 'object') 7 | exports["ReactNestedJsonTable"] = factory(require("react")); 8 | else 9 | root["ReactNestedJsonTable"] = factory(root["React"]); 10 | })(this, function(__WEBPACK_EXTERNAL_MODULE_6__) { 11 | return /******/ (function(modules) { // webpackBootstrap 12 | /******/ // The module cache 13 | /******/ var installedModules = {}; 14 | /******/ 15 | /******/ // The require function 16 | /******/ function __webpack_require__(moduleId) { 17 | /******/ 18 | /******/ // Check if module is in cache 19 | /******/ if(installedModules[moduleId]) 20 | /******/ return installedModules[moduleId].exports; 21 | /******/ 22 | /******/ // Create a new module (and put it into the cache) 23 | /******/ var module = installedModules[moduleId] = { 24 | /******/ exports: {}, 25 | /******/ id: moduleId, 26 | /******/ loaded: false 27 | /******/ }; 28 | /******/ 29 | /******/ // Execute the module function 30 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 31 | /******/ 32 | /******/ // Flag the module as loaded 33 | /******/ module.loaded = true; 34 | /******/ 35 | /******/ // Return the exports of the module 36 | /******/ return module.exports; 37 | /******/ } 38 | /******/ 39 | /******/ 40 | /******/ // expose the modules object (__webpack_modules__) 41 | /******/ __webpack_require__.m = modules; 42 | /******/ 43 | /******/ // expose the module cache 44 | /******/ __webpack_require__.c = installedModules; 45 | /******/ 46 | /******/ // __webpack_public_path__ 47 | /******/ __webpack_require__.p = "dist/"; 48 | /******/ 49 | /******/ // Load entry module and return exports 50 | /******/ return __webpack_require__(0); 51 | /******/ }) 52 | /************************************************************************/ 53 | /******/ ([ 54 | /* 0 */ 55 | /***/ function(module, exports, __webpack_require__) { 56 | 57 | 'use strict'; 58 | 59 | Object.defineProperty(exports, "__esModule", { 60 | value: true 61 | }); 62 | exports.default = undefined; 63 | 64 | var _NestedJsonTable = __webpack_require__(1); 65 | 66 | var _NestedJsonTable2 = _interopRequireDefault(_NestedJsonTable); 67 | 68 | function _interopRequireDefault(obj) { 69 | return obj && obj.__esModule ? obj : { default: obj }; 70 | } 71 | 72 | exports.default = _NestedJsonTable2.default; 73 | 74 | /***/ }, 75 | /* 1 */ 76 | /***/ function(module, exports, __webpack_require__) { 77 | 78 | 'use strict'; 79 | 80 | var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; }; 81 | 82 | Object.defineProperty(exports, "__esModule", { 83 | value: true 84 | }); 85 | 86 | var _createClass = function () { 87 | function defineProperties(target, props) { 88 | for (var i = 0; i < props.length; i++) { 89 | var descriptor = props[i];descriptor.enumerable = descriptor.enumerable || false;descriptor.configurable = true;if ("value" in descriptor) descriptor.writable = true;Object.defineProperty(target, descriptor.key, descriptor); 90 | } 91 | }return function (Constructor, protoProps, staticProps) { 92 | if (protoProps) defineProperties(Constructor.prototype, protoProps);if (staticProps) defineProperties(Constructor, staticProps);return Constructor; 93 | }; 94 | }(); 95 | 96 | __webpack_require__(2); 97 | 98 | var _react = __webpack_require__(6); 99 | 100 | var _react2 = _interopRequireDefault(_react); 101 | 102 | var _JsonNode = __webpack_require__(7); 103 | 104 | var _JsonNode2 = _interopRequireDefault(_JsonNode); 105 | 106 | var _Table2 = __webpack_require__(9); 107 | 108 | var _Table3 = _interopRequireDefault(_Table2); 109 | 110 | function _interopRequireDefault(obj) { 111 | return obj && obj.__esModule ? obj : { default: obj }; 112 | } 113 | 114 | function _classCallCheck(instance, Constructor) { 115 | if (!(instance instanceof Constructor)) { 116 | throw new TypeError("Cannot call a class as a function"); 117 | } 118 | } 119 | 120 | function _possibleConstructorReturn(self, call) { 121 | if (!self) { 122 | throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); 123 | }return call && ((typeof call === "undefined" ? "undefined" : _typeof(call)) === "object" || typeof call === "function") ? call : self; 124 | } 125 | 126 | function _inherits(subClass, superClass) { 127 | if (typeof superClass !== "function" && superClass !== null) { 128 | throw new TypeError("Super expression must either be null or a function, not " + (typeof superClass === "undefined" ? "undefined" : _typeof(superClass))); 129 | }subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } });if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; 130 | } 131 | 132 | var NestedJsonTable = function (_Table) { 133 | _inherits(NestedJsonTable, _Table); 134 | 135 | function NestedJsonTable(props) { 136 | _classCallCheck(this, NestedJsonTable); 137 | 138 | return _possibleConstructorReturn(this, (NestedJsonTable.__proto__ || Object.getPrototypeOf(NestedJsonTable)).call(this, props)); 139 | } 140 | 141 | _createClass(NestedJsonTable, [{ 142 | key: 'render', 143 | value: function render() { 144 | var _this2 = this; 145 | 146 | var _props = this.props; 147 | var data = _props.data; 148 | var parentKey = _props.parentKey; 149 | var expandAll = _props.expandAll; 150 | 151 | data = this.ensureChildIsArray(data); 152 | this.ensureChildIsObject(data); 153 | 154 | var header = []; 155 | var rows = []; 156 | 157 | data.forEach(function (child, i) { 158 | for (var key in child) { 159 | var n = Math.random(); 160 | var obj = child[key]; 161 | var childKey = parentKey + '/' + i + '/' + key; 162 | 163 | header.push(_react2.default.createElement('th', { key: Math.random() }, key)); 164 | 165 | var o = []; 166 | if (_this2.isObject(obj)) { 167 | o = _this2.makeArray(obj); 168 | } 169 | if (_this2.isArray(obj) && obj.length > 0) { 170 | var modifiedArray = _this2.makeArrayForEach(obj); 171 | rows.push(_react2.default.createElement('td', { key: n }, _react2.default.createElement(_JsonNode2.default, { path: childKey, data: modifiedArray, expandAll: expandAll }))); 172 | } else { 173 | if (o.length > 0) { 174 | rows.push(_react2.default.createElement('td', { key: n }, _react2.default.createElement(_JsonNode2.default, { path: childKey, data: o, expandAll: expandAll }))); 175 | } else { 176 | rows.push(_react2.default.createElement('td', { key: n }, obj ? obj.toString() : '')); 177 | } 178 | } 179 | } 180 | }); 181 | 182 | return _react2.default.createElement('div', { className: 'react-nested-json-table' }, _react2.default.createElement('table', null, _react2.default.createElement('thead', null, _react2.default.createElement('tr', null, header)), _react2.default.createElement('tbody', null, _react2.default.createElement('tr', null, rows)))); 183 | } 184 | }]); 185 | 186 | return NestedJsonTable; 187 | }(_Table3.default); 188 | 189 | NestedJsonTable.propTypes = { 190 | data: _react.PropTypes.any.isRequired, 191 | expandAll: _react.PropTypes.bool 192 | }; 193 | exports.default = NestedJsonTable; 194 | 195 | /***/ }, 196 | /* 2 */ 197 | /***/ function(module, exports, __webpack_require__) { 198 | 199 | // style-loader: Adds some css to the DOM by adding a