# 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.