Table

=Table=

toc

Syntax:
TABLE #handle, arrayName$ - //Create a table object from the specified array and assigning it to #handle//

The array used for tables must be dimensioned with **DIM** and it must contain two dimensions. code DIM Array$(10,3) code

The array is 0-indexed, so the first row is at element 0, as is the first column. The array above has 11 columns and 4 rows.

After creation, a table must be rendered. Thereafter it is auto updated with changes to it's designated array.

ColumnNames
A special row called a header is placed at the top of the table. It contains the names of the columns if the **ColumnNames** statement is issued. Remember that the number of columns is equal to the number of elements in the second dimension of the array, which is 0-indexed. This array has four columns: DIM Array$(3,10).

ColumnNames are added as a string expression, delimited by commas. The array we've created might use this statement to name the columns, 0,1,2,3.

code code
 * 1) handle columnnames("First, Second, Third, Fourth")

Caption
The label, or caption for the table can be designated with the **Caption** statement, like this:

code code
 * 1) handle caption("Caption Text Here")

Table Methods

 * 1) handle COLUMNNAMES(expr$) - //Set the column names using a comma delimited string expression//
 * 2) handle CAPTION(expr$) - //Set the caption using expr$//
 * 3) handle CSSCLASS(expr$) - //Set the CSS class tag to expr$//
 * 4) handle TRCLASS(expr$) - //Set the CSS class tag for table rows to expr$//
 * 5) handle TDCLASS(expr$) - //Set the CSS class tag for row data items to expr$//
 * 6) handle THCLASS(expr$) - //Set the CSS class tag for header row items to expr$//
 * 7) handle CAPTIONCLASS(expr$) - //Set the CSS class tag for the table caption to expr$//
 * 8) handle ALLCLASS(expr$) - //Set the CSS class tag for all of the properties of the table to expr$//
 * 9) handle LINK(columnNameExpr$, handler) - //Make the items in a column into links using handler when the user clicks. Only one column in a table can be made into links.//
 * 10) handle ISNULL //- Returns zero (or false)//
 * 11) handle DEBUG$ //- Returns the string "Table"//

Creating Classes with CSSCLASS
Class names may begin with their tag followed by a dot, or the tag may be eliminated. The following two statements are identical. code cssclass "table.mytable", "{ }" cssclass ".mytable", "{ }" code

The HTML tags for the table elements are as follows: cssclass tag for a table "table." trclass tag for a table row is "tr." thclass tag for a table header is "th." tdclass tag for table data (a cell) is "td." caption class tag for the caption is "caption."
 * Tags**

Links
The **Link** statement causes all of the items in the designated column to become links. the link handler specified must be in quotation marks and it may be either a sub or a branch label.

Syntax:

code code
 * 1) handle link("Name of Column","nameOfSubHandler")

In the example above, we set the column names with this command:

code code
 * 1) handle columnnames("First, Second, Third, Fourth")

To cause the second column of items to become links with handler "SecondSub":

code code
 * 1) handle link("Second","SecondSub")

The sub handler expects one argument. This argument is the EventKey$, which is the name of the item that was clicked by the user. Here's a simple example of a handler for a column link. It does nothing but print the text for the item clicked. In a real program, you would use this information in some way, perhaps adding a name to the array associated with the table.

code sub SecondSub key$ print "You clicked: ";key$ end sub code

EventKey$
Default Global Variable, EventKey$:

EventKey$ //- The id of the object that generated the last user event//

The value of the item clicked is held in the special variable, EventKey$. Use EventKey$ with a branch label link event handler. A branch label link handler looks like this:

code [SecondBranch] print "You clicked: ";EventKey$ wait code

RowIndex
Default Global Variable, RowIndex:

RowIndex //- The numeric index of the table or database accessor link that generated the last user event//

When a table link is pressed, the index of the row containing it is in the special variable, **RowIndex**. This is useful when there are duplicate values for items in the link column and you need to manipulate data according to the row clicked.

code sub SecondSub key$ print "You clicked: ";key$ print "RowIndex is: ";RowIndex end sub code

Demos
Three demonstration programs follow. The first one attempts to show all of the table methods. The second demo does not demonstrate all of the methods, but it shows a nice use of CSSCLASS. The third program is an expanded version of the first program that adds rows to the table according to user input.

