Table

(part of package 'Servoy Extra Components') Extends designtime/SolutionModel: JSWebComponent Extends runtime: RuntimeWebComponent

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 here.

Properties

columns

An array holding the column definitions for the table. Type: Array<CustomType<servoyextra-table.column>>

---

currentPage

The current page number in a paginated view. Type: Number Default Value: 1

---

enableColumnResize

Flag indicating whether columns can be resized. Type: Boolean Default Value: false

---

enableMobileView

Flag to enable the mobile view for the table. Type: Boolean

---

enableSort

Flag indicating whether sorting is enabled. Type: Boolean Default Value: true

---

foundset

The foundset (dataset) that provides the table data. Type: JSFoundset Default Value: {"foundsetSelector":""}

---

horizontalScrollbar

By default horizontal scrollbar is shown as needed. Setting to NEVER will always hide it. Type: String

---

keyCodeSettings

Enable/Disable key bindings. Type: CustomType<servoyextra-table.keyCodeSettings>

---

minRowHeight

Minimum height for each row. Type: String Default Value: "25px"

---

pageSize

Number of rows per page, 0 means infinite scrolling mode. Type: FoundsetInitialPageSize Default Value: 20

---

performanceSettings

Settings for incremental scrolling, see github wiki for more details. Type: CustomType<servoyextra-table.settings>

---

responsiveDynamicHeight

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: Boolean Default Value: false

---

responsiveHeight

Height of the table, set only in responsive forms. Type: Number Default Value: 300

---

rowStyleClassDataprovider

Data provider used to determine the CSS style class for each row. Type: Dataprovider

---

selectionClass

CSS style classes applied to the selected row. Type: Styleclass Default Value: "table-servoyextra-selected "

---

sortColumnIndex

The index of the column used for sorting. Type: Number Default Value: -1

---

sortDirection

The current sort direction (e.g. "asc", "desc"). Type: String

---

sortStyleClass

CSS style classes applied to sorted columns. Type: Styleclass Default Value: "selected-column "

---

sortdownClass

CSS class for indicating a descending sort. Type: Styleclass Default Value: "table-servoyextra-sort-down "

---

sortupClass

CSS class for indicating an ascending sort. Type: Styleclass Default Value: "table-servoyextra-sort-up "

---

styleClass

CSS style classes applied to the table. Type: Styleclass Default Value: "table"

---

tabSeq

Tab sequence order for keyboard navigation. Type: Tabseq

---

visible

Flag indicating whether the table is visible. Type: Visible

---

Events

onCellClick(foundsetindex,columnindex,record,event,columnid)

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:

• {Number} foundsetindex The index of the clicked row in the foundset.
• {Number} [columnindex] The index of the clicked column.
• {JSRecord} [record] The record corresponding to the clicked row.
• {JSEvent} [event] The event object associated with the click.
• {String} [columnid] The identifier of the clicked column.

---

onCellDoubleClick(foundsetindex,columnindex,record,event,columnid)

Called when the mouse is double clicked on a row/cell (foundset and column indexes are given)

Parameters:

• {Number} foundsetindex The index of the double-clicked row in the foundset.
• {Number} [columnindex] The index of the double-clicked column.
• {JSRecord} [record] The record corresponding to the double-clicked row.
• {JSEvent} [event] The event object associated with the double-click.
• {String} [columnid] The identifier of the double-clicked column.

---

onCellRightClick(foundsetindex,columnindex,record,event,columnid)

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:

• {Number} foundsetindex The index of the row where the right-click occurred.
• {Number} [columnindex] The index of the clicked column.
• {JSRecord} [record] The record corresponding to the right-clicked row.
• {JSEvent} [event] The event object associated with the right-click.
• {String} [columnid] The identifier of the clicked column.

---

onColumnResize(event)

Called when a column is resized.

Parameters:

• {JSEvent} [event] The event object associated with the resize.

---

onFocusGainedMethodID(event)

Called when the table gains focus.

Parameters:

• {JSEvent} event The event object associated with the focus gain.

---

onFocusLostMethodID(event)

Called when the table loses focus.

Parameters:

• {JSEvent} event The event object associated with the focus loss.

---

onHeaderClick(columnindex,sortdirection,event,columnid)

Called when a header is clicked.

Parameters:

• {Number} columnindex The index of the clicked column.
• {String} sortdirection The desired sort direction.
• {JSEvent} [event] The event object associated with the click.
• {String} [columnid] The identifier of the clicked column.

Returns: {String}

---

onHeaderRightClick(columnindex,sortdirection,event,columnid)

Called when a header is right-clicked.

Parameters:

• {Number} columnindex The index of the clicked column.
• {String} sortdirection The desired sort direction.
• {JSEvent} [event] The event object associated with the click.
• {String} [columnid] The identifier of the clicked column.

Returns: {String}

---

onViewPortChanged(start,end)

Called when the viewport of the table changes.

Parameters:

