3e:null 3f:["$","title",null,{"children":"Wunderbaum: Tree grid library | Kevin Hernández Rostrán | Observable"}] 45:T1291,tree3 = new mar10.Wunderbaum({ id: "demo2", element: document.querySelector("#demo-tree-3"), debugLevel: 5, connectTopBreadcrumb: document.getElementById("parentPath"), checkbox: true, // minExpandLevel: 1, fixedCol: true, navigationModeOption: "row", source: "https://cdn.jsdelivr.net/gh/mar10/assets@master/wunderbaum/fixture_store_104k_3_7_flat_comp.json", // "https://cdn.jsdelivr.net/gh/mar10/assets@master/wunderbaum/ajax_100k_3_1_6.json", // "../../test/generator/fixture_store_104k_3_7_flat_comp.json", // source: "../assets/ajax_100k_3_1_6.json", types: { "folder": { "colspan": true, checkbox:false }, "book": { "icon": "bi bi-book" }, "computer": { "icon": "bi bi-laptop" }, "music": { "icon": "bi bi-disc" }, "phone": { "icon": "bi bi-phone" } }, columns: [ { id: "*", title: "Product", width: "250px" }, { id: "author", title: "Author", width: "200px" }, { id: "year", title: "Year", width: "50px", classes: "wb-helper-end" }, { id: "qty", title: "Qty", width: "100px", classes: "wb-helper-end" }, { id: "price", title: "Price ($)", width: "80px", classes: "wb-helper-end", }, // In order to test horizontal scrolling, we need a fixed or at least minimal width: { id: "details", title: "Details", width: "*", minWidth: "600px" }, ], // dnd: { // dragStart: (e) => { // if (e.node.type === "folder") { // return false; // } // e.event.dataTransfer.effectAllowed = "all"; // return true; // }, // dragEnter: (e) => { // if (e.node.type === "folder") { // e.event.dataTransfer.dropEffect = "copy"; // return "over"; // } // return ["before", "after"]; // }, // drop: (e) => { // console.log("Drop " + e.sourceNode + " => " + e.region + " " + e.node); // }, // }, edit: { trigger: ["clickActive", "F2", "macEnter", "click"], select: true, beforeEdit: function (e) { console.log(e.type, e); // return false; }, edit: function (e) { console.log(e.type, e); }, apply: function (e) { console.log(e.type, e); // Simulate async storage that also validates: return e.util.setTimeoutPromise(() => { e.inputElem.setCustomValidity(""); if (e.newValue.match(/.*\d.*/)) { e.inputElem.setCustomValidity("No numbers please."); return false; } }, 1000); }, }, // filter: { // connectInput: "input#filterQuery", // // mode: "dim", // }, init: (e) => { // e.tree.setFocus(); }, load: function (e) { // e.tree.addChildren({ title: "custom1", classes: "wb-error" }); }, lazyLoad: function (e) { console.log(e.type, e); // return { url: "../assets/ajax-lazy-products.json" }; return new Promise((resolve, reject) => { setTimeout(() => { // reject("Epic fail") resolve({ url: "../assets/ajax-lazy-products.json" }); }, 1500); }); }, change: function (e) { const info = e.info; const colId = info.colId; console.log(e.type, e); // For demo purposes, simulate a backend delay: return e.util.setTimeoutPromise(() => { // Assumption: we named column.id === node.data.NAME switch (colId) { case "sale": case "details": e.node.data[colId] = e.inputValue; break; } // e.node.setModified() }, 500); }, render: function (e) { // console.log(e.type, e.isNew, e); const node = e.node; const util = e.util; for (const col of Object.values(e.renderColInfosById)) { switch (col.id) { case "price": col.elem.textContent = "$ " + node.data.price.toFixed(2); break; case "year": // date stamp col.elem.textContent = new Date(node.data.year).getFullYear(); break; case "qty": // thousands separator col.elem.textContent = node.data.qty.toLocaleString(); break; // case "sale": // checkbox control // if (e.isNew) { // col.elem.innerHTML = ""; // } // // Cast value to bool, since we don't want tri-state behavior // util.setValueToElem(col.elem, !!node.data.sale); // break; // case "details": // text control // if (e.isNew) { // col.elem.innerHTML = ""; // } // util.setValueToElem(col.elem, node.data.details); // break; default: // Assumption: we named column.id === node.data.NAME col.elem.textContent = node.data[col.id]; break; } } }, });46:Te32,tree4 = new mar10.Wunderbaum({ id: "demo3", element: document.querySelector("#demo-tree-4"), // source: "https://cdn.jsdelivr.net/gh/mar10/assets@master/wunderbaum/ajax_100k_3_1_6.json", // source: "../assets/ajax_1k_3_54.json", // Columns- and types-definition are part of the Ajax response: source: "https://cdn.jsdelivr.net/gh/mar10/assets@master/wunderbaum/ajax_1k_3_54_t_c.json", debugLevel: 5, // header: false, connectTopBreadcrumb: document.getElementById("parentPath"), // checkbox: true, // minExpandLevel: 1, fixedCol: true, navigationModeOption: "cell", // edit: { // trigger: ["clickActive", "F2", "macEnter"], // select: true, // beforeEdit: function (e) { // console.log(e.type, e); // // return false; // }, // edit: function (e) { // console.log(e.type, e); // }, // apply: function (e) { // console.log(e.type, e); // // Simulate async storage that also validates: // return e.util.setTimeoutPromise(() => { // e.inputElem.setCustomValidity(""); // if (e.newValue.match(/.*\d.*/)) { // e.inputElem.setCustomValidity("No numbers please."); // return false; // } // }, 1000); // }, // }, // filter: { // connectInput: "input#filterQuery", // // mode: "dim", // }, init: (e) => { // e.tree.setFocus(); }, load: function (e) { // e.tree.addChildren({ title: "custom1", classes: "wb-error" }); }, // lazyLoad: function (e) { // console.log(e.type, e); // // return { url: "../assets/ajax-lazy-products.json" }; // return new Promise((resolve, reject) => { // setTimeout(() => { // // reject("Epic fail") // resolve({ url: "../assets/ajax-lazy-products.json" }); // }, 1500); // }); // }, change: function (e) { const info = e.info; const colId = info.colId; console.log(e.type, e); // For demo purposes, simulate a backend delay: return e.util.setTimeoutPromise(() => { // Assumption: we named column.id === node.data.NAME switch (colId) { case "sale": case "details": e.node.data[colId] = e.inputValue; break; } // e.node.setModified() }, 500); }, render: function (e) { // console.log(e.type, e.isNew, e); const node = e.node; const util = e.util; for (const col of Object.values(e.renderColInfosById)) { // Assumption: we named column.id === node.data.NAME const val = node.data[col.id]; switch (col.id) { case "date": if (val) { const dt = new Date(val) col.elem.textContent = dt.toISOString().slice(0, 10); } else { col.elem.textContent = "n.a."; } break case "mood": const map = { "h": "Happy", "s": "Sad" } col.elem.textContent = map[val] || ""; break case "price": col.elem.textContent = "$ " + val.toFixed(2); break; case "qty": // thousands separator col.elem.textContent = val.toLocaleString(); break; case "details": // text control if (e.isNew) { col.elem.innerHTML = ""; } util.setValueToElem(col.elem, val); break; default: // Assumption: we named column.id === node.data.NAME if (typeof val === "boolean") { col.elem.textContent = val ? "X" : ""; } else { col.elem.textContent = val; } break; } } }, });47:[] 43:{"id":"47a20b32affe6812","slug":null,"title":"Wunderbaum: Tree grid library","thumbnail":"eebea77deaf295a6b63d06bd568320a594bbfb1efcb9b4f7ad5ec90465b9942f","access_level":"public","create_time":"$D2022-11-18T20:40:53.813Z","update_time":"$D2023-04-14T17:54:25.607Z","view_time":null,"first_public_time":"$D2022-11-18T22:51:27.275Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"6fd0285f3ab12b9e","login":"kevinah95","name":"Kevin Hernández Rostrán","avatar_url":"https://avatars-next.observableusercontent.com/f96153a30d564e4372442574fb8e5dc2990136f0ae80b066af521153391d2ebb","tier":"starter_2024","bio":"A child of God • Trust in «as for me and my family, we will serve the Lord» • Software Developer 💻 • Graphic Designer 😍 • Creative 👌 • Thankful","following":false},"version":141,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3e8185a03aa2dfdf","login":"kevinah95","name":"Kevin Hernández Rostrán","avatar_url":"https://avatars-next.observableusercontent.com/f96153a30d564e4372442574fb8e5dc2990136f0ae80b066af521153391d2ebb","tier":null,"bio":"A child of God • Trust in «as for me and my family, we will serve the Lord» • Software Developer 💻 • Graphic Designer 😍 • Creative 👌 • Thankful","following":false}],"members":[{"type":"individual","id":"3e8185a03aa2dfdf","login":"kevinah95","name":"Kevin Hernández Rostrán","avatar_url":"https://avatars-next.observableusercontent.com/f96153a30d564e4372442574fb8e5dc2990136f0ae80b066af521153391d2ebb","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Wunderbaum: Tree grid library","cells":[{"id":0,"value":"# Wunderbaum: Tree grid library","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"{\n try {\n const treet = await new mar10.Wunderbaum({\n id: \"demo\",\n element: document.querySelector(\"#demo-tree\"),\n checkbox: true,\n source: [\n {\n title: \"Node 1\",\n expanded: true,\n children: [{ title: \"Node 1.1\" }, { title: \"Node 1.2\" }]\n },\n { title: \"Node 2\" }\n ],\n debugLevel: 1,\n \n });\n console.log(treet)\n } catch (error) {}\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"html`

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"mar10 = import(\"https://cdn.jsdelivr.net/gh/mar10/wunderbaum@main/dist/wunderbaum.esm.min.js\")\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"//import(\"https://cdn.jsdelivr.net/gh/mar10/wunderbaum/docs/api/assets/main.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"d3.json(\"https://cdn.jsdelivr.net/gh/mar10/assets@master/wunderbaum/ajax_99k_3_1.json\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 44:"$43:body"