component---src-pages-examples-tsx-47ccd72de612c930c9b2.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[16],{"RNt/":function(e,t,a){"use strict";a.r(t);var n=a("q1tI"),r=a.n(n),o=a("9Dj+"),l=a("vrFN"),c=a("TSYQ"),s=a.n(c),i=a("F66N"),m=a("arvA"),u=a("1Yj4"),p=a("ok1R"),d=a("rhny"),f=a("9a8N"),g=a("wx14"),y=a("dI71"),h=a("17x9"),b=a.n(h),w=r.a.createContext({}),E=a("33Jr"),v={tag:E.t,activeTab:b.a.any,className:b.a.string,cssModule:b.a.object},C=function(e){function t(t){var a;return(a=e.call(this,t)||this).state={activeTab:a.props.activeTab},a}return Object(y.a)(t,e),t.getDerivedStateFromProps=function(e,t){return t.activeTab!==e.activeTab?{activeTab:e.activeTab}:null},t.prototype.render=function(){var e=this.props,t=e.className,a=e.cssModule,n=e.tag,o=Object(E.q)(this.props,Object.keys(v)),l=Object(E.p)(s()("tab-content",t),a);return r.a.createElement(w.Provider,{value:{activeTabId:this.state.activeTab}},r.a.createElement(n,Object(g.a)({},o,{className:l})))},t}(n.Component),x=C;C.defaultProps={tag:"div"};var S=a("zLVn"),k=["className","cssModule","tabId","tag"];function F(e){var t=e.className,a=e.cssModule,n=e.tabId,o=e.tag,l=Object(S.a)(e,k),c=function(e){return Object(E.p)(s()("tab-pane",t,{active:n===e}),a)};return r.a.createElement(w.Consumer,null,(function(e){var t=e.activeTabId;return r.a.createElement(o,Object(g.a)({},l,{className:c(t)}))}))}F.defaultProps={tag:"div"};var N=a("Wbzz");const j=e=>{let{to:t,title:a="docs",children:n}=e;return r.a.createElement(N.Link,{to:t},n||r.a.createElement(r.a.Fragment,null,r.a.createElement("span",{className:"text-nowrap"},a," ",r.a.createElement("i",{className:"fas fa-external-link-alt fa-xs"}))))},A=[{title:"Budget planner",urlParam:"budget-planner",icon:"fas fa-search-dollar fa-3x",enabled:!0,description:[{header:"Capabilities:",content:["This budget planner example shows the possibility of calculating values of all aggregation fields \n                    in a reactive way in two axes - for organization or project for some time. See the available functionality:","Only white cells are able to change their value (all the aggregation cells will be updated accordingly)","A new value entered for a certain quarter on a given node will be proportionally distributed into the months within this quarter","Reorder a single row by drag & drop action onto a selected row (you can't reorder multiple rows)","Fold/unfold unit node with <code><kbd>SPACE</kbd></code> key (node cell has to be focused) or click on the chevron icon","Fold/unfold year and/or quarter columns by clicking chevron icon in the top row","Add a new row by clicking 'Add child row' in the context menu option on a selected row or delete it via 'Remove row' option"]},{header:"Core features (applied):",content:[r.a.createElement(r.a.Fragment,null,"Vertical and horizontal grouping (see the ",r.a.createElement(j,{to:"/docs/4.0/4-cell-templates/5-ChevronCell/"}),")"),r.a.createElement(r.a.Fragment,null,"Custom cell templates (e.g. non editable number cell, see the ",r.a.createElement(j,{to:"/docs/4.0/5-create-your-own-cell-template/"}),")"),r.a.createElement(r.a.Fragment,null,"Context menu (adding and removing row, see the ",r.a.createElement(j,{to:"/docs/4.0/2-implementing-core-features/5-context-menu/"}),")"),r.a.createElement(r.a.Fragment,null,"Sticky row and column (see the ",r.a.createElement(j,{to:"/docs/4.0/2-implementing-core-features/4-sticky/"}),")"),r.a.createElement(r.a.Fragment,null,"Row reordering (see the ",r.a.createElement(j,{to:"/docs/4.0/2-implementing-core-features/3-column-and-row-reordering/"}),")"),r.a.createElement(r.a.Fragment,null,"Range, column and row selection (+ multi selection, see the ",r.a.createElement(j,{to:"/docs/4.0/2-implementing-core-features/4a-selections/"}),")"),"Fill handle","Copy/cut/paste","Touch capability","SASS custom styling"]}],className:"bp-sample",component:"BPSample"},{title:"Multi user",icon:"fas fa-border-all fa-3x",enabled:!0,urlParam:"multi-user",description:[{header:"Capabilities:",content:["Includes most features of ReactGrid","Presents multiple data changes in real time ","Provides additional actions in context menu (removing rows or columns)"]},{header:"Core features (applied):",content:[r.a.createElement(r.a.Fragment,null,"Highlights (see the ",r.a.createElement(j,{to:"/docs/4.0/4-cell-templates/5-GroupCell/"}),")"),r.a.createElement(r.a.Fragment,null,"Custom cell templates (e.g. flag icon, see the ",r.a.createElement(j,{to:"/docs/4.0/5-create-your-own-cell-template/"}),")"),r.a.createElement(r.a.Fragment,null,"Sticky row and column (see the ",r.a.createElement(j,{to:"/docs/4.0/2-implementing-core-features/4-sticky/"}),")"),r.a.createElement(r.a.Fragment,null,"Column resize (see the ",r.a.createElement(j,{to:"/docs/4.0/2-implementing-core-features/2-column-resizing/"}),")"),r.a.createElement(r.a.Fragment,null,"Row and column reordering (see the ",r.a.createElement(j,{to:"/docs/4.0/2-implementing-core-features/3-column-and-row-reordering/"}),")"),r.a.createElement(r.a.Fragment,null,"Range, column and row selection (+ multi selection, see the ",r.a.createElement(j,{to:"/docs/4.0/2-implementing-core-features/4a-selections/"}),")"),r.a.createElement(r.a.Fragment,null,"Context menu (see the ",r.a.createElement(j,{to:"/docs/4.0/2-implementing-core-features/5-context-menu/"}),")"),"Fill handle","Copy/cut/paste","Touch capability","SASS custom styling"]}],className:"datagrid-sample",component:"DatagridSample"},{title:"Athletes' exercises",icon:"fas fa-border-all fa-3x",enabled:!0,urlParam:"athletes-exercises",description:[{header:"Capabilities:",content:["Implements most ReactGrid features in a simple way","Calculates the athlete's points in the real time","Built-in Chevron Cell allows you to collapse the excercise's category\n                        by pressing on the chevron on pressing space"]},{header:"Core features (applied):",content:[r.a.createElement(r.a.Fragment,null,"Sticky row and column (see the ",r.a.createElement(j,{to:"/docs/4.0/2-implementing-core-features/4-sticky/"}),")"),r.a.createElement(r.a.Fragment,null,"Range selection (+ multi selection, see the ",r.a.createElement(j,{to:"/docs/4.0/2-implementing-core-features/4a-selections/"}),")"),r.a.createElement(r.a.Fragment,null,"Sticky row and column (see the ",r.a.createElement(j,{to:"/docs/4.0/2-implementing-core-features/4-sticky/"}),")"),r.a.createElement(r.a.Fragment,null,"Custom cell templates (see the ",r.a.createElement(j,{to:"/docs/4.0/5-create-your-own-cell-template/"}),")"),"Copy/cut/paste","Touch capability","SASS custom styling"]}],className:"exercises-sample",component:"ExcercisesDataSample"},{title:"Customization",icon:"fas fa-border-all fa-3x",enabled:!0,urlParam:"customization",description:[{header:"Capabilities:",content:["Customization sample ReactGrid implementation allows user to add new records by editing the last blank row","It is possible to render every row in various ways, ReactGrid empowers the user to fully configure each cell independently","The simple configurator shows how easily you can style your table","Sample contains custom written dropdown cell","The header row and the blank row are sticky, so you can always see the title of the column and you're able to add new records"]},{header:"Core features (applied):",content:[r.a.createElement(r.a.Fragment,null,"Range selection (+ multi selection, see the ",r.a.createElement(j,{to:"/docs/4.0/2-implementing-core-features/4a-selections/"}),")"),r.a.createElement(r.a.Fragment,null,"Sticky row and column (see the ",r.a.createElement(j,{to:"/docs/4.0/2-implementing-core-features/4-sticky/"}),")"),r.a.createElement(r.a.Fragment,null,"Custom cell templates (see the ",r.a.createElement(j,{to:"/docs/4.0/5-create-your-own-cell-template/"}),")"),"Copy/cut/paste","Touch capability","SASS custom styling"]}],className:"workhours-sample",component:"WorkhoursSample"},{title:"Financial liquidity planner",icon:"fas fa-search-dollar fa-3x",urlParam:"liquidity-planner",enabled:!0,description:[{header:"Capabilities:",content:[r.a.createElement(r.a.Fragment,null,"This sample app was made for related article on our blog: ",r.a.createElement(j,{to:"/blog/financial-liquidity-planner-with-reactgrid-and-chartjs",title:"open"}))]},{header:"Core features (applied):",content:[r.a.createElement(r.a.Fragment,null,"Sticky columns (see the ",r.a.createElement(j,{to:"/docs/4.0/2-implementing-core-features/4-sticky/"}),")"),r.a.createElement(r.a.Fragment,null,"Range selection (+ multi selection, see the ",r.a.createElement(j,{to:"/docs/4.0/2-implementing-core-features/4a-selections/"}),")"),"Fill handle","Copy/cut/paste","Touch capability","CSS custom styling"]}],className:"liquidity-planner-app",component:"LiquidityPlanner"},{title:"Cryptocurrency Market",icon:"fab fa-bitcoin fa-3x",enabled:!1,description:[{header:"Capabilities:",content:["Filling grid with data from 3rd party API","Continuosly pooling for changes and presenting them"]},{header:"Applied core features:",content:["Freezed first top row","Area, column and row selection (+ multi selection)","Custom cell template","Copy/cut/paste","Touch capability","SASS styling"]}],className:"cryptocurrency-market-sample",component:"CryptocurrencyMarketSample"},{title:"Rate cell",icon:"far fa-lightbulb fa-3x",enabled:!1,description:"Short description of demo content",className:"rate-cell-sample",component:"RateCellSample"},{title:"Resize columns",icon:"fas fa-arrows-alt-h fa-3x",enabled:!1,description:[{header:"Capabilities:",content:["Changing width of column","Disabling this feature for each column","Handling <code>onColumnResize()</code> event"]},{header:"Applied core features:",content:["Column resize","Area selection","Custom cell templates (rate and flag cell)","Copy/cut/paste","Touch capability","SASS styling"]}],className:"resize-column-sample",component:"ResizeColumnSample"},{title:"Row/columns reorder",icon:"fas fa-arrows-alt fa-3x",enabled:!1,description:[{header:"Usage:",content:["Press <code>ctlr</code> key and select columns/rows","Drag column/rows do desired destination"]},{header:"Applied core features:",content:["Column reorder","Row reorder","Area selection","Custom cell templates (rate and flag cell)","Copy/cut/paste","Touch capability","SASS styling"]}],className:"column-reorder-sample",component:"ColumnReorderSample"},{title:"Context menu",icon:"far fa-comment-alt fa-3x",enabled:!1,description:[{header:"Usage:",content:["Press <code>ctlr</code> key and select columns/rows","Drag column/rows do desired destination"]},{header:"Applied core features:",content:["Column reorder","Row reorder","Area selection","Custom cell templates (rate and flag cell)","Copy/cut/paste","Touch capability","SASS styling"]}],className:"context-menu-sample",component:"ContextMenuSample"},{title:"Group data",icon:"fa fa-stream fa-3x",enabled:!1,description:[{header:"Capabilities:",content:["Application of Group cell template that contains informations about single node","Toggling node with <code><kbd>SPACE</kbd></code> key or click on chevron"]},{header:"Applied core features:",content:["Freezed top row and left column","Area, column and row selection (+ multi selection)","Copy/cut/paste","Touch capability","SASS styling"]}],className:"group-cell-sample",component:"GroupCellSample"}];var R=a("KQm4");var O=new RegExp("%[a-f0-9]{2}","gi"),T=new RegExp("(%[a-f0-9]{2})+","gi");function I(e,t){try{return decodeURIComponent(e.join(""))}catch(r){}if(1===e.length)return e;t=t||1;var a=e.slice(0,t),n=e.slice(t);return Array.prototype.concat.call([],I(a),I(n))}function P(e){try{return decodeURIComponent(e)}catch(n){for(var t=e.match(O),a=1;a<t.length;a++)t=(e=I(t,a).join("")).match(O);return e}}var z=function(e){if("string"!=typeof e)throw new TypeError("Expected `encodedURI` to be of type `string`, got `"+typeof e+"`");try{return e=e.replace(/\+/g," "),decodeURIComponent(e)}catch(t){return function(e){for(var a={"%FE%FF":"��","%FF%FE":"��"},n=T.exec(e);n;){try{a[n[0]]=decodeURIComponent(n[0])}catch(t){var r=P(n[0]);r!==n[0]&&(a[n[0]]=r)}n=T.exec(e)}a["%C2"]="�";for(var o=Object.keys(a),l=0;l<o.length;l++){var c=o[l];e=e.replace(new RegExp(c,"g"),a[c])}return e}(e)}},U=(e,t)=>{if("string"!=typeof e||"string"!=typeof t)throw new TypeError("Expected the arguments to be of type `string`");if(""===t)return[e];const a=e.indexOf(t);return-1===a?[e]:[e.slice(0,a),e.slice(a+t.length)]},q=function(e,t){return e(t={exports:{}},t.exports),t.exports}((function(e,t){function a(e){if("string"!=typeof e||1!==e.length)throw new TypeError("arrayFormatSeparator must be single character string")}function n(e,t){return t.encode?t.strict?encodeURIComponent(e).replace(/[!'()*]/g,e=>"%"+e.charCodeAt(0).toString(16).toUpperCase()):encodeURIComponent(e):e}function r(e,t){return t.decode?z(e):e}function o(e){const t=e.indexOf("#");return-1!==t&&(e=e.slice(0,t)),e}function l(e){const t=(e=o(e)).indexOf("?");return-1===t?"":e.slice(t+1)}function c(e,t){return t.parseNumbers&&!Number.isNaN(Number(e))&&"string"==typeof e&&""!==e.trim()?e=Number(e):!t.parseBooleans||null===e||"true"!==e.toLowerCase()&&"false"!==e.toLowerCase()||(e="true"===e.toLowerCase()),e}function s(e,t){a((t=Object.assign({decode:!0,sort:!0,arrayFormat:"none",arrayFormatSeparator:",",parseNumbers:!1,parseBooleans:!1},t)).arrayFormatSeparator);const n=function(e){let t;switch(e.arrayFormat){case"index":return(e,a,n)=>{t=/\[(\d*)\]$/.exec(e),e=e.replace(/\[\d*\]$/,""),t?(void 0===n[e]&&(n[e]={}),n[e][t[1]]=a):n[e]=a};case"bracket":return(e,a,n)=>{t=/(\[\])$/.exec(e),e=e.replace(/\[\]$/,""),t?void 0!==n[e]?n[e]=[].concat(n[e],a):n[e]=[a]:n[e]=a};case"comma":case"separator":return(t,a,n)=>{const o="string"==typeof a&&a.split("").indexOf(e.arrayFormatSeparator)>-1?a.split(e.arrayFormatSeparator).map(t=>r(t,e)):null===a?a:r(a,e);n[t]=o};default:return(e,t,a)=>{void 0!==a[e]?a[e]=[].concat(a[e],t):a[e]=t}}}(t),o=Object.create(null);if("string"!=typeof e)return o;if(!(e=e.trim().replace(/^[?#&]/,"")))return o;for(const a of e.split("&")){let[e,l]=U(t.decode?a.replace(/\+/g," "):a,"=");l=void 0===l?null:"comma"===t.arrayFormat?l:r(l,t),n(r(e,t),l,o)}for(const a of Object.keys(o)){const e=o[a];if("object"==typeof e&&null!==e)for(const a of Object.keys(e))e[a]=c(e[a],t);else o[a]=c(e,t)}return!1===t.sort?o:(!0===t.sort?Object.keys(o).sort():Object.keys(o).sort(t.sort)).reduce((e,t)=>{const a=o[t];return Boolean(a)&&"object"==typeof a&&!Array.isArray(a)?e[t]=function e(t){return Array.isArray(t)?t.sort():"object"==typeof t?e(Object.keys(t)).sort((e,t)=>Number(e)-Number(t)).map(e=>t[e]):t}(a):e[t]=a,e},Object.create(null))}t.extract=l,t.parse=s,t.stringify=(e,t)=>{if(!e)return"";a((t=Object.assign({encode:!0,strict:!0,arrayFormat:"none",arrayFormatSeparator:","},t)).arrayFormatSeparator);const r=function(e){switch(e.arrayFormat){case"index":return t=>(a,r)=>{const o=a.length;return void 0===r||e.skipNull&&null===r?a:[].concat(Object(R.a)(a),null===r?[[n(t,e),"[",o,"]"].join("")]:[[n(t,e),"[",n(o,e),"]=",n(r,e)].join("")])};case"bracket":return t=>(a,r)=>void 0===r||e.skipNull&&null===r?a:[].concat(Object(R.a)(a),null===r?[[n(t,e),"[]"].join("")]:[[n(t,e),"[]=",n(r,e)].join("")]);case"comma":case"separator":return t=>(a,r)=>null==r||0===r.length?a:0===a.length?[[n(t,e),"=",n(r,e)].join("")]:[[a,n(r,e)].join(e.arrayFormatSeparator)];default:return t=>(a,r)=>void 0===r||e.skipNull&&null===r?a:[].concat(Object(R.a)(a),null===r?[n(t,e)]:[[n(t,e),"=",n(r,e)].join("")])}}(t),o=Object.assign({},e);if(t.skipNull)for(const a of Object.keys(o))void 0!==o[a]&&null!==o[a]||delete o[a];const l=Object.keys(o);return!1!==t.sort&&l.sort(t.sort),l.map(a=>{const o=e[a];return void 0===o?"":null===o?n(a,t):Array.isArray(o)?o.reduce(r(a),[]).join("&"):n(a,t)+"="+n(o,t)}).filter(e=>e.length>0).join("&")},t.parseUrl=(e,t)=>({url:o(e).split("?")[0]||"",query:s(l(e),t)}),t.stringifyUrl=(e,a)=>{const n=o(e.url).split("?")[0]||"",r=t.extract(e.url),l=t.parse(r),c=function(e){let t="";const a=e.indexOf("#");return-1!==a&&(t=e.slice(a)),t}(e.url),s=Object.assign(l,e.query);let i=t.stringify(s,a);return i&&(i="?"+i),`${n}${i}${c}`}})),M=(q.extract,q.parse,q.stringify,q.parseUrl,q.stringifyUrl,function(e,t){if(Array.isArray(e))return e;if(Symbol.iterator in Object(e))return function(e,t){var a=[],n=!0,r=!1,o=void 0;try{for(var l,c=e[Symbol.iterator]();!(n=(l=c.next()).done)&&(a.push(l.value),!t||a.length!==t);n=!0);}catch(s){r=!0,o=s}finally{try{!n&&c.return&&c.return()}finally{if(r)throw o}}return a}(e,t);throw new TypeError("Invalid attempt to destructure non-iterable instance")}),G=function(e,t){var a=function(){var e=Object(n.useState)({}),t=M(e,2),a=t[0],r=t[1],o="undefined"!=typeof document;return Object(n.useEffect)((function(){o&&r(document.location.search?q.parse(document.location.search):{})}),o?[document.location.search]:[]),a}();return a[e]?a[e]:t||null},B=a("Bm08");const L=e=>{let{tabId:t,title:a,description:n,component:o,className:l}=e;const[c,s]=n,i=B[o];return r.a.createElement(F,{tabId:t},r.a.createElement(p.a,null,r.a.createElement(d.a,{xs:"12",className:l},r.a.createElement("div",{className:3===t?"sample-wrapper-workhours":"sample-wrapper"},r.a.createElement(i,null)),r.a.createElement("div",{className:"pt-5"},2===n.length?r.a.createElement(p.a,null,r.a.createElement(d.a,{md:"6",className:"pb-4"},r.a.createElement("h3",null,c.header),r.a.createElement("ul",{className:""},c.content.map((e,t)=>r.a.createElement("li",{key:t,className:"pb-3 text-left"},e)))),r.a.createElement(d.a,{md:"6"},r.a.createElement("h3",null,s.header),r.a.createElement("ul",{className:""},s.content.map((e,t)=>r.a.createElement("li",{key:t,className:"pb-2 text-left"},e))))):r.a.createElement("p",{dangerouslySetInnerHTML:{__html:n}})))))};var D=()=>{var e;const t=G("example","budget-planner"),a=A.filter(e=>e.enabled),n=a.findIndex(e=>e.urlParam===t),o=null===(e=a.find(e=>e.urlParam===t))||void 0===e?void 0:e.component,l=a.map((e,t)=>r.a.createElement(i.a,{key:t,className:"pb-0 pb-md-3 flex-shrink-0",id:"item-"+t},r.a.createElement(N.Link,{to:"/examples/?example="+e.urlParam},r.a.createElement(m.a,{className:s()([{active:n===t}]),style:{cursor:"pointer"},tag:"span"},e.title)))),c=a.map((e,t)=>r.a.createElement(L,{key:t,tabId:t,title:e.title,description:e.description,className:e.className,component:o}));return r.a.createElement(u.a,{className:"section px-3"},r.a.createElement(p.a,null,r.a.createElement(d.a,null,r.a.createElement("p",{style:{marginBottom:10,textAlign:"right",color:"#5c5c5c"}},"version: 4.1.10"),r.a.createElement(f.a,{pills:!0,className:"justify-content-center nav-pills-icons"},r.a.createElement("div",{className:"d-flex w-100",style:{overflowX:"auto",justifyContent:"space-between"}},l),r.a.createElement("div",{className:"space-50"}),r.a.createElement(x,{activeTab:n,className:"example-tabs-content w-100"},c)))))};t.default=e=>{let{data:t}=e;const{title:a,description:n,pages:c,social:s}=t.site.siteMetadata;return r.a.createElement(o.a,{pages:c,social:s,description:n,title:a},r.a.createElement(l.a,{title:"Examples",description:"Check out our examples and follow the guide to learn how ReactGrid works and how you can boost performance of your React application!"}),r.a.createElement(D,null))}}}]);
//# sourceMappingURL=component---src-pages-examples-tsx-47ccd72de612c930c9b2.js.map