ONLINE HELP
 WINDEV, WEBDEV AND WINDEV MOBILE
This content has been translated automatically.  Click here  to view the French version.
Help / Developing an application or website / Controls, windows and pages / Controls: Available types / Table Column control
  • Overview
  • Column title
  • Image for the title of columns
  • Multiline column title
  • Column title rotation
  • Background image for the title area of column
  • Column title-header
  • Icons displayed in the columns
  • Displaying the sort icon
  • Customizing the "Magnifier", Sort, Context menu and Filter icons
  • Position of sort and search icons
  • Default search mode
  • Selection bar
  • Displaying (or not) a selection bar on the column
WINDEV
WindowsLinuxJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadIOS WidgetApple WatchMac Catalyst
Others
Stored procedures
Overview
The column title is an important element of a Table control. Indeed, the title of columns is used to perform operations regarding the appearance (ability to include images) as well as the features (filter, search).
This help page presents the available features:
Column title
WINDEV

Image for the title of columns

An image can be displayed in the column title. If a caption is displayed in the column title, this image will be positioned on the left of caption. This image can be inserted in the editor or programmatically.
To insert an image into the title of a column in the editor:
  1. Display the description window of column ("Column description" in the context menu).
  2. On the "General" tab, specify the image that will be used for the column title via the Drop-down button button:
    • The "Browse" option is used to select an image file accessible from your computer.
    • The "Catalog" button is used to choose an image found in the image catalog of WINDEV.
  3. Validate. The image is displayed in the column title in the editor.
To display an image in a column title through programming, use the TitleImage property.

Multiline column title

The column title is displayed on several lines by default.
To configure the management mode of column tile (singleline or multiline):
  1. Display the Table field description window ("Table description" option in the context menu).
  2. On the "Details" tab, check or uncheck "Force title in a singleline (8)".
  3. Validate.
Remarks:
  • The title of columns supports RTF and the graphic functions (gXXX functions).
  • In the window editor, the height of column titles can be modified with the mouse.
  • The title of the columns can be modified programmatically with the Title and Caption properties.
  • The height of the column titles can be modified programmatically with the TitleHeight property.
WINDEV

Column title rotation

In a Table control, you have the ability to define a writing angle for the titles (in degrees). This allows you to rotate column titles.
To slant the column title:
  1. Open the Table control description window ("Description" in the context menu).
  2. On the "Details" tab, enter the value of the option "Angle for the title of columns" (in degrees). Use the arrow button next to the field to select the precise angle required.
  3. Validate.
To rotate column titles through programming, use the OrientationTitle property.
WINDEV

Background image for the title area of column

An image can be included in each title cell.
To customize the title zone image:
  1. Go to the "Style" tab in the Table control description window ("Description" in the context menu).
  2. Select the "Border of column title" element.
  3. Open the "Border" combo box and select "Image (9-slice scaling image)".
  4. Click the "Right arrow" button found to the right of the "Border" combo box. A window for configuring the image of column title is opened.
  5. Select the image of border to use by clicking the Drop-down button button:
    • The "Browse" option is used to select an image file accessible from your computer.
    • The "Catalog" button is used to choose an image found in the image catalog of WINDEV. The image catalog only proposes the images that can be used as column title.
  6. If the selected image contains several states, specify this number of states.
  7. Close the window for configuring the image of title cells.
  8. Validate.
Remark: The "Column title frame" element in the "Style" tab also lets you set the height of the column title area.
WINDEVAndroidiPhone/iPad

Column title-header

You have the ability to define a title-header of columns. A column title-header is an additional title displayed above the title of one or more columns.
To define a column title-header:
  1. Open the "Details" tab in the Table control description window ("Description" in the context menu).
  2. Click "Edit column title-headers".
  3. The different table columns are displayed in the window that opens.
    In this window, you can:
    • 1: Add overlays ("+" button) or remove overlays ("-" button).
    • 2: Resize and merge individual header cells by hovering over separators.
    • 3: Rename overhead cells by clicking on them.
  4. Validate.
