Skip to content

TWebTableControl

Description

Below is a list of the most important properties methods and events for TWebTableControl. TWebTableControl represents a HTML table. The HTML table can have a header row and/or header column. The TWebTableControl is also especially designed to be able to use Bootstrap CSS styles for effects like banding, hovering,… Find more information about Bootstrap table styles at:
https://getbootstrap.com/docs/4.0/content/tables/

In this example, the ElementHeaderClassName was set to: "table thead-dark” and the ElementTableClassNameElementTableClassName was set to: “table table-hover table-bordered table-striped table-sm”

Designtime Runtime

Set or get the content of table cells via:

TableControl.Cells[col,row]: string;

Set or get the HTML table cell elements in the grid via:

TableControl.CellElements[col,row]: TJSElement

Set or get the CSS class name for a row in the table via:

TableControl.RowClassName[row]: string;

HTML template tag

The HTML tag the component can be associated with in an HTML template. Assign the ID attribute with a unique value and set the identical value to the ElementID property. Detailed information can be found in the Use of HTML templates topic.

HTML tag <DIV ID=”UniqueID”></DIV>
ElementID UniqueID

Properties for TWebTableControl

Property Description
ColCount Sets the number of columns in the table
ColHeader When true, a row header column is shown
ElementClassName Optionally sets the CSS classname for the label when styling via CSS is used
ElementHeaderClassName Optionally sets the CSS classname for the label when styling via CSS is used
ElementID Optionally sets the HTML element ID for a HTML element in the form HTML file the label needs to be connected with. When connected, no new label is created but the Delphi class is connected with the existing HTML element in the form HTML file
ElementRowSelClassName Optionally sets the CSS classname for the selected row in the table
ElementSelectionClassName Optionally sets the CSS classname for the selected cells in the table
ElementTableClassName Optionally sets the CSS classname for the label when styling via CSS is used
Enabled: boolean When true, a click on a row in the table will set it in selected state. The property RowIndex gets or sets the selected row
Footer: TTableControlHeader Holds settings for the optional table control footer
Header: TTableControlHeader Holds settings for the optional table control header
Paging: TTableControlPaging Holds settings for optional built-in paging
Options: TTableControlOptions Holds various table control options
RowCount: Boolean Sets the number of rows in the table
RowHeader: Boolean When true, a column header row is shown
RowIndex: integer Gets or sets the selected row in the table
SelectionColor: TColor Gets or sets the background color of the selected row in the table
SelectionTextColor: TColor Gets or sets the font color of the selected row in the table
WordWrap When false, text in cells is rendered on a single line, otherwise wordwrapped

Methods for TWebTableControl

Method Description
AddButton(ACol, ARow; integer; AText: string; AStyle: string = ‘’); Adds a button to cell Acol,ARow with button caption text AText. Optionally includes the CSS classname of the button
AddButtonColumn(ACol; integer; AText: string; AStyle: string = ‘’); Adds a column of buttons to the table control in column ACol
AddCheckBox(ACol, ARow; integer; AState: Boolean = false); Adds a checkbox to cell Acol,ARow with checkbox state set by AState
AddCheckBoxColumn(ACol; integer; Checked: Boolean = false); Adds a column of checkboxes to the table control in column ACol. Optionally set via Checked the default checked state
AddProgress(Acol,ARow: integer; APosition: integer; AStyle: string); Adds a progressbar to cell Acol,ARow with progressbar position APosition. Optionally includes the CSS classname of the progressbar.
AddSortIndicator(ACol, ARow; integer; AIndicator: TGridSortIndicator); Adds a sort indicator to a column header cell. The AIndicator value can be: siNone, siAscending, siDescending
FindCell(Condition: string; CaseSensitive: Boolean; AllCells: boolean = true): TGridCoord; Searches the table for a cell matching the condition and selects the cell. When AllCells is false, only normal cells are search, i.e. no column or row header cells
FindNext: TGridCoord; Continues search from last cell
HasButton(ACol, ARow: integer): Boolean Returns true when the cell has a button
HasCheckBox(ACol, ARow: integer): Boolean Returns true when the cell has a checkbox
HasProgress(ACol, ARow: integer): Boolean Returns true when the cell has a progress bar
HasSortIndicator(ACol, ARow: integer): Boolean Returns true when the cell has a sort indicator
HideCol(ACol: integer); Hides column ACol
HideRow(ARow: integer); Hides row Arow
InsertRow(ARow: integer); Inserts a new row after ARow
LoadFromCSV(const AURL: string; Delimiter: char = ';'; LoadFixed: boolean = false); Load CSV formatted data found a AURL via a HTTP GET in the table control. Optional parameters for setting the delimiter or whether fixed cells should be loaded or not.
LoadFromCSVAsync(const AURL: string; Delimiter: char = ';'; LoadFixed: boolean = false): TJSPromise; Async variant of LoadFromCSV. The await result is of the type TJSXMLHttpRequest.
LoadFromJSON(const AURL: string; ADataNode: string); Load JSON formatted data found a AURL via a HTTP GET in the table control. The expected data is a JSON array. When the ADataNode parameter is different from empty, it tries to fetch the JSON array from the ADataNode JSON node.
LoadFromJSONAsync(const AURL: string; ADataNode: string): TJSPromise; Async variant from LoadFromJSON. The await result is of the type TJSXMLHttpRequest.
LoadPageFromJSON(const AURL: string; ADataNode: string): TJSPromise; Variant of LoadFromJSON that loads only the active page of the TWebTableControl.
LoadPageFromJSONAsync(const AURL: string; ADataNode: string): TJSPromise; Async variant from LoadPageFromJSON. The await result is of the type TJSXMLHttpRequest.
RemoveButton(ACol, ARow: integer): Boolean Removes a button that was added to a cell ACol, ARow
RemoveCheckBox(ACol, ARow: integer): Boolean Removes a checkbox that was added to a cell ACol, ARow
RemoveProgress(ACol, ARow: integer): Boolean Removes a progress bar that was added to a cell ACol, ARow
RemoveSortIndicator(ACol, ARow: integer): Boolean Removes a sort indicator that was added to a cell ACol, ARow
RemoveFilter; Removes a previously set filter condition
RemoveRow(ARow: integer): Removes row ARow from the table
ScrollRowInView(ARow: integer); Scroll the table to bring row ARow in view
SelectCell(ACol,ARow: integer); Selects content of the table cell
SetFilter(Column: integer; Condition: string; CaseSensitive: Boolean = true); Sets a filter condition for the table for a specific column, optionally case sensitive
UnHideCol(ACol: integer); Unhides column ACol
UnHideRow(ARow: integer); Unhides row ARow

