Table
Last updated
Was this helpful?
Last updated
Was this helpful?
(part of package '') Extends designtime/SolutionModel: Extends runtime:
A component that displays a data grid with customizable columns, pagination, sorting, and incremental scrolling.
This is a reference page; many components have detailed usage guides .
An array holding the column definitions for the table. Type:
The current page number in a paginated view. Type: Default Value: 1
Flag indicating whether columns can be resized. Type: Default Value: false
Flag to enable the mobile view for the table. Type:
Called when the mouse is clicked on a row/cell (foundset and column indexes are given) or when the ENTER key is used (then only the selected foundset index is given). Use the record to exactly match what the user clicked on.
Parameters:
Called when the mouse is double clicked on a row/cell (foundset and column indexes are given)
Parameters:
Called when the right mouse button is clicked on a row/cell (foundset and column indexes are given). Use the record to exactly match what the user clicked on.
Parameters:
Called when a column is resized.
Parameters:
Called when the table gains focus.
Parameters:
Called when the table loses focus.
Parameters:
Called when a header is clicked.
Parameters:
Called when a header is right-clicked.
Parameters:
Called when the viewport of the table changes.
Parameters:
Gets the column at index. Index is 0 based.
Example:
Parameters:
Gets the number of columns
Example:
Determines the CSS class for the sorting indicator of a given column.
Parameters:
Gets the start and end positions of the visible area in the viewport.
Adds new column at specified index. Index is 0 based.
Example:
Parameters:
Removes all columns.
Example:
Removes column from specified index. Index is 0 based.
Example:
Parameters:
Request the focus to the table html element.
Example:
Parameters:
Sets the selected header column by triggering a header click event for the specified column index.
Parameters:
Represents a column in the table. scripting type: CustomType<servoyextra-table.column>
autoResize
Indicates if the column should auto-resize.
Default Value: false
dataprovider
The dataprovider linked to this column.
format
Format string for displaying the column's values.
headerStyleClass
CSS style classes applied to the column header.
headerText
The header text of the column.
id
Used to identify the column in cell event handlers, because column index can change if columns are added/removed at runtime.
initialWidth
The initial width of the column when first rendered.
showAs
Determines how the column value is shown (text, html, etc.).
Default Value: "text"
styleClass
CSS style classes applied to the column cells.
styleClassDataprovider
Dataprovider that defines dynamic CSS classes for cells.
valuelist
The value list used to map column values.
width
The width of the column.
Default Value: "auto"
Settings for key bindings used in table navigation. scripting type: CustomType<servoyextra-table.keyCodeSettings>
arrowDown
Enable Arrow Down key binding.
Default Value: true
arrowUp
Enable Arrow Up key binding.
Default Value: true
end
Enable End key binding.
Default Value: true
enter
Enable Enter key binding.
Default Value: true
home
Enable Home key binding.
Default Value: true
pageDown
Enable Page Down key binding.
Default Value: true
pageUp
Enable Page Up key binding.
Default Value: true
General settings for the table behavior. scripting type: CustomType<servoyextra-table.settings>
fastScrollLoadThresholdFactor
Threshold factor for fast scroll loading.
Default Value: 2.3
fastScrollRenderThresholdFactor
Threshold factor for fast scroll rendering.
Default Value: 3
maxLoadedRows
Maximum number of rows to load.
Default Value: 1000
maxRenderedRows
Maximum number of rows to render.
Default Value: 450
minBatchSizeForLoadingMoreRows
Minimum number of rows to load when fetching additional data.
Default Value: 20
minBatchSizeForRenderingMoreRows
Minimum number of rows to render when loading more rows.
Default Value: 10
Flag indicating whether sorting is enabled. Type: Default Value: true
The foundset (dataset) that provides the table data. Type: Default Value: {"foundsetSelector":""}
By default horizontal scrollbar is shown as needed. Setting to NEVER will always hide it. Type:
Enable/Disable key bindings. Type:
Minimum height for each row. Type: Default Value: "25px"
Number of rows per page, 0 means infinite scrolling mode. Type: Default Value: 20
Settings for incremental scrolling, see github wiki for more details. Type:
When is set, the height is defined by the number of rows; if the calculated height exceeds 'responsiveHeight', then the later will be used as height. Type: Default Value: false
Height of the table, set only in responsive forms. Type: Default Value: 300
Data provider used to determine the CSS style class for each row. Type:
CSS style classes applied to the selected row. Type: Default Value: "table-servoyextra-selected "
The index of the column used for sorting. Type: Default Value: -1
The current sort direction (e.g. "asc", "desc"). Type:
CSS style classes applied to sorted columns. Type: Default Value: "selected-column "
CSS class for indicating a descending sort. Type: Default Value: "table-servoyextra-sort-down "
CSS class for indicating an ascending sort. Type: Default Value: "table-servoyextra-sort-up "
CSS style classes applied to the table. Type: Default Value: "table"
Tab sequence order for keyboard navigation. Type:
Flag indicating whether the table is visible. Type:
{} foundsetindex The index of the clicked row in the foundset.
{} [columnindex] The index of the clicked column.
{} [record] The record corresponding to the clicked row.
{} [event] The event object associated with the click.
{} [columnid] The identifier of the clicked column.
{} foundsetindex The index of the double-clicked row in the foundset.
{} [columnindex] The index of the double-clicked column.
{} [record] The record corresponding to the double-clicked row.
{} [event] The event object associated with the double-click.
{} [columnid] The identifier of the double-clicked column.
{} foundsetindex The index of the row where the right-click occurred.
{} [columnindex] The index of the clicked column.
{} [record] The record corresponding to the right-clicked row.
{} [event] The event object associated with the right-click.
{} [columnid] The identifier of the clicked column.
{} [event] The event object associated with the resize.
{} event The event object associated with the focus gain.
{} event The event object associated with the focus loss.
{} columnindex The index of the clicked column.
{} sortdirection The desired sort direction.
{} [event] The event object associated with the click.
{} [columnid] The identifier of the clicked column.
Returns: {}
{} columnindex The index of the clicked column.
{} sortdirection The desired sort direction.
{} [event] The event object associated with the click.
{} [columnid] The identifier of the clicked column.
Returns: {}
{} start The starting index of the visible rows.
{} end The ending index of the visible rows.
{} index Index between 0 and columns length -1
Returns: Returns the column object at the specified index, including its properties and configurations.
Returns: Returns the total number of columns currently present in the table.
{} columnIndex The index of the column for which to retrieve the sort class.
Returns: The CSS class representing the sort direction (ascending, descending, or hidden) for the specified column.
Returns: An array containing two elements: the start position and the end position of the visible area.
{} dataproviderid Dataprovider of the column
{} [index] Index between 0 and columns length
Returns: Returns the newly added column object.
Returns: Returns `true` if all columns were successfully removed, otherwise `false`.
{} index Index index between 0 and columns length -1
Returns: Returns `true` if the column was successfully removed, otherwise `false`.
{} [mustExecuteOnFocusGainedMethod] If false will not execute the onFocusGained method; the default value is true
{} columnIndex The index of the column to set as selected.
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type: