diff --git a/README.md b/README.md index 7c9c68b..93c03de 100644 --- a/README.md +++ b/README.md @@ -68,8 +68,6 @@ ## Installation 1. Install React Table as a dependency ```bash -$ npm install react-table -# or $ yarn add react-table ``` 2. Import the `react-table` module @@ -79,13 +77,25 @@ import ReactTable from 'react-table' // ES5 var ReactTable = require('react-table').default ``` -3. Import styles by including `react-table.css` anywhere on the page +3. Import styles by including `react-table.css` ```javascript // JS (Webpack) import 'react-table/react-table.css' -// html +// Old-school ``` +##### CDN +```html + + + + + + + +``` ## Example diff --git a/docs/iframe.html b/docs/iframe.html index f4dacbe..eadff70 100644 --- a/docs/iframe.html +++ b/docs/iframe.html @@ -16,7 +16,7 @@
- + \ No newline at end of file diff --git a/docs/static/preview.d69dfad9032e3535a779.bundle.js b/docs/static/preview.ddd20fad270a839bfa03.bundle.js similarity index 97% rename from docs/static/preview.d69dfad9032e3535a779.bundle.js rename to docs/static/preview.ddd20fad270a839bfa03.bundle.js index b1a4274..f5baee7 100644 --- a/docs/static/preview.d69dfad9032e3535a779.bundle.js +++ b/docs/static/preview.ddd20fad270a839bfa03.bundle.js @@ -32,7 +32,7 @@ _defineProperty(_ref3,subRowsKey,value),_ref3});return groupedRows=groupedRows.m }Object.defineProperty(exports,"__esModule",{value:!0});var _react=__webpack_require__(1),_react2=_interopRequireDefault(_react),_lodash=__webpack_require__(30),_lodash2=_interopRequireDefault(_lodash),_namor=__webpack_require__(31),_namor2=_interopRequireDefault(_namor),_codeHighlight=__webpack_require__(28),_codeHighlight2=_interopRequireDefault(_codeHighlight),_index=__webpack_require__(27),_index2=_interopRequireDefault(_index),rawData=_lodash2.default.map(_lodash2.default.range(3424),function(d){return{firstName:_namor2.default.generate({words:1,numLen:0}),lastName:_namor2.default.generate({words:1,numLen:0}),age:Math.floor(30*Math.random())}}),requestData=function(pageSize,page,sorting,filtering){return new Promise(function(resolve,reject){var filteredData=rawData;filtering.length&&(filteredData=filtering.reduce(function(filteredSoFar,nextFilter){return filteredSoFar.filter(function(row){return(row[nextFilter.id]+"").includes(nextFilter.value)})},filteredData));var sortedData=_lodash2.default.orderBy(filteredData,sorting.map(function(sort){return function(row){return null===row[sort.id]||void 0===row[sort.id]?-(1/0):"string"==typeof row[sort.id]?row[sort.id].toLowerCase():row[sort.id]}}),sorting.map(function(d){return d.desc?"desc":"asc"})),res={rows:sortedData.slice(pageSize*page,pageSize*page+pageSize),pages:Math.ceil(filteredData.length/pageSize)};setTimeout(function(){return resolve(res)},500)})},ServerSide=_react2.default.createClass({displayName:"ServerSide",getInitialState:function(){return{data:[],pages:null,loading:!0}},fetchData:function(state,instance){var _this=this;this.setState({loading:!0}),requestData(state.pageSize,state.page,state.sorting,state.filtering).then(function(res){console.log(res.rows),_this.setState({data:res.rows,pages:res.pages,loading:!1})})},render:function(){return _react2.default.createElement("div",null,_react2.default.createElement("div",{className:"table-wrap"},_react2.default.createElement(_index2.default,{className:"-striped -highlight",columns:[{header:"First Name",accessor:"firstName"},{header:"Last Name",id:"lastName",accessor:function(d){return d.lastName}},{header:"Age",accessor:"age"}],manual:!0,defaultPageSize:10,showFilters:!0,data:this.state.data,pages:this.state.pages,loading:this.state.loading,onChange:this.fetchData})),_react2.default.createElement("div",{style:{textAlign:"center"}},_react2.default.createElement("br",null),_react2.default.createElement("em",null,"Tip: Hold shift when sorting to multi-sort!")),_react2.default.createElement(_codeHighlight2.default,null,function(){return getCode()}))}});exports.default=function(){return _react2.default.createElement(ServerSide,null)}},function(module,exports,__webpack_require__){"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}function getCode(){return"\nimport ReactTable from 'react-table'\n\n// Create some column definitions\nconst columns = [{\n header: 'Name',\n columns: [{\n header: 'First Name',\n accessor: 'firstName'\n }, {\n header: 'Last Name',\n id: 'lastName',\n accessor: d => d.lastName\n }]\n}, {\n header: 'Info',\n columns: [{\n header: 'Age',\n accessor: 'age'\n }]\n}]\n\n// Display your table!\nreturn (\n \n)\n "}Object.defineProperty(exports,"__esModule",{value:!0});var _react=__webpack_require__(1),_react2=_interopRequireDefault(_react),_lodash=__webpack_require__(30),_lodash2=_interopRequireDefault(_lodash),_namor=__webpack_require__(31),_namor2=_interopRequireDefault(_namor),_codeHighlight=__webpack_require__(28),_codeHighlight2=_interopRequireDefault(_codeHighlight),_index=__webpack_require__(27),_index2=_interopRequireDefault(_index);exports.default=function(){var data=_lodash2.default.map(_lodash2.default.range(5553),function(d){return{firstName:_namor2.default.generate({words:1,numLen:0}),lastName:_namor2.default.generate({words:1,numLen:0}),age:Math.floor(30*Math.random())}}),columns=[{header:"Name",columns:[{header:"First Name",accessor:"firstName"},{header:"Last Name",id:"lastName",accessor:function(d){return d.lastName}}]},{header:"Info",columns:[{header:"Age",accessor:"age"}]}];return _react2.default.createElement("div",null,_react2.default.createElement("div",{className:"table-wrap"},_react2.default.createElement(_index2.default,{className:"-striped -highlight",data:data,columns:columns,defaultPageSize:10})),_react2.default.createElement("div",{style:{textAlign:"center"}},_react2.default.createElement("br",null),_react2.default.createElement("em",null,"Tip: Hold shift when sorting to multi-sort!")),_react2.default.createElement(_codeHighlight2.default,null,function(){return getCode()}))}},function(module,exports,__webpack_require__){"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}function _defineProperty(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}function _possibleConstructorReturn(self,call){if(!self)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!call||"object"!=typeof call&&"function"!=typeof call?self:call}function _inherits(subClass,superClass){if("function"!=typeof superClass&&null!==superClass)throw new TypeError("Super expression must either be null or a function, not "+typeof superClass);subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,enumerable:!1,writable:!0,configurable:!0}}),superClass&&(Object.setPrototypeOf?Object.setPrototypeOf(subClass,superClass):subClass.__proto__=superClass)}Object.defineProperty(exports,"__esModule",{value:!0});var _extends=Object.assign||function(target){for(var i=1;i d.lastName\n }]\n}, {\n header: 'Info',\n columns: [{\n header: 'Age',\n accessor: 'age'\n }]\n}]\n\nexport default (\n {\n return (\n
\n You can put any component you want here, even another React Table!\n
\n
\n {\n return (\n
\n It even has access to the row data: \n {() => JSON.stringify(row, null, 2)}\n
\n )\n }}\n />\n
\n )\n }}\n />\n)\n "}}]),SubComponents}(_react2.default.Component);exports.default=function(){return _react2.default.createElement(SubComponents,null)}},function(module,exports){(function(global){"use strict";var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(){var e=/\blang(?:uage)?-(\w+)\b/i,t=0,n=_self.Prism={util:{encode:function(e){return e instanceof a?new a(e.type,n.util.encode(e.content),e.alias):"Array"===n.util.type(e)?e.map(n.util.encode):e.replace(/&/g,"&").replace(/e.length)break e;if(!(v instanceof a)){u.lastIndex=0;var b=u.exec(v),k=1;if(!b&&h&&m!=r.length-1){if(u.lastIndex=y,b=u.exec(e),!b)break;for(var w=b.index+(c?b[1].length:0),_=b.index+b[0].length,A=m,P=y,j=r.length;j>A&&_>P;++A)P+=r[A].length,w>=P&&(++m,y=P);if(r[m]instanceof a||r[A-1].greedy)continue;k=A-m,v=e.slice(y,P),b.index-=y}if(b){c&&(f=b[1].length);var w=b.index+f,b=b[0].slice(f),_=w+b.length,x=v.slice(0,w),O=v.slice(_),S=[m,k];x&&S.push(x);var N=new a(l,g?n.tokenize(b,g):b,d,b,h);S.push(N),O&&S.push(O),Array.prototype.splice.apply(r,S)}}}}}return r},hooks:{all:{},add:function(e,t){var a=n.hooks.all;a[e]=a[e]||[],a[e].push(t)},run:function(e,t){var a=n.hooks.all[e];if(a&&a.length)for(var r,i=0;r=a[i++];)r(t)}}},a=n.Token=function(e,t,n,a,r){this.type=e,this.content=t,this.alias=n,this.length=0|(a||"").length,this.greedy=!!r};if(a.stringify=function(e,t,r){if("string"==typeof e)return e;if("Array"===n.util.type(e))return e.map(function(n){return a.stringify(n,t,e)}).join("");var i={type:e.type,content:a.stringify(e.content,t,r),tag:"span",classes:["token",e.type],attributes:{},language:t,parent:r};if("comment"==i.type&&(i.attributes.spellcheck="true"),e.alias){var l="Array"===n.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(i.classes,l)}n.hooks.run("wrap",i);var o=Object.keys(i.attributes).map(function(e){return e+'="'+(i.attributes[e]||"").replace(/"/g,""")+'"'}).join(" ");return"<"+i.tag+' class="'+i.classes.join(" ")+'"'+(o?" "+o:"")+">"+i.content+""},!_self.document)return _self.addEventListener?(_self.addEventListener("message",function(e){var t=JSON.parse(e.data),a=t.language,r=t.code,i=t.immediateClose;_self.postMessage(n.highlight(r,n.languages[a],a)),i&&_self.close()},!1),_self.Prism):_self.Prism;var r=document.currentScript||[].slice.call(document.getElementsByTagName("script")).pop();return r&&(n.filename=r.src,document.addEventListener&&!r.hasAttribute("data-manual")&&("loading"!==document.readyState?window.requestAnimationFrame?window.requestAnimationFrame(n.highlightAll):window.setTimeout(n.highlightAll,16):document.addEventListener("DOMContentLoaded",n.highlightAll))),_self.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism),Prism.languages.markup={comment://,prolog:/<\?[\w\W]+?\?>/,doctype://i,cdata://i,tag:{pattern:/<\/?(?!\d)[^\s>\/=$<]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\\1|\\?(?!\1)[\w\W])*\1|[^\s'">=]+))?)*\s*\/?>/i,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/i,inside:{punctuation:/[=>"']/}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:/&#?[\da-z]{1,8};/i},Prism.hooks.add("wrap",function(a){"entity"===a.type&&(a.attributes.title=a.content.replace(/&/,"&"))}),Prism.languages.xml=Prism.languages.markup,Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup,Prism.languages.css={comment:/\/\*[\w\W]*?\*\//,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*\{))/i,inside:{rule:/@[\w-]+/}},url:/url\((?:(["'])(\\(?:\r\n|[\w\W])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,selector:/[^\{\}\s][^\{\};]*?(?=\s*\{)/,string:{pattern:/("|')(\\(?:\r\n|[\w\W])|(?!\1)[^\\\r\n])*\1/,greedy:!0},property:/(\b|\B)[\w-]+(?=\s*:)/i,important:/\B!important\b/i,function:/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:]/},Prism.languages.css.atrule.inside.rest=Prism.util.clone(Prism.languages.css),Prism.languages.markup&&(Prism.languages.insertBefore("markup","tag",{style:{pattern:/()[\w\W]*?(?=<\/style>)/i,lookbehind:!0,inside:Prism.languages.css,alias:"language-css"}}),Prism.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/\s*style=("|').*?\1/i,inside:{"attr-name":{pattern:/^\s*style/i,inside:Prism.languages.markup.tag.inside},punctuation:/^\s*=\s*['"]|['"]\s*$/,"attr-value":{pattern:/.+/i,inside:Prism.languages.css}},alias:"language-css"}},Prism.languages.markup.tag)),Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\w\W]*?\*\//,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0}],string:{pattern:/(["'])(\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/((?:\b(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/i,lookbehind:!0,inside:{punctuation:/(\.|\\)/}},keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,boolean:/\b(true|false)\b/,function:/[a-z0-9_]+(?=\()/i,number:/\b-?(?:0x[\da-f]+|\d*\.?\d+(?:e[+-]?\d+)?)\b/i,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/,punctuation:/[{}[\];(),.:]/},Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|var|void|while|with|yield)\b/,number:/\b-?(0x[\dA-Fa-f]+|0b[01]+|0o[0-7]+|\d*\.?\d+([Ee][+-]?\d+)?|NaN|Infinity)\b/,function:/[_$a-zA-Z\xA0-\uFFFF][_$a-zA-Z0-9\xA0-\uFFFF]*(?=\()/i,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*\*?|\/|~|\^|%|\.{3}/}),Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^\/])\/(?!\/)(\[.+?]|\\.|[^\/\\\r\n])+\/[gimyu]{0,5}(?=\s*($|[\r\n,.;})]))/,lookbehind:!0,greedy:!0}}),Prism.languages.insertBefore("javascript","string",{"template-string":{pattern:/`(?:\\\\|\\?[^\\])*?`/,greedy:!0,inside:{interpolation:{pattern:/\$\{[^}]+\}/,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}}}),Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/()[\w\W]*?(?=<\/script>)/i,lookbehind:!0,inside:Prism.languages.javascript,alias:"language-javascript"}}),Prism.languages.js=Prism.languages.javascript,!function(a){var e=a.util.clone(a.languages.javascript);a.languages.jsx=a.languages.extend("markup",e),a.languages.jsx.tag.pattern=/<\/?[\w\.:-]+\s*(?:\s+[\w\.:-]+(?:=(?:("|')(\\?[\w\W])*?\1|[^\s'">=]+|(\{[\w\W]*?\})))?\s*)*\/?>/i,a.languages.jsx.tag.inside["attr-value"].pattern=/=[^\{](?:('|")[\w\W]*?(\1)|[^\s>]+)/i;var s=a.util.clone(a.languages.jsx);delete s.punctuation,s=a.languages.insertBefore("jsx","operator",{punctuation:/=(?={)|[{}[\];(),.:]/},{jsx:s}),a.languages.insertBefore("inside","attr-value",{script:{pattern:/=(\{(?:\{[^}]*\}|[^}])+\})/i,inside:s,alias:"language-javascript"}},a.languages.jsx.tag)}(Prism),!function(){function e(e,t){return Array.prototype.slice.call((t||document).querySelectorAll(e))}function t(e,t){return t=" "+t+" ",(" "+e.className+" ").replace(/[\n\t]/g," ").indexOf(t)>-1}function n(e,n,i){for(var o,a=n.replace(/\s+/g,"").split(","),l=+e.getAttribute("data-line-offset")||0,d=r()?parseInt:parseFloat,c=d(getComputedStyle(e).lineHeight),s=0;o=a[s++];){o=o.split("-");var u=+o[0],m=+o[1]||u,h=document.createElement("div");h.textContent=Array(m-u+2).join(" \n"),h.setAttribute("aria-hidden","true"),h.className=(i||"")+" line-highlight",t(e,"line-numbers")||(h.setAttribute("data-start",u),m>u&&h.setAttribute("data-end",m)),h.style.top=(u-l-1)*c+"px",t(e,"line-numbers")?e.appendChild(h):(e.querySelector("code")||e).appendChild(h)}}function i(){var t=location.hash.slice(1);e(".temporary.line-highlight").forEach(function(e){e.parentNode.removeChild(e)});var i=(t.match(/\.([\d,-]+)$/)||[,""])[1];if(i&&!document.getElementById(t)){var r=t.slice(0,t.lastIndexOf(".")),o=document.getElementById(r);o&&(o.hasAttribute("data-line")||o.setAttribute("data-line",""),n(o,i,"temporary "),document.querySelector(".temporary.line-highlight").scrollIntoView())}}if("undefined"!=typeof self&&self.Prism&&self.document&&document.querySelector){var r=function(){var e;return function(){if("undefined"==typeof e){var t=document.createElement("div");t.style.fontSize="13px",t.style.lineHeight="1.5",t.style.padding=0,t.style.border=0,t.innerHTML=" 
 ",document.body.appendChild(t),e=38===t.offsetHeight,document.body.removeChild(t)}return e}}(),o=0;Prism.hooks.add("complete",function(t){var r=t.element.parentNode,a=r&&r.getAttribute("data-line");r&&a&&/pre/i.test(r.nodeName)&&(clearTimeout(o),e(".line-highlight",r).forEach(function(e){e.parentNode.removeChild(e)}),n(r,a),o=setTimeout(i,1))}),window.addEventListener&&window.addEventListener("hashchange",i)}}(),!function(){"undefined"!=typeof self&&self.Prism&&self.document&&Prism.hooks.add("complete",function(e){if(e.code){var t=e.element.parentNode,s=/\s*\bline-numbers\b\s*/;if(t&&/pre/i.test(t.nodeName)&&(s.test(t.className)||s.test(e.element.className))&&!e.element.querySelector(".line-numbers-rows")){s.test(e.element.className)&&(e.element.className=e.element.className.replace(s,"")),s.test(t.className)||(t.className+=" line-numbers");var n,a=e.code.match(/\n(?!$)/g),l=a?a.length+1:1,r=new Array(l+1);r=r.join(""),n=document.createElement("span"),n.setAttribute("aria-hidden","true"),n.className="line-numbers-rows",n.innerHTML=r,t.hasAttribute("data-start")&&(t.style.counterReset="linenumber "+(parseInt(t.getAttribute("data-start"),10)-1)),e.element.appendChild(n)}}})}()}).call(exports,function(){return this}())},function(module,exports,__webpack_require__){module.exports={default:__webpack_require__(518),__esModule:!0}},function(module,exports,__webpack_require__){module.exports={default:__webpack_require__(519),__esModule:!0}},function(module,exports,__webpack_require__){module.exports={default:__webpack_require__(520),__esModule:!0}},function(module,exports,__webpack_require__){module.exports={default:__webpack_require__(521),__esModule:!0}},function(module,exports,__webpack_require__){__webpack_require__(525),module.exports=__webpack_require__(11).Number.isNaN},function(module,exports,__webpack_require__){__webpack_require__(526),module.exports=__webpack_require__(11).Number.isSafeInteger},function(module,exports,__webpack_require__){__webpack_require__(527);var $Object=__webpack_require__(11).Object;module.exports=function(T,D){return $Object.defineProperties(T,D)}},function(module,exports,__webpack_require__){__webpack_require__(528),module.exports=__webpack_require__(11).Object.freeze},function(module,exports,__webpack_require__){__webpack_require__(529);var $Object=__webpack_require__(11).Object;module.exports=function(it){return $Object.getOwnPropertyNames(it)}},,function(module,exports,__webpack_require__){var isObject=__webpack_require__(43),floor=Math.floor;module.exports=function(it){return!isObject(it)&&isFinite(it)&&floor(it)===it}},function(module,exports,__webpack_require__){var $export=__webpack_require__(21);$export($export.S,"Number",{isNaN:function(number){return number!=number}})},function(module,exports,__webpack_require__){var $export=__webpack_require__(21),isInteger=__webpack_require__(524),abs=Math.abs;$export($export.S,"Number",{isSafeInteger:function(number){return isInteger(number)&&abs(number)<=9007199254740991}})},function(module,exports,__webpack_require__){var $export=__webpack_require__(21);$export($export.S+$export.F*!__webpack_require__(29),"Object",{defineProperties:__webpack_require__(192)})},function(module,exports,__webpack_require__){var isObject=__webpack_require__(43),meta=__webpack_require__(191).onFreeze;__webpack_require__(121)("freeze",function($freeze){return function(it){return $freeze&&isObject(it)?$freeze(meta(it)):it}})},function(module,exports,__webpack_require__){__webpack_require__(121)("getOwnPropertyNames",function(){return __webpack_require__(193).f})},,function(module,exports){"use strict";exports.__esModule=!0,exports.default={scheme:"apathy",author:"jannik siebert (https://github.com/janniks)",base00:"#031A16",base01:"#0B342D",base02:"#184E45",base03:"#2B685E",base04:"#5F9C92",base05:"#81B5AC",base06:"#A7CEC8",base07:"#D2E7E4",base08:"#3E9688",base09:"#3E7996",base0A:"#3E4C96",base0B:"#883E96",base0C:"#963E4C",base0D:"#96883E",base0E:"#4C963E",base0F:"#3E965B"},module.exports=exports.default},function(module,exports){"use strict";exports.__esModule=!0,exports.default={scheme:"ashes",author:"jannik siebert (https://github.com/janniks)",base00:"#1C2023",base01:"#393F45",base02:"#565E65",base03:"#747C84",base04:"#ADB3BA",base05:"#C7CCD1",base06:"#DFE2E5",base07:"#F3F4F5",base08:"#C7AE95",base09:"#C7C795",base0A:"#AEC795",base0B:"#95C7AE",base0C:"#95AEC7",base0D:"#AE95C7",base0E:"#C795AE",base0F:"#C79595"},module.exports=exports.default},function(module,exports){"use strict";exports.__esModule=!0,exports.default={scheme:"atelier dune",author:"bram de haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/dune)",base00:"#20201d",base01:"#292824",base02:"#6e6b5e",base03:"#7d7a68",base04:"#999580",base05:"#a6a28c",base06:"#e8e4cf",base07:"#fefbec",base08:"#d73737",base09:"#b65611",base0A:"#cfb017",base0B:"#60ac39",base0C:"#1fad83",base0D:"#6684e1",base0E:"#b854d4",base0F:"#d43552"},module.exports=exports.default},function(module,exports){"use strict";exports.__esModule=!0,exports.default={scheme:"atelier forest",author:"bram de haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/forest)",base00:"#1b1918",base01:"#2c2421",base02:"#68615e",base03:"#766e6b",base04:"#9c9491",base05:"#a8a19f",base06:"#e6e2e0",base07:"#f1efee",base08:"#f22c40",base09:"#df5320",base0A:"#d5911a",base0B:"#5ab738",base0C:"#00ad9c",base0D:"#407ee7",base0E:"#6666ea",base0F:"#c33ff3"},module.exports=exports.default},function(module,exports){"use strict";exports.__esModule=!0,exports.default={scheme:"atelier heath",author:"bram de haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/heath)",base00:"#1b181b",base01:"#292329",base02:"#695d69",base03:"#776977",base04:"#9e8f9e",base05:"#ab9bab",base06:"#d8cad8",base07:"#f7f3f7",base08:"#ca402b",base09:"#a65926",base0A:"#bb8a35",base0B:"#379a37",base0C:"#159393",base0D:"#516aec",base0E:"#7b59c0",base0F:"#cc33cc"},module.exports=exports.default},function(module,exports){"use strict";exports.__esModule=!0,exports.default={scheme:"atelier lakeside",author:"bram de haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/lakeside/)",base00:"#161b1d",base01:"#1f292e",base02:"#516d7b",base03:"#5a7b8c",base04:"#7195a8",base05:"#7ea2b4",base06:"#c1e4f6",base07:"#ebf8ff",base08:"#d22d72",base09:"#935c25",base0A:"#8a8a0f",base0B:"#568c3b",base0C:"#2d8f6f",base0D:"#257fad",base0E:"#5d5db1",base0F:"#b72dd2"},module.exports=exports.default},function(module,exports){"use strict";exports.__esModule=!0,exports.default={scheme:"atelier seaside",author:"bram de haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/seaside/)",base00:"#131513",base01:"#242924",base02:"#5e6e5e",base03:"#687d68",base04:"#809980",base05:"#8ca68c",base06:"#cfe8cf",base07:"#f0fff0",base08:"#e6193c",base09:"#87711d",base0A:"#c3c322",base0B:"#29a329",base0C:"#1999b3",base0D:"#3d62f5",base0E:"#ad2bee",base0F:"#e619c3"},module.exports=exports.default},function(module,exports){"use strict";exports.__esModule=!0,exports.default={scheme:"bespin",author:"jan t. sott",base00:"#28211c",base01:"#36312e",base02:"#5e5d5c",base03:"#666666",base04:"#797977",base05:"#8a8986",base06:"#9d9b97",base07:"#baae9e",base08:"#cf6a4c",base09:"#cf7d34",base0A:"#f9ee98",base0B:"#54be0d",base0C:"#afc4db",base0D:"#5ea6ea",base0E:"#9b859d",base0F:"#937121"},module.exports=exports.default},function(module,exports){"use strict";exports.__esModule=!0,exports.default={scheme:"brewer",author:"timothée poisot (http://github.com/tpoisot)",base00:"#0c0d0e",base01:"#2e2f30",base02:"#515253",base03:"#737475",base04:"#959697",base05:"#b7b8b9",base06:"#dadbdc",base07:"#fcfdfe",base08:"#e31a1c",base09:"#e6550d",base0A:"#dca060",base0B:"#31a354",base0C:"#80b1d3",base0D:"#3182bd",base0E:"#756bb1",base0F:"#b15928"},module.exports=exports.default},function(module,exports){"use strict";exports.__esModule=!0,exports.default={scheme:"bright",author:"chris kempson (http://chriskempson.com)",base00:"#000000",base01:"#303030",base02:"#505050",base03:"#b0b0b0",base04:"#d0d0d0",base05:"#e0e0e0",base06:"#f5f5f5",base07:"#ffffff",base08:"#fb0120",base09:"#fc6d24",base0A:"#fda331",base0B:"#a1c659",base0C:"#76c7b7",base0D:"#6fb3d2",base0E:"#d381c3",base0F:"#be643c"},module.exports=exports.default},function(module,exports){"use strict";exports.__esModule=!0,exports.default={scheme:"chalk",author:"chris kempson (http://chriskempson.com)",base00:"#151515",base01:"#202020",base02:"#303030", base03:"#505050",base04:"#b0b0b0",base05:"#d0d0d0",base06:"#e0e0e0",base07:"#f5f5f5",base08:"#fb9fb1",base09:"#eda987",base0A:"#ddb26f",base0B:"#acc267",base0C:"#12cfc0",base0D:"#6fc2ef",base0E:"#e1a3ee",base0F:"#deaf8f"},module.exports=exports.default},function(module,exports){"use strict";exports.__esModule=!0,exports.default={scheme:"codeschool",author:"brettof86",base00:"#232c31",base01:"#1c3657",base02:"#2a343a",base03:"#3f4944",base04:"#84898c",base05:"#9ea7a6",base06:"#a7cfa3",base07:"#b5d8f6",base08:"#2a5491",base09:"#43820d",base0A:"#a03b1e",base0B:"#237986",base0C:"#b02f30",base0D:"#484d79",base0E:"#c59820",base0F:"#c98344"},module.exports=exports.default},function(module,exports){"use strict";exports.__esModule=!0,exports.default={scheme:"colors",author:"mrmrs (http://clrs.cc)",base00:"#111111",base01:"#333333",base02:"#555555",base03:"#777777",base04:"#999999",base05:"#bbbbbb",base06:"#dddddd",base07:"#ffffff",base08:"#ff4136",base09:"#ff851b",base0A:"#ffdc00",base0B:"#2ecc40",base0C:"#7fdbff",base0D:"#0074d9",base0E:"#b10dc9",base0F:"#85144b"},module.exports=exports.default},function(module,exports){"use strict";exports.__esModule=!0,exports.default={scheme:"default",author:"chris kempson (http://chriskempson.com)",base00:"#181818",base01:"#282828",base02:"#383838",base03:"#585858",base04:"#b8b8b8",base05:"#d8d8d8",base06:"#e8e8e8",base07:"#f8f8f8",base08:"#ab4642",base09:"#dc9656",base0A:"#f7ca88",base0B:"#a1b56c",base0C:"#86c1b9",base0D:"#7cafc2",base0E:"#ba8baf",base0F:"#a16946"},module.exports=exports.default},function(module,exports){"use strict";exports.__esModule=!0,exports.default={scheme:"eighties",author:"chris kempson (http://chriskempson.com)",base00:"#2d2d2d",base01:"#393939",base02:"#515151",base03:"#747369",base04:"#a09f93",base05:"#d3d0c8",base06:"#e8e6df",base07:"#f2f0ec",base08:"#f2777a",base09:"#f99157",base0A:"#ffcc66",base0B:"#99cc99",base0C:"#66cccc",base0D:"#6699cc",base0E:"#cc99cc",base0F:"#d27b53"},module.exports=exports.default},function(module,exports){"use strict";exports.__esModule=!0,exports.default={scheme:"embers",author:"jannik siebert (https://github.com/janniks)",base00:"#16130F",base01:"#2C2620",base02:"#433B32",base03:"#5A5047",base04:"#8A8075",base05:"#A39A90",base06:"#BEB6AE",base07:"#DBD6D1",base08:"#826D57",base09:"#828257",base0A:"#6D8257",base0B:"#57826D",base0C:"#576D82",base0D:"#6D5782",base0E:"#82576D",base0F:"#825757"},module.exports=exports.default},function(module,exports){"use strict";exports.__esModule=!0,exports.default={scheme:"flat",author:"chris kempson (http://chriskempson.com)",base00:"#2C3E50",base01:"#34495E",base02:"#7F8C8D",base03:"#95A5A6",base04:"#BDC3C7",base05:"#e0e0e0",base06:"#f5f5f5",base07:"#ECF0F1",base08:"#E74C3C",base09:"#E67E22",base0A:"#F1C40F",base0B:"#2ECC71",base0C:"#1ABC9C",base0D:"#3498DB",base0E:"#9B59B6",base0F:"#be643c"},module.exports=exports.default},function(module,exports){"use strict";exports.__esModule=!0,exports.default={scheme:"google",author:"seth wright (http://sethawright.com)",base00:"#1d1f21",base01:"#282a2e",base02:"#373b41",base03:"#969896",base04:"#b4b7b4",base05:"#c5c8c6",base06:"#e0e0e0",base07:"#ffffff",base08:"#CC342B",base09:"#F96A38",base0A:"#FBA922",base0B:"#198844",base0C:"#3971ED",base0D:"#3971ED",base0E:"#A36AC7",base0F:"#3971ED"},module.exports=exports.default},function(module,exports){"use strict";exports.__esModule=!0,exports.default={scheme:"grayscale",author:"alexandre gavioli (https://github.com/alexx2/)",base00:"#101010",base01:"#252525",base02:"#464646",base03:"#525252",base04:"#ababab",base05:"#b9b9b9",base06:"#e3e3e3",base07:"#f7f7f7",base08:"#7c7c7c",base09:"#999999",base0A:"#a0a0a0",base0B:"#8e8e8e",base0C:"#868686",base0D:"#686868",base0E:"#747474",base0F:"#5e5e5e"},module.exports=exports.default},function(module,exports){"use strict";exports.__esModule=!0,exports.default={scheme:"green screen",author:"chris kempson (http://chriskempson.com)",base00:"#001100",base01:"#003300",base02:"#005500",base03:"#007700",base04:"#009900",base05:"#00bb00",base06:"#00dd00",base07:"#00ff00",base08:"#007700",base09:"#009900",base0A:"#007700",base0B:"#00bb00",base0C:"#005500",base0D:"#009900",base0E:"#00bb00",base0F:"#005500"},module.exports=exports.default},function(module,exports){"use strict";exports.__esModule=!0,exports.default={scheme:"harmonic16",author:"jannik siebert (https://github.com/janniks)",base00:"#0b1c2c",base01:"#223b54",base02:"#405c79",base03:"#627e99",base04:"#aabcce",base05:"#cbd6e2",base06:"#e5ebf1",base07:"#f7f9fb",base08:"#bf8b56",base09:"#bfbf56",base0A:"#8bbf56",base0B:"#56bf8b",base0C:"#568bbf",base0D:"#8b56bf",base0E:"#bf568b",base0F:"#bf5656"},module.exports=exports.default},function(module,exports){"use strict";exports.__esModule=!0,exports.default={scheme:"hopscotch",author:"jan t. sott",base00:"#322931",base01:"#433b42",base02:"#5c545b",base03:"#797379",base04:"#989498",base05:"#b9b5b8",base06:"#d5d3d5",base07:"#ffffff",base08:"#dd464c",base09:"#fd8b19",base0A:"#fdcc59",base0B:"#8fc13e",base0C:"#149b93",base0D:"#1290bf",base0E:"#c85e7c",base0F:"#b33508"},module.exports=exports.default},function(module,exports,__webpack_require__){"use strict";function _interopRequire(obj){return obj&&obj.__esModule?obj.default:obj}exports.__esModule=!0;var _threezerotwofour=__webpack_require__(565);exports.threezerotwofour=_interopRequire(_threezerotwofour);var _apathy=__webpack_require__(531);exports.apathy=_interopRequire(_apathy);var _ashes=__webpack_require__(532);exports.ashes=_interopRequire(_ashes);var _atelierDune=__webpack_require__(533);exports.atelierDune=_interopRequire(_atelierDune);var _atelierForest=__webpack_require__(534);exports.atelierForest=_interopRequire(_atelierForest);var _atelierHeath=__webpack_require__(535);exports.atelierHeath=_interopRequire(_atelierHeath);var _atelierLakeside=__webpack_require__(536);exports.atelierLakeside=_interopRequire(_atelierLakeside);var _atelierSeaside=__webpack_require__(537);exports.atelierSeaside=_interopRequire(_atelierSeaside);var _bespin=__webpack_require__(538);exports.bespin=_interopRequire(_bespin);var _brewer=__webpack_require__(539);exports.brewer=_interopRequire(_brewer);var _bright=__webpack_require__(540);exports.bright=_interopRequire(_bright);var _chalk=__webpack_require__(541);exports.chalk=_interopRequire(_chalk);var _codeschool=__webpack_require__(542);exports.codeschool=_interopRequire(_codeschool);var _colors=__webpack_require__(543);exports.colors=_interopRequire(_colors);var _default=__webpack_require__(544);exports.default=_interopRequire(_default);var _eighties=__webpack_require__(545);exports.eighties=_interopRequire(_eighties);var _embers=__webpack_require__(546);exports.embers=_interopRequire(_embers);var _flat=__webpack_require__(547);exports.flat=_interopRequire(_flat);var _google=__webpack_require__(548);exports.google=_interopRequire(_google);var _grayscale=__webpack_require__(549);exports.grayscale=_interopRequire(_grayscale);var _greenscreen=__webpack_require__(550);exports.greenscreen=_interopRequire(_greenscreen);var _harmonic=__webpack_require__(551);exports.harmonic=_interopRequire(_harmonic);var _hopscotch=__webpack_require__(552);exports.hopscotch=_interopRequire(_hopscotch);var _isotope=__webpack_require__(554);exports.isotope=_interopRequire(_isotope);var _marrakesh=__webpack_require__(555);exports.marrakesh=_interopRequire(_marrakesh);var _mocha=__webpack_require__(556);exports.mocha=_interopRequire(_mocha);var _monokai=__webpack_require__(557);exports.monokai=_interopRequire(_monokai);var _ocean=__webpack_require__(558);exports.ocean=_interopRequire(_ocean);var _paraiso=__webpack_require__(559);exports.paraiso=_interopRequire(_paraiso);var _pop=__webpack_require__(560);exports.pop=_interopRequire(_pop);var _railscasts=__webpack_require__(561);exports.railscasts=_interopRequire(_railscasts);var _shapeshifter=__webpack_require__(562);exports.shapeshifter=_interopRequire(_shapeshifter);var _solarized=__webpack_require__(563);exports.solarized=_interopRequire(_solarized);var _summerfruit=__webpack_require__(564);exports.summerfruit=_interopRequire(_summerfruit);var _tomorrow=__webpack_require__(566);exports.tomorrow=_interopRequire(_tomorrow);var _tube=__webpack_require__(567);exports.tube=_interopRequire(_tube);var _twilight=__webpack_require__(568);exports.twilight=_interopRequire(_twilight)},function(module,exports){"use strict";exports.__esModule=!0,exports.default={scheme:"isotope",author:"jan t. sott",base00:"#000000",base01:"#404040",base02:"#606060",base03:"#808080",base04:"#c0c0c0",base05:"#d0d0d0",base06:"#e0e0e0",base07:"#ffffff",base08:"#ff0000",base09:"#ff9900",base0A:"#ff0099",base0B:"#33ff00",base0C:"#00ffff",base0D:"#0066ff",base0E:"#cc00ff",base0F:"#3300ff"},module.exports=exports.default},function(module,exports){"use strict";exports.__esModule=!0,exports.default={scheme:"marrakesh",author:"alexandre gavioli (http://github.com/alexx2/)",base00:"#201602",base01:"#302e00",base02:"#5f5b17",base03:"#6c6823",base04:"#86813b",base05:"#948e48",base06:"#ccc37a",base07:"#faf0a5",base08:"#c35359",base09:"#b36144",base0A:"#a88339",base0B:"#18974e",base0C:"#75a738",base0D:"#477ca1",base0E:"#8868b3",base0F:"#b3588e"},module.exports=exports.default},function(module,exports){"use strict";exports.__esModule=!0,exports.default={scheme:"mocha",author:"chris kempson (http://chriskempson.com)",base00:"#3B3228",base01:"#534636",base02:"#645240",base03:"#7e705a",base04:"#b8afad",base05:"#d0c8c6",base06:"#e9e1dd",base07:"#f5eeeb",base08:"#cb6077",base09:"#d28b71",base0A:"#f4bc87",base0B:"#beb55b",base0C:"#7bbda4",base0D:"#8ab3b5",base0E:"#a89bb9",base0F:"#bb9584"},module.exports=exports.default},function(module,exports){"use strict";exports.__esModule=!0,exports.default={scheme:"monokai",author:"wimer hazenberg (http://www.monokai.nl)",base00:"#272822",base01:"#383830",base02:"#49483e",base03:"#75715e",base04:"#a59f85",base05:"#f8f8f2",base06:"#f5f4f1",base07:"#f9f8f5",base08:"#f92672",base09:"#fd971f",base0A:"#f4bf75",base0B:"#a6e22e",base0C:"#a1efe4",base0D:"#66d9ef",base0E:"#ae81ff",base0F:"#cc6633"},module.exports=exports.default},function(module,exports){"use strict";exports.__esModule=!0,exports.default={scheme:"ocean",author:"chris kempson (http://chriskempson.com)",base00:"#2b303b",base01:"#343d46",base02:"#4f5b66",base03:"#65737e",base04:"#a7adba",base05:"#c0c5ce",base06:"#dfe1e8",base07:"#eff1f5",base08:"#bf616a",base09:"#d08770",base0A:"#ebcb8b",base0B:"#a3be8c",base0C:"#96b5b4",base0D:"#8fa1b3",base0E:"#b48ead",base0F:"#ab7967"},module.exports=exports.default},function(module,exports){"use strict";exports.__esModule=!0,exports.default={scheme:"paraiso",author:"jan t. sott",base00:"#2f1e2e",base01:"#41323f",base02:"#4f424c",base03:"#776e71",base04:"#8d8687",base05:"#a39e9b",base06:"#b9b6b0",base07:"#e7e9db",base08:"#ef6155",base09:"#f99b15",base0A:"#fec418",base0B:"#48b685",base0C:"#5bc4bf",base0D:"#06b6ef",base0E:"#815ba4",base0F:"#e96ba8"},module.exports=exports.default},function(module,exports){"use strict";exports.__esModule=!0,exports.default={scheme:"pop",author:"chris kempson (http://chriskempson.com)",base00:"#000000",base01:"#202020",base02:"#303030",base03:"#505050",base04:"#b0b0b0",base05:"#d0d0d0",base06:"#e0e0e0",base07:"#ffffff",base08:"#eb008a",base09:"#f29333",base0A:"#f8ca12",base0B:"#37b349",base0C:"#00aabb",base0D:"#0e5a94",base0E:"#b31e8d",base0F:"#7a2d00"},module.exports=exports.default},function(module,exports){"use strict";exports.__esModule=!0,exports.default={scheme:"railscasts",author:"ryan bates (http://railscasts.com)",base00:"#2b2b2b",base01:"#272935",base02:"#3a4055",base03:"#5a647e",base04:"#d4cfc9",base05:"#e6e1dc",base06:"#f4f1ed",base07:"#f9f7f3",base08:"#da4939",base09:"#cc7833",base0A:"#ffc66d",base0B:"#a5c261",base0C:"#519f50",base0D:"#6d9cbe",base0E:"#b6b3eb",base0F:"#bc9458"},module.exports=exports.default},function(module,exports){"use strict";exports.__esModule=!0,exports.default={scheme:"shapeshifter",author:"tyler benziger (http://tybenz.com)",base00:"#000000",base01:"#040404",base02:"#102015",base03:"#343434",base04:"#555555",base05:"#ababab",base06:"#e0e0e0",base07:"#f9f9f9",base08:"#e92f2f",base09:"#e09448",base0A:"#dddd13",base0B:"#0ed839",base0C:"#23edda",base0D:"#3b48e3",base0E:"#f996e2",base0F:"#69542d"},module.exports=exports.default},function(module,exports){"use strict";exports.__esModule=!0,exports.default={scheme:"solarized",author:"ethan schoonover (http://ethanschoonover.com/solarized)",base00:"#002b36",base01:"#073642",base02:"#586e75",base03:"#657b83",base04:"#839496",base05:"#93a1a1",base06:"#eee8d5",base07:"#fdf6e3",base08:"#dc322f",base09:"#cb4b16",base0A:"#b58900",base0B:"#859900",base0C:"#2aa198",base0D:"#268bd2",base0E:"#6c71c4",base0F:"#d33682"},module.exports=exports.default},function(module,exports){"use strict";exports.__esModule=!0,exports.default={scheme:"summerfruit",author:"christopher corley (http://cscorley.github.io/)",base00:"#151515",base01:"#202020",base02:"#303030",base03:"#505050",base04:"#B0B0B0",base05:"#D0D0D0",base06:"#E0E0E0",base07:"#FFFFFF",base08:"#FF0086",base09:"#FD8900",base0A:"#ABA800",base0B:"#00C918",base0C:"#1faaaa",base0D:"#3777E6",base0E:"#AD00A1",base0F:"#cc6633"},module.exports=exports.default},function(module,exports){"use strict";exports.__esModule=!0,exports.default={scheme:"threezerotwofour",author:"jan t. sott (http://github.com/idleberg)",base00:"#090300",base01:"#3a3432",base02:"#4a4543",base03:"#5c5855",base04:"#807d7c",base05:"#a5a2a2",base06:"#d6d5d4",base07:"#f7f7f7",base08:"#db2d20",base09:"#e8bbd0",base0A:"#fded02",base0B:"#01a252",base0C:"#b5e4f4",base0D:"#01a0e4",base0E:"#a16a94",base0F:"#cdab53"},module.exports=exports.default},function(module,exports){"use strict";exports.__esModule=!0,exports.default={scheme:"tomorrow",author:"chris kempson (http://chriskempson.com)",base00:"#1d1f21",base01:"#282a2e",base02:"#373b41",base03:"#969896",base04:"#b4b7b4",base05:"#c5c8c6",base06:"#e0e0e0",base07:"#ffffff",base08:"#cc6666",base09:"#de935f",base0A:"#f0c674",base0B:"#b5bd68",base0C:"#8abeb7",base0D:"#81a2be",base0E:"#b294bb",base0F:"#a3685a"},module.exports=exports.default},function(module,exports){"use strict";exports.__esModule=!0,exports.default={scheme:"london tube",author:"jan t. sott",base00:"#231f20",base01:"#1c3f95",base02:"#5a5758",base03:"#737171",base04:"#959ca1",base05:"#d9d8d8",base06:"#e7e7e8",base07:"#ffffff",base08:"#ee2e24",base09:"#f386a1",base0A:"#ffd204",base0B:"#00853e",base0C:"#85cebc",base0D:"#009ddc",base0E:"#98005d",base0F:"#b06110"},module.exports=exports.default},function(module,exports){"use strict";exports.__esModule=!0,exports.default={scheme:"twilight",author:"david hart (http://hart-dev.com)",base00:"#1e1e1e",base01:"#323537",base02:"#464b50",base03:"#5f5a60",base04:"#838184",base05:"#a7a7a7",base06:"#c3c3c3",base07:"#ffffff",base08:"#cf6a4c",base09:"#cda869",base0A:"#f9ee98",base0B:"#8f9d6a",base0C:"#afc4db",base0D:"#7587a6",base0E:"#9b859d",base0F:"#9b703f"},module.exports=exports.default},function(module,exports,__webpack_require__){"use strict";var rgb=__webpack_require__(422),yuv=module.exports={name:"yuv",min:[0,-.5,-.5],max:[1,.5,.5],channel:["Y","U","V"],alias:["YUV","EBU"]};yuv.rgb=function(yuv){var r,g,b,y=yuv[0],u=yuv[1],v=yuv[2];return r=1*y+0*u+1.13983*v,g=1*y+u*-.39465+v*-.5806,b=1*y+2.02311*u+0*v,r=Math.min(Math.max(0,r),1),g=Math.min(Math.max(0,g),1),b=Math.min(Math.max(0,b),1),[255*r,255*g,255*b]},rgb.yuv=function(rgb){var r=rgb[0]/255,g=rgb[1]/255,b=rgb[2]/255,y=.299*r+.587*g+.114*b,u=r*-.14713+g*-.28886+.436*b,v=.615*r+g*-.51499+b*-.10001;return[y,u,v]}},function(module,exports,__webpack_require__){"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}Object.defineProperty(exports,"__esModule",{value:!0});var _taggedTemplateLiteral2=__webpack_require__(421),_taggedTemplateLiteral3=_interopRequireDefault(_taggedTemplateLiteral2),_classCallCheck2=__webpack_require__(7),_classCallCheck3=_interopRequireDefault(_classCallCheck2),_createClass2=__webpack_require__(10),_createClass3=_interopRequireDefault(_createClass2),_templateObject=(0,_taggedTemplateLiteral3.default)(["",""],["",""]),TemplateTag=function(){function TemplateTag(){for(var _len=arguments.length,transformers=Array(_len),_key=0;_key<_len;_key++)transformers[_key]=arguments[_key];return(0,_classCallCheck3.default)(this,TemplateTag),transformers.length&&Array.isArray(transformers[0])&&(transformers=transformers[0]),this.transformers=transformers.map(function(transformer){return"function"==typeof transformer?transformer():transformer}),this.tag.bind(this)}return(0,_createClass3.default)(TemplateTag,[{key:"tag",value:function(){for(var _len2=arguments.length,args=Array(_len2),_key2=0;_key2<_len2;_key2++)args[_key2]=arguments[_key2];return"function"==typeof args[0]?this.interimTag.bind(this,args.shift()):this.transformEndResult(args.shift().reduce(this.processSubstitutions.bind(this,args)))}},{key:"interimTag",value:function(previousTag,template){for(var _len3=arguments.length,substitutions=Array(_len3>2?_len3-2:0),_key3=2;_key3<_len3;_key3++)substitutions[_key3-2]=arguments[_key3];return this.tag(_templateObject,previousTag.apply(void 0,[template].concat(substitutions)))}},{key:"processSubstitutions",value:function(substitutions,resultSoFar,remainingPart){var substitution=this.transformSubstitution(substitutions.shift(),resultSoFar);return resultSoFar+substitution+remainingPart}},{key:"transformSubstitution",value:function(substitution,resultSoFar){var cb=function(res,transform){return transform.onSubstitution?transform.onSubstitution(res,resultSoFar):res};return this.transformers.reduce(cb,substitution)}},{key:"transformEndResult",value:function(endResult){var cb=function(res,transform){return transform.onEndResult?transform.onEndResult(res):res};return this.transformers.reduce(cb,endResult)}}]),TemplateTag}();exports.default=TemplateTag,module.exports=exports.default},function(module,exports,__webpack_require__){"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _html=__webpack_require__(256),_html2=_interopRequireDefault(_html);exports.default=_html2.default,module.exports=exports.default},function(module,exports,__webpack_require__){"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}Object.defineProperty(exports,"__esModule",{value:!0});var _TemplateTag=__webpack_require__(35),_TemplateTag2=_interopRequireDefault(_TemplateTag),_stripIndentTransformer=__webpack_require__(68),_stripIndentTransformer2=_interopRequireDefault(_stripIndentTransformer),_inlineArrayTransformer=__webpack_require__(56),_inlineArrayTransformer2=_interopRequireDefault(_inlineArrayTransformer),_trimResultTransformer=__webpack_require__(36),_trimResultTransformer2=_interopRequireDefault(_trimResultTransformer),commaLists=new _TemplateTag2.default((0,_inlineArrayTransformer2.default)({separator:","}),_stripIndentTransformer2.default,_trimResultTransformer2.default);exports.default=commaLists,module.exports=exports.default},function(module,exports,__webpack_require__){"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _commaLists=__webpack_require__(572),_commaLists2=_interopRequireDefault(_commaLists);exports.default=_commaLists2.default,module.exports=exports.default},function(module,exports,__webpack_require__){"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}Object.defineProperty(exports,"__esModule",{value:!0});var _TemplateTag=__webpack_require__(35),_TemplateTag2=_interopRequireDefault(_TemplateTag),_stripIndentTransformer=__webpack_require__(68),_stripIndentTransformer2=_interopRequireDefault(_stripIndentTransformer),_inlineArrayTransformer=__webpack_require__(56),_inlineArrayTransformer2=_interopRequireDefault(_inlineArrayTransformer),_trimResultTransformer=__webpack_require__(36),_trimResultTransformer2=_interopRequireDefault(_trimResultTransformer),commaListsAnd=new _TemplateTag2.default((0,_inlineArrayTransformer2.default)({separator:",",conjunction:"and"}),_stripIndentTransformer2.default,_trimResultTransformer2.default);exports.default=commaListsAnd,module.exports=exports.default},function(module,exports,__webpack_require__){"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _commaListsAnd=__webpack_require__(574),_commaListsAnd2=_interopRequireDefault(_commaListsAnd);exports.default=_commaListsAnd2.default,module.exports=exports.default},function(module,exports,__webpack_require__){"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}Object.defineProperty(exports,"__esModule",{value:!0});var _TemplateTag=__webpack_require__(35),_TemplateTag2=_interopRequireDefault(_TemplateTag),_stripIndentTransformer=__webpack_require__(68),_stripIndentTransformer2=_interopRequireDefault(_stripIndentTransformer),_inlineArrayTransformer=__webpack_require__(56),_inlineArrayTransformer2=_interopRequireDefault(_inlineArrayTransformer),_trimResultTransformer=__webpack_require__(36),_trimResultTransformer2=_interopRequireDefault(_trimResultTransformer),commaListsOr=new _TemplateTag2.default((0,_inlineArrayTransformer2.default)({separator:",",conjunction:"or"}),_stripIndentTransformer2.default,_trimResultTransformer2.default);exports.default=commaListsOr,module.exports=exports.default},function(module,exports,__webpack_require__){"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _commaListsOr=__webpack_require__(576),_commaListsOr2=_interopRequireDefault(_commaListsOr);exports.default=_commaListsOr2.default,module.exports=exports.default},function(module,exports,__webpack_require__){"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}Object.defineProperty(exports,"__esModule",{value:!0});var _TemplateTag=__webpack_require__(35),_TemplateTag2=_interopRequireDefault(_TemplateTag),_stripIndentTransformer=__webpack_require__(68),_stripIndentTransformer2=_interopRequireDefault(_stripIndentTransformer),_inlineArrayTransformer=__webpack_require__(56),_inlineArrayTransformer2=_interopRequireDefault(_inlineArrayTransformer),_trimResultTransformer=__webpack_require__(36),_trimResultTransformer2=_interopRequireDefault(_trimResultTransformer),_splitStringTransformer=__webpack_require__(257),_splitStringTransformer2=_interopRequireDefault(_splitStringTransformer),_removeNonPrintingValuesTransformer=__webpack_require__(423),_removeNonPrintingValuesTransformer2=_interopRequireDefault(_removeNonPrintingValuesTransformer),html=new _TemplateTag2.default((0,_splitStringTransformer2.default)("\n"),_removeNonPrintingValuesTransformer2.default,_inlineArrayTransformer2.default,_stripIndentTransformer2.default,_trimResultTransformer2.default);exports.default=html,module.exports=exports.default},function(module,exports,__webpack_require__){"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}Object.defineProperty(exports,"__esModule",{value:!0}),exports.stripIndents=exports.stripIndent=exports.oneLineInlineLists=exports.inlineLists=exports.oneLineCommaListsAnd=exports.oneLineCommaListsOr=exports.oneLineCommaLists=exports.oneLineTrim=exports.oneLine=exports.safeHtml=exports.source=exports.codeBlock=exports.html=exports.commaListsOr=exports.commaListsAnd=exports.commaLists=exports.removeNonPrintingValuesTransformer=exports.splitStringTransformer=exports.inlineArrayTransformer=exports.replaceSubstitutionTransformer=exports.replaceResultTransformer=exports.stripIndentTransformer=exports.trimResultTransformer=exports.TemplateTag=void 0;var _TemplateTag2=__webpack_require__(35),_TemplateTag3=_interopRequireDefault(_TemplateTag2),_trimResultTransformer2=__webpack_require__(36),_trimResultTransformer3=_interopRequireDefault(_trimResultTransformer2),_stripIndentTransformer2=__webpack_require__(68),_stripIndentTransformer3=_interopRequireDefault(_stripIndentTransformer2),_replaceResultTransformer2=__webpack_require__(92),_replaceResultTransformer3=_interopRequireDefault(_replaceResultTransformer2),_replaceSubstitutionTransformer2=__webpack_require__(424),_replaceSubstitutionTransformer3=_interopRequireDefault(_replaceSubstitutionTransformer2),_inlineArrayTransformer2=__webpack_require__(56),_inlineArrayTransformer3=_interopRequireDefault(_inlineArrayTransformer2),_splitStringTransformer2=__webpack_require__(257),_splitStringTransformer3=_interopRequireDefault(_splitStringTransformer2),_removeNonPrintingValuesTransformer2=__webpack_require__(423),_removeNonPrintingValuesTransformer3=_interopRequireDefault(_removeNonPrintingValuesTransformer2),_commaLists2=__webpack_require__(573),_commaLists3=_interopRequireDefault(_commaLists2),_commaListsAnd2=__webpack_require__(575),_commaListsAnd3=_interopRequireDefault(_commaListsAnd2),_commaListsOr2=__webpack_require__(577),_commaListsOr3=_interopRequireDefault(_commaListsOr2),_html2=__webpack_require__(256),_html3=_interopRequireDefault(_html2),_codeBlock2=__webpack_require__(571),_codeBlock3=_interopRequireDefault(_codeBlock2),_source2=__webpack_require__(600),_source3=_interopRequireDefault(_source2),_safeHtml2=__webpack_require__(598),_safeHtml3=_interopRequireDefault(_safeHtml2),_oneLine2=__webpack_require__(583),_oneLine3=_interopRequireDefault(_oneLine2),_oneLineTrim2=__webpack_require__(593),_oneLineTrim3=_interopRequireDefault(_oneLineTrim2),_oneLineCommaLists2=__webpack_require__(585),_oneLineCommaLists3=_interopRequireDefault(_oneLineCommaLists2),_oneLineCommaListsOr2=__webpack_require__(589),_oneLineCommaListsOr3=_interopRequireDefault(_oneLineCommaListsOr2),_oneLineCommaListsAnd2=__webpack_require__(587),_oneLineCommaListsAnd3=_interopRequireDefault(_oneLineCommaListsAnd2),_inlineLists2=__webpack_require__(581),_inlineLists3=_interopRequireDefault(_inlineLists2),_oneLineInlineLists2=__webpack_require__(591),_oneLineInlineLists3=_interopRequireDefault(_oneLineInlineLists2),_stripIndent2=__webpack_require__(602),_stripIndent3=_interopRequireDefault(_stripIndent2),_stripIndents2=__webpack_require__(605),_stripIndents3=_interopRequireDefault(_stripIndents2);exports.TemplateTag=_TemplateTag3.default,exports.trimResultTransformer=_trimResultTransformer3.default,exports.stripIndentTransformer=_stripIndentTransformer3.default,exports.replaceResultTransformer=_replaceResultTransformer3.default,exports.replaceSubstitutionTransformer=_replaceSubstitutionTransformer3.default,exports.inlineArrayTransformer=_inlineArrayTransformer3.default,exports.splitStringTransformer=_splitStringTransformer3.default,exports.removeNonPrintingValuesTransformer=_removeNonPrintingValuesTransformer3.default,exports.commaLists=_commaLists3.default,exports.commaListsAnd=_commaListsAnd3.default,exports.commaListsOr=_commaListsOr3.default,exports.html=_html3.default,exports.codeBlock=_codeBlock3.default,exports.source=_source3.default,exports.safeHtml=_safeHtml3.default,exports.oneLine=_oneLine3.default,exports.oneLineTrim=_oneLineTrim3.default,exports.oneLineCommaLists=_oneLineCommaLists3.default,exports.oneLineCommaListsOr=_oneLineCommaListsOr3.default,exports.oneLineCommaListsAnd=_oneLineCommaListsAnd3.default,exports.inlineLists=_inlineLists3.default,exports.oneLineInlineLists=_oneLineInlineLists3.default,exports.stripIndent=_stripIndent3.default,exports.stripIndents=_stripIndents3.default},function(module,exports){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var defaults={separator:"",conjunction:"",serial:!1},inlineArrayTransformer=function(){var opts=arguments.length>0&&void 0!==arguments[0]?arguments[0]:defaults;return{onSubstitution:function(substitution,resultSoFar){if(Array.isArray(substitution)){var separator=opts.separator,conjunction=opts.conjunction,serial=opts.serial,indent=resultSoFar.match(/(\s+)$/);if(substitution=indent?substitution.join(separator+indent[1]):substitution.join(separator+" "),conjunction){var separatorIndex=substitution.lastIndexOf(separator);substitution=substitution.substr(0,separatorIndex)+(serial?separator:"")+" "+conjunction+substitution.substr(separatorIndex+1)}}return substitution}}};exports.default=inlineArrayTransformer,module.exports=exports.default},function(module,exports,__webpack_require__){"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _inlineLists=__webpack_require__(582),_inlineLists2=_interopRequireDefault(_inlineLists);exports.default=_inlineLists2.default,module.exports=exports.default},function(module,exports,__webpack_require__){"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}Object.defineProperty(exports,"__esModule",{value:!0});var _TemplateTag=__webpack_require__(35),_TemplateTag2=_interopRequireDefault(_TemplateTag),_stripIndentTransformer=__webpack_require__(68),_stripIndentTransformer2=_interopRequireDefault(_stripIndentTransformer),_inlineArrayTransformer=__webpack_require__(56),_inlineArrayTransformer2=_interopRequireDefault(_inlineArrayTransformer),_trimResultTransformer=__webpack_require__(36),_trimResultTransformer2=_interopRequireDefault(_trimResultTransformer),inlineLists=new _TemplateTag2.default(_inlineArrayTransformer2.default,_stripIndentTransformer2.default,_trimResultTransformer2.default);exports.default=inlineLists,module.exports=exports.default},function(module,exports,__webpack_require__){"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _oneLine=__webpack_require__(584),_oneLine2=_interopRequireDefault(_oneLine);exports.default=_oneLine2.default,module.exports=exports.default},function(module,exports,__webpack_require__){"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}Object.defineProperty(exports,"__esModule",{value:!0});var _TemplateTag=__webpack_require__(35),_TemplateTag2=_interopRequireDefault(_TemplateTag),_trimResultTransformer=__webpack_require__(36),_trimResultTransformer2=_interopRequireDefault(_trimResultTransformer),_replaceResultTransformer=__webpack_require__(92),_replaceResultTransformer2=_interopRequireDefault(_replaceResultTransformer),oneLine=new _TemplateTag2.default((0,_replaceResultTransformer2.default)(/(?:\s+)/g," "),_trimResultTransformer2.default);exports.default=oneLine,module.exports=exports.default},function(module,exports,__webpack_require__){"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _oneLineCommaLists=__webpack_require__(586),_oneLineCommaLists2=_interopRequireDefault(_oneLineCommaLists);exports.default=_oneLineCommaLists2.default,module.exports=exports.default},function(module,exports,__webpack_require__){"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}Object.defineProperty(exports,"__esModule",{value:!0});var _TemplateTag=__webpack_require__(35),_TemplateTag2=_interopRequireDefault(_TemplateTag),_inlineArrayTransformer=__webpack_require__(56),_inlineArrayTransformer2=_interopRequireDefault(_inlineArrayTransformer),_trimResultTransformer=__webpack_require__(36),_trimResultTransformer2=_interopRequireDefault(_trimResultTransformer),_replaceResultTransformer=__webpack_require__(92),_replaceResultTransformer2=_interopRequireDefault(_replaceResultTransformer),oneLineCommaLists=new _TemplateTag2.default((0, _inlineArrayTransformer2.default)({separator:","}),(0,_replaceResultTransformer2.default)(/(?:\s+)/g," "),_trimResultTransformer2.default);exports.default=oneLineCommaLists,module.exports=exports.default},function(module,exports,__webpack_require__){"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _oneLineCommaListsAnd=__webpack_require__(588),_oneLineCommaListsAnd2=_interopRequireDefault(_oneLineCommaListsAnd);exports.default=_oneLineCommaListsAnd2.default,module.exports=exports.default},function(module,exports,__webpack_require__){"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}Object.defineProperty(exports,"__esModule",{value:!0});var _TemplateTag=__webpack_require__(35),_TemplateTag2=_interopRequireDefault(_TemplateTag),_inlineArrayTransformer=__webpack_require__(56),_inlineArrayTransformer2=_interopRequireDefault(_inlineArrayTransformer),_trimResultTransformer=__webpack_require__(36),_trimResultTransformer2=_interopRequireDefault(_trimResultTransformer),_replaceResultTransformer=__webpack_require__(92),_replaceResultTransformer2=_interopRequireDefault(_replaceResultTransformer),oneLineCommaListsAnd=new _TemplateTag2.default((0,_inlineArrayTransformer2.default)({separator:",",conjunction:"and"}),(0,_replaceResultTransformer2.default)(/(?:\s+)/g," "),_trimResultTransformer2.default);exports.default=oneLineCommaListsAnd,module.exports=exports.default},function(module,exports,__webpack_require__){"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _oneLineCommaListsOr=__webpack_require__(590),_oneLineCommaListsOr2=_interopRequireDefault(_oneLineCommaListsOr);exports.default=_oneLineCommaListsOr2.default,module.exports=exports.default},function(module,exports,__webpack_require__){"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}Object.defineProperty(exports,"__esModule",{value:!0});var _TemplateTag=__webpack_require__(35),_TemplateTag2=_interopRequireDefault(_TemplateTag),_inlineArrayTransformer=__webpack_require__(56),_inlineArrayTransformer2=_interopRequireDefault(_inlineArrayTransformer),_trimResultTransformer=__webpack_require__(36),_trimResultTransformer2=_interopRequireDefault(_trimResultTransformer),_replaceResultTransformer=__webpack_require__(92),_replaceResultTransformer2=_interopRequireDefault(_replaceResultTransformer),oneLineCommaListsOr=new _TemplateTag2.default((0,_inlineArrayTransformer2.default)({separator:",",conjunction:"or"}),(0,_replaceResultTransformer2.default)(/(?:\s+)/g," "),_trimResultTransformer2.default);exports.default=oneLineCommaListsOr,module.exports=exports.default},function(module,exports,__webpack_require__){"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _oneLineInlineLists=__webpack_require__(592),_oneLineInlineLists2=_interopRequireDefault(_oneLineInlineLists);exports.default=_oneLineInlineLists2.default,module.exports=exports.default},function(module,exports,__webpack_require__){"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}Object.defineProperty(exports,"__esModule",{value:!0});var _TemplateTag=__webpack_require__(35),_TemplateTag2=_interopRequireDefault(_TemplateTag),_inlineArrayTransformer=__webpack_require__(56),_inlineArrayTransformer2=_interopRequireDefault(_inlineArrayTransformer),_trimResultTransformer=__webpack_require__(36),_trimResultTransformer2=_interopRequireDefault(_trimResultTransformer),_replaceResultTransformer=__webpack_require__(92),_replaceResultTransformer2=_interopRequireDefault(_replaceResultTransformer),oneLineInlineLists=new _TemplateTag2.default(_inlineArrayTransformer2.default,(0,_replaceResultTransformer2.default)(/(?:\s+)/g," "),_trimResultTransformer2.default);exports.default=oneLineInlineLists,module.exports=exports.default},function(module,exports,__webpack_require__){"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _oneLineTrim=__webpack_require__(594),_oneLineTrim2=_interopRequireDefault(_oneLineTrim);exports.default=_oneLineTrim2.default,module.exports=exports.default},function(module,exports,__webpack_require__){"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}Object.defineProperty(exports,"__esModule",{value:!0});var _TemplateTag=__webpack_require__(35),_TemplateTag2=_interopRequireDefault(_TemplateTag),_trimResultTransformer=__webpack_require__(36),_trimResultTransformer2=_interopRequireDefault(_trimResultTransformer),_replaceResultTransformer=__webpack_require__(92),_replaceResultTransformer2=_interopRequireDefault(_replaceResultTransformer),oneLineTrim=new _TemplateTag2.default((0,_replaceResultTransformer2.default)(/(?:\n\s+)/g,""),_trimResultTransformer2.default);exports.default=oneLineTrim,module.exports=exports.default},function(module,exports,__webpack_require__){"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}Object.defineProperty(exports,"__esModule",{value:!0});var _isNan=__webpack_require__(514),_isNan2=_interopRequireDefault(_isNan),isValidValue=function(x){return null!=x&&!(0,_isNan2.default)(x)&&"boolean"!=typeof x},removeNonPrintingValuesTransformer=function(){return{onSubstitution:function(substitution){return Array.isArray(substitution)?substitution.filter(isValidValue):isValidValue(substitution)?substitution:""}}};exports.default=removeNonPrintingValuesTransformer,module.exports=exports.default},function(module,exports){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var replaceResultTransformer=function(replaceWhat,replaceWith){return{onEndResult:function(endResult){if(null==replaceWhat||null==replaceWith)throw new Error("replaceResultTransformer requires at least 2 arguments.");return endResult.replace(replaceWhat,replaceWith)}}};exports.default=replaceResultTransformer,module.exports=exports.default},function(module,exports){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var replaceSubstitutionTransformer=function(replaceWhat,replaceWith){return{onSubstitution:function(substitution,resultSoFar){if(null==replaceWhat||null==replaceWith)throw new Error("replaceSubstitutionTransformer requires at least 2 arguments.");return null==substitution?substitution:substitution.toString().replace(replaceWhat,replaceWith)}}};exports.default=replaceSubstitutionTransformer,module.exports=exports.default},function(module,exports,__webpack_require__){"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _safeHtml=__webpack_require__(599),_safeHtml2=_interopRequireDefault(_safeHtml);exports.default=_safeHtml2.default,module.exports=exports.default},function(module,exports,__webpack_require__){"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}Object.defineProperty(exports,"__esModule",{value:!0});var _TemplateTag=__webpack_require__(35),_TemplateTag2=_interopRequireDefault(_TemplateTag),_stripIndentTransformer=__webpack_require__(68),_stripIndentTransformer2=_interopRequireDefault(_stripIndentTransformer),_inlineArrayTransformer=__webpack_require__(56),_inlineArrayTransformer2=_interopRequireDefault(_inlineArrayTransformer),_trimResultTransformer=__webpack_require__(36),_trimResultTransformer2=_interopRequireDefault(_trimResultTransformer),_splitStringTransformer=__webpack_require__(257),_splitStringTransformer2=_interopRequireDefault(_splitStringTransformer),_replaceSubstitutionTransformer=__webpack_require__(424),_replaceSubstitutionTransformer2=_interopRequireDefault(_replaceSubstitutionTransformer),safeHtml=new _TemplateTag2.default((0,_splitStringTransformer2.default)("\n"),_inlineArrayTransformer2.default,_stripIndentTransformer2.default,_trimResultTransformer2.default,(0,_replaceSubstitutionTransformer2.default)(/&/g,"&"),(0,_replaceSubstitutionTransformer2.default)(//g,">"),(0,_replaceSubstitutionTransformer2.default)(/"/g,"""),(0,_replaceSubstitutionTransformer2.default)(/'/g,"'"),(0,_replaceSubstitutionTransformer2.default)(/`/g,"`"));exports.default=safeHtml,module.exports=exports.default},function(module,exports,__webpack_require__){"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _html=__webpack_require__(256),_html2=_interopRequireDefault(_html);exports.default=_html2.default,module.exports=exports.default},function(module,exports){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var splitStringTransformer=function(splitBy){return{onSubstitution:function(substitution,resultSoFar){if(null==splitBy||"string"!=typeof splitBy)throw new Error("You need to specify a string character to split by.");return"string"==typeof substitution&&substitution.includes(splitBy)&&(substitution=substitution.split(splitBy)),substitution}}};exports.default=splitStringTransformer,module.exports=exports.default},function(module,exports,__webpack_require__){"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _stripIndent=__webpack_require__(603),_stripIndent2=_interopRequireDefault(_stripIndent);exports.default=_stripIndent2.default,module.exports=exports.default},function(module,exports,__webpack_require__){"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}Object.defineProperty(exports,"__esModule",{value:!0});var _TemplateTag=__webpack_require__(35),_TemplateTag2=_interopRequireDefault(_TemplateTag),_stripIndentTransformer=__webpack_require__(68),_stripIndentTransformer2=_interopRequireDefault(_stripIndentTransformer),_trimResultTransformer=__webpack_require__(36),_trimResultTransformer2=_interopRequireDefault(_trimResultTransformer),stripIndent=new _TemplateTag2.default(_stripIndentTransformer2.default,_trimResultTransformer2.default);exports.default=stripIndent,module.exports=exports.default},function(module,exports,__webpack_require__){"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}Object.defineProperty(exports,"__esModule",{value:!0});var _toConsumableArray2=__webpack_require__(120),_toConsumableArray3=_interopRequireDefault(_toConsumableArray2),stripIndentTransformer=function(){var type=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"initial";return{onEndResult:function(endResult){if("initial"===type){var match=endResult.match(/^[ \t]*(?=\S)/gm);if(null===match)return endResult;var indent=Math.min.apply(Math,(0,_toConsumableArray3.default)(match.map(function(el){return el.length}))),regexp=new RegExp("^[ \\t]{"+indent+"}","gm");endResult=indent>0?endResult.replace(regexp,""):endResult}else{if("all"!==type)throw new Error("Unknown type: "+type);endResult=endResult.split("\n").map(function(line){return line.trimLeft()}).join("\n")}return endResult}}};exports.default=stripIndentTransformer,module.exports=exports.default},function(module,exports,__webpack_require__){"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _stripIndents=__webpack_require__(606),_stripIndents2=_interopRequireDefault(_stripIndents);exports.default=_stripIndents2.default,module.exports=exports.default},function(module,exports,__webpack_require__){"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}Object.defineProperty(exports,"__esModule",{value:!0});var _TemplateTag=__webpack_require__(35),_TemplateTag2=_interopRequireDefault(_TemplateTag),_stripIndentTransformer=__webpack_require__(68),_stripIndentTransformer2=_interopRequireDefault(_stripIndentTransformer),_trimResultTransformer=__webpack_require__(36),_trimResultTransformer2=_interopRequireDefault(_trimResultTransformer),stripIndents=new _TemplateTag2.default((0,_stripIndentTransformer2.default)("all"),_trimResultTransformer2.default);exports.default=stripIndents,module.exports=exports.default},function(module,exports){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var trimResultTransformer=function(){var side=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"";return{onEndResult:function(endResult){if(side=side.toLowerCase(),"left"===side||"right"===side)side=side.charAt(0).toUpperCase()+side.slice(1);else if(""!==side)throw new Error("Side not supported: "+side);return endResult["trim"+side]()}}};exports.default=trimResultTransformer,module.exports=exports.default},function(module,exports,__webpack_require__){exports=module.exports=__webpack_require__(123)(),exports.push([module.id,"@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,600);",""]),exports.push([module.id,"body{background:#fff;font-family:Open Sans,sans-serif;font-weight:300}h1{font-size:24px;font-weight:700;margin-top:5px}h1,p{margin-bottom:15px}p{line-height:22px}",""])},function(module,exports,__webpack_require__){exports=module.exports=__webpack_require__(123)(),exports.push([module.id,"body{padding:20px}strong{font-weight:700}",""])},function(module,exports,__webpack_require__){exports=module.exports=__webpack_require__(123)(),exports.push([module.id,'a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}',""])},function(module,exports,__webpack_require__){exports=module.exports=__webpack_require__(123)(),exports.push([module.id,'@font-face{font-family:octicons-link;src:url(data:font/woff;charset=utf-8;base64,d09GRgABAAAAAAZwABAAAAAACFQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABEU0lHAAAGaAAAAAgAAAAIAAAAAUdTVUIAAAZcAAAACgAAAAoAAQAAT1MvMgAAAyQAAABJAAAAYFYEU3RjbWFwAAADcAAAAEUAAACAAJThvmN2dCAAAATkAAAABAAAAAQAAAAAZnBnbQAAA7gAAACyAAABCUM+8IhnYXNwAAAGTAAAABAAAAAQABoAI2dseWYAAAFsAAABPAAAAZwcEq9taGVhZAAAAsgAAAA0AAAANgh4a91oaGVhAAADCAAAABoAAAAkCA8DRGhtdHgAAAL8AAAADAAAAAwGAACfbG9jYQAAAsAAAAAIAAAACABiATBtYXhwAAACqAAAABgAAAAgAA8ASm5hbWUAAAToAAABQgAAAlXu73sOcG9zdAAABiwAAAAeAAAAME3QpOBwcmVwAAAEbAAAAHYAAAB/aFGpk3jaTY6xa8JAGMW/O62BDi0tJLYQincXEypYIiGJjSgHniQ6umTsUEyLm5BV6NDBP8Tpts6F0v+k/0an2i+itHDw3v2+9+DBKTzsJNnWJNTgHEy4BgG3EMI9DCEDOGEXzDADU5hBKMIgNPZqoD3SilVaXZCER3/I7AtxEJLtzzuZfI+VVkprxTlXShWKb3TBecG11rwoNlmmn1P2WYcJczl32etSpKnziC7lQyWe1smVPy/Lt7Kc+0vWY/gAgIIEqAN9we0pwKXreiMasxvabDQMM4riO+qxM2ogwDGOZTXxwxDiycQIcoYFBLj5K3EIaSctAq2kTYiw+ymhce7vwM9jSqO8JyVd5RH9gyTt2+J/yUmYlIR0s04n6+7Vm1ozezUeLEaUjhaDSuXHwVRgvLJn1tQ7xiuVv/ocTRF42mNgZGBgYGbwZOBiAAFGJBIMAAizAFoAAABiAGIAznjaY2BkYGAA4in8zwXi+W2+MjCzMIDApSwvXzC97Z4Ig8N/BxYGZgcgl52BCSQKAA3jCV8CAABfAAAAAAQAAEB42mNgZGBg4f3vACQZQABIMjKgAmYAKEgBXgAAeNpjYGY6wTiBgZWBg2kmUxoDA4MPhGZMYzBi1AHygVLYQUCaawqDA4PChxhmh/8ODDEsvAwHgMKMIDnGL0x7gJQCAwMAJd4MFwAAAHjaY2BgYGaA4DAGRgYQkAHyGMF8NgYrIM3JIAGVYYDT+AEjAwuDFpBmA9KMDEwMCh9i/v8H8sH0/4dQc1iAmAkALaUKLgAAAHjaTY9LDsIgEIbtgqHUPpDi3gPoBVyRTmTddOmqTXThEXqrob2gQ1FjwpDvfwCBdmdXC5AVKFu3e5MfNFJ29KTQT48Ob9/lqYwOGZxeUelN2U2R6+cArgtCJpauW7UQBqnFkUsjAY/kOU1cP+DAgvxwn1chZDwUbd6CFimGXwzwF6tPbFIcjEl+vvmM/byA48e6tWrKArm4ZJlCbdsrxksL1AwWn/yBSJKpYbq8AXaaTb8AAHja28jAwOC00ZrBeQNDQOWO//sdBBgYGRiYWYAEELEwMTE4uzo5Zzo5b2BxdnFOcALxNjA6b2ByTswC8jYwg0VlNuoCTWAMqNzMzsoK1rEhNqByEyerg5PMJlYuVueETKcd/89uBpnpvIEVomeHLoMsAAe1Id4AAAAAAAB42oWQT07CQBTGv0JBhagk7HQzKxca2sJCE1hDt4QF+9JOS0nbaaYDCQfwCJ7Au3AHj+LO13FMmm6cl7785vven0kBjHCBhfpYuNa5Ph1c0e2Xu3jEvWG7UdPDLZ4N92nOm+EBXuAbHmIMSRMs+4aUEd4Nd3CHD8NdvOLTsA2GL8M9PODbcL+hD7C1xoaHeLJSEao0FEW14ckxC+TU8TxvsY6X0eLPmRhry2WVioLpkrbp84LLQPGI7c6sOiUzpWIWS5GzlSgUzzLBSikOPFTOXqly7rqx0Z1Q5BAIoZBSFihQYQOOBEdkCOgXTOHA07HAGjGWiIjaPZNW13/+lm6S9FT7rLHFJ6fQbkATOG1j2OFMucKJJsxIVfQORl+9Jyda6Sl1dUYhSCm1dyClfoeDve4qMYdLEbfqHf3O/AdDumsjAAB42mNgYoAAZQYjBmyAGYQZmdhL8zLdDEydARfoAqIAAAABAAMABwAKABMAB///AA8AAQAAAAAAAAAAAAAAAAABAAAAAA==) format("woff")}.markdown-body{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:#333;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:16px;line-height:1.5;word-wrap:break-word}.markdown-body .pl-c{color:#969896}.markdown-body .pl-c1,.markdown-body .pl-s .pl-v{color:#0086b3}.markdown-body .pl-e,.markdown-body .pl-en{color:#795da3}.markdown-body .pl-s .pl-s1,.markdown-body .pl-smi{color:#333}.markdown-body .pl-ent{color:#63a35c}.markdown-body .pl-k{color:#a71d5d}.markdown-body .pl-pds,.markdown-body .pl-s,.markdown-body .pl-s .pl-pse .pl-s1,.markdown-body .pl-sr,.markdown-body .pl-sr .pl-cce,.markdown-body .pl-sr .pl-sra,.markdown-body .pl-sr .pl-sre{color:#183691}.markdown-body .pl-v{color:#ed6a43}.markdown-body .pl-id{color:#b52a1d}.markdown-body .pl-ii{color:#f8f8f8;background-color:#b52a1d}.markdown-body .pl-sr .pl-cce{font-weight:700;color:#63a35c}.markdown-body .pl-ml{color:#693a17}.markdown-body .pl-mh,.markdown-body .pl-mh .pl-en,.markdown-body .pl-ms{font-weight:700;color:#1d3e81}.markdown-body .pl-mq{color:teal}.markdown-body .pl-mi{font-style:italic;color:#333}.markdown-body .pl-mb{font-weight:700;color:#333}.markdown-body .pl-md{color:#bd2c00;background-color:#ffecec}.markdown-body .pl-mi1{color:#55a532;background-color:#eaffea}.markdown-body .pl-mdr{font-weight:700;color:#795da3}.markdown-body .pl-mo{color:#1d3e81}.markdown-body .octicon{display:inline-block;vertical-align:text-top;fill:currentColor}.markdown-body a{background-color:transparent;-webkit-text-decoration-skip:objects}.markdown-body a:active,.markdown-body a:hover{outline-width:0}.markdown-body strong{font-weight:inherit;font-weight:bolder}.markdown-body h1{font-size:2em;margin:.67em 0}.markdown-body img{border-style:none}.markdown-body svg:not(:root){overflow:hidden}.markdown-body code,.markdown-body kbd,.markdown-body pre{font-family:monospace,monospace;font-size:1em}.markdown-body hr{box-sizing:content-box;height:0;overflow:visible}.markdown-body input{font:inherit;margin:0;overflow:visible}.markdown-body [type=checkbox]{box-sizing:border-box;padding:0}.markdown-body *{box-sizing:border-box}.markdown-body input{font-family:inherit;font-size:inherit;line-height:inherit}.markdown-body a{color:#4078c0;text-decoration:none}.markdown-body a:active,.markdown-body a:hover{text-decoration:underline}.markdown-body strong{font-weight:600}.markdown-body hr{height:0;margin:15px 0;overflow:hidden;background:transparent;border:0;border-bottom:1px solid #ddd}.markdown-body hr:after,.markdown-body hr:before{display:table;content:""}.markdown-body hr:after{clear:both}.markdown-body table{border-spacing:0;border-collapse:collapse}.markdown-body td,.markdown-body th{padding:0}.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4,.markdown-body h5,.markdown-body h6{margin-top:0;margin-bottom:0}.markdown-body h1{font-size:32px;font-weight:600}.markdown-body h2{font-size:24px;font-weight:600}.markdown-body h3{font-size:20px;font-weight:600}.markdown-body h4{font-size:16px;font-weight:600}.markdown-body h5{font-size:14px;font-weight:600}.markdown-body h6{font-size:12px;font-weight:600}.markdown-body p{margin-top:0;margin-bottom:10px}.markdown-body blockquote{margin:0}.markdown-body ol,.markdown-body ul{padding-left:0;margin-top:0;margin-bottom:0}.markdown-body ol ol,.markdown-body ul ol{list-style-type:lower-roman}.markdown-body ol ol ol,.markdown-body ol ul ol,.markdown-body ul ol ol,.markdown-body ul ul ol{list-style-type:lower-alpha}.markdown-body dd{margin-left:0}.markdown-body code{font-family:Consolas,Liberation Mono,Menlo,Courier,monospace;font-size:12px}.markdown-body pre{margin-top:0;margin-bottom:0;font:12px Consolas,Liberation Mono,Menlo,Courier,monospace}.markdown-body .octicon{vertical-align:text-bottom}.markdown-body input{-webkit-font-feature-settings:"liga" 0;font-feature-settings:"liga" 0}.markdown-body:after,.markdown-body:before{display:table;content:""}.markdown-body:after{clear:both}.markdown-body>:first-child{margin-top:0!important}.markdown-body>:last-child{margin-bottom:0!important}.markdown-body a:not([href]){color:inherit;text-decoration:none}.markdown-body .anchor{float:left;padding-right:4px;margin-left:-20px;line-height:1}.markdown-body .anchor:focus{outline:none}.markdown-body blockquote,.markdown-body dl,.markdown-body ol,.markdown-body p,.markdown-body pre,.markdown-body table,.markdown-body ul{margin-top:0;margin-bottom:16px}.markdown-body hr{height:.25em;padding:0;margin:24px 0;background-color:#e7e7e7;border:0}.markdown-body blockquote{padding:0 1em;color:#777;border-left:.25em solid #ddd}.markdown-body blockquote>:first-child{margin-top:0}.markdown-body blockquote>:last-child{margin-bottom:0}.markdown-body kbd{display:inline-block;padding:3px 5px;font-size:11px;line-height:10px;color:#555;vertical-align:middle;background-color:#fcfcfc;border:1px solid #ccc;border-bottom-color:#bbb;border-radius:3px;box-shadow:inset 0 -1px 0 #bbb}.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4,.markdown-body h5,.markdown-body h6{margin-top:24px;margin-bottom:16px;font-weight:600;line-height:1.25}.markdown-body h1 .octicon-link,.markdown-body h2 .octicon-link,.markdown-body h3 .octicon-link,.markdown-body h4 .octicon-link,.markdown-body h5 .octicon-link,.markdown-body h6 .octicon-link{color:#000;vertical-align:middle;visibility:hidden}.markdown-body h1:hover .anchor,.markdown-body h2:hover .anchor,.markdown-body h3:hover .anchor,.markdown-body h4:hover .anchor,.markdown-body h5:hover .anchor,.markdown-body h6:hover .anchor{text-decoration:none}.markdown-body h1:hover .anchor .octicon-link,.markdown-body h2:hover .anchor .octicon-link,.markdown-body h3:hover .anchor .octicon-link,.markdown-body h4:hover .anchor .octicon-link,.markdown-body h5:hover .anchor .octicon-link,.markdown-body h6:hover .anchor .octicon-link{visibility:visible}.markdown-body h1{font-size:2em}.markdown-body h1,.markdown-body h2{padding-bottom:.3em;border-bottom:1px solid #eee}.markdown-body h2{font-size:1.5em}.markdown-body h3{font-size:1.25em}.markdown-body h4{font-size:1em}.markdown-body h5{font-size:.875em}.markdown-body h6{font-size:.85em;color:#777}.markdown-body ol,.markdown-body ul{padding-left:2em}.markdown-body ol ol,.markdown-body ol ul,.markdown-body ul ol,.markdown-body ul ul{margin-top:0;margin-bottom:0}.markdown-body li>p{margin-top:16px}.markdown-body li+li{margin-top:.25em}.markdown-body dl{padding:0}.markdown-body dl dt{padding:0;margin-top:16px;font-size:1em;font-style:italic;font-weight:700}.markdown-body dl dd{padding:0 16px;margin-bottom:16px}.markdown-body table{display:block;width:100%;overflow:auto}.markdown-body table th{font-weight:700}.markdown-body table td,.markdown-body table th{padding:6px 13px;border:1px solid #ddd}.markdown-body table tr{background-color:#fff;border-top:1px solid #ccc}.markdown-body table tr:nth-child(2n){background-color:#f8f8f8}.markdown-body img{max-width:100%;box-sizing:content-box;background-color:#fff}.markdown-body code{padding:0;padding-top:.2em;padding-bottom:.2em;margin:0;font-size:85%;background-color:rgba(0,0,0,.04);border-radius:3px}.markdown-body code:after,.markdown-body code:before{letter-spacing:-.2em;content:"\\A0"}.markdown-body pre{word-wrap:normal}.markdown-body pre>code{padding:0;margin:0;font-size:100%;word-break:normal;white-space:pre;background:transparent;border:0}.markdown-body .highlight{margin-bottom:16px}.markdown-body .highlight pre{margin-bottom:0;word-break:normal}.markdown-body .highlight pre,.markdown-body pre{padding:16px;overflow:auto;font-size:85%;line-height:1.45;background-color:#f7f7f7;border-radius:3px}.markdown-body pre code{display:inline;max-width:auto;padding:0;margin:0;overflow:visible;line-height:inherit;word-wrap:normal;background-color:transparent;border:0}.markdown-body pre code:after,.markdown-body pre code:before{content:normal}.markdown-body .pl-0{padding-left:0!important}.markdown-body .pl-1{padding-left:3px!important}.markdown-body .pl-2{padding-left:6px!important}.markdown-body .pl-3{padding-left:12px!important}.markdown-body .pl-4{padding-left:24px!important}.markdown-body .pl-5{padding-left:36px!important}.markdown-body .pl-6{padding-left:48px!important}.markdown-body .full-commit .btn-outline:not(:disabled):hover{color:#4078c0;border:1px solid #4078c0}.markdown-body kbd{display:inline-block;padding:3px 5px;font:11px Consolas,Liberation Mono,Menlo,Courier,monospace;line-height:10px;color:#555;vertical-align:middle;background-color:#fcfcfc;border:1px solid #ccc;border-bottom-color:#bbb;border-radius:3px;box-shadow:inset 0 -1px 0 #bbb}.markdown-body :checked+.radio-label{position:relative;z-index:1;border-color:#4078c0}.markdown-body .task-list-item{list-style-type:none}.markdown-body .task-list-item+.task-list-item{margin-top:3px}.markdown-body .task-list-item input{margin:0 .2em .25em -1.6em;vertical-align:middle}.markdown-body hr{border-bottom-color:#eee}',""])},function(module,exports,__webpack_require__){exports=module.exports=__webpack_require__(123)(),exports.push([module.id,'.ReactTable{position:relative;border:1px solid rgba(0,0,0,.1)}.ReactTable *{box-sizing:border-box}.ReactTable .rt-table{-webkit-box-align:stretch;-ms-flex-align:stretch;-webkit-align-items:stretch;align-items:stretch;width:100%;border-collapse:collapse;overflow:auto}.ReactTable .rt-table,.ReactTable .rt-thead{display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column}.ReactTable .rt-thead{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ReactTable .rt-thead.-headerGroups{background:rgba(0,0,0,.03)}.ReactTable .rt-thead.-filters,.ReactTable .rt-thead.-headerGroups{border-bottom:1px solid rgba(0,0,0,.05)}.ReactTable .rt-thead.-filters .rt-th{border-right:1px solid rgba(0,0,0,.02)}.ReactTable .rt-thead.-header{box-shadow:0 2px 15px 0 rgba(0,0,0,.15)}.ReactTable .rt-thead .rt-tr{text-align:center}.ReactTable .rt-thead .rt-td,.ReactTable .rt-thead .rt-th{padding:5px;line-height:normal;position:relative;border-right:1px solid rgba(0,0,0,.05);-webkit-transition:box-shadow .3s cubic-bezier(.175,.885,.32,1.275);transition:box-shadow .3s cubic-bezier(.175,.885,.32,1.275);box-shadow:inset 0 0 0 0 transparent}.ReactTable .rt-thead .rt-td.-sort-asc,.ReactTable .rt-thead .rt-th.-sort-asc{box-shadow:inset 0 3px 0 0 rgba(0,0,0,.6)}.ReactTable .rt-thead .rt-td.-sort-desc,.ReactTable .rt-thead .rt-th.-sort-desc{box-shadow:inset 0 -3px 0 0 rgba(0,0,0,.6)}.ReactTable .rt-thead .rt-td.-cursor-pointer,.ReactTable .rt-thead .rt-th.-cursor-pointer{cursor:pointer}.ReactTable .rt-thead .rt-td:last-child,.ReactTable .rt-thead .rt-th:last-child{border-right:0}.ReactTable .rt-thead .rt-resizable-header{overflow:visible}.ReactTable .rt-thead .rt-resizable-header:last-child{overflow:hidden}.ReactTable .rt-thead .rt-resizable-header-content{overflow:hidden;text-overflow:ellipsis}.ReactTable .rt-tbody{display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column}.ReactTable .rt-tbody .rt-tr-group{border-bottom:1px solid rgba(0,0,0,.05)}.ReactTable .rt-tbody .rt-tr-group:last-child{border-bottom:0}.ReactTable .rt-tbody .rt-td{border-right:1px solid rgba(0,0,0,.02)}.ReactTable .rt-tbody .rt-td:last-child{border-right:0}.ReactTable .rt-tbody .rt-pivot{cursor:pointer}.ReactTable .rt-tr-group{display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;-webkit-box-align:stretch;-ms-flex-align:stretch;-webkit-align-items:stretch;align-items:stretch}.ReactTable .rt-tr{display:-webkit-inline-box;display:-ms-inline-flexbox;display:-webkit-inline-flex;display:inline-flex}.ReactTable .rt-td,.ReactTable .rt-th{-webkit-box-flex:1;-ms-flex:1 0 0px;-webkit-flex:1 0 0;flex:1 0 0;white-space:nowrap;text-overflow:ellipsis;padding:7px 5px;overflow:hidden;-webkit-transition:.3s ease;transition:.3s ease;-webkit-transition-property:width,min-width,padding,opacity;transition-property:width,min-width,padding,opacity}.ReactTable .rt-td.-hidden,.ReactTable .rt-th.-hidden{width:0!important;min-width:0!important;padding:0!important;border:0!important;opacity:0!important}.ReactTable .rt-expander{display:inline-block;position:relative;margin:0;color:transparent;margin:0 10px}.ReactTable .rt-expander:after{content:"";position:absolute;width:0;height:0;top:50%;left:50%;-webkit-transform:translate(-50%,-50%) rotate(-90deg);-ms-transform:translate(-50%,-50%) rotate(-90deg);transform:translate(-50%,-50%) rotate(-90deg);border-left:5.04px solid transparent;border-right:5.04px solid transparent;border-top:7px solid rgba(0,0,0,.8);-webkit-transition:all .3s cubic-bezier(.175,.885,.32,1.275);transition:all .3s cubic-bezier(.175,.885,.32,1.275);cursor:pointer}.ReactTable .rt-expander.-open:after{-webkit-transform:translate(-50%,-50%) rotate(0);-ms-transform:translate(-50%,-50%) rotate(0);transform:translate(-50%,-50%) rotate(0)}.ReactTable .rt-resizer{display:inline-block;position:absolute;width:36px;top:0;bottom:0;right:-18px;cursor:col-resize;z-index:10}.ReactTable .rt-tfoot{display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;box-shadow:0 0 15px 0 rgba(0,0,0,.15)}.ReactTable .rt-tfoot .rt-td{border-right:1px solid rgba(0,0,0,.05)}.ReactTable .rt-tfoot .rt-td:last-child{border-right:0}.ReactTable.-striped .rt-tr.-odd{background:rgba(0,0,0,.03)}.ReactTable.-highlight .rt-tbody .rt-tr:not(.-padRow):hover{background:rgba(0,0,0,.05)}.ReactTable .-pagination{z-index:1;display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-box-align:stretch;-ms-flex-align:stretch;-webkit-align-items:stretch;align-items:stretch;-ms-flex-wrap:wrap;-webkit-flex-wrap:wrap;flex-wrap:wrap;padding:3px;box-shadow:0 0 15px 0 rgba(0,0,0,.1);border-top:2px solid rgba(0,0,0,.1)}.ReactTable .-pagination .-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:block;width:100%;height:100%;border:0;border-radius:3px;padding:6px;font-size:1em;color:rgba(0,0,0,.6);background:rgba(0,0,0,.1);-webkit-transition:all .1s ease;transition:all .1s ease;cursor:pointer;outline:none}.ReactTable .-pagination .-btn[disabled]{opacity:.5;cursor:default}.ReactTable .-pagination .-btn:not([disabled]):hover{background:rgba(0,0,0,.3);color:#fff}.ReactTable .-pagination .-next,.ReactTable .-pagination .-previous{-webkit-box-flex:1;-ms-flex:1;-webkit-flex:1;flex:1;text-align:center}.ReactTable .-pagination .-center{-webkit-box-flex:1.5;-ms-flex:1.5;-webkit-flex:1.5;flex:1.5;text-align:center;margin-bottom:0;display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;-webkit-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;-webkit-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;-ms-flex-pack:distribute;-webkit-justify-content:space-around;justify-content:space-around}.ReactTable .-pagination .-pageInfo{display:inline-block;margin:3px 10px;white-space:nowrap}.ReactTable .-pagination .-pageJump{display:inline-block}.ReactTable .-pagination .-pageJump input{width:70px;text-align:center}.ReactTable .-pagination .-pageSizeOptions{margin:3px 10px}.ReactTable .rt-noData{left:50%;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);z-index:1;padding:20px;color:rgba(0,0,0,.5)}.ReactTable .-loading,.ReactTable .rt-noData{display:block;position:absolute;background:hsla(0,0%,100%,.8);-webkit-transition:all .3s ease;transition:all .3s ease;pointer-events:none}.ReactTable .-loading{left:0;right:0;top:0;bottom:0;z-index:2;opacity:0}.ReactTable .-loading>div{position:absolute;display:block;text-align:center;width:100%;top:50%;left:0;font-size:15px;color:rgba(0,0,0,.6);-webkit-transform:translateY(-52%);-ms-transform:translateY(-52%);transform:translateY(-52%);-webkit-transition:all .3s cubic-bezier(.25,.46,.45,.94);transition:all .3s cubic-bezier(.25,.46,.45,.94)}.ReactTable .-loading.-active{opacity:1;pointer-events:all}.ReactTable .-loading.-active>div{-webkit-transform:translateY(50%);-ms-transform:translateY(50%);transform:translateY(50%)}.ReactTable input,.ReactTable select{border:1px solid rgba(0,0,0,.1);background:#fff;padding:5px 7px;font-size:inherit;border-radius:3px;font-weight:400;outline:none}.ReactTable input:not([type=checkbox]):not([type=radio]),.ReactTable select{-webkit-appearance:none;-moz-appearance:none;appearance:none}.ReactTable .select-wrap{position:relative;display:inline-block}.ReactTable .select-wrap select{padding:5px 15px 5px 7px;min-width:100px}.ReactTable .select-wrap:after{content:"";position:absolute;right:8px;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);border-color:#999 transparent transparent;border-style:solid;border-width:5px 5px 2.5px}',""]); -},function(module,exports,__webpack_require__){exports=module.exports=__webpack_require__(123)(),exports.push([module.id,"code[class*=language-],pre[class*=language-]{color:#000;background:none;text-shadow:0 1px #fff;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-]::-moz-selection,code[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-]::selection,code[class*=language-] ::selection,pre[class*=language-]::selection,pre[class*=language-] ::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#a67f59;background:hsla(0,0%,100%,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.function{color:#dd4a68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}",""])},,,,,,function(module,exports){module.exports='
React Table Logo

React Table

react-table is a lightweight, fast and extendable datagrid built for React

Features

  • Lightweight at 7kb (and just 2kb more for styles)
  • Fully customizable JSX templating
  • Supports both Client-side & Server-side pagination and multi-sorting
  • Column Pivoting & Aggregation
  • Minimal design & easily themeable
  • Fully controllable via optional props and callbacks
  • "Why I wrote React Table and the problems it has solved for Nozzle.io by Tanner Linsley

Demos and examples

Table of Contents

Installation

  1. Install React Table as a dependency
    $ npm install react-table\n# or\n$ yarn add react-table\n
  2. Import the react-table module
    // ES6\nimport ReactTable from 'react-table'\n// ES5\nvar ReactTable = require('react-table').default\n
  3. Import styles by including react-table.css anywhere on the page
    // JS (Webpack)\nimport 'react-table/react-table.css'\n// html\n<link rel="stylesheet" href="node_modules/react-table/react-table.css">\n

Example

import ReactTable from 'react-table'\n\nrender() {\n  const data = [{\n    name: 'Tanner Linsley',\n    age: 26,\n    friend: {\n      name: 'Jason Maurer',\n      age: 23,\n    }\n  },{\n    ...\n  }]\n\n  const columns = [{\n    header: 'Name',\n    accessor: 'name' // String-based value accessors!\n  }, {\n    header: 'Age',\n    accessor: 'age',\n    render: props => <span className='number'>{props.value}</span> // Custom cell components!\n  }, {\n    id: 'friendName', // Required because our accessor is not a string\n    header: 'Friend Name',\n    accessor: d => d.friend.name // Custom value accessors!\n  }, {\n    header: props => <span>Friend Age</span>, // Custom header components!\n    accessor: 'friend.age'\n  }]\n\n  <ReactTable\n    data={data}\n    columns={columns}\n  />\n}\n

Data

Simply pass the data prop anything that resembles an array or object. Client-side sorting and pagination are built in, and your table will update gracefully as you change any props. Server-side data is also supported!

Props

These are all of the available props (and their default values) for the main <ReactTable /> component.

{\n  // General\n  data: [],\n  loading: false,\n  showPagination: true,\n  showPageSizeOptions: true,\n  pageSizeOptions: [5, 10, 20, 25, 50, 100],\n  defaultPageSize: 20,\n  showPageJump: true,\n  expanderColumnWidth: 35,\n  collapseOnSortingChange: true,\n  collapseOnPageChange: true,\n  collapseOnDataChange: true,\n  freezeWhenExpanded: false,\n  defaultSorting: [],\n  showFilters: false,\n  defaultFiltering: [],\n  defaultFilterMethod: (filter, row, column) => {\n    const id = filter.pivotId || filter.id\n    return row[id] !== undefined ? String(row[id]).startsWith(filter.value) : true\n  },\n  resizable: true,\n  defaultResizing: [],\n\n  // Controlled State Overrides (see Fully Controlled Component section)\n  page: undefined,\n  pageSize: undefined,\n  sorting: undefined,\n\n  // Controlled State Callbacks\n  onExpandSubComponent: undefined,\n  onPageChange: undefined,\n  onPageSizeChange: undefined,\n  onSortingChange: undefined,\n  onFilteringChange: undefined,\n  onResize: undefined,\n\n  // Pivoting\n  pivotBy: undefined,\n  pivotColumnWidth: 200,\n  pivotValKey: '_pivotVal',\n  pivotIDKey: '_pivotID',\n  subRowsKey: '_subRows',\n\n  // Pivoting State Overrides (see Fully Controlled Component section)\n  expandedRows: {},\n\n  // Pivoting State Callbacks\n  onExpandRow: undefined,\n\n  // General Callbacks\n  onChange: () => null,\n\n  // Classes\n  className: '',\n  style: {},\n\n  // Component decorators\n  getProps: () => ({}),\n  getTableProps: () => ({}),\n  getTheadGroupProps: () => ({}),\n  getTheadGroupTrProps: () => ({}),\n  getTheadGroupThProps: () => ({}),\n  getTheadProps: () => ({}),\n  getTheadTrProps: () => ({}),\n  getTheadThProps: () => ({}),\n  getTheadFilterProps: () => ({}),\n  getTheadFilterTrProps: () => ({}),\n  getTheadFilterThProps: () => ({}),\n  getTbodyProps: () => ({}),\n  getTrGroupProps: () => ({}),\n  getTrProps: () => ({}),\n  getThProps: () => ({}),\n  getTdProps: () => ({}),\n  getTfootProps: () => ({}),\n  getTfootTrProps: () => ({}),\n  getTfootThProps: () => ({}),\n  getPaginationProps: () => ({}),\n  getLoadingProps: () => ({}),\n  getNoDataProps: () => ({}),\n  getResizerProps: () => ({}),\n\n  // Global Column Defaults\n  column: {\n    sortable: true,\n    show: true,\n    minWidth: 100,\n    // Cells only\n    render: undefined,\n    className: '',\n    style: {},\n    getProps: () => ({}),\n    // Headers only\n    header: undefined,\n    headerClassName: '',\n    headerStyle: {},\n    getHeaderProps: () => ({})\n    // Footers only\n    footer: undefined,\n    footerClassName: '',\n    footerStyle: {},\n    getFooterProps: () => ({}),\n    filterMethod: undefined,\n    hideFilter: false,\n    filterRender: ({filter, onFilterChange}) => (\n      <input type='text'\n        style={{\n          width: '100%'\n        }}\n        value={filter ? filter.value : ''}\n        onChange={(event) => onFilterChange(event.target.value)}\n      />\n    )\n  },\n\n  // Text\n  previousText: 'Previous',\n  nextText: 'Next',\n  loadingText: 'Loading...',\n  noDataText: 'No rows found',  \n  pageText: 'Page',\n  ofText: 'of',\n  rowsText: 'rows',\n}\n

You can easily override the core defaults like so:

import { ReactTableDefaults } from 'react-table'\n\nObject.assign(ReactTableDefaults, {\n  defaultPageSize: 10,\n  minRows: 3,\n  // etc...\n})\n

Or just define them as props

<ReactTable\n  defaultPageSize={10}\n  minRows={3}\n  // etc...\n/>\n

Columns

<ReactTable/> requires a columns prop, which is an array of objects containing the following properties

[{\n  // General\n  accessor: 'propertyName', // or Accessor eg. (row) => row.propertyName (see "Accessors" section for more details)\n  id: 'myProperty', // Conditional - A unique ID is required if the accessor is not a string or if you would like to override the column name used in server-side calls\n  sortable: true,\n  show: true, // can be used to hide a column\n  width: undefined, // A hardcoded width for the column. This overrides both min and max width options\n  minWidth: 100, // A minimum width for this column. If there is extra room, column will flex to fill available space (up to the max-width, if set)\n  maxWidth: undefined, // A maximum width for this column.\n\n  // Special\n  expander: false, // This option will override all data-related options and designates the column to be used\n  // for pivoting and sub-component expansion\n\n  // Cell Options\n  className: '', // Set the classname of the `td` element of the column\n  style: {}, // Set the style of the `td` element of the column\n  render: JSX eg. (rowInfo: {value, rowValues, row, index, viewIndex}) => <span>{value}</span>, // Provide a JSX element or stateless function to render whatever you want as the column's cell with access to the entire row\n    // value == the accessed value of the column\n    // rowValues == an object of all of the accessed values for the row\n    // row == the original row of data supplied to the table\n    // index == the original index of the data supplied to the table\n    // viewIndex == the index of the row in the current page\n\n  // Header & HeaderGroup Options\n  header: 'Header Name', a function that returns a primitive, or JSX / React Component eg. ({data, column}) => <div>Header Name</div>,\n  headerClassName: '', // Set the classname of the `th` element of the column\n  headerStyle: {}, // Set the style of the `th` element of the column\n  getHeaderProps: (state, rowInfo, column, instance) => ({}), // a function that returns props to decorate the `th` element of the column\n\n  // Header Groups only\n  columns: [...], // See Header Groups section below\n\n  // Footer\n  footer: 'Footer Name' or JSX eg. ({data, column}) => <div>Footer Name</div>,\n  footerClassName: '', // Set the classname of the `td` element of the column's footer\n  footerStyle: {}, // Set the style of the `td` element of the column's footer\n  getFooterProps: (state, rowInfo, column, instance) => ({}), // A function that returns props to decorate the `td` element of the column's footer\n\n  // Filtering\n  filterMethod: (filter, row, column) => {return true}, // A function returning a boolean that specifies the filtering logic for the column\n    // filter == an object specifying which filter is being applied. Format: {id: [the filter column's id], value: [the value the user typed in the filter field], pivotId: [if filtering on a pivot column, the pivotId will be set to the pivot column's id and the `id` field will be set to the top level pivoting column]}\n    // row == the row of data supplied to the table\n    // column == the column that the filter is on\n  hideFilter: false, // If `showFilters` is set on the table, this option will let you selectively hide the filter on a particular row\n  filterRender: JSX // eg. ({filter, onFilterChange}) => <select onChange={event => onFilterChange(event.target.value)} value={filter ? filter.value : ''}></select> // The value passed to onFilterChange will be the value passed to filter.value of the filterMethod\n}]\n

Accessors

Accessors are functions that return the value to populate the row's value for the column. This lets the render function not have to worry about accessing the correct data, the value is automatically populated in it's props.

If a string or array is passed the default accessor is used. The default accessor will parse the input into an array and recursively flatten it. Any values that contain a dot (.) will be split. Any values that contain bracket ([]) will be split. This array is then used as the path to the value to return.

("$" is the placeholder value that would be returned by the default accessor)

value path data
"a" ["a"] {"a": $}
"a.b" ["a", "b"] {"a": {"b": $}}
"a[0]" ["a", "0"] {"a": [$]}
["a.b", "c"] ["a", "b", "c"] {"a": {"b": {"c": $}}}

NOTE If your data has a field/key with a dot (.) you will need to supply a custom accessor.

Column Header Groups

To group columns with another header column, just nest your columns in a header column. Header columns utilize the same header properties as regular columns.

const columns = [{\n  header: 'Favorites',\n  headerClassName: 'my-favorites-column-header-group'\n  columns: [{\n    header: 'Color',\n    accessor: 'favorites.color'\n  }, {\n    header: 'Food',\n    accessor: 'favorites.food'\n  } {\n    header: 'Actor',\n    accessor: 'favorites.actor'\n  }]\n}]\n

You can use any react component or JSX to display content in column headers, cells and footers. Any component you use will be passed the following props (if available):

  • row - Original row from your data
  • rowValues - The post-accessed values from the original row
  • index - The index of the row
  • viewIndex - the index of the row relative to the current page
  • level - The nesting depth (zero-indexed)
  • nestingPath - The nesting path of the row
  • aggregated - A boolean stating if the row is an aggregation row
  • subRows - An array of any expandable sub-rows contained in this row
// This column uses a stateless component to produce a different colored bar depending on the value\n// You can also use stateful components or any other function that returns JSX\nconst columns = [{\n  header: () => <span><i className='fa-tasks' /> Progress</span>,\n  accessor: 'progress',\n  render: row => (\n    <div\n      style={{\n        width: '100%',\n        height: '100%',\n        backgroundColor: '#dadada',\n        borderRadius: '2px'\n      }}\n    >\n      <div\n        style={{\n          width: `${row.value}%`,\n          height: '100%',\n          backgroundColor: row.value > 66 ? '#85cc00'\n            : row.value > 33 ? '#ffbf00'\n            : '#ff2e00',\n          borderRadius: '2px',\n          transition: 'all .2s ease-out'\n        }}\n      />\n    </div>\n  )\n}]\n

Styles

  • React-table ships with a minimal and clean stylesheet to get you on your feet quickly.
  • The stylesheet is located at react-table/react-table.css.
  • There are countless ways to import a stylesheet. If you have questions on how to do so, consult the documentation of your build system.

Classes

  • Adding a -striped className to ReactTable will slightly color odd numbered rows for legibility
  • Adding a -highlight className to ReactTable will highlight any row as you hover over it

CSS

We think the default styles looks great! But, if you prefer a more custom look, all of the included styles are easily overridable. Every single component contains a unique class that makes it super easy to customize. Just go for it!

JS Styles

Every single react-table element and get[ComponentName]Props callback supports classname and style props.

Custom Props

Built-in Components

Every single built-in component's props can be dynamically extended using any one of these prop-callbacks:

<ReactTable\n  getProps={fn}\n  getTableProps={fn}\n  getTheadGroupProps={fn}\n  getTheadGroupTrProps={fn}\n  getTheadGroupThProps={fn}\n  getTheadProps={fn}\n  getTheadTrProps={fn}\n  getTheadThProps={fn}\n  getTbodyProps={fn}\n  getTrGroupProps={fn}\n  getTrProps={fn}\n  getThProps={fn}\n  getTdProps={fn}\n  getPaginationProps={fn}\n  getLoadingProps={fn}\n  getNoDataProps: {fn},\n  getResizerProps: {fn}\n/>\n

These callbacks are executed with each render of the element with four parameters:

  1. Table State
  2. RowInfo (undefined if not applicable)
  3. Column (undefined if not applicable)
  4. React Table Instance

This makes it extremely easy to add, say... a row click callback!

// When any Td element is clicked, we'll log out some information\n<ReactTable\n  getTdProps={(state, rowInfo, column, instance) => {\n    return {\n      onClick: e => {\n        console.log('A Td Element was clicked!')\n        console.log('it produced this event:', e)\n        console.log('It was in this column:', column)\n        console.log('It was in this row:', rowInfo)\n        console.log('It was in this table instance:', instance)\n      }\n    }\n  }}\n/>\n

You can use these callbacks for dynamic styling as well!

// Any Tr element will be green if its (row.age > 20)\n<ReactTable\n  getTrProps={(state, rowInfo, column) => {\n    return {\n      style: {\n        background: rowInfo.age > 20 ? 'green' : 'red'\n      }\n    }\n  }}\n/>\n

Column Components

Just as core components can have dynamic props, columns and column headers can too!

You can utilize either of these prop callbacks on columns:

const columns = [{\n  getHeaderProps: () => (...),\n  getProps: () => (...)\n}]\n

In a similar fashion these can be used to dynamically style just about anything!

// This columns cells will be red if (row.name === Santa Clause)\nconst columns = [{\n  getProps: (state, rowInfo, column) => {\n    return {\n      style: {\n        background: rowInfo.name === 'Santa Clause' ? 'red' : null\n      }\n    }\n  }\n}]\n

Pivoting and Aggregation

Pivoting the table will group records together based on their accessed values and allow the rows in that group to be expanded underneath it. To pivot, pass an array of columnID's to pivotBy. Remember, a column's id is either the one that you assign it (when using a custom accessors) or its accessor string.

<ReactTable\n  ...\n  pivotBy={['lastName', 'age']}\n/>\n

Naturally when grouping rows together, you may want to aggregate the rows inside it into the grouped column. No aggregation is done by default, however, it is very simple to aggregate any pivoted columns:

// In this example, we use lodash to sum and average the values, but you can use whatever you want to aggregate.\nconst columns = [{\n  header: 'Age',\n  accessor: 'age',\n  aggregate: (values, rows) => _.round(_.mean(values)),\n  render: row => {\n    // You can even render the cell differently if it's an aggregated cell\n    return <span>{row.aggregated ? `${row.value} (avg)` : row.value}</span>\n  }\n}, {\n  header: 'Visits',\n  accessor: 'visits',\n  aggregate: (values, rows) => _.sum(values)\n}]\n

Pivoted columns can be sorted just like regular columns, but not independently of each other. For instance, if you click to sort the pivot column in ascending order, it will sort by each pivot recursively in ascending order together.

Sub Tables and Sub Components

By adding a SubComponent props, you can easily add an expansion level to all root-level rows:

<ReactTable\n  data={data}\n  columns={columns}\n  defaultPageSize={10}\n  SubComponent={(row) => {\n    return (\n      <div>\n        You can put any component you want here, even another React Table! You even have access to the row-level data if you need!  Spark-charts, drill-throughs, infographics... the possibilities are endless!\n      </div>\n    )\n  }}\n/>\n

Server-side Data

If you want to handle pagination, sorting, and filtering on the server, react-table makes it easy on you.

  1. Feed React Table data from somewhere dynamic. eg. state, a redux store, etc...
  2. Add manual as a prop. This informs React Table that you'll be handling sorting and pagination server-side
  3. Subscribe to the onChange prop. This function is called at compomentDidMount and any time sorting or pagination is changed by the user
  4. In the onChange callback, request your data using the provided information in the params of the function (state and instance)
  5. Update your data with the rows to be displayed
  6. Optionally set how many pages there are total
<ReactTable\n  ...\n  data={this.state.data} // should default to []\n  pages={this.state.pages} // should default to -1 (which means we don't know how many pages we have)\n  loading={this.state.loading}\n  manual // informs React Table that you'll be handling sorting and pagination server-side\n  onChange={(state, instance) => {\n    // show the loading overlay\n    this.setState({loading: true})\n    // fetch your data\n    Axios.post('mysite.com/data', {\n      page: state.page,\n      pageSize: state.pageSize,\n      sorting: state.sorting,\n      filtering: state.filtering\n    })\n      .then((res) => {\n        // Update react-table\n        this.setState({\n          data: res.data.rows,\n          pages: res.data.pages,\n          loading: false\n        })\n      })\n  }}\n/>\n

For a detailed example, take a peek at our async table mockup

Fully Controlled Component

React Table by default works fantastically out of the box, but you can achieve even more control and customization if you choose to maintain the state yourself. It is very easy to do, even if you only want to manage parts of the state.

Here are the props and their corresponding callbacks that control the state of the a table:

<ReactTable\n  // Props\n  page={0} // the index of the page you wish to display\n  pageSize={20} // the number of rows per page to be displayed\n  sorting={[{\n      id: 'lastName',\n      asc: true\n    }, {\n      id: 'firstName',\n      asc: true\n  }]} // the sorting model for the table\n  expandedRows={{\n    1: true,\n    4: true,\n    5: {\n      2: true,\n      3: true\n    }\n  }} // The nested row indexes on the current page that should appear expanded\n\n  // Callbacks\n  onPageChange={(pageIndex) => {...}} // Called when the page index is changed by the user\n  onPageSizeChange={(pageSize, pageIndex) => {...}} // Called when the pageSize is changed by the user. The resolve page is also sent to maintain approximate position in the data\n  onSortingChange={(column, shiftKey) => {...}} // Called when a sortable column header is clicked with the column itself and if the shiftkey was held. If the column is a pivoted column, `column` will be an array of columns\n  onExpandRow={(index, event) => {...}} // Called when an expander is clicked. Use this to manage `expandedRows`\n  onFilteringChange={(column, value) => {...}} // Called when a user enters a value into a filter input field or the value passed to the onFilterChange handler by the filterRender option.\n  onResize={(column, event, isTouch) => {...}} // Called when a user clicks on a resizing component (the right edge of a column header)\n/>\n

Functional Rendering

Possibly one of the coolest features of React-Table is its ability to expose internal components and state for custom render logic. The easiest way to do this is to pass a function as the child of <ReactTable />.

The function you pass will be called with the following items:

  • Fully-resolved state of the table
  • A function that returns the standard table component
  • The instance of the component

You can then return any JSX or react you want! This turns out to be perfect for:

  • Accessing the internal state of the table without a ref
  • Decorating the table or extending it with your own UI
  • Building your own custom display logic

Accessing internal state and wrapping with more UI:

<ReactTable\n  data={data}\n  columns={columns}\n>\n  {(state, makeTable, instance) => {\n    return (\n      <div style={{\n        background: '#ffcf00',\n        borderRadius: '5px',\n        overflow: 'hidden',\n        padding: '5px'\n      }}>\n        <pre><code>state.allVisibleColumns === {JSON.stringify(state.allVisibleColumns, null, 4)}</code></pre>\n        {makeTable()}\n      </div>\n    )\n  }}\n</ReactTable>\n

The possibilities are endless!

Multi-Sort

When clicking on a column header, hold shift to multi-sort! You can toggle ascending descending and none for multi-sort columns. Clicking on a header without holding shift will clear the multi-sort and replace it with the single sort of that column. It's quite handy!

Filtering

Filtering can be enabled by setting the showFilters option on the table.

If you don't want particular column to be filtered you can set the hideFilter option on the column.

By default the table tries to filter by checking if the row's value starts with the filter text. The default method for filtering the table can be set with the table's defaultFilterMethod option.

If you want to override a particular column's filtering method, you can set the filterMethod option on a column.

To completely override the filter that is shown, you can set the filterRender column option. Using this option you can specify the JSX that is shown. The option is passed an onFilterChange method which must be called with the the value that you wan't to pass to the filterMethod option whenever the filter has changed.

See Custom Filtering demo for examples.

Component Overrides

Though we confidently stand by the markup and architecture behind it, react-table does offer the ability to change the core componentry it uses to render everything. You can extend or override these internal components by passing a react component to it's corresponding prop on either the global props or on a one-off basis like so:

// Change the global default\nimport { ReactTableDefaults } from 'react-table'\nObject.assign(ReactTableDefaults, {\n  TableComponent: component,\n  TheadComponent: component,\n  TbodyComponent: component,\n  TrGroupComponent: component,\n  TrComponent: component,\n  ThComponent: component\n  TdComponent: component,\n  TfootComponent: component,\n  ExpanderComponent: component,\n  PaginationComponent: component,\n  PreviousComponent: undefined,\n  NextComponent: undefined,\n  LoadingComponent: component,\n  NoDataComponent: component,\n  ResizerComponent: component\n})\n\n// Or change per instance\n<ReactTable\n  TableComponent={Component},\n  TheadComponent={Component},\n  // etc...\n  />\n

If you choose to change the core components React-Table uses to render, you must make sure your replacement components consume and utilize all of the supplied and inherited props that are needed for that component to function properly. We would suggest investigating the source for the component you wish to replace.

Contributing

To suggest a feature, create an issue if it does not already exist. If you would like to help develop a suggested feature follow these steps:

  • Fork this repo
  • $ yarn
  • $ yarn run storybook
  • Implement your changes to files in the src/ directory
  • View changes as you code via our React Storybook localhost:8000
  • Make changes to stories in /stories, or create a new one if needed
  • Submit PR for review

Scripts

  • $ yarn run storybook Runs the storybook server
  • $ yarn run test Runs the test suite
  • $ yarn run prepublish Builds the distributable bundle
  • $ yarn run docs Builds the website/docs from the storybook for github pages

Used By

Nozzle Logo

'; +},function(module,exports,__webpack_require__){exports=module.exports=__webpack_require__(123)(),exports.push([module.id,"code[class*=language-],pre[class*=language-]{color:#000;background:none;text-shadow:0 1px #fff;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-]::-moz-selection,code[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-]::selection,code[class*=language-] ::selection,pre[class*=language-]::selection,pre[class*=language-] ::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#a67f59;background:hsla(0,0%,100%,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.function{color:#dd4a68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}",""])},,,,,,function(module,exports){module.exports='
React Table Logo

React Table

react-table is a lightweight, fast and extendable datagrid built for React

Features

  • Lightweight at 7kb (and just 2kb more for styles)
  • Fully customizable JSX templating
  • Supports both Client-side & Server-side pagination and multi-sorting
  • Column Pivoting & Aggregation
  • Minimal design & easily themeable
  • Fully controllable via optional props and callbacks
  • "Why I wrote React Table and the problems it has solved for Nozzle.io by Tanner Linsley

Demos and examples

Table of Contents

Installation

  1. Install React Table as a dependency
    $ yarn add react-table\n
  2. Import the react-table module
    // ES6\nimport ReactTable from 'react-table'\n// ES5\nvar ReactTable = require('react-table').default\n

  3. Import styles by including react-table.css

    // JS (Webpack)\nimport 'react-table/react-table.css'\n// Old-school\n<link rel="stylesheet" href="node_modules/react-table/react-table.css">\n
    CDN
    <!-- CSS -->\n<link rel="stylesheet" href="https://unpkg.com/react-table@latest/react-table.css">\n\n<!-- JS -->\n<script src="https://unpkg.com/react-table@latest/react-table.js"></script>\n\n<script>\n var ReactTable = window.ReactTable.default\n</script>\n

Example

import ReactTable from 'react-table'\n\nrender() {\n  const data = [{\n    name: 'Tanner Linsley',\n    age: 26,\n    friend: {\n      name: 'Jason Maurer',\n      age: 23,\n    }\n  },{\n    ...\n  }]\n\n  const columns = [{\n    header: 'Name',\n    accessor: 'name' // String-based value accessors!\n  }, {\n    header: 'Age',\n    accessor: 'age',\n    render: props => <span className='number'>{props.value}</span> // Custom cell components!\n  }, {\n    id: 'friendName', // Required because our accessor is not a string\n    header: 'Friend Name',\n    accessor: d => d.friend.name // Custom value accessors!\n  }, {\n    header: props => <span>Friend Age</span>, // Custom header components!\n    accessor: 'friend.age'\n  }]\n\n  <ReactTable\n    data={data}\n    columns={columns}\n  />\n}\n

Data

Simply pass the data prop anything that resembles an array or object. Client-side sorting and pagination are built in, and your table will update gracefully as you change any props. Server-side data is also supported!

Props

These are all of the available props (and their default values) for the main <ReactTable /> component.

{\n  // General\n  data: [],\n  loading: false,\n  showPagination: true,\n  showPageSizeOptions: true,\n  pageSizeOptions: [5, 10, 20, 25, 50, 100],\n  defaultPageSize: 20,\n  showPageJump: true,\n  expanderColumnWidth: 35,\n  collapseOnSortingChange: true,\n  collapseOnPageChange: true,\n  collapseOnDataChange: true,\n  freezeWhenExpanded: false,\n  defaultSorting: [],\n  showFilters: false,\n  defaultFiltering: [],\n  defaultFilterMethod: (filter, row, column) => {\n    const id = filter.pivotId || filter.id\n    return row[id] !== undefined ? String(row[id]).startsWith(filter.value) : true\n  },\n  resizable: true,\n  defaultResizing: [],\n\n  // Controlled State Overrides (see Fully Controlled Component section)\n  page: undefined,\n  pageSize: undefined,\n  sorting: undefined,\n\n  // Controlled State Callbacks\n  onExpandSubComponent: undefined,\n  onPageChange: undefined,\n  onPageSizeChange: undefined,\n  onSortingChange: undefined,\n  onFilteringChange: undefined,\n  onResize: undefined,\n\n  // Pivoting\n  pivotBy: undefined,\n  pivotColumnWidth: 200,\n  pivotValKey: '_pivotVal',\n  pivotIDKey: '_pivotID',\n  subRowsKey: '_subRows',\n\n  // Pivoting State Overrides (see Fully Controlled Component section)\n  expandedRows: {},\n\n  // Pivoting State Callbacks\n  onExpandRow: undefined,\n\n  // General Callbacks\n  onChange: () => null,\n\n  // Classes\n  className: '',\n  style: {},\n\n  // Component decorators\n  getProps: () => ({}),\n  getTableProps: () => ({}),\n  getTheadGroupProps: () => ({}),\n  getTheadGroupTrProps: () => ({}),\n  getTheadGroupThProps: () => ({}),\n  getTheadProps: () => ({}),\n  getTheadTrProps: () => ({}),\n  getTheadThProps: () => ({}),\n  getTheadFilterProps: () => ({}),\n  getTheadFilterTrProps: () => ({}),\n  getTheadFilterThProps: () => ({}),\n  getTbodyProps: () => ({}),\n  getTrGroupProps: () => ({}),\n  getTrProps: () => ({}),\n  getThProps: () => ({}),\n  getTdProps: () => ({}),\n  getTfootProps: () => ({}),\n  getTfootTrProps: () => ({}),\n  getTfootThProps: () => ({}),\n  getPaginationProps: () => ({}),\n  getLoadingProps: () => ({}),\n  getNoDataProps: () => ({}),\n  getResizerProps: () => ({}),\n\n  // Global Column Defaults\n  column: {\n    sortable: true,\n    show: true,\n    minWidth: 100,\n    // Cells only\n    render: undefined,\n    className: '',\n    style: {},\n    getProps: () => ({}),\n    // Headers only\n    header: undefined,\n    headerClassName: '',\n    headerStyle: {},\n    getHeaderProps: () => ({})\n    // Footers only\n    footer: undefined,\n    footerClassName: '',\n    footerStyle: {},\n    getFooterProps: () => ({}),\n    filterMethod: undefined,\n    hideFilter: false,\n    filterRender: ({filter, onFilterChange}) => (\n      <input type='text'\n        style={{\n          width: '100%'\n        }}\n        value={filter ? filter.value : ''}\n        onChange={(event) => onFilterChange(event.target.value)}\n      />\n    )\n  },\n\n  // Text\n  previousText: 'Previous',\n  nextText: 'Next',\n  loadingText: 'Loading...',\n  noDataText: 'No rows found',  \n  pageText: 'Page',\n  ofText: 'of',\n  rowsText: 'rows',\n}\n

You can easily override the core defaults like so:

import { ReactTableDefaults } from 'react-table'\n\nObject.assign(ReactTableDefaults, {\n  defaultPageSize: 10,\n  minRows: 3,\n  // etc...\n})\n

Or just define them as props

<ReactTable\n  defaultPageSize={10}\n  minRows={3}\n  // etc...\n/>\n

Columns

<ReactTable/> requires a columns prop, which is an array of objects containing the following properties

[{\n  // General\n  accessor: 'propertyName', // or Accessor eg. (row) => row.propertyName (see "Accessors" section for more details)\n  id: 'myProperty', // Conditional - A unique ID is required if the accessor is not a string or if you would like to override the column name used in server-side calls\n  sortable: true,\n  show: true, // can be used to hide a column\n  width: undefined, // A hardcoded width for the column. This overrides both min and max width options\n  minWidth: 100, // A minimum width for this column. If there is extra room, column will flex to fill available space (up to the max-width, if set)\n  maxWidth: undefined, // A maximum width for this column.\n\n  // Special\n  expander: false, // This option will override all data-related options and designates the column to be used\n  // for pivoting and sub-component expansion\n\n  // Cell Options\n  className: '', // Set the classname of the `td` element of the column\n  style: {}, // Set the style of the `td` element of the column\n  render: JSX eg. (rowInfo: {value, rowValues, row, index, viewIndex}) => <span>{value}</span>, // Provide a JSX element or stateless function to render whatever you want as the column's cell with access to the entire row\n    // value == the accessed value of the column\n    // rowValues == an object of all of the accessed values for the row\n    // row == the original row of data supplied to the table\n    // index == the original index of the data supplied to the table\n    // viewIndex == the index of the row in the current page\n\n  // Header & HeaderGroup Options\n  header: 'Header Name', a function that returns a primitive, or JSX / React Component eg. ({data, column}) => <div>Header Name</div>,\n  headerClassName: '', // Set the classname of the `th` element of the column\n  headerStyle: {}, // Set the style of the `th` element of the column\n  getHeaderProps: (state, rowInfo, column, instance) => ({}), // a function that returns props to decorate the `th` element of the column\n\n  // Header Groups only\n  columns: [...], // See Header Groups section below\n\n  // Footer\n  footer: 'Footer Name' or JSX eg. ({data, column}) => <div>Footer Name</div>,\n  footerClassName: '', // Set the classname of the `td` element of the column's footer\n  footerStyle: {}, // Set the style of the `td` element of the column's footer\n  getFooterProps: (state, rowInfo, column, instance) => ({}), // A function that returns props to decorate the `td` element of the column's footer\n\n  // Filtering\n  filterMethod: (filter, row, column) => {return true}, // A function returning a boolean that specifies the filtering logic for the column\n    // filter == an object specifying which filter is being applied. Format: {id: [the filter column's id], value: [the value the user typed in the filter field], pivotId: [if filtering on a pivot column, the pivotId will be set to the pivot column's id and the `id` field will be set to the top level pivoting column]}\n    // row == the row of data supplied to the table\n    // column == the column that the filter is on\n  hideFilter: false, // If `showFilters` is set on the table, this option will let you selectively hide the filter on a particular row\n  filterRender: JSX // eg. ({filter, onFilterChange}) => <select onChange={event => onFilterChange(event.target.value)} value={filter ? filter.value : ''}></select> // The value passed to onFilterChange will be the value passed to filter.value of the filterMethod\n}]\n

Accessors

Accessors are functions that return the value to populate the row's value for the column. This lets the render function not have to worry about accessing the correct data, the value is automatically populated in it's props.

If a string or array is passed the default accessor is used. The default accessor will parse the input into an array and recursively flatten it. Any values that contain a dot (.) will be split. Any values that contain bracket ([]) will be split. This array is then used as the path to the value to return.

("$" is the placeholder value that would be returned by the default accessor)

value path data
"a" ["a"] {"a": $}
"a.b" ["a", "b"] {"a": {"b": $}}
"a[0]" ["a", "0"] {"a": [$]}
["a.b", "c"] ["a", "b", "c"] {"a": {"b": {"c": $}}}

NOTE If your data has a field/key with a dot (.) you will need to supply a custom accessor.

Column Header Groups

To group columns with another header column, just nest your columns in a header column. Header columns utilize the same header properties as regular columns.

const columns = [{\n  header: 'Favorites',\n  headerClassName: 'my-favorites-column-header-group'\n  columns: [{\n    header: 'Color',\n    accessor: 'favorites.color'\n  }, {\n    header: 'Food',\n    accessor: 'favorites.food'\n  } {\n    header: 'Actor',\n    accessor: 'favorites.actor'\n  }]\n}]\n

You can use any react component or JSX to display content in column headers, cells and footers. Any component you use will be passed the following props (if available):

  • row - Original row from your data
  • rowValues - The post-accessed values from the original row
  • index - The index of the row
  • viewIndex - the index of the row relative to the current page
  • level - The nesting depth (zero-indexed)
  • nestingPath - The nesting path of the row
  • aggregated - A boolean stating if the row is an aggregation row
  • subRows - An array of any expandable sub-rows contained in this row
// This column uses a stateless component to produce a different colored bar depending on the value\n// You can also use stateful components or any other function that returns JSX\nconst columns = [{\n  header: () => <span><i className='fa-tasks' /> Progress</span>,\n  accessor: 'progress',\n  render: row => (\n    <div\n      style={{\n        width: '100%',\n        height: '100%',\n        backgroundColor: '#dadada',\n        borderRadius: '2px'\n      }}\n    >\n      <div\n        style={{\n          width: `${row.value}%`,\n          height: '100%',\n          backgroundColor: row.value > 66 ? '#85cc00'\n            : row.value > 33 ? '#ffbf00'\n            : '#ff2e00',\n          borderRadius: '2px',\n          transition: 'all .2s ease-out'\n        }}\n      />\n    </div>\n  )\n}]\n

Styles

  • React-table ships with a minimal and clean stylesheet to get you on your feet quickly.
  • The stylesheet is located at react-table/react-table.css.
  • There are countless ways to import a stylesheet. If you have questions on how to do so, consult the documentation of your build system.

Classes

  • Adding a -striped className to ReactTable will slightly color odd numbered rows for legibility
  • Adding a -highlight className to ReactTable will highlight any row as you hover over it

CSS

We think the default styles looks great! But, if you prefer a more custom look, all of the included styles are easily overridable. Every single component contains a unique class that makes it super easy to customize. Just go for it!

JS Styles

Every single react-table element and get[ComponentName]Props callback supports classname and style props.

Custom Props

Built-in Components

Every single built-in component's props can be dynamically extended using any one of these prop-callbacks:

<ReactTable\n  getProps={fn}\n  getTableProps={fn}\n  getTheadGroupProps={fn}\n  getTheadGroupTrProps={fn}\n  getTheadGroupThProps={fn}\n  getTheadProps={fn}\n  getTheadTrProps={fn}\n  getTheadThProps={fn}\n  getTbodyProps={fn}\n  getTrGroupProps={fn}\n  getTrProps={fn}\n  getThProps={fn}\n  getTdProps={fn}\n  getPaginationProps={fn}\n  getLoadingProps={fn}\n  getNoDataProps: {fn},\n  getResizerProps: {fn}\n/>\n

These callbacks are executed with each render of the element with four parameters:

  1. Table State
  2. RowInfo (undefined if not applicable)
  3. Column (undefined if not applicable)
  4. React Table Instance

This makes it extremely easy to add, say... a row click callback!

// When any Td element is clicked, we'll log out some information\n<ReactTable\n  getTdProps={(state, rowInfo, column, instance) => {\n    return {\n      onClick: e => {\n        console.log('A Td Element was clicked!')\n        console.log('it produced this event:', e)\n        console.log('It was in this column:', column)\n        console.log('It was in this row:', rowInfo)\n        console.log('It was in this table instance:', instance)\n      }\n    }\n  }}\n/>\n

You can use these callbacks for dynamic styling as well!

// Any Tr element will be green if its (row.age > 20)\n<ReactTable\n  getTrProps={(state, rowInfo, column) => {\n    return {\n      style: {\n        background: rowInfo.age > 20 ? 'green' : 'red'\n      }\n    }\n  }}\n/>\n

Column Components

Just as core components can have dynamic props, columns and column headers can too!

You can utilize either of these prop callbacks on columns:

const columns = [{\n  getHeaderProps: () => (...),\n  getProps: () => (...)\n}]\n

In a similar fashion these can be used to dynamically style just about anything!

// This columns cells will be red if (row.name === Santa Clause)\nconst columns = [{\n  getProps: (state, rowInfo, column) => {\n    return {\n      style: {\n        background: rowInfo.name === 'Santa Clause' ? 'red' : null\n      }\n    }\n  }\n}]\n

Pivoting and Aggregation

Pivoting the table will group records together based on their accessed values and allow the rows in that group to be expanded underneath it. To pivot, pass an array of columnID's to pivotBy. Remember, a column's id is either the one that you assign it (when using a custom accessors) or its accessor string.

<ReactTable\n  ...\n  pivotBy={['lastName', 'age']}\n/>\n

Naturally when grouping rows together, you may want to aggregate the rows inside it into the grouped column. No aggregation is done by default, however, it is very simple to aggregate any pivoted columns:

// In this example, we use lodash to sum and average the values, but you can use whatever you want to aggregate.\nconst columns = [{\n  header: 'Age',\n  accessor: 'age',\n  aggregate: (values, rows) => _.round(_.mean(values)),\n  render: row => {\n    // You can even render the cell differently if it's an aggregated cell\n    return <span>{row.aggregated ? `${row.value} (avg)` : row.value}</span>\n  }\n}, {\n  header: 'Visits',\n  accessor: 'visits',\n  aggregate: (values, rows) => _.sum(values)\n}]\n

Pivoted columns can be sorted just like regular columns, but not independently of each other. For instance, if you click to sort the pivot column in ascending order, it will sort by each pivot recursively in ascending order together.

Sub Tables and Sub Components

By adding a SubComponent props, you can easily add an expansion level to all root-level rows:

<ReactTable\n  data={data}\n  columns={columns}\n  defaultPageSize={10}\n  SubComponent={(row) => {\n    return (\n      <div>\n        You can put any component you want here, even another React Table! You even have access to the row-level data if you need!  Spark-charts, drill-throughs, infographics... the possibilities are endless!\n      </div>\n    )\n  }}\n/>\n

Server-side Data

If you want to handle pagination, sorting, and filtering on the server, react-table makes it easy on you.

  1. Feed React Table data from somewhere dynamic. eg. state, a redux store, etc...
  2. Add manual as a prop. This informs React Table that you'll be handling sorting and pagination server-side
  3. Subscribe to the onChange prop. This function is called at compomentDidMount and any time sorting or pagination is changed by the user
  4. In the onChange callback, request your data using the provided information in the params of the function (state and instance)
  5. Update your data with the rows to be displayed
  6. Optionally set how many pages there are total
<ReactTable\n  ...\n  data={this.state.data} // should default to []\n  pages={this.state.pages} // should default to -1 (which means we don't know how many pages we have)\n  loading={this.state.loading}\n  manual // informs React Table that you'll be handling sorting and pagination server-side\n  onChange={(state, instance) => {\n    // show the loading overlay\n    this.setState({loading: true})\n    // fetch your data\n    Axios.post('mysite.com/data', {\n      page: state.page,\n      pageSize: state.pageSize,\n      sorting: state.sorting,\n      filtering: state.filtering\n    })\n      .then((res) => {\n        // Update react-table\n        this.setState({\n          data: res.data.rows,\n          pages: res.data.pages,\n          loading: false\n        })\n      })\n  }}\n/>\n

For a detailed example, take a peek at our async table mockup

Fully Controlled Component

React Table by default works fantastically out of the box, but you can achieve even more control and customization if you choose to maintain the state yourself. It is very easy to do, even if you only want to manage parts of the state.

Here are the props and their corresponding callbacks that control the state of the a table:

<ReactTable\n  // Props\n  page={0} // the index of the page you wish to display\n  pageSize={20} // the number of rows per page to be displayed\n  sorting={[{\n      id: 'lastName',\n      asc: true\n    }, {\n      id: 'firstName',\n      asc: true\n  }]} // the sorting model for the table\n  expandedRows={{\n    1: true,\n    4: true,\n    5: {\n      2: true,\n      3: true\n    }\n  }} // The nested row indexes on the current page that should appear expanded\n\n  // Callbacks\n  onPageChange={(pageIndex) => {...}} // Called when the page index is changed by the user\n  onPageSizeChange={(pageSize, pageIndex) => {...}} // Called when the pageSize is changed by the user. The resolve page is also sent to maintain approximate position in the data\n  onSortingChange={(column, shiftKey) => {...}} // Called when a sortable column header is clicked with the column itself and if the shiftkey was held. If the column is a pivoted column, `column` will be an array of columns\n  onExpandRow={(index, event) => {...}} // Called when an expander is clicked. Use this to manage `expandedRows`\n  onFilteringChange={(column, value) => {...}} // Called when a user enters a value into a filter input field or the value passed to the onFilterChange handler by the filterRender option.\n  onResize={(column, event, isTouch) => {...}} // Called when a user clicks on a resizing component (the right edge of a column header)\n/>\n

Functional Rendering

Possibly one of the coolest features of React-Table is its ability to expose internal components and state for custom render logic. The easiest way to do this is to pass a function as the child of <ReactTable />.

The function you pass will be called with the following items:

  • Fully-resolved state of the table
  • A function that returns the standard table component
  • The instance of the component

You can then return any JSX or react you want! This turns out to be perfect for:

  • Accessing the internal state of the table without a ref
  • Decorating the table or extending it with your own UI
  • Building your own custom display logic

Accessing internal state and wrapping with more UI:

<ReactTable\n  data={data}\n  columns={columns}\n>\n  {(state, makeTable, instance) => {\n    return (\n      <div style={{\n        background: '#ffcf00',\n        borderRadius: '5px',\n        overflow: 'hidden',\n        padding: '5px'\n      }}>\n        <pre><code>state.allVisibleColumns === {JSON.stringify(state.allVisibleColumns, null, 4)}</code></pre>\n        {makeTable()}\n      </div>\n    )\n  }}\n</ReactTable>\n

The possibilities are endless!

Multi-Sort

When clicking on a column header, hold shift to multi-sort! You can toggle ascending descending and none for multi-sort columns. Clicking on a header without holding shift will clear the multi-sort and replace it with the single sort of that column. It's quite handy!

Filtering

Filtering can be enabled by setting the showFilters option on the table.

If you don't want particular column to be filtered you can set the hideFilter option on the column.

By default the table tries to filter by checking if the row's value starts with the filter text. The default method for filtering the table can be set with the table's defaultFilterMethod option.

If you want to override a particular column's filtering method, you can set the filterMethod option on a column.

To completely override the filter that is shown, you can set the filterRender column option. Using this option you can specify the JSX that is shown. The option is passed an onFilterChange method which must be called with the the value that you wan't to pass to the filterMethod option whenever the filter has changed.

See Custom Filtering demo for examples.

Component Overrides

Though we confidently stand by the markup and architecture behind it, react-table does offer the ability to change the core componentry it uses to render everything. You can extend or override these internal components by passing a react component to it's corresponding prop on either the global props or on a one-off basis like so:

// Change the global default\nimport { ReactTableDefaults } from 'react-table'\nObject.assign(ReactTableDefaults, {\n  TableComponent: component,\n  TheadComponent: component,\n  TbodyComponent: component,\n  TrGroupComponent: component,\n  TrComponent: component,\n  ThComponent: component\n  TdComponent: component,\n  TfootComponent: component,\n  ExpanderComponent: component,\n  PaginationComponent: component,\n  PreviousComponent: undefined,\n  NextComponent: undefined,\n  LoadingComponent: component,\n  NoDataComponent: component,\n  ResizerComponent: component\n})\n\n// Or change per instance\n<ReactTable\n  TableComponent={Component},\n  TheadComponent={Component},\n  // etc...\n  />\n

If you choose to change the core components React-Table uses to render, you must make sure your replacement components consume and utilize all of the supplied and inherited props that are needed for that component to function properly. We would suggest investigating the source for the component you wish to replace.

Contributing

To suggest a feature, create an issue if it does not already exist. If you would like to help develop a suggested feature follow these steps:

  • Fork this repo
  • $ yarn
  • $ yarn run storybook
  • Implement your changes to files in the src/ directory
  • View changes as you code via our React Storybook localhost:8000
  • Make changes to stories in /stories, or create a new one if needed
  • Submit PR for review

Scripts

  • $ yarn run storybook Runs the storybook server
  • $ yarn run test Runs the test suite
  • $ yarn run prepublish Builds the distributable bundle
  • $ yarn run docs Builds the website/docs from the storybook for github pages

Used By

Nozzle Logo

'; },,,function(module,exports){(function(global){function apply(func,thisArg,args){switch(args.length){case 0:return func.call(thisArg);case 1:return func.call(thisArg,args[0]);case 2:return func.call(thisArg,args[0],args[1]);case 3:return func.call(thisArg,args[0],args[1],args[2])}return func.apply(thisArg,args)}function arrayEach(array,iteratee){for(var index=-1,length=array?array.length:0;++index-1}function baseFindIndex(array,predicate,fromIndex,fromRight){for(var length=array.length,index=fromIndex+(fromRight?1:-1);fromRight?index--:++index1&&args.reverse(),isAry&&ary1?"& ":"")+details[lastIndex],details=details.join(length>2?", ":" "),source.replace(reWrapComment,"{\n/* [wrapped with "+details+"] */\n")}function isIndex(value,length){return length=null==length?MAX_SAFE_INTEGER:length,!!length&&("number"==typeof value||reIsUint.test(value))&&value>-1&&value%1==0&&value2?func:void 0}(),setWrapToString=defineProperty?function(wrapper,reference,bitmask){var source=reference+"";return defineProperty(wrapper,"toString",{configurable:!0,enumerable:!1,value:constant(insertWrapDetails(source,updateWrapDetails(getWrapDetails(source),bitmask)))})}:identity;curry.placeholder={},module.exports=curry}).call(exports,function(){return this}())},function(module,exports){(function(global){function apply(func,thisArg,args){switch(args.length){case 0:return func.call(thisArg);case 1:return func.call(thisArg,args[0]);case 2:return func.call(thisArg,args[0],args[1]);case 3:return func.call(thisArg,args[0],args[1],args[2])}return func.apply(thisArg,args)}function arrayPush(array,values){for(var index=-1,length=values.length,offset=array.length;++index0&&predicate(value)?depth>1?baseFlatten(value,depth-1,predicate,isStrict,result):arrayPush(result,value):isStrict||(result[result.length]=value)}return result}function baseRest(func,start){return start=nativeMax(void 0===start?func.length-1:start,0),function(){for(var args=arguments,index=-1,length=nativeMax(args.length-start,0),array=Array(length);++index-1&&value%1==0&&value<=MAX_SAFE_INTEGER}function isObject(value){var type=typeof value;return!!value&&("object"==type||"function"==type)}function isObjectLike(value){return!!value&&"object"==typeof value}var FUNC_ERROR_TEXT="Expected a function",MAX_SAFE_INTEGER=9007199254740991,argsTag="[object Arguments]",funcTag="[object Function]",genTag="[object GeneratorFunction]",freeGlobal="object"==typeof global&&global&&global.Object===Object&&global,freeSelf="object"==typeof self&&self&&self.Object===Object&&self,root=freeGlobal||freeSelf||Function("return this")(),objectProto=Object.prototype,hasOwnProperty=objectProto.hasOwnProperty,objectToString=objectProto.toString,Symbol=root.Symbol,propertyIsEnumerable=objectProto.propertyIsEnumerable,spreadableSymbol=Symbol?Symbol.isConcatSpreadable:void 0,nativeMax=Math.max,isArray=Array.isArray,flow=createFlow();module.exports=flow}).call(exports,function(){return this}())},,,,,function(module,exports,__webpack_require__){function baseGetTag(value){return null==value?void 0===value?undefinedTag:nullTag:symToStringTag&&symToStringTag in Object(value)?getRawTag(value):objectToString(value)}var Symbol=__webpack_require__(427),getRawTag=__webpack_require__(631),objectToString=__webpack_require__(632),nullTag="[object Null]",undefinedTag="[object Undefined]",symToStringTag=Symbol?Symbol.toStringTag:void 0;module.exports=baseGetTag},function(module,exports){(function(global){var freeGlobal="object"==typeof global&&global&&global.Object===Object&&global;module.exports=freeGlobal}).call(exports,function(){return this}())},function(module,exports,__webpack_require__){var overArg=__webpack_require__(633),getPrototype=overArg(Object.getPrototypeOf,Object);module.exports=getPrototype},function(module,exports,__webpack_require__){function getRawTag(value){var isOwn=hasOwnProperty.call(value,symToStringTag),tag=value[symToStringTag];try{value[symToStringTag]=void 0;var unmasked=!0}catch(e){}var result=nativeObjectToString.call(value);return unmasked&&(isOwn?value[symToStringTag]=tag:delete value[symToStringTag]),result}var Symbol=__webpack_require__(427),objectProto=Object.prototype,hasOwnProperty=objectProto.hasOwnProperty,nativeObjectToString=objectProto.toString,symToStringTag=Symbol?Symbol.toStringTag:void 0;module.exports=getRawTag},function(module,exports){function objectToString(value){return nativeObjectToString.call(value)}var objectProto=Object.prototype,nativeObjectToString=objectProto.toString;module.exports=objectToString},function(module,exports){function overArg(func,transform){return function(arg){return func(transform(arg))}}module.exports=overArg},function(module,exports,__webpack_require__){var freeGlobal=__webpack_require__(629),freeSelf="object"==typeof self&&self&&self.Object===Object&&self,root=freeGlobal||freeSelf||Function("return this")();module.exports=root},function(module,exports){function isObjectLike(value){return null!=value&&"object"==typeof value}module.exports=isObjectLike},,,,,,,,,,,function(module,exports,__webpack_require__){"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=function(){var options=arguments.length<=0||void 0===arguments[0]?{}:arguments[0];options.numLen||0===options.numLen||(options.numLen=4);var numberLength=parseInt(options.numLen,10);options.words||0===options.words||(options.words=2);var wordCount=parseInt(options.words,10);if(wordCount<1)throw new Error("word count must be above 0");if(wordCount>4)throw new Error("word count cannot be above 4");if(numberLength<0)throw new Error("trailing number length must be above 0");var pattern=void 0;switch(wordCount){case 1:pattern="noun";break;case 2:default:pattern=(0,_random.randomFromArray)(["adjective|noun","noun|verb"]);break;case 3:pattern="adjective|noun|verb";break;case 4:pattern="adjective|noun|noun|verb"}for(var name="",splitPattern=pattern.split("|"),i=0;i1&&t3--,val=6*t3<1?t1+6*(t2-t1)*t3:2*t3<1?t2:3*t3<2?t1+(t2-t1)*(2/3-t3)*6:t1,rgb[i]=255*val;return rgb}module.exports=hsl2rgb},function(module,exports,__webpack_require__){function componentToHex(c){var value=Math.round(clamp(c,0,255)),hex=value.toString(16);return 1==hex.length?"0"+hex:hex}function rgb2hex(rgb){return"#"+componentToHex(rgb[0])+componentToHex(rgb[1])+componentToHex(rgb[2])}var clamp=__webpack_require__(304);module.exports=rgb2hex},function(module,exports){function hex(hex){return 4===hex.length&&(hex="#"+hex.charAt(1)+hex.charAt(1)+hex.charAt(2)+hex.charAt(2)+hex.charAt(3)+hex.charAt(3)),[parseInt(hex.substring(1,3),16),parseInt(hex.substring(3,5),16),parseInt(hex.substring(5,7),16)]}module.exports=hex},function(module,exports,__webpack_require__){function parseHslComponent(component,i){switch(component=parseFloat(component),i){case 0:return clamp(component,0,360);case 1:case 2:return clamp(component,0,100);case 3:return clamp(component,0,1)}}function hsl(color){return extractComponents(color).map(parseHslComponent)}var extractComponents=__webpack_require__(430),clamp=__webpack_require__(304);module.exports=hsl},function(module,exports,__webpack_require__){function hsl2rgbParse(color){var h=hsl(color),r=hsl2rgb(h);return 4===h.length&&r.push(h[3]),r}function parse(color){for(var scheme in space2parser)if(0===color.indexOf(scheme))return space2parser[scheme](color)}var hsl=__webpack_require__(653),hex=__webpack_require__(652),rgb=__webpack_require__(655),hsl2rgb=__webpack_require__(650),space2parser={"#":hex,hsl:hsl2rgbParse,rgb:rgb};parse.rgb=rgb,parse.hsl=hsl,parse.hex=hex,module.exports=parse},function(module,exports,__webpack_require__){function parseRgbComponent(component,i){return i<3?component.indexOf("%")!=-1?Math.round(255*clamp(parseInt(component,10),0,100)/100):clamp(parseInt(component,10),0,255):clamp(parseFloat(component),0,1)}function rgb(color){return extractComponents(color).map(parseRgbComponent)}var extractComponents=__webpack_require__(430),clamp=__webpack_require__(304);module.exports=rgb},function(module,exports,__webpack_require__){"use strict";function _interopRequireWildcard(obj){if(obj&&obj.__esModule)return obj;var newObj={};if(null!=obj)for(var key in obj)Object.prototype.hasOwnProperty.call(obj,key)&&(newObj[key]=obj[key]);return newObj.default=obj,newObj}function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}Object.defineProperty(exports,"__esModule",{value:!0}),exports.getBase16Theme=exports.createStyling=void 0;var _extends2=__webpack_require__(5),_extends3=_interopRequireDefault(_extends2),_typeof2=__webpack_require__(16),_typeof3=_interopRequireDefault(_typeof2),_toConsumableArray2=__webpack_require__(120),_toConsumableArray3=_interopRequireDefault(_toConsumableArray2),_slicedToArray2=__webpack_require__(190),_slicedToArray3=_interopRequireDefault(_slicedToArray2),_keys=__webpack_require__(54),_keys2=_interopRequireDefault(_keys),_lodash=__webpack_require__(622),_lodash2=_interopRequireDefault(_lodash),_base=__webpack_require__(553),base16=_interopRequireWildcard(_base),_rgb2hex=__webpack_require__(651),_rgb2hex2=_interopRequireDefault(_rgb2hex),_parse=__webpack_require__(654),_parse2=_interopRequireDefault(_parse),_lodash3=__webpack_require__(623),_lodash4=_interopRequireDefault(_lodash3),rgb=__webpack_require__(422),yuv=__webpack_require__(569),truthy=function(x){return x},DEFAULT_BASE16=base16.default,BASE16_KEYS=(0,_keys2.default)(DEFAULT_BASE16),flip=function(x){return x<.25?1:x<.5?.9-x:1.1-x},invertColor=(0,_lodash4.default)(_parse2.default,rgb.yuv,function(_ref){var _ref2=(0,_slicedToArray3.default)(_ref,3),y=_ref2[0],u=_ref2[1],v=_ref2[2];return[flip(y),u,v]},yuv.rgb,_rgb2hex2.default),invertThemeColors=function(theme){return(0,_keys2.default)(theme).reduce(function(t,key){return/^base/.test(key)?(t[key]=invertColor(theme[key]),t):t},{})},getStylingByKeys=function(customStyling,defaultStyling,keys){for(var _len=arguments.length,args=Array(_len>3?_len-3:0),_key=3;_key<_len;_key++)args[_key-3]=arguments[_key];if(null===keys)return defaultStyling;Array.isArray(keys)||(keys=[keys]);var styles=keys.reduce(function(s,key){return[].concat((0,_toConsumableArray3.default)(s),[defaultStyling[key],customStyling[key]])},[]).filter(truthy),props=styles.reduce(function(obj,s){return"string"==typeof s?obj.className=[obj.className,s].filter(function(c){return c}).join(" "):"object"===("undefined"==typeof s?"undefined":(0,_typeof3.default)(s))?obj.style=(0,_extends3.default)({},obj.style,s):"function"==typeof s&&(obj=(0,_extends3.default)({},obj,s.apply(void 0,[obj].concat(args)))),obj},{className:"",style:{}});return props.className||delete props.className,0===(0,_keys2.default)(props.style).length&&delete props.style,props},getBase16Theme=(exports.createStyling=(0,_lodash2.default)(function(getStylingFromBase16){for(var _len2=arguments.length,args=Array(_len2>4?_len2-4:0),_key2=4;_key2<_len2;_key2++)args[_key2-4]=arguments[_key2];var options=arguments.length<=1||void 0===arguments[1]?{}:arguments[1],themeOrStyling=arguments.length<=2||void 0===arguments[2]?{}:arguments[2],invertTheme=arguments[3],_options$defaultBase=options.defaultBase16,defaultBase16=void 0===_options$defaultBase?DEFAULT_BASE16:_options$defaultBase,_options$base16Themes=options.base16Themes,base16Themes=void 0===_options$base16Themes?null:_options$base16Themes,base16Theme=getBase16Theme(themeOrStyling,base16Themes);base16Theme&&(themeOrStyling=(0,_extends3.default)({},base16Theme,themeOrStyling));var theme=BASE16_KEYS.reduce(function(t,key){return t[key]=themeOrStyling[key]||defaultBase16[key],t},{}),customStyling=(0,_keys2.default)(themeOrStyling).reduce(function(s,key){return BASE16_KEYS.indexOf(key)===-1?(s[key]=themeOrStyling[key],s):s},{}),defaultStyling=getStylingFromBase16(invertTheme?invertThemeColors(theme):theme);return(0,_lodash2.default)(getStylingByKeys,3).apply(void 0,[customStyling,defaultStyling].concat(args))},4),exports.getBase16Theme=function(theme,base16Themes){return theme&&theme.extend&&(theme=theme.extend),"string"==typeof theme&&(theme=(base16Themes||{})[theme]||base16[theme]),theme&&theme.hasOwnProperty("base00")?theme:void 0})},,function(module,exports,__webpack_require__){"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}exports.__esModule=!0,exports.default=void 0;var _class,_temp,_extends2=__webpack_require__(5),_extends3=_interopRequireDefault(_extends2),_classCallCheck2=__webpack_require__(7),_classCallCheck3=_interopRequireDefault(_classCallCheck2),_possibleConstructorReturn2=__webpack_require__(13),_possibleConstructorReturn3=_interopRequireDefault(_possibleConstructorReturn2),_inherits2=__webpack_require__(12),_inherits3=_interopRequireDefault(_inherits2),_react=__webpack_require__(1),_react2=_interopRequireDefault(_react),_function=__webpack_require__(434),_function2=_interopRequireDefault(_function),_JSONArrow=__webpack_require__(431),_JSONArrow2=_interopRequireDefault(_JSONArrow),ItemRange=(_temp=_class=function(_Component){function ItemRange(props){(0,_classCallCheck3.default)(this,ItemRange);var _this=(0,_possibleConstructorReturn3.default)(this,_Component.call(this,props));return _this.shouldComponentUpdate=_function2.default,_this.state={expanded:!1},_this.handleClick=_this.handleClick.bind(_this),_this}return(0,_inherits3.default)(ItemRange,_Component),ItemRange.prototype.render=function(){var _props=this.props,styling=_props.styling,from=_props.from,to=_props.to,renderChildNodes=_props.renderChildNodes,nodeType=_props.nodeType;return this.state.expanded?_react2.default.createElement("div",styling("itemRange",this.state.expanded),renderChildNodes(this.props,from,to)):_react2.default.createElement("div",(0,_extends3.default)({},styling("itemRange",this.state.expanded),{onClick:this.handleClick}),_react2.default.createElement(_JSONArrow2.default,{nodeType:nodeType,styling:styling,expanded:!1,onClick:this.handleClick,arrowStyle:"double"}),from+" ... "+to)},ItemRange.prototype.handleClick=function(){this.setState({expanded:!this.state.expanded})},ItemRange}(_react.Component),_class.propTypes={styling:_react.PropTypes.func.isRequired,from:_react.PropTypes.number.isRequired,to:_react.PropTypes.number.isRequired,renderChildNodes:_react.PropTypes.func.isRequired,nodeType:_react.PropTypes.string.isRequired},_temp);exports.default=ItemRange},function(module,exports,__webpack_require__){"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}function createItemString(data){return data.length+" "+(1!==data.length?"items":"item")}exports.__esModule=!0;var _extends2=__webpack_require__(5),_extends3=_interopRequireDefault(_extends2),_objectWithoutProperties2=__webpack_require__(40),_objectWithoutProperties3=_interopRequireDefault(_objectWithoutProperties2),_react=__webpack_require__(1),_react2=_interopRequireDefault(_react),_JSONNestedNode=__webpack_require__(396),_JSONNestedNode2=_interopRequireDefault(_JSONNestedNode),JSONArrayNode=function(_ref){var data=_ref.data,props=(0,_objectWithoutProperties3.default)(_ref,["data"]);return _react2.default.createElement(_JSONNestedNode2.default,(0,_extends3.default)({},props,{data:data,nodeType:"Array",nodeTypeIndicator:"[]",createItemString:createItemString,expandable:data.length>0}))};JSONArrayNode.propTypes={data:_react.PropTypes.array},exports.default=JSONArrayNode},function(module,exports,__webpack_require__){"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}function createItemString(data,limit){var count=0,hasMore=!1;if((0,_isSafeInteger2.default)(data.size))count=data.size;else for(var _iterator=data,_isArray=Array.isArray(_iterator),_i=0,_iterator=_isArray?_iterator:(0,_getIterator3.default)(_iterator);;){var _ref;if(_isArray){if(_i>=_iterator.length)break;_ref=_iterator[_i++]}else{if(_i=_iterator.next(),_i.done)break;_ref=_i.value}if(limit&&count+1>limit){hasMore=!0;break}count+=1}return""+(hasMore?">":"")+count+" "+(1!==count?"entries":"entry")}function JSONIterableNode(_ref2){var props=(0,_objectWithoutProperties3.default)(_ref2,[]);return _react2.default.createElement(_JSONNestedNode2.default,(0,_extends3.default)({},props,{nodeType:"Iterable",nodeTypeIndicator:"()",createItemString:createItemString}))}exports.__esModule=!0;var _extends2=__webpack_require__(5),_extends3=_interopRequireDefault(_extends2),_objectWithoutProperties2=__webpack_require__(40),_objectWithoutProperties3=_interopRequireDefault(_objectWithoutProperties2),_getIterator2=__webpack_require__(119),_getIterator3=_interopRequireDefault(_getIterator2),_isSafeInteger=__webpack_require__(515),_isSafeInteger2=_interopRequireDefault(_isSafeInteger);exports.default=JSONIterableNode;var _react=__webpack_require__(1),_react2=_interopRequireDefault(_react),_JSONNestedNode=__webpack_require__(396),_JSONNestedNode2=_interopRequireDefault(_JSONNestedNode); },function(module,exports,__webpack_require__){"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}function createItemString(data){var len=(0,_getOwnPropertyNames2.default)(data).length;return len+" "+(1!==len?"keys":"key")}exports.__esModule=!0;var _extends2=__webpack_require__(5),_extends3=_interopRequireDefault(_extends2),_objectWithoutProperties2=__webpack_require__(40),_objectWithoutProperties3=_interopRequireDefault(_objectWithoutProperties2),_getOwnPropertyNames=__webpack_require__(420),_getOwnPropertyNames2=_interopRequireDefault(_getOwnPropertyNames),_react=__webpack_require__(1),_react2=_interopRequireDefault(_react),_JSONNestedNode=__webpack_require__(396),_JSONNestedNode2=_interopRequireDefault(_JSONNestedNode),JSONObjectNode=function(_ref){var data=_ref.data,props=(0,_objectWithoutProperties3.default)(_ref,["data"]);return _react2.default.createElement(_JSONNestedNode2.default,(0,_extends3.default)({},props,{data:data,nodeType:"Object",nodeTypeIndicator:"{}",createItemString:createItemString,expandable:(0,_getOwnPropertyNames2.default)(data).length>0}))};JSONObjectNode.propTypes={data:_react.PropTypes.object},exports.default=JSONObjectNode},function(module,exports,__webpack_require__){"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}exports.__esModule=!0;var _react=__webpack_require__(1),_react2=_interopRequireDefault(_react),JSONValueNode=function(_ref){var nodeType=_ref.nodeType,styling=_ref.styling,labelRenderer=_ref.labelRenderer,keyPath=_ref.keyPath,valueRenderer=_ref.valueRenderer,value=_ref.value,valueGetter=_ref.valueGetter;return _react2.default.createElement("li",styling("value",nodeType,keyPath),_react2.default.createElement("label",styling(["label","valueLabel"],nodeType,keyPath),labelRenderer(keyPath,nodeType,!1,!1)),_react2.default.createElement("span",styling("valueText",nodeType,keyPath),valueRenderer.apply(void 0,[valueGetter(value),value].concat(keyPath))))};JSONValueNode.propTypes={nodeType:_react.PropTypes.string.isRequired,styling:_react.PropTypes.func.isRequired,labelRenderer:_react.PropTypes.func.isRequired,keyPath:_react.PropTypes.arrayOf(_react.PropTypes.oneOfType([_react.PropTypes.string,_react.PropTypes.number])).isRequired,valueRenderer:_react.PropTypes.func.isRequired,value:_react.PropTypes.any,valueGetter:_react.PropTypes.func},JSONValueNode.defaultProps={valueGetter:function(value){return value}},exports.default=JSONValueNode},function(module,exports,__webpack_require__){"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}exports.__esModule=!0;var _extends2=__webpack_require__(5),_extends3=_interopRequireDefault(_extends2),_solarized=__webpack_require__(667),_solarized2=_interopRequireDefault(_solarized),_reactBase16Styling=__webpack_require__(656),colorMap=function(theme){return{BACKGROUND_COLOR:theme.base00,TEXT_COLOR:theme.base07,STRING_COLOR:theme.base0B,DATE_COLOR:theme.base0B,NUMBER_COLOR:theme.base09,BOOLEAN_COLOR:theme.base09,NULL_COLOR:theme.base08,UNDEFINED_COLOR:theme.base08,FUNCTION_COLOR:theme.base08,SYMBOL_COLOR:theme.base08,LABEL_COLOR:theme.base0D,ARROW_COLOR:theme.base0D,ITEM_STRING_COLOR:theme.base0B,ITEM_STRING_EXPANDED_COLOR:theme.base03}},valueColorMap=function(colors){return{String:colors.STRING_COLOR,Date:colors.DATE_COLOR,Number:colors.NUMBER_COLOR,Boolean:colors.BOOLEAN_COLOR,Null:colors.NULL_COLOR,Undefined:colors.UNDEFINED_COLOR,Function:colors.FUNCTION_COLOR,Symbol:colors.SYMBOL_COLOR}},getDefaultThemeStyling=function(theme){var colors=colorMap(theme);return{tree:{border:0,padding:0,marginTop:"0.5em",marginBottom:"0.5em",marginLeft:"0.125em",marginRight:0,listStyle:"none",MozUserSelect:"none",WebkitUserSelect:"none",backgroundColor:colors.BACKGROUND_COLOR},value:function(_ref,nodeType,keyPath){var style=_ref.style;return{style:(0,_extends3.default)({},style,{paddingTop:"0.25em",paddingRight:0,marginLeft:"0.875em",WebkitUserSelect:"text",MozUserSelect:"text",wordWrap:"break-word",paddingLeft:keyPath.length>1?"2.125em":"1.25em",textIndent:"-0.5em",wordBreak:"break-all"})}},label:{display:"inline-block",color:colors.LABEL_COLOR},valueLabel:{margin:"0 0.5em 0 0"},valueText:function(_ref2,nodeType){var style=_ref2.style;return{style:(0,_extends3.default)({},style,{color:valueColorMap(colors)[nodeType]})}},itemRange:function(_ref3,expanded){_ref3.style;return{style:{paddingTop:expanded?0:"0.25em",cursor:"pointer",color:colors.LABEL_COLOR}}},arrow:function(_ref4,nodeType,expanded){var style=_ref4.style;return{style:(0,_extends3.default)({},style,{marginLeft:0,transition:"150ms",WebkitTransition:"150ms",MozTransition:"150ms",WebkitTransform:expanded?"rotateZ(90deg)":"rotateZ(0deg)",MozTransform:expanded?"rotateZ(90deg)":"rotateZ(0deg)",transform:expanded?"rotateZ(90deg)":"rotateZ(0deg)",transformOrigin:"45% 50%",WebkitTransformOrigin:"45% 50%",MozTransformOrigin:"45% 50%",position:"relative",lineHeight:"1.1em",fontSize:"0.75em"})}},arrowContainer:function(_ref5,arrowStyle){var style=_ref5.style;return{style:(0,_extends3.default)({},style,{display:"inline-block",paddingRight:"0.5em",paddingLeft:"double"===arrowStyle?"1em":0,cursor:"pointer"})}},arrowSign:{color:colors.ARROW_COLOR},arrowSignInner:{position:"absolute",top:0,left:"-0.4em"},nestedNode:function(_ref6,keyPath,nodeType,expanded,expandable){var style=_ref6.style;return{style:(0,_extends3.default)({},style,{position:"relative",paddingTop:"0.25em",marginLeft:keyPath.length>1?"0.875em":0,paddingLeft:expandable?0:"1.125em"})}},rootNode:{padding:0,margin:0},nestedNodeLabel:function(_ref7,keyPath,nodeType,expanded,expandable){var style=_ref7.style;return{style:(0,_extends3.default)({},style,{margin:0,padding:0,WebkitUserSelect:expandable?"inherit":"text",MozUserSelect:expandable?"inherit":"text",cursor:expandable?"pointer":"default"})}},nestedNodeItemString:function(_ref8,keyPath,nodeType,expanded){var style=_ref8.style;return{style:(0,_extends3.default)({},style,{paddingLeft:"0.5em",cursor:"default",color:expanded?colors.ITEM_STRING_EXPANDED_COLOR:colors.ITEM_STRING_COLOR})}},nestedNodeItemType:{marginLeft:"0.3em",marginRight:"0.3em"},nestedNodeChildren:function(_ref9,nodeType,expanded){var style=_ref9.style;return{style:(0,_extends3.default)({},style,{padding:0,margin:0,listStyle:"none",display:expanded?"block":"none"})}},rootNodeChildren:{padding:0,margin:0,listStyle:"none"}}};exports.default=(0,_reactBase16Styling.createStyling)(getDefaultThemeStyling,{defaultBase16:_solarized2.default})},function(module,exports,__webpack_require__){"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}function getLength(type,collection){return"Object"===type?(0,_keys2.default)(collection).length:"Array"===type?collection.length:1/0}function isIterableMap(collection){return"function"==typeof collection.set}function getEntries(type,collection,sortObjectKeys){var from=arguments.length<=3||void 0===arguments[3]?0:arguments[3],to=arguments.length<=4||void 0===arguments[4]?1/0:arguments[4],res=void 0;if("Object"===type){var keys=(0,_getOwnPropertyNames2.default)(collection);"undefined"!=typeof sortObjectKeys&&keys.sort(sortObjectKeys),keys=keys.slice(from,to+1),res={entries:keys.map(function(key){return{key:key,value:collection[key]}})}}else if("Array"===type)res={entries:collection.slice(from,to+1).map(function(val,idx){return{key:idx+from,value:val}})};else{for(var idx=0,entries=[],done=!0,isMap=isIterableMap(collection),_iterator=collection,_isArray=Array.isArray(_iterator),_i=0,_iterator=_isArray?_iterator:(0,_getIterator3.default)(_iterator);;){var _ref;if(_isArray){if(_i>=_iterator.length)break;_ref=_iterator[_i++]}else{if(_i=_iterator.next(),_i.done)break;_ref=_i.value}var item=_ref;if(idx>to){done=!1;break}from<=idx&&(isMap&&Array.isArray(item)?entries.push({key:item[0],value:item[1]}):entries.push({key:idx,value:item})),idx++}res={hasMore:!done,entries:entries}}return res}function getRanges(from,to,limit){for(var ranges=[];to-from>limit*limit;)limit*=limit;for(var i=from;i<=to;i+=limit)ranges.push({from:i,to:Math.min(to,i+limit-1)});return ranges}function getCollectionEntries(type,collection,sortObjectKeys,limit){var from=arguments.length<=4||void 0===arguments[4]?0:arguments[4],to=arguments.length<=5||void 0===arguments[5]?1/0:arguments[5],getEntriesBound=getEntries.bind(null,type,collection,sortObjectKeys);if(!limit)return getEntriesBound().entries;var isSubset=to<1/0,length=Math.min(to-from,getLength(type,collection));if("Iterable"!==type){if(length<=limit||limit<7)return getEntriesBound(from,to).entries}else if(length<=limit&&!isSubset)return getEntriesBound(from,to).entries;var limitedEntries=void 0;if("Iterable"===type){var _getEntriesBound=getEntriesBound(from,from+limit-1),hasMore=_getEntriesBound.hasMore,entries=_getEntriesBound.entries;limitedEntries=hasMore?[].concat(entries,getRanges(from+limit,from+2*limit-1,limit)):entries}else limitedEntries=isSubset?getRanges(from,to,limit):[].concat(getEntriesBound(0,limit-5).entries,getRanges(limit-4,length-5,limit),getEntriesBound(length-4,length-1).entries);return limitedEntries}exports.__esModule=!0;var _getIterator2=__webpack_require__(119),_getIterator3=_interopRequireDefault(_getIterator2),_getOwnPropertyNames=__webpack_require__(420),_getOwnPropertyNames2=_interopRequireDefault(_getOwnPropertyNames),_keys=__webpack_require__(54),_keys2=_interopRequireDefault(_keys);exports.default=getCollectionEntries},function(module,exports,__webpack_require__){"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}function checkLegacyTheming(theme,props){var deprecatedStylingMethodsMap={getArrowStyle:"arrow",getListStyle:"nestedNodeChildren",getItemStringStyle:"nestedNodeItemString",getLabelStyle:"label",getValueStyle:"valueText"},deprecatedStylingMethods=(0,_keys2.default)(deprecatedStylingMethodsMap).filter(function(name){return props[name]});return deprecatedStylingMethods.length>0&&(theme="string"==typeof theme?{extend:theme}:(0,_extends3.default)({},theme),deprecatedStylingMethods.forEach(function(name){console.error('Styling method "'+name+'" is deprecated, use "theme" property instead'),theme[deprecatedStylingMethodsMap[name]]=function(_ref){for(var _len=arguments.length,args=Array(_len>1?_len-1:0),_key=1;_key<_len;_key++)args[_key-1]=arguments[_key];var style=_ref.style;return{style:(0,_extends3.default)({},style,props[name].apply(props,args))}}})),theme}exports.__esModule=!0,exports.default=void 0;var _class,_temp,_objectWithoutProperties2=__webpack_require__(40),_objectWithoutProperties3=_interopRequireDefault(_objectWithoutProperties2),_classCallCheck2=__webpack_require__(7),_classCallCheck3=_interopRequireDefault(_classCallCheck2),_possibleConstructorReturn2=__webpack_require__(13),_possibleConstructorReturn3=_interopRequireDefault(_possibleConstructorReturn2),_inherits2=__webpack_require__(12),_inherits3=_interopRequireDefault(_inherits2),_extends2=__webpack_require__(5),_extends3=_interopRequireDefault(_extends2),_keys=__webpack_require__(54),_keys2=_interopRequireDefault(_keys),_react=__webpack_require__(1),_react2=_interopRequireDefault(_react),_JSONNode=__webpack_require__(432),_JSONNode2=_interopRequireDefault(_JSONNode),_createStylingFromTheme=__webpack_require__(663),_createStylingFromTheme2=_interopRequireDefault(_createStylingFromTheme),identity=function(value){return value},JSONTree=(_temp=_class=function(_React$Component){function JSONTree(){return(0,_classCallCheck3.default)(this,JSONTree),(0,_possibleConstructorReturn3.default)(this,_React$Component.apply(this,arguments))}return(0,_inherits3.default)(JSONTree,_React$Component),JSONTree.prototype.render=function(){var _props=this.props,value=_props.data,keyPath=_props.keyPath,postprocessValue=_props.postprocessValue,hideRoot=_props.hideRoot,theme=_props.theme,invertTheme=_props.invertTheme,rest=(0,_objectWithoutProperties3.default)(_props,["data","keyPath","postprocessValue","hideRoot","theme","invertTheme"]),styling=(0,_createStylingFromTheme2.default)(checkLegacyTheming(theme,rest),invertTheme);return _react2.default.createElement("ul",styling("tree"),_react2.default.createElement(_JSONNode2.default,(0,_extends3.default)({},(0,_extends3.default)({postprocessValue:postprocessValue,hideRoot:hideRoot,styling:styling},rest),{keyPath:hideRoot?[]:keyPath,value:postprocessValue(value)})))},JSONTree}(_react2.default.Component),_class.propTypes={data:_react.PropTypes.oneOfType([_react.PropTypes.array,_react.PropTypes.object]).isRequired,hideRoot:_react.PropTypes.bool,theme:_react.PropTypes.oneOfType([_react.PropTypes.object,_react.PropTypes.string]),invertTheme:_react.PropTypes.bool,keyPath:_react.PropTypes.arrayOf(_react.PropTypes.oneOfType([_react.PropTypes.string,_react.PropTypes.number])),postprocessValue:_react.PropTypes.func,sortObjectKeys:_react.PropTypes.oneOfType([_react.PropTypes.func,_react.PropTypes.bool])},_class.defaultProps={shouldExpandNode:function(keyName,data,level){return 0===level},hideRoot:!1,keyPath:["root"],getItemString:function(type,data,itemType,itemString){return _react2.default.createElement("span",null,itemType," ",itemString)},labelRenderer:function(_ref2){var label=_ref2[0];return _react2.default.createElement("span",null,label,":")},valueRenderer:identity,postprocessValue:identity,isCustomNode:function(){return!1},collectionLimit:50,invertTheme:!0},_temp);exports.default=JSONTree},function(module,exports,__webpack_require__){"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}function objType(obj){return null===obj||"object"!==("undefined"==typeof obj?"undefined":(0,_typeof3.default)(obj))||Array.isArray(obj)||"function"!=typeof obj[_iterator2.default]?Object.prototype.toString.call(obj).slice(8,-1):"Iterable"}exports.__esModule=!0;var _iterator=__webpack_require__(189),_iterator2=_interopRequireDefault(_iterator),_typeof2=__webpack_require__(16),_typeof3=_interopRequireDefault(_typeof2);exports.default=objType},function(module,exports){"use strict";exports.__esModule=!0,exports.default={scheme:"solarized",author:"ethan schoonover (http://ethanschoonover.com/solarized)",base00:"#002b36",base01:"#073642",base02:"#586e75",base03:"#657b83",base04:"#839496",base05:"#93a1a1",base06:"#eee8d5",base07:"#fdf6e3",base08:"#dc322f",base09:"#cb4b16",base0A:"#b58900",base0B:"#859900",base0C:"#2aa198",base0D:"#268bd2",base0E:"#6c71c4",base0F:"#d33682"}},,,,,,,,,,function(module,exports){"use strict";function shallowEqual(objA,objB){if(objA===objB)return!0;if("object"!=typeof objA||null===objA||"object"!=typeof objB||null===objB)return!1;var keysA=Object.keys(objA),keysB=Object.keys(objB);if(keysA.length!==keysB.length)return!1;for(var bHasOwnProperty=Object.prototype.hasOwnProperty.bind(objB),i=0;i0?"Unexpected "+(unexpectedKeys.length>1?"keys":"key")+" "+('"'+unexpectedKeys.join('", "')+'" found in '+argumentName+". ")+"Expected to find one of the known reducer keys instead: "+('"'+reducerKeys.join('", "')+'". Unexpected keys will be ignored.'):void 0}function assertReducerSanity(reducers){Object.keys(reducers).forEach(function(key){var reducer=reducers[key],initialState=reducer(void 0,{type:_createStore.ActionTypes.INIT});if("undefined"==typeof initialState)throw new Error('Reducer "'+key+'" returned undefined during initialization. If the state passed to the reducer is undefined, you must explicitly return the initial state. The initial state may not be undefined.');var type="@@redux/PROBE_UNKNOWN_ACTION_"+Math.random().toString(36).substring(7).split("").join(".");if("undefined"==typeof reducer(void 0,{type:type}))throw new Error('Reducer "'+key+'" returned undefined when probed with a random type. '+("Don't try to handle "+_createStore.ActionTypes.INIT+' or other actions in "redux/*" ')+"namespace. They are considered private. Instead, you must return the current state for any unknown actions, unless it is undefined, in which case you must return the initial state, regardless of the action type. The initial state may not be undefined.")})}function combineReducers(reducers){for(var reducerKeys=Object.keys(reducers),finalReducers={},i=0;i