Events for TWebTableControl

Event Description
OnButtonClick Event triggered when a button added to a cell is clicked
OnCheckClick Event triggered when a checkbox added to a cell is clicked
OnClick Event triggered when the table is clicked
OnClickCell Event triggered when a table cell is clicked
OnDblClick Event triggered when the table is doubleclicked
OnDblClickCell Event triggered when a table cell is doubleclicked
OnGetCellChildren Event triggered when a new cell is rendered during loading date from CSV or JSON in the grid. Passes the HTML element for the grid cell allowing to insert dynamically HTML child elements in the cell
OnGetCellClass Event triggered when a new cell is rendered during loading date from CSV or JSON in the grid. Allows to set the CSS class name for an individual cell allowing customization this way.
OnGetCellData Event triggered when a new cell is rendered during loading date from CSV or JSON in the grid. Allows to dynamically override or customize the values retrieved from the CSV or JSON (or dataset in case of a TWebDBGrid)
OnHttpRequestError Event triggered when an error occurred with the HTTP GET request used to get data via methods LoadFromJSON()/LoadFromCSV()
OnHttpRequestSuccess Event triggered when the HTTP GET request used to get data via methodsLoadFromJSON()/LoadFromCSV()
successfully returned

Properties for TWebTableControlHeader

Property Description
ButtonActiveElementClassName: TElementClassName Sets the CSS classname for the active paging button in the header areats
ButtonElementClassName: TElementClassName Sets the CSS classname for paging buttons in the header areats
Caption: string Sets the header caption text
DropDownElementClassName: TElementClassName Sets the CSS classname for optional paging
dropdown control
Filter: boolean When true, filtering can be performed from an input in the header
FilterColumn: integer Sets the column index to perform filtering on
InputElementClassName: TElementClassName Sets the CSS classname for the filter input control in the header
LinkActiveElementClassName: TElementClassName Sets the CSS classname for the active paging link in the header area
LinkElementClassName: TElementClassName Sets the CSS classname for paging links in the header area
ListElementClassName: TElementClassName Sets the CSS classname for paging list container in the header area
ListItemElementClassName: TElementClassName Sets the CSS classname for paging list items in the header area
ListLinkElementClassName: TElementClassName Sets the CSS classname for paging list item link in the header area
Pager: TPagerType Selects the pager type to be displayed in the header
Search: Boolean When true, search in the table is possible from a header input
Visible: Boolean When true, the header (or footer) becomes visible

Properties for TWebTableControlPaging

Property Description
Enabled: Boolean When true, paging is enabled in the TWebTableControl
Index: integer Sets or gets the index of the visible page
Size: integer Sets or gets the page size in number of rows

Properties for TWebTableControlOptions

Property Description
AutoCellEmail: Boolean When true, when the cell contains an email address, it is automatically rendered as a hyperlink
AutoCellURL: Boolean When true, when the cell contains an URL it is automatically rendered as a hyperlink
AutoCellImage: Boolean When true, when the cell contains an URL that represents an image, it is automatically rendered as an image element
AutoNumAlign: Boolean When true, when the cell contains a number, it is automatically rendered right-aligned
CellBorderColor: TColor Sets the color of cell borders
CellBorders: Boolean When true, the borders in the table are visible
ImageAlign: TTextAlign Sets the default alignment for images in table cells
ImageWidth: integer When different from zero, this image width is applied to images automatically rendered in the table
ResizeColumns: Boolean When true, it is possible to resize columns at runtime by dragging from the row headers
ScrollVertical: Boolean When true, a vertical scrollbar is displayed when the number of rows exceed the available table height