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:
Set or get the HTML table cell elements in the grid via:
Set or get the CSS class name for a row in the table via:
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 |