INTRODUCTION

This java table enables you to display data in rows and columns in your java or web applications. The users can interactively search the data, sort the data, and filter out rows at run time.

Navigate the rows with the following keys; up, down, page up, page down, home, end, left, and right.

CONTENT
1. table parameter reference

2. table installation
  2.1 applet installation
  2.2 java installation

3. loading data rows
  3.1 loading applet parameters
  3.2 setting the table header
  3.3 loading data from a url
  3.4 multiple columns
  3.5 field separator
  3.6 export data

4. controlling columns
  4.1 setting the column width
  4.2 setting the column alignment
  4.3 collapsing columns
  4.4 setting the column type
  4.5 setting the column prefix and postfix
  4.6 setting the column decimal count
  4.7 setting the locale
  4.8 loading and displaying dates
  4.9 loading and displaying images

5. selection, searching, and sorting
  5.1 setting the selection mode
  5.2 searching for rows
  5.3 sorting rows

6. row filtering and column totals
  6.1 turning on the filter bar
  6.2 setting the filter wild card
  6.3 using progressive filtering
  6.4 setting filter tooltip labels
  6.5 displaying column totals

7. table style
  7.1 setting the background and foreground
  7.2 setting the row colors
  7.3 setting the table cell grid
  7.4 setting the default font
  7.5 setting the header font and color
  7.6 setting the row font
  7.7 setting the total row font and color
  7.8 setting the filter bar font and color
  7.9 setting the filter bar position

8. urls and drilldown
  8.1 setting the url
  8.2 setting the url target window
  8.3 calling javascript methods
  8.4 setting the url style

9. java api
  9.1 Table class
  9.2 TableData class
  9.3 TableEvent class
  9.4 TableListener interface

1. TABLE PARAMETERS
alternateRowBackground
background
cellImage
columnAlignment
columnCollapsable
columnCollapsed
columnCount
columnOff
columnStretchOn
columnType
columnWidth
data
dateFormat
dateFormatInput
dateFormatInputLocale
dataInterval
decimalCount
defaultSortOrder
exportFrameIcon
fieldSeparator
filter
filterBarBackground
filterBarFont
filterBarFontColor
filterBarOn
filterBarOnFontColor
filterBarOnBackground
filterBarPosition
filterEnabled
filterOn
filterWildCard
foreground
gridOn
gridColor
header
headerBackground
headerFont
headerFontColor
headerImage
headerOff
image
labelCacheOn
loadingDataMessage
loadingMessageOn
locale
mouseOverCellOn
postfix
prefix
progressiveFilterOn
row
rowBackground
rowCellParameters
rowFont
rowForeground
selectionBackground
selectionCellBackground
selectionForeground
selectionMode
sortedColumn
sortingOff
thousandsDelimiter
tooltipBackground
tooltipDelay
tooltipFilter
tooltipHeader
totalRowFont
totalRowFontColor
totalRowOn
updateWhileLoadingURLData
url
urlColor
urlStyle
urlTarget

data
Instead of loading the data from the applet parameters, you can specify a url to load the data from. The data in the url has to be in the format
parameter1=value1
parameter2=value2
parameter3=value3
The parameters in the applet tag will override any parameters with the same name loaded from the url.

You can also press F5 to update the table data at runtime.

