@jsonforms/material-tree-renderer

<!doctype html> <html class="default no-js"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>JSON Forms Material Tree Renderer</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="assets/css/main.css"> </head> <body> <header> <div class="tsd-page-toolbar"> <div class="container"> <div class="table-wrap"> <div class="table-cell" id="tsd-search" data-index="assets/js/search.js" data-base="."> <div class="field"> <label for="tsd-search-field" class="tsd-widget search no-caption">Search</label> <input id="tsd-search-field" type="text" /> </div> <ul class="results"> <li class="state loading">Preparing search index...</li> <li class="state failure">The search index is not available</li> </ul> <a href="index.html" class="title">JSON Forms Material Tree Renderer</a> </div> <div class="table-cell" id="tsd-widgets"> <div id="tsd-filter"> <a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a> <div class="tsd-filter-group"> <div class="tsd-select" id="tsd-filter-visibility"> <span class="tsd-select-label">All</span> <ul class="tsd-select-list"> <li data-value="public">Public</li> <li data-value="protected">Public/Protected</li> <li data-value="private" class="selected">All</li> </ul> </div> <input type="checkbox" id="tsd-filter-inherited" checked /> <label class="tsd-widget" for="tsd-filter-inherited">Inherited</label> <input type="checkbox" id="tsd-filter-only-exported" /> <label class="tsd-widget" for="tsd-filter-only-exported">Only exported</label> </div> </div> <a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a> </div> </div> </div> </div> <div class="tsd-page-title"> <div class="container"> <ul class="tsd-breadcrumb"> <li> <a href="globals.html">Globals</a> </li> </ul> <h1> JSON Forms Material Tree Renderer</h1> </div> </div> </header> <div class="container container-main"> <div class="row"> <div class="col-8 col-content"> <div class="tsd-panel tsd-typography"> <a href="#jsonforms---more-forms-less-code" id="jsonforms---more-forms-less-code" style="color: inherit; text-decoration: none;"> <h1>JSONForms - More Forms. Less Code</h1> </a> <a href="#complex-forms-in-the-blink-of-an-eye" id="complex-forms-in-the-blink-of-an-eye" style="color: inherit; text-decoration: none;"> <h3>Complex Forms in the blink of an eye</h3> </a> <p>JSONForms eliminates the tedious task of writing fully-featured forms by hand by leveraging the capabilities of JSON, JSON Schema and Javascript.</p> <a href="#editor-package" id="editor-package" style="color: inherit; text-decoration: none;"> <h1>Editor Package</h1> </a> <p>This repository contains a re-usable tree component that renders a tree-master-detail JSON editor. The repository contains an IDE webcomponent that additionally configures 3 buttons to access the data shown in the tree:</p> <ul> <li>A download button</li> <li>An export button that shows the data in a dialog</li> <li>A load button that opens a native file selection dialog to load a file from the user's harddrive</li> </ul> <p>Additionally, the package contains a small runtime demo showing an editor for users and tasks.</p> <a href="#build" id="build" style="color: inherit; text-decoration: none;"> <h2>Build</h2> </a> <p>Run <code>npm install</code> to install dependencies. Run <code>npm run build</code> to build the module. The build results are located in <code>/dist/</code>.</p> <a href="#run-demo" id="run-demo" style="color: inherit; text-decoration: none;"> <h2>Run Demo</h2> </a> <p>Run <code>npm run dev</code> to start the standalone editor. It is available at <a href="http://localhost:8080/">http://localhost:8080/</a></p> <a href="#license" id="license" style="color: inherit; text-decoration: none;"> <h1>License</h1> </a> <p>The JSONForms project is licensed under the MIT License. See the <a href="https://github.com/eclipsesource/jsonforms/blob/master/LICENSE">LICENSE file</a> for more information.</p> <a href="#roadmap" id="roadmap" style="color: inherit; text-decoration: none;"> <h1>Roadmap</h1> </a> <p>Our current roadmap is available <a href="https://github.com/eclipsesource/jsonforms/blob/master/ROADMAP.md">here</a>.</p> <a href="#development" id="development" style="color: inherit; text-decoration: none;"> <h1>Development</h1> </a> <p>JSONForms is developed by <a href="https://eclipsesource.com">EclipseSource</a>. We are always very happy to have contributions, whether for trivial cleanups or big new features.</p> <a href="#migration" id="migration" style="color: inherit; text-decoration: none;"> <h1>Migration</h1> </a> <p>If you are already using JSONForms 1, check our <a href="https://github.com/eclipsesource/jsonforms/blob/master/MIGRATION.md">migration guide</a>.</p> </div> </div> <div class="col-4 col-menu menu-sticky-wrap menu-highlight"> <nav class="tsd-navigation primary"> <ul> <li class="globals "> <a href="globals.html"><em>Globals</em></a> </li> </ul> </nav> <nav class="tsd-navigation secondary menu-sticky"> <ul class="before-current"> <li class=" tsd-kind-class tsd-has-type-parameter tsd-is-not-exported"> <a href="classes/additemdialog.html" class="tsd-kind-icon">Add<wbr>Item<wbr>Dialog</a> </li> <li class=" tsd-kind-class tsd-has-type-parameter tsd-is-not-exported"> <a href="classes/expandarraycontainer.html" class="tsd-kind-icon">Expand<wbr>Array<wbr>Container</a> </li> <li class=" tsd-kind-class tsd-has-type-parameter tsd-is-not-exported"> <a href="classes/objectlistitem.html" class="tsd-kind-icon">Object<wbr>List<wbr>Item</a> </li> <li class=" tsd-kind-class tsd-has-type-parameter"> <a href="classes/objectlistitemdnd.html" class="tsd-kind-icon">Object<wbr>List<wbr>Item<wbr>Dnd</a> </li> <li class=" tsd-kind-class tsd-has-type-parameter"> <a href="classes/treewithdetailrenderer.html" class="tsd-kind-icon">Tree<wbr>With<wbr>Detail<wbr>Renderer</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/additemdialogprops.html" class="tsd-kind-icon">Add<wbr>Item<wbr>Dialog<wbr>Props</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/dispatchpropsoftreewithdetail.html" class="tsd-kind-icon">Dispatch<wbr>Props<wbr>OfTree<wbr>With<wbr>Detail</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/draginfo.html" class="tsd-kind-icon">Drag<wbr>Info</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/dropresult.html" class="tsd-kind-icon">Drop<wbr>Result</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/editor.html" class="tsd-kind-icon">Editor</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/exandarraycontainerstate.html" class="tsd-kind-icon">Exand<wbr>Array<wbr>Container<wbr>State</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/expandarraycontainerprops.html" class="tsd-kind-icon">Expand<wbr>Array<wbr>Container<wbr>Props</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/expandarrayprops.html" class="tsd-kind-icon">Expand<wbr>Array<wbr>Props</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/expandrootarraycontainerprops.html" class="tsd-kind-icon">Expand<wbr>Root<wbr>Array<wbr>Container<wbr>Props</a> </li> <li class=" tsd-kind-interface tsd-is-not-exported"> <a href="interfaces/expandrootarrayprops.html" class="tsd-kind-icon">Expand<wbr>Root<wbr>Array<wbr>Props</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/labeldefinition.html" class="tsd-kind-icon">Label<wbr>Definition</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/masterprops.html" class="tsd-kind-icon">Master<wbr>Props</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/modelmapping.html" class="tsd-kind-icon">Model<wbr>Mapping</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/objectlistitemdndprops.html" class="tsd-kind-icon">Object<wbr>List<wbr>Item<wbr>Dnd<wbr>Props</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/objectlistitemprops.html" class="tsd-kind-icon">Object<wbr>List<wbr>Item<wbr>Props</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/ownpropsoftreecontrol.html" class="tsd-kind-icon">Own<wbr>Props<wbr>OfTree<wbr>Control</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/property.html" class="tsd-kind-icon">Property</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/statepropsoftreewithdetail.html" class="tsd-kind-icon">State<wbr>Props<wbr>OfTree<wbr>With<wbr>Detail</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/stringmap.html" class="tsd-kind-icon">String<wbr>Map</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/treewithdetail.html" class="tsd-kind-icon">Tree<wbr>With<wbr>Detail</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/treewithdetailprops.html" class="tsd-kind-icon">Tree<wbr>With<wbr>Detail<wbr>Props</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/treewithdetailstate.html" class="tsd-kind-icon">Tree<wbr>With<wbr>Detail<wbr>State</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/withimageprovider.html" class="tsd-kind-icon">With<wbr>Image<wbr>Provider</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/withlabelprovider.html" class="tsd-kind-icon">With<wbr>Label<wbr>Provider</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/withlabelproviders.html" class="tsd-kind-icon">With<wbr>Label<wbr>Providers</a> </li> <li class=" tsd-kind-type-alias"> <a href="globals.html#instancelabelprovider" class="tsd-kind-icon">Instance<wbr>Label<wbr>Provider</a> </li> <li class=" tsd-kind-type-alias"> <a href="globals.html#schemalabelprovider" class="tsd-kind-icon">Schema<wbr>Label<wbr>Provider</a> </li> <li class=" tsd-kind-variable"> <a href="globals.html#css_delay" class="tsd-kind-icon">CSS_<wbr>DELAY</a> </li> <li class=" tsd-kind-variable"> <a href="globals.html#connectedtreewithdetailrenderer" class="tsd-kind-icon">Connected<wbr>Tree<wbr>With<wbr>Detail<wbr>Renderer</a> </li> <li class=" tsd-kind-variable tsd-is-not-exported"> <a href="globals.html#dndexandarraycontainer" class="tsd-kind-icon">DnDExand<wbr>Array<wbr>Container</a> </li> <li class=" tsd-kind-variable tsd-is-not-exported"> <a href="globals.html#dndtreemasterdetail" class="tsd-kind-icon">DnDTree<wbr>Master<wbr>Detail</a> </li> <li class=" tsd-kind-variable tsd-is-not-exported"> <a href="globals.html#dragsource" class="tsd-kind-icon">Drag<wbr>Source</a> </li> <li class=" tsd-kind-variable tsd-is-not-exported"> <a href="globals.html#droptarget" class="tsd-kind-icon">Drop<wbr>Target</a> </li> <li class=" tsd-kind-variable tsd-is-not-exported"> <a href="globals.html#listitem" class="tsd-kind-icon">List<wbr>Item</a> </li> <li class=" tsd-kind-variable tsd-is-not-exported"> <a href="globals.html#reset_selection_delay" class="tsd-kind-icon">RESET_<wbr>SELECTION_<wbr>DELAY</a> </li> <li class=" tsd-kind-variable tsd-is-not-exported"> <a href="globals.html#listitemdnd" class="tsd-kind-icon">list<wbr>Item<wbr>Dnd</a> </li> <li class=" tsd-kind-variable tsd-is-not-exported"> <a href="globals.html#theme" class="tsd-kind-icon">theme</a> </li> <li class=" tsd-kind-function"> <a href="globals.html#expandarray" class="tsd-kind-icon">Expand<wbr>Array</a> </li> <li class=" tsd-kind-function"> <a href="globals.html#expandrootarray" class="tsd-kind-icon">Expand<wbr>Root<wbr>Array</a> </li> <li class=" tsd-kind-function"> <a href="globals.html#expandrootarraycontainer" class="tsd-kind-icon">Expand<wbr>Root<wbr>Array<wbr>Container</a> </li> <li class=" tsd-kind-function tsd-is-not-exported"> <a href="globals.html#master" class="tsd-kind-icon">Master</a> </li> <li class=" tsd-kind-function"> <a href="globals.html#themedtreewithdetail" class="tsd-kind-icon">Themed<wbr>Tree<wbr>With<wbr>Detail</a> </li> <li class=" tsd-kind-function"> <a href="globals.html#candropdraggeditem" class="tsd-kind-icon">can<wbr>Drop<wbr>Dragged<wbr>Item</a> </li> <li class=" tsd-kind-function tsd-is-not-exported"> <a href="globals.html#collect" class="tsd-kind-icon">collect</a> </li> <li class=" tsd-kind-function tsd-is-not-exported"> <a href="globals.html#collectdragsource" class="tsd-kind-icon">collect<wbr>Drag<wbr>Source</a> </li> <li class=" tsd-kind-function tsd-is-not-exported"> <a href="globals.html#collectdroptarget" class="tsd-kind-icon">collect<wbr>Drop<wbr>Target</a> </li> <li class=" tsd-kind-function tsd-is-not-exported"> <a href="globals.html#createdata" class="tsd-kind-icon">create<wbr>Data</a> </li> <li class=" tsd-kind-function tsd-is-not-exported"> <a href="globals.html#createproplabel" class="tsd-kind-icon">create<wbr>Prop<wbr>Label</a> </li> <li class=" tsd-kind-function"> <a href="globals.html#findcontainerproperties" class="tsd-kind-icon">find<wbr>Container<wbr>Properties</a> </li> <li class=" tsd-kind-function tsd-is-not-exported"> <a href="globals.html#findcontainerprops" class="tsd-kind-icon">find<wbr>Container<wbr>Props</a> </li> <li class=" tsd-kind-function"> <a href="globals.html#findpropertylabel" class="tsd-kind-icon">find<wbr>Property<wbr>Label</a> </li> <li class=" tsd-kind-function tsd-is-not-exported"> <a href="globals.html#findreferences" class="tsd-kind-icon">find<wbr>References</a> </li> <li class=" tsd-kind-function"> <a href="globals.html#indexfrompath" class="tsd-kind-icon">index<wbr>From<wbr>Path</a> </li> <li class=" tsd-kind-function tsd-is-not-exported"> <a href="globals.html#isarray" class="tsd-kind-icon">is<wbr>Array</a> </li> <li class=" tsd-kind-function tsd-is-not-exported"> <a href="globals.html#isnottuple" class="tsd-kind-icon">is<wbr>Not<wbr>Tuple</a> </li> <li class=" tsd-kind-function tsd-is-not-exported"> <a href="globals.html#isobject" class="tsd-kind-icon">is<wbr>Object</a> </li> <li class=" tsd-kind-function"> <a href="globals.html#makeschemaselfcontained" class="tsd-kind-icon">make<wbr>Schema<wbr>Self<wbr>Contained</a> </li> <li class=" tsd-kind-function tsd-is-not-exported"> <a href="globals.html#mapdispatchtoprops" class="tsd-kind-icon">map<wbr>Dispatch<wbr>ToProps</a> </li> <li class=" tsd-kind-function"> <a href="globals.html#mapdispatchtotreelistprops" class="tsd-kind-icon">map<wbr>Dispatch<wbr>ToTree<wbr>List<wbr>Props</a> </li> <li class=" tsd-kind-function tsd-is-not-exported"> <a href="globals.html#mapstatetoprops" class="tsd-kind-icon">map<wbr>State<wbr>ToProps</a> </li> <li class=" tsd-kind-function"> <a href="globals.html#matchcontainerproperty" class="tsd-kind-icon">match<wbr>Container<wbr>Property</a> </li> <li class=" tsd-kind-function tsd-is-not-exported"> <a href="globals.html#mergeprops" class="tsd-kind-icon">merge<wbr>Props</a> </li> <li class=" tsd-kind-function"> <a href="globals.html#movelistitem" class="tsd-kind-icon">move<wbr>List<wbr>Item</a> </li> <li class=" tsd-kind-function"> <a href="globals.html#parentpath" class="tsd-kind-icon">parent<wbr>Path</a> </li> <li class=" tsd-kind-function tsd-is-not-exported"> <a href="globals.html#resolveandmakeschemaselfcontained" class="tsd-kind-icon">resolve<wbr>And<wbr>Make<wbr>Schema<wbr>Self<wbr>Contained</a> </li> <li class=" tsd-kind-function"> <a href="globals.html#resolvelocaldata" class="tsd-kind-icon">resolve<wbr>Local<wbr>Data</a> </li> <li class=" tsd-kind-function tsd-is-not-exported"> <a href="globals.html#styles" class="tsd-kind-icon">styles</a> </li> <li class=" tsd-kind-function"> <a href="globals.html#wrapimageifnecessary" class="tsd-kind-icon">wrap<wbr>Image<wbr>IfNecessary</a> </li> <li class=" tsd-kind-object-literal"> <a href="globals.html#types" class="tsd-kind-icon">Types</a> </li> <li class=" tsd-kind-object-literal tsd-is-not-exported"> <a href="globals.html#arraydroptarget" class="tsd-kind-icon">array<wbr>Drop<wbr>Target</a> </li> <li class=" tsd-kind-object-literal tsd-is-not-exported"> <a href="globals.html#objectdragsource" class="tsd-kind-icon">object<wbr>Drag<wbr>Source</a> </li> <li class=" tsd-kind-object-literal tsd-is-not-exported"> <a href="globals.html#objectdroptarget" class="tsd-kind-icon">object<wbr>Drop<wbr>Target</a> </li> </ul> </nav> </div> </div> </div> <footer class="with-border-bottom"> <div class="container"> <h2>Legend</h2> <div class="tsd-legend-group"> <ul class="tsd-legend"> <li class="tsd-kind-module"><span class="tsd-kind-icon">Module</span></li> <li class="tsd-kind-object-literal"><span class="tsd-kind-icon">Object literal</span></li> <li class="tsd-kind-variable"><span class="tsd-kind-icon">Variable</span></li> <li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li> <li class="tsd-kind-function tsd-has-type-parameter"><span class="tsd-kind-icon">Function with type parameter</span></li> <li class="tsd-kind-index-signature"><span class="tsd-kind-icon">Index signature</span></li> <li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li> <li class="tsd-kind-type-alias tsd-has-type-parameter"><span class="tsd-kind-icon">Type alias with type parameter</span></li> </ul> <ul class="tsd-legend"> <li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li> <li class="tsd-kind-enum-member"><span class="tsd-kind-icon">Enumeration member</span></li> <li class="tsd-kind-property tsd-parent-kind-enum"><span class="tsd-kind-icon">Property</span></li> <li class="tsd-kind-method tsd-parent-kind-enum"><span class="tsd-kind-icon">Method</span></li> </ul> <ul class="tsd-legend"> <li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li> <li class="tsd-kind-interface tsd-has-type-parameter"><span class="tsd-kind-icon">Interface with type parameter</span></li> <li class="tsd-kind-constructor tsd-parent-kind-interface"><span class="tsd-kind-icon">Constructor</span></li> <li class="tsd-kind-property tsd-parent-kind-interface"><span class="tsd-kind-icon">Property</span></li> <li class="tsd-kind-method tsd-parent-kind-interface"><span class="tsd-kind-icon">Method</span></li> <li class="tsd-kind-index-signature tsd-parent-kind-interface"><span class="tsd-kind-icon">Index signature</span></li> </ul> <ul class="tsd-legend"> <li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li> <li class="tsd-kind-class tsd-has-type-parameter"><span class="tsd-kind-icon">Class with type parameter</span></li> <li class="tsd-kind-constructor tsd-parent-kind-class"><span class="tsd-kind-icon">Constructor</span></li> <li class="tsd-kind-property tsd-parent-kind-class"><span class="tsd-kind-icon">Property</span></li> <li class="tsd-kind-method tsd-parent-kind-class"><span class="tsd-kind-icon">Method</span></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><span class="tsd-kind-icon">Accessor</span></li> <li class="tsd-kind-index-signature tsd-parent-kind-class"><span class="tsd-kind-icon">Index signature</span></li> </ul> <ul class="tsd-legend"> <li class="tsd-kind-constructor tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited constructor</span></li> <li class="tsd-kind-property tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited property</span></li> <li class="tsd-kind-method tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited method</span></li> <li class="tsd-kind-accessor tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited accessor</span></li> </ul> <ul class="tsd-legend"> <li class="tsd-kind-property tsd-parent-kind-class tsd-is-protected"><span class="tsd-kind-icon">Protected property</span></li> <li class="tsd-kind-method tsd-parent-kind-class tsd-is-protected"><span class="tsd-kind-icon">Protected method</span></li> <li class="tsd-kind-accessor tsd-parent-kind-class tsd-is-protected"><span class="tsd-kind-icon">Protected accessor</span></li> </ul> <ul class="tsd-legend"> <li class="tsd-kind-property tsd-parent-kind-class tsd-is-private"><span class="tsd-kind-icon">Private property</span></li> <li class="tsd-kind-method tsd-parent-kind-class tsd-is-private"><span class="tsd-kind-icon">Private method</span></li> <li class="tsd-kind-accessor tsd-parent-kind-class tsd-is-private"><span class="tsd-kind-icon">Private accessor</span></li> </ul> <ul class="tsd-legend"> <li class="tsd-kind-property tsd-parent-kind-class tsd-is-static"><span class="tsd-kind-icon">Static property</span></li> <li class="tsd-kind-call-signature tsd-parent-kind-class tsd-is-static"><span class="tsd-kind-icon">Static method</span></li> </ul> </div> </div> </footer> <div class="container tsd-generator"> <p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p> </div> <div class="overlay"></div> <script src="assets/js/main.js"></script> <script>if (location.protocol == 'file:') document.write('<script src="assets/js/search.js"><' + '/script>');</script> </body> </html>