NKTableView

Overview

TableView objects are used to present hierarchical lists of information.

init(x, y, width, height, style)

initializes table view object with initial frame, where it will be displayed.
style - table style. Can be "grouped" or "plain"

show()

shows control (not creating)

hide()

hides control (not destroying)

setEditing(isEditing)

switches tableview to editing mode, where user can manipulate table rows, reorder and remove any rows. Parameter isEditing can be either "yes" or "no".

setUserCanEditRows(canEdit)

enables/disables ability to delete rows using swipe gestures, be default this is disabled.

insertCategoryNamed(name)

inserts new category/section in table view with specified name

insertRecord(title, subtitle, image, sectionNumber, rightImage, callback)

inserts new row to the table.

Parameters:
title - rowʼs main title
subtitle - rowʼs subtitle, usually it is a description for the title
image - NKImage instance, which represents the image to be displayed in the left part of the row. Images larger then row height will be down scaled to row height. Images smaller then row height will appear at their original size.
sectionNumber - number of the section where the row must be inserted (starting from 0). rightImage - small image to be displayed in the right part of the row, usually showing that the item is clickable, if empty then default OSʼs action image will be used.
callback - is a real javascript code to be executed when the item is clicked.

bindToDataBase(dbName, tableName, optionalQuery)

binds tableview to the given database using itʼs table as datasource, binding the database will destroy all the content in table view which was added earlier. optionalQuery is an optional parameter used to specify raw sql query to select table's content from database, for example: "SELECT * FROM products WHERE category='Fruits'". Of course you can use the query to load data sorted and to do other things which are allowed by SQL SELECT queries. To let NimbleKit know how data in a table view must be presented you need to have 6 columns in the database table, which are named exactly like following:

category - name of the category to which the row is related (for example "Fruits")
title - Rowʼs main title (for example "Apple")
subtitle - Rowʼs subtitle/description (for example "Nice green fruit")
image - the name of the image file which will be used in the left part of the row, can be the name from application bundle, documents folder or even an url to the image in the internet.
right_image - the image name if the small image to be displayed in the right part of the row, usually showing that the item is clickable, if empty then default OSʼs action image will be used. Can be the name from application bundle, documents folder or even an url to the image in the internet.
js - javascript code to be executed when the row is clicked. This is very useful as it will be loaded much faster then the code on the page, making application more responsive and page to load faster improving user experience.
If you want to apply filter or resort data in table view you can call bindToDatabase multiple times with different "optionalQuery"s.

var tableView = new NKTableView();
 tableView.init(20, 20, 280, 300, 'plain');

 tableView.show();
 tableView.insertCategoryNamed('FirstGroup');
 tableView.insertCategoryNamed('SecondGroup');
 var image = new NKImage();
 image.loadFromBundle('arrow.png');
 var firstRecord = new Object;
 firstRecord.title = "Record1";
 firstRecord.subTitle = "subtitle"
 firstRecord.imageID = image.id;//note image ID is used
 firstRecord.rightImageID = image.id;//note image ID is used
 firstRecord.section = 0;
 firstRecord.callback = "onRowClick()";

var secondRecord = new Object;
 secondRecord.title = "Record2";
 secondRecord.section = 1;
 var records = new Array();!
 records[0] = firstRecord;
 records[1] = secondRecord;
 tableView.insertRecords(records);