PhotonUI logo

PhotonUI

A javascript framework to create user interfaces

DataView

Documentation

Class Reference

More examples

Define html elements

1
2
3
4
5
6
7
8
9
10
11
12
13
var dataview = new photonui.DataView({
    containerElement: "table",
    itemElement: "tr",
    columnElement: "td",
    items: [
        { name: "John", count: 2 },
        { name: "Jane", count: 4 },
        { name: "Janeth", count: 12 }
    ],
    columns: [ "name", "count"],
});

photonui.domInsert(dataview, "demo");

Custom Widget formater

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var dataview = new photonui.DataView({
    containerElement: "div",
    itemElement: "div",
    items: [
        { name: "John", count: 2 },
        { name: "Jane", count: 4 },
        { name: "Janeth", count: 12 }
    ],
    customWidgetFormater: function(item) {
        return new photonui.BoxLayout({
            orientation: "horizontal",
            children: [
                new photonui.Label(item.name),
                new photonui.NumericField({ value: item.count })
            ]
        });
    }
});

photonui.domInsert(dataview, "demo");

Drag and drop

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var dataview = new photonui.DataView({
    dragAndDroppable: true,
    items: [
        { name: "John", count: 2 },
        { name: "Jane", count: 4 },
        { name: "Janeth", count: 12 }
    ],
    columns: [ "name", "count"],
    callbacks: {
        "item-sort": function(event, item) {
            item.value.count++;
        }
    },
});

photonui.domInsert(dataview, "demo");