• {Number} start The starting index of the visible rows.
• {Number} end The ending index of the visible rows.

---

API

getColumn(index)

Gets the column at index. Index is 0 based.

Example:

	myElement.getColumn()

Parameters:

• {Number} index Index between 0 and columns length -1

Returns: CustomType<servoyextra-table.column> Returns the column object at the specified index, including its properties and configurations.

---

getColumnsCount()

Gets the number of columns

Example:

	myElement.getColumnsCount()

Returns: Number Returns the total number of columns currently present in the table.

---

getSortClass(columnIndex)

Determines the CSS class for the sorting indicator of a given column.

Parameters:

• {Number} columnIndex The index of the column for which to retrieve the sort class.

Returns: String The CSS class representing the sort direction (ascending, descending, or hidden) for the specified column.

---

getViewPortPosition()

Gets the start and end positions of the visible area in the viewport.

Returns: Array<Number> An array containing two elements: the start position and the end position of the visible area.

---

newColumn(dataproviderid,index)

Adds new column at specified index. Index is 0 based.

Example:

	var column = myElement.newColumn('dataproviderid')

Parameters:

• {String} dataproviderid Dataprovider of the column
• {Number} [index] Index between 0 and columns length

Returns: CustomType<servoyextra-table.column> Returns the newly added column object.

---

removeAllColumns()

Removes all columns.

Example:

myElement.removeAllColumns()

Returns: Boolean Returns `true` if all columns were successfully removed, otherwise `false`.

---

removeColumn(index)

Removes column from specified index. Index is 0 based.

Example:

myElement.removeColumn(0)

Parameters:

• {Number} index Index index between 0 and columns length -1

Returns: Boolean Returns `true` if the column was successfully removed, otherwise `false`.

---

requestFocus(mustExecuteOnFocusGainedMethod)

Request the focus to the table html element.

Example:

myElement.requestFocus();

Parameters:

• {Boolean} [mustExecuteOnFocusGainedMethod] If false will not execute the onFocusGained method; the default value is true

---

setSelectedHeader(columnIndex)

Sets the selected header column by triggering a header click event for the specified column index.

Parameters:

• {Number} columnIndex The index of the column to set as selected.

---

Types

column

Represents a column in the table. scripting type: CustomType<servoyextra-table.column>

• autoResize

  • Indicates if the column should auto-resize.

  • Type: boolean
  • Default Value: false

• dataprovider

  • The dataprovider linked to this column.

  • Type: dataprovider
• format

  • Format string for displaying the column's values.

  • Type: format
• headerStyleClass

  • CSS style classes applied to the column header.

  • Type: styleclass
• headerText

  • The header text of the column.

  • Type: tagstring
• id

  • Used to identify the column in cell event handlers, because column index can change if columns are added/removed at runtime.

  • Type: string
• initialWidth

  • The initial width of the column when first rendered.

  • Type: string
• showAs

  • Determines how the column value is shown (text, html, etc.).

  • Type: string
  • Default Value: "text"

• styleClass

  • CSS style classes applied to the column cells.

  • Type: styleclass
• styleClassDataprovider

  • Dataprovider that defines dynamic CSS classes for cells.

  • Type: dataprovider
• valuelist

  • The value list used to map column values.

  • Type: valuelist
• width

  • The width of the column.

  • Type: string
  • Default Value: "auto"

keyCodeSettings

Settings for key bindings used in table navigation. scripting type: CustomType<servoyextra-table.keyCodeSettings>

• arrowDown

  • Enable Arrow Down key binding.

  • Type: boolean
  • Default Value: true

• arrowUp

  • Enable Arrow Up key binding.

  • Type: boolean
  • Default Value: true

• end

  • Enable End key binding.

  • Type: boolean
  • Default Value: true

• enter

  • Enable Enter key binding.

  • Type: boolean
  • Default Value: true

• home

  • Enable Home key binding.

  • Type: boolean
  • Default Value: true

• pageDown

  • Enable Page Down key binding.

  • Type: boolean
  • Default Value: true

• pageUp

  • Enable Page Up key binding.

  • Type: boolean
  • Default Value: true

settings

General settings for the table behavior. scripting type: CustomType<servoyextra-table.settings>

• fastScrollLoadThresholdFactor

  • Threshold factor for fast scroll loading.

  • Type: int
  • Default Value: 2.3

• fastScrollRenderThresholdFactor

  • Threshold factor for fast scroll rendering.

  • Type: int
  • Default Value: 3

• maxLoadedRows

  • Maximum number of rows to load.

  • Type: int
  • Default Value: 1000

• maxRenderedRows

  • Maximum number of rows to render.

  • Type: int
  • Default Value: 450

• minBatchSizeForLoadingMoreRows

  • Minimum number of rows to load when fetching additional data.

  • Type: int
  • Default Value: 20

• minBatchSizeForRenderingMoreRows

  • Minimum number of rows to render when loading more rows.

  • Type: int
  • Default Value: 10

---