The Table control

ONLINE HELP
WINDEV, WEBDEV AND WINDEV MOBILE

Version:

Home | Sign in | English

Help

Editors

Controls (window/page/report)

Controls

Table control

Browsing table

Memory table

Table on source

The Table control

Overview of Table control

How to?

Vocabulary

Swapping

Limitations

Related examples

See also

The Table control

Overview of Table control

The Table control is used to simplify the display and the input of information stored in memory or coming from a data file, a view or a query.

A Table control is contains rows and columns. The intersection between a row and a column defines a cell.

A Table control can be managed row by row, column by column or cell by cell. A Table control can be displayed horizontally or vertically.

The information displayed in a Table control can:

be defined programmatically: it is referred to as Table control populated programmatically.
come from a variable: this is referred to as Table control based on a variable.
come from a data file or query: it is referred to Table control based on a data file. There are two types of Table controls based on data files:
- Table controls with direct access to the data source: the Table control directly handles records from the query or data file.
- Table controls with in-memory data source: the Table control handles the data file records loaded in memory (optimized Table control based on a data file).

To determine the main functionalities of these different types of Table controls, see the comparison between the features of Table controls.

Remarks:

The Table controls can be multi-selection
You can create Table controls with different operating modes:
- Table control in "Server" mode.
- Table control in "Server + AJAX" mode. For more details, see Table control in "Server + AJAX" mode.
- Table control in "Browser" mode.

How to?

Creating a Table control

To create a Table control:

On the "Creation" tab, in the "Data" group:
- expand "Table" and select "Table".
Click where the control will be created in the window or page. The Table control creation wizard starts automatically.
Answer the questions and validate the control creation.

To view the control characteristics, select "Description" in the context menu of the control. Two types of information can be viewed:

the information regarding the entire Table control (all you have to do is select the name of the control).
the information regarding each of the columns (all you have to do is select the name of a column).

Remarks:

To easily create a Table control based on a data file from a data file described in the data model editor, simply drag the selected data file from the "Project explorer" or "Analysis" pane and drop it in the editor.
To easily create a Table control based on a variable from the array variables of the current window or page, simply drag the selected variable from the "Project explorer" pane and drop it in the editor.

Characteristics of Table control

In the characteristics of Table control, you have the ability to specify:

For more details, see:

Characteristics of Table controls in a page.

Tips

The height of the rows in the Table control is too small in the editor? all you have to do is use the mouse to increase the height of the table rows. This trick is very useful for the multiline columns and the container columns.
You have the ability to quickly duplicate a column. To do so:
1. Open the Table control description window.
2. Select the column to duplicate.
3. Open the context menu of the column and select "Duplicate column"'.
  Remark: This option is also available in the "New" drop-down menu.

Remark: The height specified for the first row of the Table control is applied to all other control rows.

Vocabulary

To easily handle a Table control, you must be familiar with the following vocabulary:

Name	Definition

Selection bar	Used to view the selected element. A specific color is used in most cases.
Table control based on a data file	The Table control is based on a data file or on a query. The control elements correspond to the file records.
Table control populated programmatically	The Table control is not based on a data file or on a query. The elements displayed in the control are defined by the developer (through programming).
Single-selection Table control	The user can select a single element in the Table control.
Multi-selection Table control	The user can select several elements at the same time in the Table control (via the Ctrl key).
Table control based on a variable	The Table control is based on a WLanguage variable. The elements displayed in the control correspond to the data found in the variable.

Swapping

Table/Looper control

A Table control can be automatically transformed into a Looper control:

Select the Table control to transform.
On the "Refactoring and swapping" tab, in the "Transformations" group, expand "Modification" and select "Table to Looper".

Limitations

Related Examples:

Unit examples (WINDEV): The Table/TreeView Table control (Progress Bar columns)

[ + ] Using a Progress Bar column as well as the ..TextProgressBar property in a Table or TreeView Table control

Training (WINDEV): WD DataBinding

[ + ] The "WD DataBinding" example explains how to link a control and a WLanguage variable.

This example includes two windows:
- A first window presents a simple link between the controls and a composite variable.
- A second window presents a link between a table control and a WLanguage class as well as the link between the table and a detailed form

Unit examples (WEBDEV): The Ajax Table control

[ + ] This example explains how to use the Ajax tables. This example allows you to:
- Access the content of a table element in browser code
- Clear the table
- Fill the table
- Select a row
- Sort the table
- Delete the selected row

Unit examples (WEBDEV): The Ajax Table control in PHP

[ + ] This example explains how to use the Ajax tables in PHP.
The following topics are explained:
- Access the content of a table element in browser code (using the AjaxExecuteAsynchronous function)
- Delete the table content
- Fill the table
- Select a row
- Delete a row