class Table

Extends:

UIComponent

Description:

A Table UI component displays data in a structured grid of rows and columns, making it easy to read, sort, and interact with.
It supports features like column resizing, column reordering, sorting, filtering, multiple data types and more.

Column object format is shown in example below. Rows are arrays of values (cells), each value for a corresponding column. Row cell data type must match the data type required for it's column type.

Constructor

constructor([text])

Create Table UI component.

Parameters:

Members

• [ static enum ] AutoResize
• [ static enum ] GridLines
• [ static enum ] Sorting
• [ static enum ] SortOrder
• [ readonly ] columnCount
• [ readonly ] container
• [ readonly ] id
• [ readonly ] parent
• [ readonly ] rowCount
• [ readonly ] screenPosition
• [ readonly ] selectedRows

Methods

From this class:

• addColumn()
• addRow()
• autoResizeColumns()
• canReorderColumns()
• cellAt()
• cellEditing()
• clicksToEdit()
• column()
• columns()
• columnVisible()
• filter()
• gridColor()
• gridLines()
• headerEnabled()
• headerSize()
• moveColumn()
• onColumnEvents()
• onRowEvents()
• onSort()
• removeColumn()
• removeRow()
• row()
• rowBackground()
• rows()
• rowSize()
• rowStyle()
• scrollToIndex()
• selectedCell()
• selectedIndex()
• selectedValue()
• selectionMode()
• sortOrder()
• triStateSorting()
• valueAt()

Inherited from UIComponent:

• addTo()
• anchor()
• background()
• border()
• bottom()
• center()
• color()
• contextMenu()
• cursor()
• destroy()
• dragAction()
• dragData()
• dragDataType()
• dropAction()
• dropDataType()
• dropMode()
• emit()
• emitFocusKeyEvents()
• enabled()
• focusable()
• focused()
• font()
• getAncestor()
• getWindow()
• height()
• hide()
• icon()
• index()
• isInside()
• layer()
• maxSize()
• minSize()
• move()
• onAction()
• onAncestorEvents()
• onChange()
• onComponentEvents()
• onContainerEvents()
• onDispose()
• onDragEvents()
• onDropEvents()
• onError()
• onFocusEvents()
• onKey()
• onMouseEvents()
• onMouseMotion()
• onMouseWheel()
• onPropertyChange()
• onScroll()
• opacity()
• position()
• remove()
• right()
• scrollbars()
• scrollBarSize()
• scrollIncrement()
• scrollPosition()
• selectAll()
• selection()
• size()
• smoothScrolling()
• snapshot()
• text()
• tooltip()
• updateUI()
• verifyComponent()
• visible()
• width()
• x()
• y()

Examples:

Format of a column object:

{
    text: string,           // (Required) The text to be displayed in the column header.
    type: string,           // Type of component to use to display/edit cell data. Here is a list of possible types:
                            //   "text" (Default) - Plain text or HTML. WARNING: Images in HTML content get loaded from source each time they are drawn, so loading images from the web is discouraged.
                            //   "password" - A masked password text field.
                            //   "textarea" - A multi-line text field.
                            //   "icon" - Image loaded from a cell value source (relative/absolute local path or URL). To receive click events register callback using table.onAction(callback); e.type will be "button".
                            //   "button" - String of button names separated by "|" character. To receive click events register callback using table.onAction(callback); e.type will be "icon".
                            //   "checkbox" - `true` and `false` value selection component using a check mark.
                            //   "combobox" - A drop down list of values. Can be editable to add custom value.
                            //   "progress" - A progress bar that visually displays an integer cell value between 0 and 100.
    sorting: Table.Sorting, // Table.Sorting.None disables sorting for the given column, other values of Table.Sorting specify the type of sorting to use. Table.Sorting.Natural is default.
    icon_size: number,      // For "icon" column type it specifies the fixed height of width of the icon (which ever is larger), resizing it while maintaining aspect ratio.
    cache_capacity: number, // For "icon" column type it specifies the amount of images cached in RAM so they don't have to be loaded from source each time they are drawn on the screen. Default is 10.
    resizable: boolean,     // Indicates whether user should be able resize the column.
    auto_resize: boolean,   // indicates if this column should be auto-resized when table is resized. Note that this is ignored when table's auto resize is set to Table.AutoResize.None.
    primary: boolean,       // Indicates that the column contains data that should be dragged when drag-dropping is enabled (e.g.. FileList, URL, etc).
    width: number,          // Sets a desired initial width of the column.
    min_width: number,      // Sets a minimum width that the column can be resized to.
    max_width: number,      // Sets a maximum width that the column can be resized to.
    hidden: boolean,        // When set to `true`, the column is not visible (width is 0 pixels). To show hidden column set this property to `false`. Default is `false`.
    character: string,      // For column type "password" it sets a text character to use as a masking character.
    editable: boolean,      // Sets whether text fields should be editable (usually by double clicking on them).
    clicksToEdit: boolean,  // Specifies after how many quick clicks on text editing cells they become editable (For example 1, 2, or 3). Only has affect if the column is editable.
    options: string[]       // For "combobox" type of column specifies a list of values to show in the combobox list.
}

// NOTE: When adding a new column, only "text" is required for the column, other properties are optional.