Table

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

This is a reference page; many components have detailed usage guides here.

Properties

columns

Type: Array<CustomType<servoyextra-table.column>>

---

currentPage

Type: Number Default Value: 1

---

enableColumnResize

Type: Boolean Default Value: false

---

enableMobileView

Type: Boolean

---

enableSort

Type: Boolean Default Value: true

---

foundset

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

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

Type: Dataprovider

---

selectionClass

Type: Styleclass Default Value: "table-servoyextra-selected "

---

sortColumnIndex

Type: Number Default Value: -1

---

sortDirection

Type: String

---

sortStyleClass

Type: Styleclass Default Value: "selected-column "

---

sortdownClass

Type: Styleclass Default Value: "table-servoyextra-sort-down "

---

sortupClass

Type: Styleclass Default Value: "table-servoyextra-sort-up "

---

styleClass

Type: Styleclass Default Value: "table"

---

tabSeq

Type: Tabseq

---

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

• {Number} columnindex

• {JSRecord} record

• {JSEvent} event

• {String} columnid

---

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

• {Number} columnindex

• {JSRecord} record

• {JSEvent} event

• {String} columnid

---

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

• {Number} columnindex

• {JSRecord} record

• {JSEvent} event

• {String} columnid

---

onColumnResize(event)

Parameters:

• {JSEvent} event

---

onFocusGainedMethodID(event)

Parameters:

• {JSEvent} event

---

onFocusLostMethodID(event)

Parameters:

• {JSEvent} event

---

onHeaderClick(columnindex,sortdirection,event,columnid)

@return {string}

Parameters:

• {Number} columnindex

• {String} sortdirection

• {JSEvent} event

• {String} columnid

Returns: {String}

---

onHeaderRightClick(columnindex,sortdirection,event,columnid)

@return {string}

Parameters:

• {Number} columnindex

• {String} sortdirection

• {JSEvent} event

• {String} columnid

Returns: {String}

---

onViewPortChanged(start,end)

Parameters:

• {Number} start

• {Number} end

---

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

scripting type: CustomType<servoyextra-table.column>

• autoResize

  • Type: boolean

  • Default Value: false

• dataprovider

  • Type: dataprovider

• format

  • Type: format

• headerStyleClass

  • Type: styleclass

• headerText

  • 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

  • Type: string

• showAs

  • Type: string

  • Default Value: "text"

• styleClass

  • Type: styleclass

• styleClassDataprovider

  • Type: dataprovider

• valuelist

  • Type: valuelist

• width

  • Type: string

  • Default Value: "auto"

keyCodeSettings

scripting type: CustomType<servoyextra-table.keyCodeSettings>

• arrowDown

  • Type: boolean

  • Default Value: true

• arrowUp

  • Type: boolean

  • Default Value: true

• end

  • Type: boolean

  • Default Value: true

• enter

  • Type: boolean

  • Default Value: true

• home

  • Type: boolean

  • Default Value: true

• pageDown

  • Type: boolean

  • Default Value: true

• pageUp

  • Type: boolean

  • Default Value: true

settings

scripting type: CustomType<servoyextra-table.settings>

• fastScrollLoadThresholdFactor

  • Type: int

  • Default Value: 2.3

• fastScrollRenderThresholdFactor

  • Type: int

  • Default Value: 3

• maxLoadedRows

  • Type: int

  • Default Value: 1000

• maxRenderedRows

  • Type: int

  • Default Value: 450

• minBatchSizeForLoadingMoreRows

  • Type: int

  • Default Value: 20

• minBatchSizeForRenderingMoreRows

  • Type: int

  • Default Value: 10

---