ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Help / Developing an application or website / Controls, windows and pages / Controls: Available types / Table control
  • Overview of Table control
  • How to?
  • Creating a Table control
  • Characteristics of Table control
  • Tips
  • Vocabulary
  • Swapping
  • Table/Looper control
  • TreeView Table/Table control
  • Limitations
  • Limitations for Java
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadIOS WidgetApple WatchMac CatalystUniversal Windows 10 App
Others
Stored procedures
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:
  • WINDEV The Table controls can be multi-selection
How to?

Creating a Table control

To create a Table control:
  1. On the "Creation" tab, in the "Data" group:
    • WINDEV expand "Table and List Box" and select "Table (Vertical)".
  2. Click where the control will be created in the window or page. The Table control creation wizard starts automatically.
  3. Answer the questions and validate the control creation.
WINDEV Remark: The dimensions of the control are optimized to take up the available space at the specified position. If the control size does not suit you, press Ctrl + Z: the control size will be reset to default.
To view the control characteristics, select "Description" in the context menu of the control. There are two types of information:
  • 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:

Tips

  • WINDEV To add new columns in a Table control, use the context menu of control in the window editor. "Add a column..." adds a new column of the desired type in the selected control after the existing columns.
  • 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:
NameDefinition
Selection barUsed to view the selected element. A specific color is used in most cases.
Table control based on a data fileThe Table control is based on a data file or on a query. The control elements correspond to the file records.
Table control populated programmaticallyThe 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 controlThe user can select a single element in the Table control.
Multi-selection Table controlThe user can select several elements at the same time in the Table control (via the Ctrl key).
Table control based on a variableThe 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:
  1. Select the Table control to transform.
  2. On the "Refactoring and swapping" tab, in the "Transformations" group, expand "Modification" and select "Table to Looper".
WINDEVJava

TreeView Table/Table control

WINDEV and WINDEV Mobile allow you to automatically transform a Table control into a TreeView Table control (and conversely):
  1. Select the Table control (or the TreeView Table control) to handle.
  2. On the "Refactoring and swapping" tab, in the "Transformations" group, expand "Modification" and select "Table/TreeView Table".
Limitations
Java

Limitations for Java

The following characteristics are not supported in Java:
  • automatic calculation in the columns of a Table control.
  • tooltip of the vertical scrollbar.
  • proportional scrollbar.
  • lock of records currently modified.
  • column fixed to the left.
  • ellipsis mode in the text columns.
Related Examples:
The Table/TreeView Table control (Progress Bar columns) 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
WD DataBinding 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
The Ajax Table control 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
The Ajax Table control in PHP 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
Minimum version required
  • Version 9
This page is also available for…
Comments
Exemplo tabela com Contrainer
https://youtu.be/Ms1N8ieqE3E
https://windevdesenvolvimento.blogspot.com/2021/06/dicas-3347-windev-webdev-mobile-tabela.html
Esse Video vai estrear as 10:00 do dia 10/06/2021
DICAS 3347 - WINDEV WEBDEV MOBILE - Tabela Coluna Contrainer - Curso Tabela 130
Exemplo tabela com Contrainer

amarildo
05 Jun. 2021

Last update: 07/03/2023

Send a report | Local help