Navigation:  Reference > Elements >

Table

Previous pageReturn to chapter overviewNext page

Table belongs to the "Widgets" category and it has different look in various UI themes.

UI Theme:

Hand Drawn

Wire Frame

Windows XP

MAC OS X

Window 7

Legend

Table_hand

Table_wire

Table_XP

Table_Mac

Table_Win7

Table can store data with multiple rows and columns.  To change the data of table, just double click the Table element.  There are two editing modes, the default one is to edit data grid by grid.  In this editing mode, you can insert/append/remove row or column, specify the text alignment for certain table cell, or adjust the row height or column width by dragging the header border.

table_editor

If you click the free_edit_button button on left top corner, you will enter the free editing mode, which allows you to edit the data for the entire table.  In this mode, each row in the editing area is for one row in the table.  Data for different columns are separated with comma.  If you need to use comma in table cell content, use '\' to escape it. You can click the grid_editing_button button to switch back to the grid editing mode.

table_free_editor

Table is a container element, and each cell of Table can serve as a container.  You can embed elements into any cell of the table.  The embedded element will be place at the left inside the cell, and you can drag to relocate it within the table cell.

drag_embedded_element_in_table

An (invisible) Table element can be used as data repository.  You can use properties to get data, and use actions to set/insert/append/delete data.

Element Specific Facilities

table_facilities

1.Background color
2.Alternate row background color
3.Set fill opacity with number/slider
4.Underline text
5.Make text italic
6.Use bold text
7.Default text horizontal align (can be overrode by table cell's alignment)
8.Font of the text
9. Font size
10.Text color
11.Default text vertical align (can be overrode by table cell's alignment)
12.Select previous/next row
13.Table outer frame show / hide
14.Table horizontal lines show / hide
15.Table vertical lines show / hide
16.Default row height ( in pixels, can be overrode by table cell's height  )
17.Row header show / hide
18.Column header show / hide
19.Change select mode
20.Show / hide vertical scroll bar
21.Show / hide horizontal scroll bar
22.23.24. Change state for the table

Element Events

Element Clicked, Element Double-Clicked, Element Right-Clicked, Element Initialized, Element Hidden, Mouse Over, Mouse Out, Mouse Move, Mouse Down, Mouse Up, Key Down, Key Up, Custom Event, Selection Changed

Element Actions

Change Visibility, Change Location, Change Size, Change State, Set Selected Index, Set Selected Column, Set Table Cell Value, Append New Row to Table, Insert New Row to Table, Delete Row from Table

Element Properties

Id, X Coordinate, Y Coordinate, Width, Height, Visible, Note

Index of the Selected Table Row, Index of the Selected Table Column, Table Cell Values as Array[row][column], Table Row Count(Header excluded), Table Column Count