<param name=data value=customers.asp>
Hashtable parameters = new Hashtable();
table.loadURLParameters("customers.asp", parameters);
table.setParameters(parameters);
table.setParameter("data", "customers.asp");
table.updateData();
dataInterval
You can make the table applet load the data from the currently specified URL at a specific interval. The interval is specified in seconds. If reset is specified in the data interval, the table data is cleared before read again. <param name=dataInterval value=10>
<param name=dataInterval value=10,reset>
loadingMessageOn
If this is turned on, the table will display a message (loading data...) and a progress indicator while initializing the applet and loading the data. <param name=loadingMessageOn value="true">
loadingDataMessage
The default message displayed when loading the data is 'loading data...'. Use this parameter to change the message displayed. The parameter has to be set in the applet tag to work. <param name=loadingDataMessage value="please wait...">
updateWhileLoadingURLData
This will update the table display at the same time as loading the data from a URL. <param name=updateWhileLoadingURLData value="none">
rowCellParameters
If you have thousands of rows, the applet's initialization time will be longer due to all the parameter_row_cell parameter names it needs to construct and check. Use this parameter to avoid this processing, or to limit it to the parameters you now will be in the applet tag. <param name=rowCellParameters value="none">
<param name=rowCellParameters value="rowFont_0,rowFont_5,rowFont_9">
labelCacheOn
Turns on the label cache for textual columns. This will save memory space if you have many repeating labels in your cells. The label cache is static and is shared across all instances of the table component within the same java VM. <param name=labelCacheOn value="true">
setLabelCacheOn(true);
columnCount
Sets the number of columns in the table. The default number of columns is 1. <param name=columnCount value=3>
setColumnCount(3);
row_N
Adds a row to the table. Rows are added starting from row_0, row_1 and upwards. If the row_N parameters are set throught the applet tag, the row indexes must be sequential starting at 0. <param name=row_0 value="this is row 0">
<param name=row_1 value="this is row 1">
<param name=row_0 value="this is, row 0, multiple columns">
setRow(0, new String[] {"this is row 0");
setRow(1, new String[] {"this is row 1");
setRow(0, new String[] {"this is","row 0","multiple columns");
header
Sets the header labels of the table. There is one label per column field. If you want a comma in your header label, use the fieldSeparator parameter. <param name=header value="this is the header">
<param name=header value="this is, the header">
setHeader(0, "this is the header");
setHeader(new String[] {"this is", "the header"});
setHeader(0, "this is");
setHeader(1, "the header");
headerFont
Sets the font used for the header labels. <param name=headerFont value="Arial,plain,12">
<param name=headerFont value="Arial,bold,14">
<param name=headerFont value="Courier,italic,11">
<param name=headerFont value="Serif,bolditalic,16">
setFont("headerFont", new Font("Arial", Font.PLAIN, 12));
headerFontColor
Sets the color used for the header labels. <param name=headerFontColor value="blue">
<param name=headerFontColor value="#333333">
setFontColor("headerFontColor", Color.blue);
setFontColor("headerFontColor", new Color(0x333333));
headerBackground
Sets the background color of each header field. <param name=headerBackground value=",orange, ,pink">
setHeaderBackground(1, Color.orange);
setHeaderBackground(3, Color.pink);
headerOff
Turns off the header. The header is turned on by default. <param name=headerOff value="true">
setHeaderOn(false);
tooltipHeader
Adds a tooltip label for the header fields. There is one label per header field where tooltipHeader_N is used for each field. Use tooltipDelay, tooltipDelayHeader, and tooltipBackground to configure the tooltip delay time and background color. <param name=tooltipHeader_0 value="tooltip one">
<param name=tooltipHeader_1 value="tooltip two">

setTooltip("tooltipHeader_0", "tooltip one");
setTooltip("tooltipHeader_1", "tooltip two");
tooltipDelay
Sets the time it takes before a tooltip label is displayed. The time is specified in milliseconds, and the default is 1500 (1.5 seconds). <param name=tooltipDelay value="500">
<param name=tooltipDelayHeader value="1000">
<param name=tooltipDelayFilter value="100">
setTooltipDelay("tooltipDelay", 500);
setTooltipDelay("tooltipDelayHeader", 1000);
setTooltipDelay("tooltipDelayFilter", 100);
tooltipBackground
Sets the background color of the tooltip labels. <param name=tooltipBackground value="yellow">
<param name=tooltipBackground value="#d6d87f">
setTooltipBackground(Color.yellow);
setTooltipBackground(new Color(0xd6d87f));
fieldSeparator
Uses another field separator than the default comma. Use this if you need commas in the header, filter, or row_N parameters. <param name=fieldSeparator value=":">
<param name=row_0 value="100,00 : 200,00 : 300,00 : 400,00">
columnWidth
Sets the width of each column. Use a comma separated list of integer numbers to set the width of each column. The default width is 100. <param name=columnWidth value="100,100,50,200">
setColumnWidth(0, 100);
setColumnWidth(1, 100);
setColumnWidth(2, 50);
setColumnWidth(3, 200);
columnStretchOn
If this is turned on, the columns will stretch out to occupy the entire table width. The width values set by columnWidth will be relative to each other and the total table width. <param name=columnWidth value="25,15,20,40">
<param name=columnStretchOn value="true">
setColumnStretchOn(true);
columnAlignment
Sets the alignment of each column to left, center, or right. Use a comma separated list of left, center, or right to set the alignment for each column. The default alignment is right. <param name=columnAlignment value="left, left, center, right">
setColumnAlignment(0, Table.ALIGN_LEFT);
setColumnAlignment(1, Table.ALIGN_LEFT);
setColumnAlignment(2, ALIGN_CENTER);
setColumnAlignment(3, ALIGN_RIGHT);
columnType
The table supports text, numerical, currency, date, and IP address column types. The text type sorts the data (if sorted by the user) in lexical order, the numerical and currency types sorts the data in numerical order, the date column sorts the rows by time, and the IP column type sorts the IP addresses by "numerical" value. Numerical and date type will display the number with the current locale and the currency type will add the correct currency symbol to the number. <param name=columnType value="text,currency,number,date,ip">
setColumnType(0, Table.COLUMN_TEXT);
setColumnType(1, Table.COLUMN_CURRENCY);
setColumnType(2, Table.COLUMN_NUMBER);
setColumnType(3, Table.COLUMN_DATE);
setColumnType(4, Table.COLUMN_IP);
columnCollapsable
Each individual column can be collapsed by the user at runtime by clicking a collapse button in the header field for the column. Turn on collapsable columns using this parameter. <param name=columnCollapsable value="1,3">
setColumnCollapsable(1, true);
setColumnCollapsable(3, true);
columnCollapsed
This parameter controls which collumns are collapsed when the applet initially loads. Collapsed collumns can also be set during runtime. <param name=columnCollapsed value="1,3">
setColumnCollapsed(1, true);
setColumnCollapsed(3, false);
columnOff
This parameter enables you to turn on or off individual columns. <param name=columnOff value="1,3">
setColumnOn(1, false);
setColumnOn(3, false);
mouseOverCellOn
You can display hidden cells or hidden parts of a cell by turning this parameter on and moving the mouse over the cell you want to display in full. <param name=mouseOverCellOn value="true">
setMouseOverCellOn(true);
prefix_N
Adds a prefix to the labels in column N. <param name=prefix_0 value="$">
<param name=prefix_1 value="">
setPrefix(0, "$");
setPrefix(1, "");
postfix_N
Adds a postfix to the labels in column N. <param name=postfix_0 value="MB">
<param name=postfix_1 value="KB">
setPostfix(0, "MB");
setPostfix(1, "KB");
decimalCount_N
Sets the number of decimals to be displayed for column N. This works only for numerical and currency type columns. <param name=decimalCount_0 value="2">
<param name=decimalCount_2 value="3">
setDecimalCount(0, 2);
setDecimalCount(2, 3);
locale
Sets the locale of the table. The locale affects the display of numbers (thousend delimiters and decimal separators) as well as the currency symbol if the column type is set to currency and the date columns. The locale is set to the default set in the clients PC. The locale parameter is divided in two, a language code, and a country code, separated by a comma. If you want the sign to be displayed as the currentcy simbol you should use f.eks. value="fr, eu" for applets and setLocalE(new Locale("FR", "FR", "EURO")) for applications. <param name=locale value="en, gb">
<param name=locale value="en, us">
<param name=locale value="fr, eu">
setLocale(new Locale("EN", "GB");
setLocale(new Locale("EN", "US");
setLocale(new Locale("FR", "FR", "EURO");
Language codes
Country codes
thousandsDelimiter
Sets the character to be used for the thousands delimiter. A value of true uses the default for the current locale, a value of false turns off thousands grouping. <param name=thousandsDelimiter value=".">
<param name=thousandsDelimiter value="false">
setThousandsDelimiter(".");
setThousandsDelimiter("false");
dateFormat
The dateFormat parameter controls the format of the displayed dates. It also sets the default format in which the dates must be parsed (dateFormatInput overrides this). Use dateFormat_N to specify the pattern for a specific column. Check here for the date pattern documentation. <param name=dateFormat value="dd.MM.yyyy HH:mm:ss">
<param name=dateFormat_0 value="dd.MMM.yy HH:mm">
<param name=dateFormat_1 value="dd MMMM yyyy">
// set default formatter
SimpleDateFormat formatter = new SimpleDateFormat();
formatter.applyPattern("dd.MM.yyyy HH:mm:ss");
table.setDateFormatter(-1, formatter);

// set formatter for column 1
formatter = new SimpleDateFormat();
formatter.applyPattern("dd.MMMM.yyyy HH:mm");
table.setDateFormatter(1, formatter);
dateFormatInput
The dateFormatInput parameter controls the pattern of how dates are read into the table. Use dateFormatInput_N to specify the pattern for a specific column. Check here for the date pattern documentation. <param name=dateFormatInput value="hh.MM.yyyy HH:mm:ss">
<param name=dateFormatInput_0 value="HH:mm:ss">
<param name=dateFormatInput_1 value="dd.MMM.yyyy">
for java use Date() objects in the rows.
dateFormatInputLocale
Sets the locale of the input dates (such as month and day names) used when reading the dates using the pattern set with the dateFormatInput_N parameter. The locale is set to the default set in the clients PC. <param name=dateFormatInputLocale value="en">
<param name=dateFormatInputLocale value="fr">
Language codes
headerImage_N
Adds an image to the header field where N is the column index (0-based). <param name=headerImage_0 value="images/folder.gif">
<param name=headerImage_3 value="images/computer.gif">
// load images...
table.setHeaderImage(0, folder_image);
table.setHeaderImage(3, computer_image);
image_N
Adds an image to all the fields in a column. The image is displayed at the left edge of the table cell. <param name=image_0 value="images/folder.gif">
<param name=image_3 value="images/computer.gif">
// load images...
table.setImage(0, -1, folder_image);
table.setImage(3, -1, computer_image);
cellImage_N_M
Adds an image to a specified field in a row. The first index (N) is the row, the second index (M) is the column. <param name=cellImage_0_0 value="images/folder.gif">
<param name=cellImage_0_3 value="images/computer.gif">
// load images...
table.setImage(0, 0, folder_image);
table.setImage(0, 3, computer_image);
selectionMode
Sets the row selection mode. The different selection modes are no selection, single row selection, and multiple row selection. Default is no selection. <param name=selectionMode value="none">
<param name=selectionMode value="single">
<param name=selectionMode value="multiple">
setSelectionMode(SELECT_NONE);
setSelectionMode(SELECT_SINGLE);
setSelectionMode(SELECT_MULTIPLE);
selectionBackground
Sets the background color of selected rows. <param name=selectionBackground value="#7f0000">
<param name=selectionBackground value="default">
setSelectionBackground(new Color(0x7f0000));
setSelectionBackground(null);
selectionForeground
Sets the font color of selected rows. <param name=selectionForeground value="yellow">
<param name=selectionForeground value="default">
setSelectionForeground(Color.yellow);
setSelectionForeground(null);
selectionCellBackground
Sets the background color of selected cells. <param name=selectionCellBackground value="#7f7f00">
<param name=selectionCellBackground value="default">
setSelectionCellBackground(new Color(0x7f0000));
setSelectionCellBackground(null);
defaultSortOrder
Sets the default sort order for each column (ascending by default). <param name=defaultSortOrder value="asc,asc,desc">
setDefaultSortOrder(0, Table.SORT_ASCENDING);
setDefaultSortOrder(1, Table.SORT_ASCENDING);
setDefaultSortOrder(2, Table.SORT_DESCENDING);
sortedColumn
Sets which column should initially be sorted when the applet is loaded. <param name=sortedColumn value="2">
sortingOff
Turns off sorting entirely or for individual columns. <param name=sortingOff value="true">
<param name=sortingOff value="0,2,3">
setSortingOn(0, false);
setSortingOn(2, false);
setSortingOn(3, false);
filterBarOn
Turns on the filter bar to allow interactive row searching and filtering. <param name=filterBarOn value="true">
setFilterBarOn(true);
filter
Sets the initial filter when the applet loads. Use a comma to separate each field in the filter. Use fieldSeparator if you need comma in the filter labels. <param name=filter value="field1, ,field3">
filterOn
Activates the filter fields when the applet initially loads. Each value is the filter index (0-based). <param name=filterOn value="1,2">
filterEnabled
Enabled or disables the filter fields for user input and interaction. Each value is the filter index (0-based). All filter fields are enabled by default. <param name=filterEnabled value="1,2">
setFilterEnabled(1, true);
setFilterEnabled(2, true);
filterBarPosition
Sets the position of the filter bar. The default position is at the bottom of the table, but it can also be placed at the top, below the table header. <param name=filterBarPosition value="bottom">
<param name=filterBarPosition value="top">
setFilterBarPosition(Table.TOP);
setFilterBarPosition(Table.BOTTOM);
filterWildCard
Sets the filter wild card. The default wild card is asterisk (*). Set the wild card to nothing "" to have the wild card effect without using the wildcard. <param name=filterWildCard value="%">
<param name=filterWildCard value="">
setFilterWildCard("%");
setFilterWildCard(null);
progressiveFilterOn
If this is turned on, the table will filter out rows as the user types the text in the filter bar. Use this in combination with an empty filterWildCard. <param name=filterWildCard value="">
<param name=progressiveFilterOn value="true">
setProgressiveFilterOn(true);
tooltipFilter
Adds a tooltip to the filter fields. Use \n for multiline labels. Use tooltipDelay or tooltipDelayFilter to configure the delay before the tooltip appears. Use tooltipBackground to set the tooltip background color. <param name=tooltipFilter value="search or\nfilter rows">
<param name=tooltipFilter_0 value="filter one">
<param name=tooltipFilter_1 value="filter two">
setTooltip("tooltipFilter", "search or\nfilter rows");
setTooltip("tooltipFilter_0", "filter one");
setTooltip("tooltipFilter_1", "filter two");
filterBarFont
Sets the font used for the labels in the filter bar. <param name=filterBarFont value="Arial,plain,12">
<param name=filterBarFont value="Arial,bold,14">
<param name=filterBarFont value="Courier,italic,11">
<param name=filterBarFont value="Serif,bolditalic,16">
setFont("filterBarFont", new Font("Arial", Font.PLAIN, 12));
filterBarFontColor
Sets the color used for the labels in the filter bar. <param name=filterBarFontColor value="blue">
<param name=filterBarFontColor value="#333333">
setFontColor("filterBarFontColor", Color.blue);
setFontColor("filterBarFontColor", new Color(0x333333));
filterBarOnFontColor
Sets the color used for the labels in the filter bar when the filter field is activated. <param name=filterBarOnFontColor value="white">
<param name=filterBarOnFontColor value="#333333">
setFontColor("filterBarOnFontColor", Color.white);
setFontColor("filterBarOnFontColor", new Color(0x333333));
filterBarBackground
Sets the color used for the filter field background. <param name=filterBarBackground value="yellow">
<param name=filterBarBackground value="#cceecc">
setFilterBarBackground(Color.yellow);
setFilterBarBackground(new Color(0xcceecc));
filterBarOnBackground
Sets the color used for the filter field background when the filter field is activated. <param name=filterBarOnBackground value="black">
<param name=filterBarOnBackground value="#333333">
setFilterBarOnBackground(Color.black);
setFilterBarOnBackground(new Color(0x333333));
totalRowOn
Displays totals for all the columns or for individual columns. The sum of the rows is displayed for numerical columns, the total number of rows is shown for text columns. <param name=totalRowOn value="true">
<param name=totalRowOn value="0,2,3">
setTotalRowOn(-1, true); // all rows
setTotalRowOn(0, true);
setTotalRowOn(2, true);
setTotalRowOn(3, true);
totalRowFont
Sets the font used for the labels in the total row. <param name=totalRowFont value="Arial,plain,12">
<param name=totalRowFont value="Arial,bold,14">
<param name=totalRowFont value="Courier,italic,11">
<param name=totalRowFont value="Serif,bolditalic,16">
setFont("totalRowFont", new Font("Arial", Font.PLAIN, 12));
totalRowFontColor
Sets the color used for the labels in the total row. <param name=totalRowFontColor value="blue">
<param name=totalRowFontColor value="#333333">
setFontColor("totalRowFontColor", Color.blue);
setFontColor("totalRowFontColor", new Color(0x333333));
background
Sets the color of the table component background (header, border, and filter bar). The colors are black, blue, cyan, darkgray, gray, green, lightgray, magenta, orange, pink, red, white, or yellow. You can also set the color using the hexadecimal color code. <param name=background value="red">
<param name=background value="#ff99c0">
setBackground(Color.red);
setBackground(new Color(0xff99c0));
foreground
Sets the color of the header and filter bar labels. <param name=foreground value="yellow">
<param name=foreground value="#ff99c0">
setForeground(Color.yellow);
setForeground(new Color(0xff99c0));
rowBackground
Sets the background color of the table rows. If an index is specified in the parameter, the background for that row is set. <param name=rowBackground value="yellow">
<param name=rowBackground_0 value="gray">
<param name=rowBackground value="#ff99c0">
setRowBackground(-1, yellow); // all rows
setRowBackground(-1, new Color(0xff99c0)); // all rows
setRowBackground(1, Color.gray); // row 1
rowForeground
Sets the label color of the table rows. If an index is specified in the parameter, the label color for that row is set. <param name=rowForeground value="blue">
<param name=rowForeground_0 value="red">
<param name=rowForeground value="#ff99c0">
setRowForeground(-1, red); // all rows
setRowForeground(-1, new Color(0xff99c0)); // all rows
setRowForeground(1, Color.blue); // row 1
alternateRowBackground
The alternateRowBackground enables you to set alternating colors for the rows and the row backgrounds will not move when the row order changes. The first value is the color (name or hex code), the second value is the count (1 and 1, 2 and 2 and so on). The third value is the index where the alternating color should start. <param name=alternateRowBackground value="gray">
<param name=alternateRowBackground value="gray,2">
<param name=alternateRowBackground value="gray,3,5">
setAlternateRowBackground(Color.gray, 2, -1);
setAlternateRowBackground(Color.gray, 3, 5);
rowFont
Sets the font used for the rows. You can also specify a font for individual rows using the row index. <param name=rowFont value="Arial,plain,12">
<param name=rowFont value="Arial,bold,14">
<param name=rowFont value="Courier,italic,11">
<param name=rowFont value="Serif,bolditalic,16">
<param name=rowFont_3 value="Arial,plain,8">
setFont("rowFont", new Font("Arial", Font.PLAIN, 12));
setRowFont(3, new Font("Arial", Font.PLAIN, 12));
gridOn
Turns on the grid. The grid will paint a square around each table cell. <param name=gridOn value="true">
setGridOn(true);
gridColor
Sets the color of the grid. The default color is the background color. <param name=gridColor value="black">
<param name=gridColor value="#c0c0c0">
setGridColor(Color.black);
setGridColor(new COlor(0xc0c0c0));
url_N_M
Sets a URL or javascript method call for a table cell, where N is the row index, and M is the cell index. The cell index is optional. If url_N is used, the url is active for the entire row. <param name=url_0 value="http://objectplanet.com/comp/Table">
<param name=url_2_1 value="index.html">
<param name=url_2_1 value="javascript:helloWorld();">
urltarget_N_M
Sets the name of the window where the url should be opened.
urltarget - sets the default target.
urltarget_N - sets the target for the specified row.
urltarget_N_M - sets the target for the specified cell.
_self: Open new page in same window or frame.
_parent: Open in the parent window.
_top: Open in the top-level window.
_blank:Open in a new blank window.
name:Open in the frame or window with the specified name.
<param name=urltarget value="myframe">
<param name=urltarget_2 value="_parent">
<param name=urltarget_3_0 value="_blank">
urlColor
Sets the color of the url links. <param name=urlColor value="red">
urlStyle
Sets the style of the url links. Different styles are line and noline. <param name=urlStyle value="line">
<param name=urlStyle value="noline">
exportFrameIcon
Sets the icon used in the frame border for a data export window. <param name=exportFrameIcon value="icon_network.gif"
setExportFrameIcon(image);


2. INSTALLATION

Unzip the table distribution file onto a directory on your system. The files will be unzipped into a directory named \Table.

2.1 applet installation

Applets are small java programs embedded and executed in web pages. An applet tag tells the web browser to download a set of java classes from the web server and execute the applet. To run the java table applet, do the following:

  1. copy the com.objectplanet.gui.Table.jar file found in the Table distribution to your web server, preferrably to the directory where your applet page is.

  2. set your applet tag to

    <applet code="com.objectplanet.gui.Table"
     archive="com.objectplanet.gui.Table.jar" width=300 height=200>
    </applet>

Then the client browser can access your applet and the com.objectplanet.gui.Table.jar file is loaded from the web server to the client and started automatically.

All the table parameters are defined using the applet param tag

<param name="parameter" value="parameter value">

See the parameter list for details.

If you can not or do not want to have the com.objectplanet.gui.Table.jar file in the same directory as your applet files you can put them in another directory on your web server (needs to be accessible to the clients) and use a relative (or absolute) path in your archive tag.

 archive="../../classes/com.objectplanet.gui.Table.jar"
 archive="/Table/com.objectplanet.gui.Table.jar"


2.2 java installation

The table consist of a TableData, Table, TableEvent, and TableListener class.

TableData - contains the table data, rows of String[] data.
Table - displays the table data.
TableEvent - event sent from the table when rows are selected.
TableListener - receives the table events.

When you compile and run a java application the compiler or java runtime needs to know where the Table's java classes are.

If you are using the Java Developers Kit (JDK) version 1.1 add the com.objectplanet.gui.Table.jar file to your CLASSPATH.

set CLASSPATH=%CLASSPATH%;c:\Table\com.objectplanet.gui.Table.jar

If you are using JDK 1.2 or newer place the com.objectplanet.gui.Table.jar file in the jre\lib\ext directory of the JDK directory.

If you are using Microsoft Visual J++ or any other development environment, import the com.objectplanet.gui.Table.jar file into the environment so the compiler and runtime will find it.

Then you need to import the table package in your java application.

// file: TableTest.java
import com.objectplanet.gui.*;
import java.awt.*;
public class TableTest {

   public static void main(String[] argv) {
      Table table = new Table(3);
      table.setHeader(new String[] {"this","is the","header"});
      table.setRow(0, new String[] {"this","is","row 0"});
      table.setRow(1, new String[] {"this","is","row 1"});
      table.setRow(2, new String[] {"this","is","row 1"});

      Frame f = new Frame();
      f.add("Center", table);
      f.setSize(200,200);
      f.show();
   }
}

Now compile the java program and run it (JDK).

javac TableTest.java
java TableTest

All the table's parameters are accessed using setter and getter methods pairs in the following general format

table.setParameterName(parameterValue);
parameterValue = table.getParameterName();

See the parameter list for details.
See the java API for method details.


3. LOADING DATA ROWS

The table's data can be added in two ways, either through the applet parameters or loading it from a specified url that deliveres the data. In java the setRow() method is used to add the data.

3.1 loading data through the applet parameters

If you use the applet parameters for loading data, the data is added row by row, using the row_N parameter where the N is the row index and the first row has index 0.

<applet code=com.objectplanet.gui.Table
 archive=com.objectplanet.gui.Table.jar
 width=200 height=100>
<param name=row_0 value="this is row 0">
<param name=row_1 value="this is row 1">
<param name=row_2 value="this is row 2">
<param name=row_3 value="this is row 3">
</applet>

In java you use the setRow() method to add or update rows. An index of -1 adds a new row, a non negative index updates or sets the specified row.

Table table = new Table();
table.setRow(-1, new String[] {"this is row 0"}); // add new row
table.setRow(-1, new String[] {"this is row 1"});
table.setRow(-1, new String[] {"this is row 2"});
table.setRow(-1, new String[] {"this is row 3"});

3.2 setting the table header

Use the header parameter to set the table header label or labels.

<applet code=com.objectplanet.gui.Table
 archive=com.objectplanet.gui.Table.jar
 width=200 height=100>
<param name=header value="this is the header">
<param name=row_0 value="this is row 0">
<param name=row_1 value="this is row 1">
</applet>

In java you use the setHeader() method to set the header labels.

Table table = new Table();
table.setHeader(new String[] {"this is the header"});

You can have multiline headers by using \n in the label.

<applet code=com.objectplanet.gui.Table
 archive=com.objectplanet.gui.Table.jar
 width=200 height=100>
<param name=header value="this is a\nmultiline header">
<param name=row_0 value="this is row 0">
<param name=row_1 value="this is row 1">
</applet>

table.setHeader(new String[] {"this is a\nmultiline header"});

You can add a tooltip for the header by using the tooltipHeader_0 parameter. The delay before the tooltip is displayed can be configured with the tooltipDelay or tooltipDelayHeader parameter. The tooltip background color is controlled with the tooltipBackground parameter.

<applet code=com.objectplanet.gui.Table
 archive=com.objectplanet.gui.Table.jar
 width=200 height=100>
<param name=header value="move your mouse here">
<param name=tooltipHeader_0 value="click to sort">
<param name=tooltipDelay value="250">
<param name=tooltipBackground value="orange">
</applet>

3.3 loading data from a url

If you want to load the applet data and parameters from a url, you can specify the url in the data parameter in your applet tag as below

<applet code=com.objectplanet.gui.Table
 archive=com.objectplanet.gui.Table.jar
 width=200 height=100>
<param name=data value="parameters.data">
</applet>

Only an applet can load the data from a URL. The parameters.data file looks like this:

header=this is the header
row_0=this is row 0
row_1=this is row 1
row_2=this is row 2
row_3=this is row 3

The data url can point to a script that produces the data as long as the format returned is as in the example above.

The table can refresh the data from the URL periodically by using the dataInterval parameter. The applet below will read the data from the specified URL every 20 seconds.

<applet code=com.objectplanet.gui.Table
 archive=com.objectplanet.gui.Table.jar
 width=200 height=100>
<param name=data value="parameters.data">
<param name=dataInterval value="20">
</applet>

This applet will remove all rows before reading the new data.

<applet code=com.objectplanet.gui.Table
 archive=com.objectplanet.gui.Table.jar
 width=200 height=100>
<param name=data value="parameters.data">
<param name=dataInterval value="20,reset">
</applet>

For table applets with lots of data that takes some time to load, you can display a message and a progress indicator while it is loading. This is done with the loadingMessageOn parameter. You can also configure the message displayed with the loadingDataMessage parameter.

<param name=loadingMessageOn value="true">
<param name=loadingDataMessage value="please wait...">

You can also update the table at runtime, by calling the updateData() method or hitting the F5 key. The updateData() method loads the data from the URL specified in the data parameter. You can update the data parameter before calling updateData().

table.setParameter("data", "new_url.asp");
table.updateData();

You can also call the loadURLParameters() method directly.

Hashtable parameters = new Hashtable();
table.loadURLParameters("new_url.asp", parameters);
table.setParameters(parameters);

3.4 multiple columns

The table can consist of multiple columns. Use the columnCount parameter to control the number of columns. Use comma (,) as a field separator when adding rows and setting the header for a multicolumn table.

<applet code=com.objectplanet.gui.Table
 archive=com.objectplanet.gui.Table.jar
 width=450 height=100>
<param name=columnCount value=4>
<param name=header value="this, is, the, header">
<param name=row_0 value="this, is, row, 0">
<param name=row_1 value="this, is, row, 1">
<param name=row_2 value="this, is, row, 2">
<param name=row_3 value="this, is, row, 3">
</applet>

In java the number of columns is set in the Table constructor. When adding a row with multiple fields you use a string array with one string per field.

Table table = new Table(4); // 4 columns
table.setHeader(new String[] {"this","is","the","header"});
table.setRow(-1, new String[] {"this", "is", "row", "0"}); // add new row
table.setRow(-1, new String[] {"this", "is", "row", "1"});
table.setRow(-1, new String[] {"this", "is", "row", "2"});
table.setRow(-1, new String[] {"this", "is", "row", "3"});

You can also set individual header fields.

table.setHeader(0, "this");
table.setHeader(1, "is");
table.setHeader(2, "the");
table.setHeader(3, "header");

Use the tooltipHeader_N parameter to set a tooltip label for each header.

<applet code=com.objectplanet.gui.Table
 archive=com.objectplanet.gui.Table.jar
 width=450 height=100>
<param name=tooltipHeader_0 value="tooltip one">
<param name=tooltipHeader_1 value="tooltip two">
<param name=tooltipHeader_2 value="tooltip three">
<param name=tooltipHeader_3 value="tooltip four">
</applet>

In java use the setTooltip() method.

table.setTooltip("tooltipHeader_0", "tooltip one");
table.setTooltip("tooltipHeader_1", "tooltip two");
table.setTooltip("tooltipHeader_2", "tooltip three");
table.setTooltip("tooltipHeader_3", "tooltip four");

You can set the background color for each header field.

<applet code=com.objectplanet.gui.Table
 archive=com.objectplanet.gui.Table.jar
 width=450 height=100>
<param name=columnCount value=4>
<param name=header value="this, is, the, header">
<param name=headerBackground value=",orange, ,pink">
</applet>

3.5 field separator

If your data contain a comma (,) you can control the field separator using the fieldSeparator parameter. The field separator is only needed in applets and affects the header, filter, and row_N parameters.

<applet code=com.objectplanet.gui.Table
 archive=com.objectplanet.gui.Table.jar
 width=450 height=100>
<param name=columnCount value=4>
<param name=fieldSeparator value="|">
<param name=header value="column 0|column 1|column 2|column 3">
<param name=row_0 value="row 0,col 0|row 0,col 1|row 0,col 2|row 0,col 3">
<param name=row_1 value="row 1,col 0|row 1,col 1|row 1,col 2|row 1,col 3">
<param name=row_2 value="row 2,col 0|row 2,col 1|row 2,col 2|row 2,col 3">
<param name=row_3 value="row 3,col 0|row 3,col 1|row 3,col 2|row 3,col 3">
</applet>

3.6 export data

You can get the data in CSV format calling the getExportData(separator) method. You can open a window with the export data using the exportData(width, height, separator) method. You can then use copy & paste to export the data.

See the DataExportTable example that adds a popup menu for exporting the data.

You can control the icon used for the export windows using the exportFrameIcon parameter or the setExportFrameIcon(Image) method.


4. CONTROLLING COLUMNS

You can control the width and data type of each column. You can also add prefix and postfix labels for each column and control the number of decimals to be displayed for numerical columns.

4.1 setting the column width

You can control the width of each column using the columnWidth parameter. This parameter takes a comma separated list of positive integer values.

<applet code=com.objectplanet.gui.Table
 archive=com.objectplanet.gui.Table.jar
width=210 height=100>
<param name=columnCount value=4>
<param name=columnWidth value="50,30,40,30">
<param name=header value="50,30,40,30">
<param name=row_0 value="this, is, row, 0">
<param name=row_1 value="this, is, row, 1">
<param name=row_2 value="this, is, row, 2">
<param name=row_3 value="this, is, row, 3">
</applet>

In java you use the setColumnWidth() method to control the column width.

Table table = new Table(4);
table.setColumnWidth(0, 50); // set column 0 to 50 pixels
table.setColumnWidth(1, 30); // set column 1 to 30 pixels
table.setColumnWidth(2, 40); // set column 2 to 40 pixels
table.setColumnWidth(3, 30); // set column 3 to 30 pixels

You can also set the column width relative to the table width and the other columns. If you turn on the columnStretchOn parameter, the columns will always stretch to the full width of the table even if the user adjusts the width at runtime.

<applet code=com.objectplanet.gui.Table
 archive=com.objectplanet.gui.Table.jar
 width=250 height=100>
<param name=columnCount value=4>
<param name=columnWidth value="30,20,20,30">
<param name=columnStretchOn value=true>
<param name=header value="30,20,20,30">
<param name=row_0 value="this, is, row, 0">
<param name=row_1 value="this, is, row, 1">
<param name=row_2 value="this, is, row, 2">
<param name=row_3 value="this, is, row, 3">
</applet>


Try adjusting the width of the columns in the above applet.

In java you use the setColumnStretchOn() method.

Table table = new Table(4);
table.setColumnWidth(0, 50);
table.setColumnWidth(1, 30);
table.setColumnWidth(2, 40);
table.setColumnWidth(3, 30);
table.setColumnStretchOn(true);

You can double click on a column edge to auto-adjust the column to the width of the widest label.

4.2 setting the column alignment

You can set the alignment of the labels in the columns by using the columnAlignment parameter. This parameter takes a comma separated list of the values "left", "center", or "right". The default alignment is left.

<applet code=com.objectplanet.gui.Table
 archive=com.objectplanet.gui.Table.jar
 width=250 height=100>
<param name=columnCount value=3>
<param name=columnAlignment value="left, center, right">
<param name="columnwidth" value="70, 70, 70">
<param name=header value="left, center, right">
<param name=row_0 value="left, center, right">
<param name=row_1 value="left 1, center 1, right 1">
<param name=row_2 value="left 22, center 22, right 22">
<param name=row_3 value="left 333, center 333, right 333">
</applet>

In java you use the setColumnAlignment() method.

Table table = new Table(4);
table.setColumnAlignment(0, Table.ALIGN_LEFT);
table.setColumnAlignment(1, Table.ALIGN_CENTER);
table.setColumnAlignment(2, Table.ALIGN_RIGHT);

4.3 collapsing columns

In addition to being able to adjust the column width at runtime, the user can collapse entire columns by clicking a collapse-button in each headerfield for the respective columns. The column that can be collapsed is configured using the columnCollapsable parameter.

<applet code=com.objectplanet.gui.Table
 archive=com.objectplanet.gui.Table.jar
 width=250 height=100>
<param name=columnCount value=3>
<param name=header value="yes, no, yes">
<param name=columnwidth value="70, 70, 70">
<param name=row_0 value="one, two, three">
<param name=columnCollapsable value="0,2">
</applet>

You can also configure columns to be collapsed when the applet initially loads using the columnCollapsed parameter.

<applet code=com.objectplanet.gui.Table
 archive=com.objectplanet.gui.Table.jar
 width=250 height=100>
<param name=columnCount value=3>
<param name=header value="yes, no, yes">
<param name=columnwidth value="70, 70, 70">
<param name=row_0 value="one, two, three">
<param name=columnCollapsable value="0,1,2">
<param name=columnCollapsed value="1">
</applet>

In java you use the setColumnCollapsable() and setColumnCollapsed() methods.

Table table = new Table(3);
table.setColumnCollapsable(0, true);
table.setColumnCollapsable(2, true);
table.setColumnCollapsed(2, true);

4.4 setting the column type

The columns can either contain textual, numerical, ip addresses, or date and time data. If you want to sort numerical rows correctly, you must set the column type to numerical. To display currency data, the column type should be set to currency.

<applet code=com.objectplanet.gui.Table
 archive=com.objectplanet.gui.Table.jar
 width=450 height=100>
<param name=columnCount value=4>
<param name=columnType value="ip, text, number, currency">
<param name=header value="ip, text, number, currency">
<param name=row_0 value="68.0.0.1,7654,7654,7654">
<param name=row_1 value="68.0.0.2,54,54,54">
<param name=row_2 value="192.168.1.1,446,446,446">
<param name=row_3 value="192.168.1.2,4678,4678,4678">
</applet>


Sort the columns and see the difference.

In java you use the setColumnType method.

Table table = new Table(4);
table.setColumnType(0, Table.COLUMN_IP);
table.setColumnType(1, Table.COLUMN_TEXT);
table.setColumnType(2, Table.COLUMN_NUMBER);
table.setColumnType(3, Table.COLUMN_CURRENCY);

4.5 setting the column prefix and postfix

You can add a prefix and postfix label to the labels in each column. To add a prefix label to a column, use the prefix_N parameter, where N is the column number (0-based). To add a postfix label to a column, use the postfix_N parameter, where N is the column number.

<applet code=com.objectplanet.gui.Table
 archive=com.objectplanet.gui.Table.jar
 width=210 height=100>
<param name=columnCount value=2>
<param name=columnType value="number, number">
<param name=header value="prefix_0, postfix_1">
<param name=row_0 value="8237,6948">
<param name=row_1 value="6832,7456">
<param name=row_2 value="1323,8745">
<param name=row_3 value="9879,8545">
<param name=prefix_0 value="$">
<param name=postfix_1 value="MB">
</applet>

In java you use the setPrefix() and setPostfix() methods.

Table table = new Table(2);
table.setColumnPrefix(0, "$");
table.setColumnPostfix(1, "MB");

4.6 setting the column decimal count

You can control the number of decimals displayed for floating point values in each column by setting the decimalCount_N parameter where N is the column number and 0 is the first column.

<applet code=com.objectplanet.gui.Table
 archive=com.objectplanet.gui.Table.jar
 width=210 height=100>
<param name=columnCount value=2>
<param name=columnType value="number, number">
<param name=header value="2 decimals, 4 decimals">
<param name=row_0 value="8.6948,6.27687">
<param name=row_1 value="6.7456,2.63324">
<param name=row_2 value="1.8745,3.2325">
<param name=row_3 value="98545,3.5425">
<param name=decimalCount_0 value="2">
<param name=decimalCount_1 value="4">
</applet>

In java you use the setDecimalCount() method.

Table table = new Table(2);
table.setDecimalCount(0, 4);
table.setDecimalCount(1, 4);

4.7 setting locale and internationalization

Numeric columns display numbers with the format used by the locale (country+language) set in the client's browser or operating system environment. You can control the display of numbers by using the locale parameter. The locale also controls the currency symbol in currency columns.

<param name=locale value="en,us">

The first value parameter (en) is the language, the second is the country.

language codes
country codes

<applet code=com.objectplanet.gui.Table
 archive=com.objectplanet.gui.Table.jar width=150 height=100>
<param name=columnType value="currency">
<param name=decimalCount_0 value=2>
<param name=header value="US Dollars">
<param name=locale value= "en,us">
<param name=row_0 value="8237.69">
<param name=row_1 value="6832.74">
<param name=row_2 value="1323.87">
<param name=row_3 value="9879.85">
</applet>

<param name=header value="British Pounds">
<param name=locale value= "en, gb">

<param name=header value="Euro">
<param name=locale value= "fr, eu">

In java you use the setLocale() method.

Table table = new Table();
table.setLocale(new Locale("EN","GB"));

You can also control the thousands delimiter explisitly using the thousandsDelimiter parameter. You can turn off thousands grouping (nice for ID numbers) by setting it to false.

<param name=thousandsDelimiter value=".">
<param name=thousandsDelimiter value="true">
<param name=thousandsDelimiter value="false">

table.setThousandsDelimiter(".");

4.8 loading and displaying dates

A date type column displays dates in the current locale that has been set and sorts them in correct order. For an applet to read the date parameters correctly a pattern string is used to specify the pattern of the input dates.

The dateFormat parameter is used to specify the format in which dates are displayed. To specify a format for a specific column, use dateFormat_N where N is the column index.

The dateFormatInput parameter is used to specify the pattern in which the dates are read. To specify a format for a specific column, use dateFormatInput_N where N is the column index. If this parameter is not specified the pattern of the dateFormat parameter is used as the default pattern.

The dateFormatInputLocale parameter is used to specify the language of the dates that are read.

Check here for the date pattern documentation.

<applet code=com.objectplanet.gui.Table
 archive=com.objectplanet.gui.Table.jar
 width=200 height=100>
<param name=columnType value="date">
<param name=header value="date column">
<param name=row_0 value="05.oct.2001 23:19:33">
<param name=row_1 value="05.nov.2001 23:17:05">
<param name=row_2 value="05.dec.2001 22:55:40">
<param name=dateFormatInput value="dd.MMM.yyyy HH:mm:ss">
<param name=dateFormatInputLocale value="en">
<param name=dateFormat value="dd MMMM yyyy HH:mm:ss">
<param name=locale value="no,no">
</applet>

In the applet above, the input dates are specified in english with named months (just for complexity:). The input pattern specifies MMM meaning the three first letters of the month name is used, and the input locale is set to 'en' specifying the english language.

The dates are displayed with the comlete name of the month specified with the MMMM pattern, the output language is set to Norwegian.

In java you use a Date object for the values in the row. Then you can use a DateFormat or SimpleDateFormat object to format the display of the date. Use the setDateFormatter(column, formatter) method to set the date formatter used for each column, or use -1 for the column index to set the default date formatter.

Table table = new Table();
table.setRow(0, new Object[] {new Date()});
table.setRow(1, new Object[] {new Date()});
table.setRow(2, new Object[] {new Date()});
table.setColumnType(0, table.COLUMN_DATE);
SimpleDateFormat formatter = new SimpleDateFormat("dd MMMM yyyy HH:mm:ss");
table.setDateFormatter(0, formatter);

4.9 loading and displaying images

You can display an image in the header fields using the headerImage_N parameter.

<param name=headerImage_0 value="folder.gif">
<param name=headerImage_1 value="computer.gif">

In java use the setHeaderImage(column, image) method.

// load images..... then set them
Table table = new Table();
table.setHeaderImage(0, computer_image);
table.setHeaderImage(1, folder_image);

You can display an image in the table cells using the image_N and cellImage_N_M parameters. The first one displays an image for the entire column, while the latter one sets a image for a single cell.

<param name=image_0 value="folder.gif">
<param name=image_1 value="computer.gif">

In java use the setImage(column, row, image) method. If you use -1 for the row, the image is set for the entire column.

// load images..... then set them
Table table = new Table();
table.setImage(0, -1, computer_image);
table.setImage(1, -1, folder_image);

<param name=cellImage_1_0 value="folder.gif">
<param name=cellImage_2_1 value="computer.gif">

In java use the setImage(column, row, image) method.

// load images..... then set them
Table table = new Table();
table.setImage(0, 1, computer_image);
table.setImage(1, 2, folder_image);


5. SELECTION, SEARCHING AND SORTING

The user can interactively sort, search, and filter the table data by using the filter bar.

5.1 setting the selection mode

By default the user can not select any rows. By setting the selection mode the user can select either single rows or multiple rows at a time. Use the selectionMode parameter to control the selection type. In multiple selection mode, holding down shift will select multiple rows while using the up and down buttons.

<param name=selectionMode value="none">
<param name=selectionMode value="single">
<param name=selectionMode value="multiple">

<applet code=com.objectplanet.gui.Table
 archive=com.objectplanet.gui.Table.jar width=250 height=100>
<param name=selectionMode value=single>
<param name=row_0 value="BarChartApplet">
<param name=row_1 value="LineChartApplet">
<param name=row_2 value="PieChartApplet">
</applet>


Click on a row to select it.

<applet code=com.objectplanet.gui.Table
 archive=com.objectplanet.gui.Table.jar width=250 height=100>
<param name=selectionMode value=multiple>
<param name=row_0 value="BarChartApplet">
<param name=row_1 value="LineChartApplet">
<param name=row_2 value="PieChartApplet">
</applet>


Click on a row to select and deselect it.

In java you use the setSelectionMode() method.

Table table = new Table();
table.setSelectionMode(Table.SELECT_NONE);
table.setSelectionMode(Table.SELECT_SINGLE);
table.setSelectionMode(Table.SELECT_MULTIPLE);

Use the selectionBackground, selectionForeground, and selectionCellBackground parameters to control the colors of a selected row and cell.

5.2 searching for rows

The user can search for rows by typing in the text to search for in the filter bar. Turn the filter bar on by using the filterBarOn parameter.

You navigate the filter field with home, end, left, right, backspace, and delete. Tab and Shift+Tab moves between the filter fields.

<applet code=com.objectplanet.gui.Table
 archive=com.objectplanet.gui.Table.jar width=250 height=100>
<param name=selectionMode value=single>
<param name=filterBarOn value=true>
<param name=header value="searching for rows">
<param name=row_0 value="BarChartApplet">
<param name=row_0 value="BarChartApplet">
<param name=row_1 value="Border">
<param name=row_2 value="EasyCharts">
<param name=row_3 value="LineChartApplet">
<param name=row_4 value="Neptune">
<param name=row_5 value="PieChartApplet">
<param name=row_6 value="ProgressBar">
<param name=row_7 value="Surveyor">
<param name=row_8 value="TabbedPanel">
<param name=row_9 value="Table">
</applet>

Left click a field in the filter bar at the bottom and start typing in any of the names found in the table's data. The row with the text will automatically be selected.

In java you use the setFilterBarOn() method to turn on the filter bar.

Table table = new Table();
table.setFilterBarOn(true);
5.3 sorting rows

The user can sort the rows by clicking the column headers. The rows are first sorted in their default sort order (set using the defaultSortOrder parameter) then if clicked again, they are flipped in the opposite order.

You must set the columnType parameter to number or currency to sort numerical data correctly, and the column type to date if you want to sort date columns correctly.

<applet code=com.objectplanet.gui.Table
 archive=com.objectplanet.gui.Table.jar width=260 height=200>
<param name=columnType value="text,text,number">
<................>
</applet>

Click the column headers to sort the rows.

In the applet above, the last column is sorted in ascending order by default. To sort the column in descending order, use the defaultSortOrder parameter.

<applet code=com.objectplanet.gui.Table
 archive=com.objectplanet.gui.Table.jar width=260 height=200>
<param name=columnType value="text,text,number">
<param name=defaultSortOrder value="asc,asc,desc">
<................>
</applet>

By default the rows are sorted by the sequence they are added. Use the sortedColumn to sort a specific column when the applet is loaded. The applet below is sorted by the third column.

<applet code=com.objectplanet.gui.Table
 archive=com.objectplanet.gui.Table.jar width=260 height=200>
<param name=columnType value="text,text,number">
<param name=defaultSortOrder value="asc,asc,desc">
<param name=sortedColumn value="2">
<................>
</applet>

You can turn off sorting by setting the sortingOff parameter to true.

<applet code=com.objectplanet.gui.Table
 archive=com.objectplanet.gui.Table.jar width=260 height=200>
<param name=columnType value="text,text,number">
<param name=sortingOff value="true">
<................>
</applet>

Clicking the column headers now will not sort the rows.

You can also control the sorting for individual columns by setting the column indices in the sortingOff parameter.

<applet code=com.objectplanet.gui.Table
 archive=com.objectplanet.gui.Table.jar width=260 height=200>
<param name=columnType value="text,text,number">
<param name=sortingOff value="1">
<................>
</applet>

The second column in the above example can not be sorted.

In java you use the setSortingOn() method to control sorting behavior.

Table table = new Table();
table.setSortingOn(1, false);


6. ROW FILTERING

The user can interactively filter out the rows in the table by using the filter bar. When a row is selected, the filter bar is filled out with the row data. If you right click the filter field, the filter is activated and only rows that matches the filter are displayed. Another right-click will release the filter.

You can also filter out rows by typing text in the filter field. The filter field gets the keyboard focus when you left click the field. Enter will activate the filter.

You navigate the filter field with home, end, left, right, backspace, and delete. Tab and Shift+Tab moves between the filter fields.

filter* - display only strings that start with filter
*filter - display only strings that ends with filter
*filter* - display only strings containing the filter
filter!* or !*filter - display only strings that does not include the filter
filter> or >filter - display only strings larger than filter
filter>= or >=filter - display only strings larger than or equal to filter
filter>= or >=filter - display only strings larger than or equal to filter
filter< or <filter - display only strings smaller than filter
filter<= or <=filter - display only strings smaller than or equal to filter
filter<> or <>filter - display only strings not equal to filter
filter!= or !=filter - display only strings not equal to filter

6.1 turning on the filter bar

Turn on the filter bar with the filterBarOn parameter.

<applet code=com.objectplanet.gui.Table
 archive=com.objectplanet.gui.Table.jar width=260 height=200>
<param name=columnCount value=3>
<param name=columnType value="text,text,number">
<param name=columnAlignment value="left,left,right">
<param name=selectionMode value=single>
<param name=filterBarOn value=true>
<................>
</applet>

By selecting a row, the text from the row is set in the fields of the filter bar. You can then push the filter bar field to display only rows with the same text in that column.

You can also filter out rows by typing in text, and activating the filter by typing enter or clicking the left mouse button.

In java you use the setFilterBarOn() method to turn on the filter bar.

Table table = new Table();
table.setFilterBarOn(true);

You can set the initial value of the filter bar when the applet loads using the filter and filterOn parameters.

<applet code=com.objectplanet.gui.Table
 archive=com.objectplanet.gui.Table.jar width=260 height=200>
<param name=filterBarOn value=true>
<param name=filter value=",source,<400">
<param name=filterOn value="1,2">
<................>
</applet>

You can enable or diable filter fields to control user interaction by usin the setFilterEnabled() method or filterEnabled parameter.

<applet code=com.objectplanet.gui.Table
 archive=com.objectplanet.gui.Table.jar width=260 height=200>
<param name=filterBarOn value=true>
<param name=filterEnabled value="0,1">
<................>
</applet>

6.2 setting the filter wild card

You can filter out fields that start with, end with, or contain the typed text. This is done using the filter wild card which is an asterisk (*) by default.

If you type in B* in the first column and activate the filter, 4 rows with BarChartApplet and Border will be displayed. If you type in *applet in the first field and activate the filter, all the rows with applet will be shown. If you type in *chart* all the chart products will be displayed.

You can control the wildcard to be used by setting the filterWildCard parameter.

<param name=filterWildCard value="%">

Now try using % instead of * when filtering.

In java you use the setFilterWildCard() method.

Table table = new Table();
table.setFilterWildCard("%");

If you set the filter wild card to "" (empty) to table will sort out rows including the text in the filter field (as in *filter*).

<param name=filterWildCard value="">
table.setFilterWildCard("");

Type in chart in the leftmost filter field and then enter. This will display all the chart products.

6.3 using progressive filtering

You can configure the table to filter out rows as you type by using the progressiveFilterOn parameter and the filterWildCard parameter in combination.

<param name=filterWildCard value="">
<param name=progressiveFilterOn value=true>

Activate the leftmost filter field by moving the mouse pointer over it and typing enter or clicking the left mouse button. Then start typing; for example chart and the table will automatically display all the chart products. If you continue and type charts the table will only display the EasyCharts rows.

In java you use the setProgressiveFilterOn() method.

Table table = new Table();
table.setProgressiveFilterOn(true);
table.setFilterWildCard("");

6.4 setting tooltip filter labels

You can add tooltip labels for the filter fields by using the tooltipFilter parameter. The tooltip labels appear after 1.5 seconds of entering the filter field. This delay can be set using the tooltipDelay parameter. Use \n for multiline tooltip labels.

<param name=filterBarOn value=true>
<param name=tooltipFilter value="type to search\nhit enter to filter">
<param name=tooltipDelay value=250>
<param name=tooltipBackground value="yellow">

Move the mouse over a filter field to display the tooltip label.

You can set tooltip labels per filter field by using the tooltipFilter_N parameters where N is the field index.

<param name=filterBarOn value=true>
<param name=tooltipFilter_0 value="filter one">
<param name=tooltipFilter_1 value="filter two">
<param name=tooltipFilter_2 value="filter three">

6.5 displaying column totals

The table can display the total sum for numerical columns, and total number of rows displayed for text columns. You can turn on totalling for all columns by using the totalRowOn parameter.

<param name=totalRowOn value=true>

By filtering out rows, the totals per column will change.

You can also control the totals per column:

<param name=totalRowOn value="0,2">

In java you use the setTotalRowOn() method.

Table table = new Table();
table.setTotalRowOn(-1, true); // all columns
table.setTotalRowOn(1, false); // turn off total in column 1


7. TABLE STYLE

You can control the background color, foreground color, row label color, row background color, and the table grid.

7.1 setting the background and foreground color

You set the background and foreground color of the table using the background and foreground parameters. The colors that can be set are black, blue, cyan, darkgray, gray, green, lightgray, magenta, orange, pink, red, white, and yellow as well as customized colors using url hex codes.

<param name=background value="#ff7070">
<param name=foreground value="white">

The background color is the color of the table border, header fields, and filter fields. The foreground color is the color of the header and field labels.

In java you use the setForeground() and setBackground() methods.

Table table = new Table();
table.setBackground(new Color(0xff7070));
table.setForeground(Color.white);

7.2 setting the row colors

You can set the background and label color of the rows by using the rowBackground and rowForeground paramters.

<param name=rowBackground value="black">
<param name=rowForeground value="white">

In java you use the setRowForeground() and setRowBackground() methods.

Table table = new Table();
table.setRowBackground(-1, Color.black); // -1 for all rows
table.setRowForeground(-1, Color.white); // -1 for all rows

You can set the color for individual rows by adding an index to the parameters.

<param name=rowBackground value="gray">
<param name=rowForeground value="white">
<param name=rowBackground_1 value="black">
<param name=rowBackground_3 value="black">

You can set rows to have alternating background colors using the alternateRowBackground parameter. Try and sort the rows in the applets below.

<param name=alternateRowBackground value="lightgray">

The parameter value consists of three fields, the color, the row count, and the row start. The color can be the color name or the color hex code. The count is the number of succesive rows with the same color. The start field is the position where the alternating color should start. The count and start fields are optional.

<param name=alternateRowBackground value="lightgray,3,1">

7.3 setting the table cell grid

You can display a cell grid by turning on the gridOn parameter. The color of the grid is the same as the table background, but can be set using the gridColor parameter.

<param name=gridOn value=true>
<param name=gridColor value=lightGray>

In java you use the setGridOn() and setGridColor() methods.

Table table = new Table();
table.setGridOn(true);
table.setGridColor(Color.lightGray);

7.4 setting the default font

You can set the default font used for the table using the font parameter. The font type is specified by the font name, the style, and the size.

<param name=font value="Arial,plain,14">
<param name=font value="Courier,bold,14">
<param name=font value="TimesRoman,italic,11">
<param name=font value="Dialog,bolditalic,11">

In java you use the setFont() method.

Table table = new Table();
table.setFont(new Font("Courier",Font.PLAIN,12));

7.5 setting the header font and color

You can set the header font and color using the headerFont and headerFontColor parameters. The font type is specified by the font name, the style, and the size. The color is specified by the color name or a hex color code.

<param name=headerFont value="Arial,bold,14">
<param name=headerFontColor value="red">
<param name=headerFontColor value="#337f33">

In java you use the setFont("headerFont", Font) and setFontColor("headerFontColor", Color) methods.

Table table = new Table();
table.setFont("headerFont", new Font("Arial",Font.BOLD,14));
table.setFontColor("headerFontColor", new Color(0x337f33));

7.6 setting the row font

You can set the default row font using the rowFont parameter. You can also set the font for individual rows by specifying the index of the row. The font type is specified by the font name, the style, and the size.

<param name=rowFont value="Courier,plain,11">
<param name=rowFont_2 value="Courier,bold,15">

In java you use the setFont("rowFont", Font) or setRowFont() method.

Table table = new Table();
table.setFont("rowFont", new Font("Courier",Font.PLAIN,11));
table.setRowFont(3, new Font("Courier",Font.BOLD,15));

7.7 setting the total row font and color

You can set the font and font color used in the total row using the totalRowFont and totalRowFontColor parameters. The font type is specified by the font name, the style, and the size. The color is specified by the color name or a hex color code.

<param name=totalRowOn value="true">
<param name=totalRowFont value="Arial,bold,12">
<param name=totalRowFontColor value="red">

In java you use the setFont("totalRowFont", Font) and setFontColor("totalRowFontColor", Color) methods.

Table table = new Table();
table.setFont("totalRowFont", new Font("Arial",Font.BOLD,12));
table.setFontColor("totalRowFontColor", Color.red);

7.8 setting the filter bar font and color

You can set the font and color of the filter bar using the filterBarFont, filterBarFontColor, filterBarBackground, filterBarOnFontColor, and filterBarBackground parameters. The font type is specified by the font name, the style, and the size. The color is specified by the color name or a hex color code.

<param name=filterBarOn value="true">
<param name=filterBarFont value="Arial,bold,12">
<param name=filterBarFontColor value="gray">
<param name=filterBarBackground value="yellow">
<param name=filterBarOnFontColor value="white">
<param name=filterBarOnBackground value="black">

Select one of the rows in the applet above to set the filter bar values.

In java you use the setFont("filterBarFont", Font) and setFontColor("filterBarFontColor", Color) methods.

Table table = new Table();
table.setFont("filterBarFont", new Font("Arial",Font.BOLD,12));
table.setFontColor("filterBarFontColor", Color.gray);

7.9 setting the filter bar position

You can control the position of the filter bar by using the filterBarPosition parameter. The default position is at the bottom of the table, but it can also be placed at the top.

<param name=filterBarOn value="true">
<param name=filterBarPosition value="top">

Select one of the rows in the applet above to set the filter bar values.

In java you use the setFilterBarPosition(Table.TOP) and setFilterBarPosition(Table.BOTTOM) methods.

Table table = new Table();
table.setFilterBarOn(true);
table.setFilterBarPosition(Table.TOP);


8. URLS AND DRILLDOWN

You can add a URL to each row or individual cell. The URL can be a web page, file, or any valid URL type as well as a javascript function on the applet page.

8.1 setting the url

Add a url link for the rows in the table using the url_N_M parameter, where N is the row index and M is the cell index. The cell index is optional.

<param name="url_0_0" value="http://objectplanet.com/EasyCharts">
<param name="url_0_2" value="http://objectplanet.com/purchase.html#EasyCharts">
<param name="url_2_0" value="http://objectplanet.com/comp/BarChartApplet">
<param name="url_2_2" value="http://objectplanet.com/purchase.html#BarChartApplet">
<.......>

Click on the links to open web page.

You can also set the link directly from the row parameter using the following format

<param name=row_0 value="<url:http://objectplanet.com>ObjectPlanet website">

8.2 setting the url target window

By default the new web page is opened in the same window as the applet. This can be controlled using the urlTarget_N_M parameter, where N is the row index and M is the cell index.

urlTarget - sets the default target.
urlTarget_N - sets the target for the specified row.
urlTarget_N_M - sets the target for the specified cell.

The value of the urlTarget parameter can be one of the following:

_self: Open new page in same window or frame.
_parent: Open in the parent window.
_top: Open in the top-level window.
_blank:Open in a new blank window.
name:Open in the frame or window with the specified name.

<param name="urlTarget" value="main">
<param name="urlTarget_0_0" value="product">
<param name="urlTarget_0_2" value="price">
<param name="urlTarget_2_0" value="product">
<param name="urlTarget_2_2" value="price">

8.3 calling javascript methods

You can call javascript methods when a row or cell is selected. Remember to include the MAYSCRIPT parameter in your applet tag.

<html>
<body>

<script>
function helloWorld() {
   alert ('hello world');
}
</script>

<applet code=com.objectplanet.gui.Table MAYSCRIPT archive=com.objectplanet.gui.Table.jar width=150 height=100>
<param name="row_0" value="display hello world">
<param name="url_0_0" value="javascript:helloWord();">
</applet>

</body>
</html>

8.4 setting the url style

The style of the links can be set. You can set the color of the label and link line using the urlColor parameter. You can set the style of the url link using the urlStyle paramter.

<param name="urlColor" value="red">
<param name="urlStyle" value="line">

You can turn off the link line.

<param name="urlColor" value="red">
<param name="urlStyle" value="noline">



Copyright (C) 1998-2004 ObjectPlanet, Inc.
phone (+47) 2233 3360 fax (+47) 2233 3361