Public
Edited
Jan 16, 2024
webix.ui({
container: "box",
view: "tree",
type: "lineTree",
template: "{common.icon()} #value#",
data: webix.copy(smalltreedata)
})
{
const list = webix.ui({
container: "dataView",
borderless: true,
view: "dataview",
id: "data",
css: "movies",
xCount: 3,
yCount: 0,
type: {
width: "auto",
height: "auto",
type: "tiles",
template:
"<div class='overall'><div class='rank'>#rank#.</div><div class='title'>#title#</div><div class='year'>#year# year</div> </div>"
},
url: "//docs.webix.com/samples/06_dataview/03_loading/movies.json"
});
list.attachEvent("onItemClick", function(id, e, node) {
var item = this.getItem(id);
console.log("item", item);
list.select(id);
});
}
header = (markdown, options, visual) => {
if (visual) visualise(visual);
if (options) {
let indexPanel;
return html`
<div class="nectis" style="display: flex">
<div>${md([markdown])}</div>
<div class="options-panel">
<div class="toolbar">${(indexPanel = Toolbar.build(indexPanel))}</div>
</div>
</div>`;
}
return html`<div class="nectis">${md(markdown)}</div>`;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