Remarks:
  • The title-headers of columns can be created through programming with TableAddTitleHeader.
  • The Merge property is used to merge:
    • Table field cells.
    • the titles of columns.
  • If column overheads are enabled, column labels cannot be modified via the column description window: the label must be modified in the column overheads editing window..
  • WINDEV The TitleHeader property allows you to:
    • Find out and modify the title and the aspect of a title-header of table column.
    • Find out the number of title-headers for a table column.
Icons displayed in the columns

Displaying the sort icon

In a sortable column, the sort icon is displayed when the user clicks the column. The sort icon indicates the sort direction of the column.
You also have the ability to permanently display a sort icon in the column. In this case, when the column is not sorted, an icon indicates to the user that a sort can be performed on this column.
To display the sort icon:
  1. Go to the "Style" tab in the Table control description window ("Description" in the context menu).
  2. Select the "Border of column title" element.
  3. Select "Display sort icon".
WINDEV

Customizing the "Magnifier", Sort, Context menu and Filter icons

In a column, several icons are used to indicate to the user whether the column is sortable, whether the column is sorted and in which direction, whether a search or a filter can be done in the column.
To customize the style of these elements:
  1. Go to the "Style" tab in the Table control description window ("Description" in the context menu).
  2. Select the "Border of column title" element.
  3. Click the "Sort/Magnifier image" button and select the image that will be used for the magnifier via the Drop-down button button ("Browse" or "Catalog" button).
    The size of this image must be set to 53 x 33 pixels and the image must contain the following elements:
    • Sortable column image: 9 x 8 pixels
    • Sorted column images: sorted upwards and downwards (22 x 9 pixels each)
    • Magnifier images: grayed, active and Pushed (33 x 11 pixels each)
    • Image of context menu (10 x 14 pixels)
    • Filter image: grayed, active and Pushed (33 x 11 pixels each)
For example:
WINDEV

Position of sort and search icons

The different icons displayed in the column title have a specific position:
  • the icons used to indicate to the user whether the column is sortable, whether the column is sorted and in which direction are displayed on the left.
  • the icons used to indicate whether a search or a filter can be performed in the column are displayed on the right.
To customize the position of these elements:
  1. Display the column description window ("Description" option in the context menu).
  2. On the "Style" tab, select the "Border of column title" element.
  3. Click the "Position of Sort/Magnifier Image" image and specify the position of the different icons in relation to the border of the column title.
WINDEV

Default search mode

A column of Table control can allow the user to perform a search or set a filter. You have the ability to choose the operating mode of the Table control columns:
  • Magnifying glass mode = Search: When the user enters characters in the column header, a search is automatically performed on the column contents.. The rows whose content starts with these characters will be displayed.
  • Magnifying glass mode = Filter <Contains>: When the user enters characters in the column header, a search will automatically be performed on the column's content. The rows whose content contains these characters will be displayed.
To configure the default search mode of the columns in the editor:
  1. Open the Table control description window ("Description" in the context menu).
  2. On the "General" tab, select the desired "Search mode".
  3. Validate.
To configure the default search mode of the columns through programming, use the MagnifierMode property. This property allows you to use all the available modes.
Selection bar
WINDEV

Displaying (or not) a selection bar on the column

In a Table control, the selection bar is used to quickly view the selected rows. In some cases, you may want to display the selection bar on some columns only of the Table control.
To avoid displaying the selection bar on some columns in the editor:
  1. Display the column description window ("Description" option in the context menu).
  2. On the "Details" tab, uncheck "Show selection bar on this column".
  3. Validate.
To avoid displaying the selection bar on some columns through programming, use the BarVisible property.
See also
Minimum version required
  • Version 14
This page is also available for…
Comments
Click [Add] to post a comment

Last update: 10/04/2024

Send a report | Local help