ui1.ListView

To create a responsive table.

var list = new innovaphone.ui1.Div("position: absolute; left:20px; top:10px; right:20px; height:300px", null, "");
            document.getElementById("out").appendChild(list.container)

listView = new innovaphone.ui1.ListView(list, 30, "headercl", "arrow", false);
            var columns = 7;
            var rows = 4;
            var img = new innovaphone.ui1.Node("img", "position:absolute; left:10px; top:0px; height:10px; width:10px", null, "arrowcl");
            img.container.src = "arrow.png";
            listView.addColumn(null, "text", img, 0, 40, false);
            for (i = 1; i < columns; i++) {
            listView.addColumn(null, "text", "C" + i, i, 40, false);
            }
            for (i = 0; i < rows; i++) {
            var row = [];
            var img = new innovaphone.ui1.Node("img", "position:absolute; background-color:gray; left:10px; top:10px; height:10px; width:10px", null, "arrowcl");
            img.container.src = "arrow.png";
            row[0] = img;
            for (j = 1; j < columns; j++) {
            row.push("C(" + i + "," + j + ")");
            }
            listView.addRow(i, row, "rowcl", "#A0A0A0", "#82CAE2");
            }

innovaphone.ui1.ListView(container, rowHeight, headercl, arrowcl, vertical)

Creates a table

container: The container where the table will be placed.
rowHeight: The height that will be applied to every row.
headercl: cl to be applied on the header.
arrowcl: cl to be applied on the sort arrow when a column is sorted.
vertical: true if the table will be vertical, false if the table will be horizontal.

addColumn(cl, contentcl, content, id, minWidth, int)

Creates a column

cl: cl to be applied on the header field.
contentcl: cl to be applied on the content.
content: The text to be written into the header field.
id: The id of the column.
minWidth: The minimum width for a column on draggind (resize).
int: true if the content is a number, false if the content is a string. Used on sort by column.

addRow(id, elements, cl, overColor, selectedColor, hidenData, clField)

Creates a row.

id: The id of the row.
elements: The elements of the row.
cl: cl to be applied on the row.
overColor: The background color when the mouse is over.
selectedColor: The background color when the row is selected.
hidenData: Data that we want to attach to the row but not be displayed.
clField: cl to be applied on each element of the row.

removeRow(num)

Removes a row.

num: The row number (starting on "0").

removeRowById(id)

Removes a row.

id: The row id that we have set on addRow.

updateRow(num, rowData, id)

Updates the row data displayed.

num: The row number (starting on "0").
rowData: The array with the new row data.
id: The new id of the row, if we want to change it.

removeColumn(num)

Removes a column.

num: The column number (starting on "0").

hideColumn(num)

Hides a column.

num: The column number (starting on "0").

displayColumn(num)

Displays a column if it was hidden.

num: The column number (starting on "0").

search(text)

Displays just the rows that include text.

text: The text string to search (if the length is 0, all rows are displayed).

resizeTable()

Resizes the table to optimize the width.