JavaScripTools Manual

JavaScripTable

Working with the JavaScripTable

First, some details about the table:

1. Each table needs an unique identifier (a string) and a container (an html element - normally a div - where the table will be rendered)
2. The table has a collection of Column objects that are added with the addColumn method. This method returns the Column instance. Columns are identified by their indexes, starting at zero.
3. After adding all columns, the Row objects must be added to the table using the addRow method. This method also returns the Row instance. Each row must have an unique, assigned identifier.
4. After adding all rows, the table is ready to be displayed, what is done using the render method. This method should be used only the first time the table is displayed. If you need the table to be updated (after adding more rows, for example), use the update method.

Here is the basic usage, assuming that a div with id="container" already exists:

//Create the table with id=tab
var table = new JavaScripTable("tab", "container");
//Add a column just with a header text
table.addColumn("Name");
//Add the column with the header text and type
table.addColumn(new Column("Income", JST_TYPE_NUMBER));
//Add a column just with a header text and customize it later
var birthDateColumn = table.addColumn("Birth Date");
birthDate.type = JST_TYPE_DATE;
//Add a column and customize it using the with statement
with (table.addColumn("Gender")) {
    width = "75px";
    align = "center";
}
//Add a few rows
table.addRow(new Row(1, ["John", 4065.51, new Date(1978, 1, 1), "male"]));
table.addRow(new Row(2, ["Mary", 5016.30, new Date(1963, 8, 12), "female"]));
table.addRow(new Row(3, ["Peter", 2429.46, new Date(1982, 9, 20), "male"]));
//Render the table
table.render();