react-nested-json-table
Version:
A simple React component that renders any deeply nested json into a collapsible table
7 lines • 16.1 kB
JavaScript
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.ReactNestedJsonTable=t(require("react")):e.ReactNestedJsonTable=t(e.React)}(this,function(e){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={exports:{},id:r,loaded:!1};return e[r].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var n={};return t.m=e,t.c=n,t.p="dist/",t(0)}([function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=void 0;var o=n(1),a=r(o);t["default"]=a["default"]},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!==("undefined"==typeof t?"undefined":l(t))&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+("undefined"==typeof t?"undefined":l(t)));e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var l="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol?"symbol":typeof e};Object.defineProperty(t,"__esModule",{value:!0});var u=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}();n(2);var s=n(6),f=r(s),d=n(7),p=r(d),c=n(9),b=r(c),h=function(e){function t(e){return o(this,t),a(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e))}return i(t,e),u(t,[{key:"render",value:function(){var e=this,t=this.props,n=t.data,r=t.parentKey,o=t.expandAll;n=this.ensureChildIsArray(n),this.ensureChildIsObject(n);var a=[],i=[];return n.forEach(function(t,n){for(var l in t){var u=Math.random(),s=t[l],d=r+"/"+n+"/"+l;a.push(f["default"].createElement("th",{key:Math.random()},l));var c=[];if(e.isObject(s)&&(c=e.makeArray(s)),e.isArray(s)&&s.length>0){var b=e.makeArrayForEach(s);i.push(f["default"].createElement("td",{key:u},f["default"].createElement(p["default"],{path:d,data:b,expandAll:o})))}else c.length>0?i.push(f["default"].createElement("td",{key:u},f["default"].createElement(p["default"],{path:d,data:c,expandAll:o}))):i.push(f["default"].createElement("td",{key:u},s?s.toString():""))}}),f["default"].createElement("div",{className:"react-nested-json-table"},f["default"].createElement("table",null,f["default"].createElement("thead",null,f["default"].createElement("tr",null,a)),f["default"].createElement("tbody",null,f["default"].createElement("tr",null,i))))}}]),t}(b["default"]);h.propTypes={data:s.PropTypes.any.isRequired,expandAll:s.PropTypes.bool},t["default"]=h},function(e,t,n){var r=n(3);"string"==typeof r&&(r=[[e.id,r,""]]);n(5)(r,{});r.locals&&(e.exports=r.locals)},function(e,t,n){t=e.exports=n(4)(),t.push([e.id,".divCollapsible--hide{display:none}.spanGlyph--expand{color:#6e6e6e!important;font-size:10px!important;margin-left:-4px!important;margin-right:3px!important;white-space:pre!important;min-height:10px!important;max-height:10px!important;line-height:10px!important}.spanGlyph--expand:hover{cursor:pointer}.react-nested-json-table table td,table td *{vertical-align:top}.react-nested-json-table table{font-size:.85rem;border:1px solid #e0e0e0;border-collapse:collapse;border-spacing:0;empty-cells:show;width:100%}table caption{color:#555;font-size:85%;font-style:italic;line-height:3rem;text-align:center}table thead{background-color:#f5f5f5;text-align:left}table tfoot{background-color:#fbfbfb;border-top:1px solid #e0e0e0}table td,table th{white-space:pre;border-right:1px solid #e0e0e0;line-height:1rem;overflow:visible;padding:.175rem .5em}@media (min-width:480px){table td,table th{line-height:1rem}}table td:last-child,table th:last-child{border-right:none}table td,table tr{-webkit-transition:background-color .15s;transition:background-color .15s}@media (min-width:480px){table{width:auto}}.nonresponsive{width:auto}.nonresponsive td,.nonresponsive th{line-height:2rem}.table--responsive{overflow:auto;width:100%}.table--responsive::-webkit-scrollbar{height:14px;width:14px;-webkit-appearance:none}.table--responsive::-webkit-scrollbar-thumb{background-color:rgba(50,50,50,.2);border:3px solid #fff;border-radius:8px}.table--responsive table{margin-bottom:0}.table--full{width:100%}.table--border{border:1px solid #e0e0e0}.table--border td,.table--border thead{border-bottom:1px solid #e0e0e0}.table--borderOuter{border:1px solid #e0e0e0}.table--borderOuter td,.table--borderOuter th{border-right:none}.table--borderHorizontal td,.table--borderHorizontal thead{border-bottom:1px solid #e0e0e0}.table--borderHorizontal td,.table--borderHorizontal th{border-right:none}.table--flat{border:none}.table--flat td{border-bottom:none}.table--flat td,.table--flat th{border-right:none}.table--fillEven tbody tr:nth-child(even),.table--fillOdd tbody tr:nth-child(odd),.table--hoverCell tbody td:hover,.table--hoverRow tbody tr:hover{background-color:#f5f5f5}.table--truncate{table-layout:fixed}.table--truncate td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}",""])},function(e,t){e.exports=function(){var e=[];return e.toString=function(){for(var e=[],t=0;t<this.length;t++){var n=this[t];n[2]?e.push("@media "+n[2]+"{"+n[1]+"}"):e.push(n[1])}return e.join("")},e.i=function(t,n){"string"==typeof t&&(t=[[null,t,""]]);for(var r={},o=0;o<this.length;o++){var a=this[o][0];"number"==typeof a&&(r[a]=!0)}for(o=0;o<t.length;o++){var i=t[o];"number"==typeof i[0]&&r[i[0]]||(n&&!i[2]?i[2]=n:n&&(i[2]="("+i[2]+") and ("+n+")"),e.push(i))}},e}},function(e,t,n){function r(e,t){for(var n=0;n<e.length;n++){var r=e[n],o=c[r.id];if(o){o.refs++;for(var a=0;a<o.parts.length;a++)o.parts[a](r.parts[a]);for(;a<r.parts.length;a++)o.parts.push(s(r.parts[a],t))}else{for(var i=[],a=0;a<r.parts.length;a++)i.push(s(r.parts[a],t));c[r.id]={id:r.id,refs:1,parts:i}}}}function o(e){for(var t=[],n={},r=0;r<e.length;r++){var o=e[r],a=o[0],i=o[1],l=o[2],u=o[3],s={css:i,media:l,sourceMap:u};n[a]?n[a].parts.push(s):t.push(n[a]={id:a,parts:[s]})}return t}function a(e,t){var n=y(),r=g[g.length-1];if("top"===e.insertAt)r?r.nextSibling?n.insertBefore(t,r.nextSibling):n.appendChild(t):n.insertBefore(t,n.firstChild),g.push(t);else{if("bottom"!==e.insertAt)throw new Error("Invalid value for parameter 'insertAt'. Must be 'top' or 'bottom'.");n.appendChild(t)}}function i(e){e.parentNode.removeChild(e);var t=g.indexOf(e);t>=0&&g.splice(t,1)}function l(e){var t=document.createElement("style");return t.type="text/css",a(e,t),t}function u(e){var t=document.createElement("link");return t.rel="stylesheet",a(e,t),t}function s(e,t){var n,r,o;if(t.singleton){var a=v++;n=m||(m=l(t)),r=f.bind(null,n,a,!1),o=f.bind(null,n,a,!0)}else e.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(n=u(t),r=p.bind(null,n),o=function(){i(n),n.href&&URL.revokeObjectURL(n.href)}):(n=l(t),r=d.bind(null,n),o=function(){i(n)});return r(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap)return;r(e=t)}else o()}}function f(e,t,n,r){var o=n?"":r.css;if(e.styleSheet)e.styleSheet.cssText=x(t,o);else{var a=document.createTextNode(o),i=e.childNodes;i[t]&&e.removeChild(i[t]),i.length?e.insertBefore(a,i[t]):e.appendChild(a)}}function d(e,t){var n=t.css,r=t.media;if(r&&e.setAttribute("media",r),e.styleSheet)e.styleSheet.cssText=n;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(n))}}function p(e,t){var n=t.css,r=t.sourceMap;r&&(n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(r))))+" */");var o=new Blob([n],{type:"text/css"}),a=e.href;e.href=URL.createObjectURL(o),a&&URL.revokeObjectURL(a)}var c={},b=function(e){var t;return function(){return"undefined"==typeof t&&(t=e.apply(this,arguments)),t}},h=b(function(){return/msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase())}),y=b(function(){return document.head||document.getElementsByTagName("head")[0]}),m=null,v=0,g=[];e.exports=function(e,t){t=t||{},"undefined"==typeof t.singleton&&(t.singleton=h()),"undefined"==typeof t.insertAt&&(t.insertAt="bottom");var n=o(e);return r(n,t),function(e){for(var a=[],i=0;i<n.length;i++){var l=n[i],u=c[l.id];u.refs--,a.push(u)}if(e){var s=o(e);r(s,t)}for(var i=0;i<a.length;i++){var u=a[i];if(0===u.refs){for(var f=0;f<u.parts.length;f++)u.parts[f]();delete c[u.id]}}}};var x=function(){var e=[];return function(t,n){return e[t]=n,e.filter(Boolean).join("\n")}}()},function(t,n){t.exports=e},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!==("undefined"==typeof t?"undefined":u(t))&&"function"!=typeof t?e:t}function l(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+("undefined"==typeof t?"undefined":u(t)));e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var u="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol?"symbol":typeof e};Object.defineProperty(t,"__esModule",{value:!0});var s=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),f=n(6),d=r(f),p=n(8),c=r(p),b=n(9),h=r(b),y="▼",m="▶",v=function(e){function t(e){a(this,t);var n=i(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e)),r=e.path,l=e.expandAll,u=o({},r,{display:{"divCollapsible--hide":!l},spanGlyph:{"spanGlyph--expand":!0},expander:l?y:m});return n.state=Object.assign(u,{expanded:l||!1}),n}return l(t,e),s(t,[{key:"handleClick",value:function(e){this.state.expanded?this.setState(o({},e,{display:{"divCollapsible--hide":!0},spanGlyph:{"spanGlyph--expand":!0},expander:m})):this.setState(o({},e,{display:{"divCollapsible--hide":!1},spanGlyph:{"spanGlyph--expand":!0},expander:y})),this.setState({expanded:!this.state.expanded})}},{key:"render",value:function(){var e=this.props,t=e.data,n=e.path,r=e.expandAll;return d["default"].createElement("div",null,d["default"].createElement("span",{className:(0,c["default"])(this.state[n].spanGlyph),onClick:this.handleClick.bind(this,n)},this.state[n].expander)," ",d["default"].createElement("div",{className:(0,c["default"])(this.state[n].display)},d["default"].createElement(h["default"],{data:t,parentKey:n,expandAll:r})))}}]),t}(f.Component);v.propTypes={data:f.PropTypes.any,path:f.PropTypes.string,expandAll:f.PropTypes.bool},t["default"]=v},function(e,t,n){var r,o;/*!
Copyright (c) 2016 Jed Watson.
Licensed under the MIT License (MIT), see
http://jedwatson.github.io/classnames
*/
!function(){"use strict";function n(){for(var e=[],t=0;t<arguments.length;t++){var r=arguments[t];if(r){var o=typeof r;if("string"===o||"number"===o)e.push(r);else if(Array.isArray(r))e.push(n.apply(null,r));else if("object"===o)for(var i in r)a.call(r,i)&&r[i]&&e.push(i)}}return e.join(" ")}var a={}.hasOwnProperty;"undefined"!=typeof e&&e.exports?e.exports=n:(r=[],o=function(){return n}.apply(t,r),!(void 0!==o&&(e.exports=o)))}()},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!==("undefined"==typeof t?"undefined":u(t))&&"function"!=typeof t?e:t}function l(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+("undefined"==typeof t?"undefined":u(t)));e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var u="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol?"symbol":typeof e};Object.defineProperty(t,"__esModule",{value:!0});var s="function"==typeof Symbol&&"symbol"===u(Symbol.iterator)?function(e){return"undefined"==typeof e?"undefined":u(e)}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol?"symbol":"undefined"==typeof e?"undefined":u(e)},f=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),d=n(6),p=r(d),c=n(7),b=r(c),h=function(e){function t(e){a(this,t);var n=i(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.state={},n}return l(t,e),f(t,[{key:"makeArray",value:function(e,t){var n=t||[];return null!=e&&(this.isArray(Object(e))?Object.assign(n,"string"==typeof e?[e]:e):[].push.call(n,e)),n}},{key:"isObject",value:function(e){var t="undefined"==typeof e?"undefined":s(e);return"function"===t||"object"===t&&!!e}},{key:"isArray",value:function(e){return"[object Array]"===Object.prototype.toString.call(e)}},{key:"ensureChildIsObject",value:function(e){for(var t in e){var n=s(e[t]);if(n.search(/^string|number|boolean|function$/i)!=-1){var r=o({},e.length.toString()+" items",e[t]);e[t]=r}}}},{key:"makeArrayForEach",value:function(e){var t=this;return e.map(function(e){return t.isObject(e)?t.makeArray(e):e})}},{key:"ensureChildIsArray",value:function(e){return this.isArray(e)?e:[e]}},{key:"render",value:function(){var e=this,t=this.props,n=t.data,r=t.parentKey,o=t.expandAll;this.ensureChildIsObject(n);var a=[],i=[];return Object.keys(n[0]).forEach(function(e){return a.push(p["default"].createElement("th",{key:Math.random()},isNaN(e)?e:"collection"))}),n.forEach(function(t,n){var a=[];for(var l in t){var u=t[l],s=r+"/"+n+"/"+l,f=[];e.isObject(u)&&(f=e.makeArray(u));var d=[];if(e.isArray(u)&&u.length>0){var c=e.makeArrayForEach(u);d.push(p["default"].createElement("td",{key:Math.random()},p["default"].createElement(b["default"],{path:s,data:c,expandAll:o})))}else f.length>0?d.push(p["default"].createElement("td",{key:Math.random()},p["default"].createElement(b["default"],{path:s,data:f,expandAll:o}))):d.push(p["default"].createElement("td",{key:Math.random()},u?u.toString():""));a.push(d)}i.push(p["default"].createElement("tr",{key:Math.random()},a))}),p["default"].createElement("table",null,p["default"].createElement("thead",null,p["default"].createElement("tr",null,a)),p["default"].createElement("tbody",null,i))}}]),t}(d.Component);h.propTypes={data:d.PropTypes.array.isRequired,parentKey:d.PropTypes.string,expandAll:d.PropTypes.bool},h.defaultProps={parentKey:"root"},t["default"]=h}])});
//# sourceMappingURL=react-nested-json-table.min.map