TK.Table

Simple sortable table

{
    _: TK.Table,
    Rows: [
        { Name: "Peter", Age: 25 },
        { Name: "Bob", Age: 27 }
    ]
}

Table with custom titles and only specific columns

{
    _: TK.Table,
    Rows: [
        { Name: "Peter", Age: 25 },
        { Name: "Bob", Age: 27 }
    ],
    SpecificColumns: ["Name"],
    ColumnTitles: { Name: "Custom Title" }
}

Filter by code

{
    _: TK.Table,
    Rows: [
        { Name: "Peter", Age: 25 },
        { Name: "Bob", Age: 27 },
        { Name: "Alice", Age: 30 },
    ],
    Init: function() {
        this.ApplyFilter("e"); // Returns number of matches ( 2 )
    }
}

Filter by user

Adds the ability for the user to filter by column using a multi-select list. If the possible option count exceeds the threshold, it will use a text box instead.

{
    _: TK.Table,
    EnableFilter: true,
    ThresholdFilterMultiselect: 4,
    Rows: [
        { Name: "Peter", Age: 25 },
        { Name: "John", Age: 25 },
        { Name: "David", Age: 25 },
        { Name: "Charles", Age: 25 },
        { Name: "James", Age: 27 },
        { Name: "Bob", Age: 27 },
        { Name: "Alice", Age: 30 },
    ]
}

Max Rows

Limit the number of visible rows. This is used in case a large number of rows is causing performance issues.

{
    _: TK.Table,
    Rows: [
        { Name: "Peter", Age: 25 },
        { Name: "Bob", Age: 27 },
        { Name: "Alice", Age: 30 },
    ],
    MaxRows: 2
}

Page numbers

{
    _: TK.Table,
    PageSize: 5,
    Rows: [
        { Name: "Peter", Age: 25 },
        { Name: "John", Age: 25 },
        { Name: "David", Age: 25 },
        { Name: "Charles", Age: 25 },
        { Name: "James", Age: 27 },
        { Name: "Bob", Age: 27 },
        { Name: "Alice", Age: 30 }
    ]
}

Check boxes

{
    _: TK.Table,
    Rows: [
        { Name: "Peter", Age: 25 },
        { Name: "Bob", Age: 27 },
        { Name: "Alice", Age: 30 },
    ],
    EnableCheckBoxes: true,
    CheckboxCheck: function() {
        var selectedRows = this.SelectedRows();
        alert(selectedRows.length + " rows selected.");
    }
}

Custom templates

{
    _: TK.Table,
    Rows: [
        { Name: "Peter", Age: 25 },
        { Name: "Bob", Age: 27 },
        { Name: "Alice", Age: 30 },
    ],
    Templates: {
        Name: {
            _: "td",
            Init: function() {
                this.innerHTML = this.Data.toUpperCase();
            }
        }
    }
}

Add new rows

{
    _: TK.Table,
    Rows: [
        { Name: "Peter", Age: 25 },
        { Name: "Bob", Age: 27 },
        { Name: "Alice", Age: 30 },
    ],
    Init: function() {
        // Method 1
        this.Rows.push({ Name: "James", Age: 32 });
        this.Rows.push({ Name: "Smith", Age: 40 });
        this.Refresh();

        // Method 2
        this.AddRow({ Name: "John", Age: 42 });
    }
}

Load data using Ajax

{
    _: TK.AjaxTable,
    Url: "ExampleData.txt",
    Post: null, // A GET request will be executed unless 'Post' is not null
    Update: function() {
        // This function is called after data is loaded
    }
}

{
    _: TK.AjaxTable,
    Url: "ExampleData.txt?sort=SORTBY&desc=SORTDESC&filter=FILTER",
    Post: null, // A GET request will be executed unless 'Post' is not null
    Update: function() {
        // This function is called after data is loaded
    }
}

Adding a form

{
    Elements: {
        AddTextButton: {
            onclick: function() {
                this.Parent.Elements.Table.AddRow({
                    Description: "",
                    Price: 0,
                    Count: 1
                }, true);
            }
        },
        Table: {
            _: TK.AjaxTable,
            Url: "ExampleData.txt",
            Form: { _: TK.Form },
            EnableRemoveButton: true,
            Save: function(model, isDeleted) {
                alert(model.Description + " " + (isDeleted ? "deleted" : "changed"));
            }
        }
    }
}