• Table in "Server" mode.
• Table in "Server + AJAX" mode.
• Table in "Browser" mode.

• Initial state of the Table control.
• Table control display options.
  • Selection mode in the Table control.
  • Display options.
• Managing scrollbars in a Table control.

New in version 2025
Note: When upgrading to version 2025, the export menu to XLSX, DOCX, XML and PDF is automatically added to all Table control fields in WEBDEV project pages. This feature can then be disabled in the field's "UI" tab, or for all fields in the project description ("Advanced" tab).

• Visible If this option is checked, the Table control will be visible. If this option is unchecked, the Table control will be hidden. This option can be modified using the Visible property.
• The following options are also available for browser or AJAX Table controls::
  • Editable: The user can enter data in the various columns of the Edit control if these columns are being entered.
  • Grayed The Table control and its columns will be grayed out. The user will not be able to enter data in the control.
  • Selection (non-editable) The user will not be able to enter data in the columns of the Edit control. However, they can select rows in the control:
    • by clicking the desired row.
    • by using TableSelectPlus.
    The row will be selected with the selection bar.
    Note The value in the Table control corresponds to the selected line. The row selection code is executed each time a row is selected.
  • No input, no selection The user will not be able to enter data in the columns of the Edit control. A row can only be selected using TableSelectPlus. This row will be selected with the selection bar. The user will not be able to change the position of the selection bar.
    Note The value in the Table control corresponds to the selected line.
    Tip This option is recommended when you need to highlight a line using the selection banner.

Row selection mode

The available selection modes are as follows:

• Without selection The selection banner will not be displayed, but the selected line will be in focus (it will be surrounded by dotted lines). A row can be selected by clicking this row or programmatically.
• Simple selection The selected line will appear below the selection banner. A row can be selected by clicking this row or programmatically.
• Multiple selection: Several lines can be selected simultaneously:
  • with the Shift key if the rows are consecutive or with the Ctrl key if the rows are not consecutive.
  • programmatically.
  In this case, the number of selection bars is equal to the number of selected rows.

• A WLanguage error will occur if you try to perform a multiple selection through programming while the selection mode of control is set to "Single selection".
• Table fields in "Server" mode: multiple selection is only available for data-bound Table control fields.

// Trace le contenu des lignes sélectionnées
i is int 
NbSelectionne is int = TableSelectCount(TABLE_Produit)
FOR i = 1 TO NbSelectionne 
	Trace("Ligne sélectionnée : " + i) 
END

Cell selection mode (Table populated programmatically)

The available selection modes are as follows:

• No selection: Cell selection not possible.
• Simple selection: Only one cell can be selected in the field.
• Multiple selection: Multiple cells can be selected simultaneously, using the Shift key if the cells are consecutive and the Ctrl key if they are not.

tabNumColVersNomCol is associative array of strings
tabNumColVersNomCol[1] = "COL_Texte"
tabNumColVersNomCol[2] = "COL_Num"
tabNumColVersNomCol[3] = "COL_Date"
tabNumColVersNomCol[4] = "COL_Heure"
tabNumColVersNomCol[5] = "COL_Liste"
tabNumColVersNomCol[6] = "COL_Interr"
tabNumColVersNomCol[7] = "COL_Image"
tabNumColVersNomCol[8] = "COL_Cont"

nCol is int
nLig is int
nInd is int = 1
LOOP
	nCol = TableSelect(TABLE_SélectionMultiple, nInd, tsCellColumn)
	nLig = TableSelect(TABLE_SélectionMultiple, nInd, tsCellRow)
	IF nLig <= 0 THEN
		BREAK
	END
	Trace("[%tabNumColVersNomCol[nCol]%][[%nLig%]]")
	nInd++
END

Display options

• the display mode of the Table control (title of columns displayed).
• the row selection mode in the Table control (presence of a radio button and/or selection bar).
• the presence of a context menu.

• With column titles: the label defined for the columns is used as the column title..
  Note: The height of column headings can be specified in the "UI" tab of the Table control description. This height can also be modified in the editor, with the mouse. If a background image is associated with the column title, the image is automatically generated with the specified size.
• If the "With column titles" option is selected, the "Edit column title-headers" BUTTON allows you to define additional titles 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.
     Note: 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..
• New in version 2025
  Show 'burger' button with export context menu A context menu associated with the field (icon ) is displayed. This context menu allows the user to export the contents of the Table control to an Excel, Word or XML file (with style sheet), or to print it out as a PDF file. This file will be downloaded onto the computer of the Web user.
  The context menu icon can be customized: simply enter the path to the desired image in the "Style" tab of the Table control description ("Other" item). The size of the image used must be 16 pixels x 15 pixels.
  This option is only available for Table controls in "Server" mode or "Server + AJAX" mode..
• Selection bar A selection banner displays and/or selects the current line.
  This option is only available for Table control fields in "Server" mode..
• Selection column for current row:
  A radio button is found in front of each row of the Table control. This radio button is used to view and/or select the current row.
  This option is only available for Table control fields in "Server" mode..

Example Table control: Server table field with column titles, selector banner, export context menu and selector banner:

• Defining the horizontal and vertical scrollbar mode.
• Table control without vertical scrollbar: All the contents of the table field will be displayed on the page, with no limit on the number of lines.
• Table control with vertical scrollbar:
  • If "Cache all its content" is checked, the entire content of the Table control is loaded in the browser's cache. In this case, the page may take longer to load, but no return to the server is needed when using the scrollbar. This option is particularly recommended for AJAX Table controls used in Active WEBDEV Pages. In this case, the vertical scrollbar is automatically generated.
  • If "Cache all its content" is not checked, the default behaviour from previous versions is restored. Only a limited number of rows around the area displayed in the Table control is cached.

• Defining the horizontal and vertical scrollbar mode.
• Table control without vertical scrollbar: All the contents of the Table control will be displayed on the page, with no limit on the number of lines.
• Table control with vertical scrollbar A vertical scrollbar allows you to dequeue lines not displayed in the Table control.