JavaScripTools Manual

JavaScripTable

Manipulating the table

Columns

JavaScripTable has many methods for data manipulation.

For column manipulation, there are the following methods: addColumn, removeColumn, removeAllColumn, getColumnCount, getColumnByIndex and getVisibleColumns. Note that you cannot add or remove columns if there are rows on the table.

You add a column passing a Column instance or a string - the column header. In both cases, the method returns the Column instance that you can customize. For details about column properties, take a look here.

Each column has a data type, and a Parser that will be used to both format and parse data. If no column specific parser (using the parser property) is used, the table default by data type is used. The following properties may be set (their default value constants are between parenthesis): stringParser (JST_DEFAULT_STRING_PARSER), numberParser (JST_DEFAULT_NUMBER_PARSER), currencyParser (JST_DEFAULT_CURRENCY_PARSER), dateParser (JST_DEFAULT_DATE_PARSER) and booleanParser (JST_DEFAULT_BOOLEAN_PARSER). The correct data type is important for the table to compute the correct sorting when it's on client side mode, and to allow correct data editing when the table is editable.

New on version 2.1.6 is that the table will pass as a second argument every time it calls a format or parse method on a parser is that it will pass a another 2 arguments: the Row and the Column instances where the data is located, so, a CustomParser or a WrapperParser could use that information in order to customize the parsed or formatted data.

Rows

For row manipulation, you should use: addRow, updateRow, removeRowById, removeSelectedRows, removeAllRows, getAllRows, getAllRowsAsObjects, getRowById, getRowByIdAsObject, getSelectedRows, getSelectedRowsAsObjects, getAllRowIds and getSelectedRowIds.

The addRow method can receive a Row instance or an object if an ObjectRowMapper is used. The method return value is the Row instance. You can, then, customize the row. Take a look here for row properties.

The Row constructor receives, as arguments, the row identifier and the array of values. The identifier must be unique in the table, and the array has one entry for each column, containing elements of the column type. Example: if there are 3 columns of types string, number and date, the array must contain a String, a Number and a Date. If elements are not of the expected type, the column parser will be used to parse the element.

After adding, removing or updating rows, remember to update the table with the update method.

Cells

A cell is the identified by a row id and a column index. The following methods manipulate cell data: getCellValue, setCellValue, getFormattedCellValue and setFormattedCellValue. The always receive the row id and column index. The set* methods receives a third argument, the new value. The *Formatted* methods return and set data as string.

As usual, for modifications to become visible, use the table update method.

Row breaks

Row breaks split a single row into more than one table row. All "subrows" are locally threated as a single row (same highlighting, row function, etc). For that, the method setRowBreak can be used. It optionally receives the column index (defaults to the last one) and a flag indicating if the row break must be used or not (default true). When there are different number of columns in each subrow, you should correctly set the colspan and rowspan in each column. Here is an example:

var table = new JavaScripTable(...);
with (table.addColumn("Employee")) {
    colspan = 2;
}
table.setRowBreak();
table.addColumn("Department");
table.addColumn("Job");
table.addRow(new Row(1, ["Peter", "IT", "Programmer"]));
table.addRow(new Row(2, ["John", "IT", "Web Designer"]));
table.addRow(new Row(3, ["Mary", "Financial", "Manager"]));
table.render();

//The result will be: