CreateDataTable

Hello World

Content:
- Methods

Data tables display sets of data across rows and columns.

tbl = MUI.CreateDataTable( columns, values, width, height, options ) → Object

You can pass options and and configure your header and rows to add specific functionality.

Example - Basic click to expand contents

cfg.Light
cfg.MUI

function OnStart()
{
    lay = MUI.CreateLayout("Linear", "FillXY,VCenter")

        var headers = ["ID", "Name", "Age", "Color"]
        var values = [
            "1:Robb Stark:14:Blue",
            "2:Sansa Stark:11:Teal",
            "3:Arya Stark:9:Green",
            "4:Bran Stark:7:Orange",
            "5:Rickon Stark:Grey"
        ]
        var table = MUI.CreateDataTable(headers, values, 0.96, 0.6)
        lay.AddChild(table)

    app.AddLayout(lay)
}

Copy All

Add Sortable to the header type if you want the column to be sortable when click. You can also add the Numeric type to right align text for number values.

Example - Sortable and Numeric Column click to expand contents

cfg.Light
cfg.MUI

function OnStart()
{
    lay = MUI.CreateLayout("Linear", "FillXY,VCenter")

        var headers = ["ID", "Name:Sortable", "Age:Sortable", "Color"]
        var values = [
            "1:Robb Stark:14:Blue",
            "2:Sansa Stark:11:Teal",
            "3:Arya Stark:9:Green",
            "4:Bran Stark:7:Orange",
            "5:Rickon Stark:2:Grey",
            "6:Theon Greyjoy:18:Brown",
            "7:Jon Snow:11:Red"
        ]
        var table = MUI.CreateDataTable(headers, values, 0.96, 0.6)
        lay.AddChild(table)

    app.AddLayout(lay)
}

Copy All

Add Selectable option to make the rows in the table selectable.

Example - Selectable and Dark click to expand contents

cfg.Dark
cfg.MUI

function OnStart()
{
    lay = MUI.CreateLayout("Linear", "FillXY,VCenter")

        var headers = ["ID", "Name:Sortable", "Age", "Color"]
        var values = [
            "1:Robb Stark:14:Blue",
            "2:Sansa Stark:11:Teal",
            "3:Arya Stark:9:Green",
            "4:Bran Stark:7:Orange",
            "5:Rickon Stark:2:Grey",
            "6:Theon Greyjoy:18:Brown",
            "7:Jon Snow:11:Red"
        ]
        var table = MUI.CreateDataTable(headers, values, 0.96, 0.6, "Selectable")
        lay.AddChild(table)

    app.AddLayout(lay)
}

Copy All

You can also add a footer into your table if you want controls associated with table interactions.

Example - With Footer click to expand contents

cfg.Dark
cfg.MUI

function OnStart()
{
    lay = MUI.CreateLayout("Linear", "FillXY,VCenter")

        var headers = ["ID", "Name:Sortable", "Age"]
        var values = [
            "1:Robb Stark:14",
            "2:Sansa Stark:11",
            "3:Arya Stark:9",
            "4:Bran Stark:7",
            "5:Rickon Stark:2"
        ]
        var table = MUI.CreateDataTable(headers, values, 0.96, 0.6, "Selectable")
        lay.AddChild(table)

        var ftr = table.AddFooter("Linear", "Horizontal, Right, VCenter", 0.09)

        var fBtn = MUI.CreateButtonFlat('REMOVE SELECTED')
        fBtn.SetEnabled(false)
        ftr.AddChild(fBtn)
        fBtn.SetOnTouch(function(){
            table.GetSelectedRows(function(x){
                table.RemoveRows(x)
            })
        })
        table.SetOnSelectionStatus(function(c) {
            if(c) fBtn.SetEnabled(true)
            else fBtn.SetEnabled(false)
        })

    app.AddLayout(lay)
}

Copy All