code format="vbnet" html " " dim person$(1,3) person$(0,1) = "Carl Gundel" person$(0,2) = "Janet Terra" person$(0,3) = "Stefan Pendl" person$(1,1) = "USA" person$(1,2) = "USA" person$(1,3) = "Austria" table #ta, person$ 'Add a caption above the table 'add column names - one for each of the second dimensions 'in the array, beginning with 0 'create a caption class with cssclass cssclass "caption.a", "{ Background-Color: #C0C0C0; font: caption }" 'use caption.a class for this table caption 'create a table class with cssclass cssclass "table.mytable", "{ width: 300px; border: 4px ridge #CCF ; border-spacing: 3px; row: Background-Color #C0C0C0 }" 'use table.mytable class for this table 'create a table row class with cssclass cssclass "tr.rowclass", "{ Background-Color: #EEF }" 'row class is used where thclass and tdclass are not set 'use tr.rowclass for this table 'create a cell class (table data) with cssclass cssclass "td.cellclass", "{ Background-Color: #FFDDBB }" 'use td.cellclass for this table 'create a header class with cssclass cssclass "th.header", "{ Background-Color: #FFEEDD }" 'use th.header class for this table 'if allclass is used, it supercedes other class assignments 'cssclass ".all", "{ Background-Color: #AAFFEE }" '#ta allclass("all") 'cause the first column of names to become links 'the handler name must be in quotation marks render #ta wait sub addGuy key$ print "You clicked: ";key$ person$(0,0) = "Rod Bird" person$(1,0) = "Scotland" end sub code
 * 1) ta caption("Run BASIC Community")
 * 1) ta columnnames("Name, Country")
 * 1) ta captionclass("a")
 * 1) ta cssclass("mytable")
 * 1) ta trclass("rowclass")
 * 1) ta tdclass("cellclass")
 * 1) ta thclass("header")
 * 1) ta link("Name","addGuy")

code format="vb" ' Creates a 3x3 array dim peeps$(2,2)

' Peron 1 peeps$(0,0) = "Andy" peeps$(0,1) = "M" peeps$(0,2) = "28"

' Peron 2 peeps$(1,0) = "Roxy" peeps$(1,2) = "4000" peeps$(1,1) = "F"

' Peron 3 peeps$(2,0) = "Kerovia" peeps$(2,1) = "F" peeps$(2,2) = "8"

' Creates the table handle and feeds in the array table #peeps, peeps$

' Sets every "td" tag to the same class
 * 1) peeps tdclass("tdtdtd")

' Inserts the CSS description. (This is technically not a TABLE command.) cssclass ".tdtdtd", "{ background-color: #ffcccc; margin: 10px; padding: 2px; }"

' Renders the table render #peeps code

This demo uses a branch label link event handler.

code format="vbnet" html " " dim person$(1,50) person$(0,0) = "Carl Gundel" person$(0,1) = "Janet Terra" person$(0,2) = "Stefan Pendl" person$(1,0) = "USA" person$(1,1) = "USA" person$(1,2) = "Austria" global numPerson  'current number of rows

numPerson = 2   'persons 0,1,2 filled

table #ta, person$

'Add a caption above the table
 * 1) ta caption("Run BASIC Community")

'add column names - one for each of the second dimensions 'in the array, beginning with 0
 * 1) ta columnnames("Name, Country")

'create a caption class with cssclass cssclass "caption.a", "{ Background-Color: #C0C0C0; font: caption }"

'use caption.a class for this table caption
 * 1) ta captionclass("a")

'create a table class with cssclass cssclass "table.mytable", "{ width: 300px; border: 4px ridge #CCF ; border-spacing: 3px; row: Background-Color #C0C0C0 }"

'use table.mytable class for this table
 * 1) ta cssclass("mytable")

'create a table row class with cssclass cssclass "tr.rowclass", "{ Background-Color: #EEF }"

'row class is used where thclass and tdclass are not set 'use tr.rowclass for this table
 * 1) ta trclass("rowclass")

'create a cell class (table data) with cssclass cssclass "td.cellclass", "{ Background-Color: #FFDDBB }"

'use td.cellclass for this table
 * 1) ta tdclass("cellclass")

'create a header class with cssclass cssclass "th.header", "{ Background-Color: #FFEEDD }"

'use th.header class for this table
 * 1) ta thclass("header")

'if allclass is used, it supercedes other class assignments 'cssclass ".all", "{ Background-Color: #AAFFEE }" '#ta allclass("all")

'cause the first column of names to become links 'the handler name must be in quotation marks
 * 1) ta link("Name","[addGuy]")

render #ta wait

[addGuy] input "Type name of person to add.";name$ if name$="" then wait input "Type country of residence.";country$ if country$="" then wait numPerson = numPerson + 1 'increment array index person$(0,numPerson) = name$ person$(1,numPerson) = country$ cls render #ta wait code

This code demonstrates the **Debug$** and **IsNull$** methods:

code format="vbnet" print "Before table is created, ISNULL returns:" print #ta isnull print dim person$(1,4) person$(0,1) = "Carl Gundel" person$(0,2) = "Janet Terra" person$(0,3) = "Stefan Pendl" person$(1,1) = "USA" person$(1,2) = "USA" person$(1,3) = "Austria" table #ta, person$ Print "Type of object is ";#ta Debug$ print "After table is created, ISNULL returns:" print #ta isnull print print code