# Table

The Table Class provides properties, methods, and events to interface with the HTML generated by the `<silk:Table>` tag.

**Kind**: global class

## Properties

| Name              | Type     | Description                                                                                     |
| ----------------- | -------- | ----------------------------------------------------------------------------------------------- |
| $table            | `Object` | jQuery object referencing the table HTML tag container.                                         |
| $tableSearchInput | `Object` | jQuery object referencing the search text input element. Get the parameters `index` and `item`. |

## Constructor

### new Table(id, option)

Returns a Table instance.

| Param                    | Type      | Default | Description                                                                                                                                                              |
| ------------------------ | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| id                       | `String`  |         | Unique identifier.                                                                                                                                                       |
| option                   | `Object`  |         | Object containing the configuration.                                                                                                                                     |
| \[option.dataSource]     | `String`  |         | Unique identifier of the dataProvider used to fill the                                                                                                                   |
| \[option.autoSelect]     | `Boolean` | `true`  | If true, the table will automatically load the data from the dataProvider. If false, it will wait for the select command.                                                |
| \[option. targetPage]    | `String`  |         | Unique identifier of the page which will become active when a row is selected.                                                                                           |
| \[option.header]         | `String`  | `fixed` | Defines the header location: `fixed` Attaches the header to the top of the page. `inline` Attaches the header to the top of the table location. `none` No header.        |
| \[option.treeData]       | `Boolean` | `false` | Indicates if the data should be treated as a tree structure. If the dataProvider is set as *treeData=true*, then the table inherits the value.                           |
| \[option.rootLabel]      | `String`  |         | The label used to display in the root row.                                                                                                                               |
| \[option.noRoot]         | `Boolean` | `false` | Defines if the Root will be an editable row. The default is NO.                                                                                                          |
| \[option.multiRoot]      | `Boolean` | `false` | Defines if the tree will support multiple root branches. The default is NO, just one root.                                                                               |
| \[option.iconOpen]       | `String`  |         | The icon showing an open branch if treeData is true. The default value is `fa-regular fa-folder-open fa-lg` from Fontawesome.                                            |
| \[option.iconClose]      | `String`  |         | The icon showing a close branch if treeData is true. The default value is `fa-solid fa-folder-closed fa-lg` from Fontawesome.                                            |
| \[option.iconEmpy]       | `String`  |         | The icon showing an end branch if treeData if true. Empty by default.                                                                                                    |
| \[option.collapsable]    | `Integer` |         | Indicates the tree can collapse.                                                                                                                                         |
| \[option.collapsedLevel] | `Integer` |         | Indicates the number of open levels. Other levels will remain closed.                                                                                                    |
| \[option.selectable]     | `Boolean` | `true`  | If true, the row will change color when selected.                                                                                                                        |
| \[option.dpSearch]       | `Boolean` | `false` | If false, the search is done in the loaded data. If true, the search leads to a dataProvider select call. It can also receive the name of the DataProvider to be loaded. |
| \[option.input]          | `Boolean` | `false` | If true, it will create input fields for the configured columns.                                                                                                         |
| \[option.toggleList]     | `String`  |         | The list of comma-separated elements that will be toggled together with the component.                                                                                   |

## Methods

### addColumn(column)

Adds a column object to the columns array. This also adds the header.

**Kind**: instance method of [`Table`](#Table)

| Param  | Type     | Description       |
| ------ | -------- | ----------------- |
| column | `Object` | The column object |

### addComponent(component)

Adds a new component to the components array.

**Kind**: instance method of [`Table`](#Table)

| Param     | Type     | Description           |
| --------- | -------- | --------------------- |
| component | `Object` | The component object. |

### buildHeaders()

Generates the table's columns using the loaded Column objects.

**Kind**: instance method of [`Table`](#Table)<br>

### cleanColumns()

Clean the columns array.

**Kind**: instance method of [`Table`](#Table)<br>

### cleanHeaders()

Clean the headers from

**Kind**: instance method of [`Table`](#Table)<br>

### clearSearchText()

Clears the content of the search text input.

**Kind**: instance method of [`Table`](#Table)<br>

### filterData(searchText)

Filters the table's rows based on the provided text. In the case of `dpSearch="true"`, a select method will be called, and the dataProvider should receive the search text in a parameter. The search input functionality activated by `searchable="true"` uses this method.

**Kind**: instance method of [`Table`](#Table)

| Param      | Type     | Description                            |
| ---------- | -------- | -------------------------------------- |
| searchText | `String` | The text used to filter the table rows |

### getChildren(pkValue) ⇒ `Array`

Returns an array containing the generational children of a record.

**Kind**: instance method of [`Table`](#Table)

| Param   | Type      | Description                        |
| ------- | --------- | ---------------------------------- |
| pkValue | `pkValue` | The primary key value to evaluate. |

### getColumns() ⇒ `Array`

Gets the columns array

**Kind**: instance method of [`Table`](#Table)<br>

### getComponents() ⇒ `Array`

Gets the loaded component array.

**Kind**: instance method of [`Table`](#Table)<br>

### getDataSource() ⇒ `Object`

Gets a reference to the dataSource.

**Kind**: instance method of [`Table`](#Table)<br>

### getDeleteBranch() ⇒ `Boolean`

Returns if the tree will allow a branch to be deleted. By default, only leaves are to be deleted. It is the developer's responsibility to program the deletion of children's branches or leaves.

**Kind**: instance method of [`Table`](#Table)<br>

### getID() ⇒ `String`

Returns the component's unique identifier.

**Kind**: instance method of [`Table`](#Table)<br>

### getInputs({Function)) ⇒

Returns an array containing an array of input objects. If a function is provided, this will be executed for each row. The function will receive an object containing the inputs as a parameter.

**Kind**: instance method of [`Table`](#Table)\
**Returns**: Array

| Param      | Description                                                                     |
| ---------- | ------------------------------------------------------------------------------- |
| {Function) | inputProcessor - An optional function, will be called for each input processed. |

### getNoRoot() ⇒ `Boolean`

Returns if the table should limit the root.

**Kind**: instance method of [`Table`](#Table)<br>

### getPkColumn() ⇒ `String`

Gets the data primary key.

**Kind**: instance method of [`Table`](#Table)<br>

### getPkValue() ⇒ `String`

Gets the primary key's value of the selected row.

**Kind**: instance method of [`Table`](#Table)<br>

### getSearchText() ⇒ `String`

Get the text typed in the search text input.

**Kind**: instance method of [`Table`](#Table)<br>

### getSelectedItem(columnName) ⇒ `Object` | `String`

Returns the selected item object, or the column's value if a columnName is provided.

**Kind**: instance method of [`Table`](#Table)

| Param      | Type     | Description                             |
| ---------- | -------- | --------------------------------------- |
| columnName | `String` | The column's value to return. Optional. |

### hide()

Hides the table component.

**Kind**: instance method of [`Table`](#Table)<br>

### isTreeData() ⇒ `Boolean`

Returns if the table is set to evaluate a tree data structure.

**Kind**: instance method of [`Table`](#Table)<br>

### length() ⇒ `Integer`

Returns the number of rows loaded in the

**Kind**: instance method of [`Table`](#Table)<br>

### load(action, index)

The method retrieves data from the data provider and generates the table's rows.

**Kind**: instance method of [`Table`](#Table)

| Param  | Type      | Description                                             |
| ------ | --------- | ------------------------------------------------------- |
| action | `String`  | Indicating what action to load: insert, update, delete. |
| index  | `Integer` | The position where the data will be loaded.             |

### on

Load events to respond to the tables's interactions. To set an event, use this code: `Table.on(<eventName>, function(){<code>})`.

**Kind**: instance property of [`Table`](#Table)

| Param         | Type       | Description                   |
| ------------- | ---------- | ----------------------------- |
| eventName     | `String`   | The event's name.             |
| eventFunction | `function` | The function to be triggered. |

### refreshRow(trIndex, dpIndex)

Reload the data for the selected row by default, or the indicated row.

**Kind**: instance method of [`Table`](#Table)

| Param   | Type      | Description                         |
| ------- | --------- | ----------------------------------- |
| trIndex | `Integer` | The row index within the table row. |
| dpIndex | `Integer` | The row index in the dataProvider.  |

### removeColumn(column)

Removes a column object to the columns array. This also removes the header.

**Kind**: instance method of [`Table`](#Table)

| Param  | Type     | Description       |
| ------ | -------- | ----------------- |
| column | `Object` | The column object |

### selectDown()

Selects the row below the currently selected row.

**Kind**: instance method of [`Table`](#Table)<br>

### selectRow(index)

Selects the row in the table using the provided index. If the property *selectedIndex* is manually changed, this method can be called without the parameter for visual synchronization.

**Kind**: instance method of [`Table`](#Table)

| Param | Description         |
| ----- | ------------------- |
| index | The table row index |

### selectUp()

Selects the row above the currently selected row.

**Kind**: instance method of [`Table`](#Table)<br>

### setInputs(inputStatus)

Switch the column's input status, or set the input to the provided status. If *true* is provided, it activates the inputs. If *false* is provided, it deactivates the inputs. This only works in columns set as input holders.

**Kind**: instance method of [`Table`](#Table)

| Param       | Description       |
| ----------- | ----------------- |
| inputStatus | The input status. |

### setRootLabel()

Sets the root label if treeData is true;

**Kind**: instance method of [`Table`](#Table)<br>

### setSearchText(text)

Sets the text of the search text input.

**Kind**: instance method of [`Table`](#Table)

| Param | Type     | Description         |
| ----- | -------- | ------------------- |
| text  | `String` | The new input text. |

### setSelectedItem(columnName, value)

Sets the value of the provided column in the selected row.

**Kind**: instance method of [`Table`](#Table)

| Param      | Type     | Description              |
| ---------- | -------- | ------------------------ |
| columnName | `String` | The column to be updated |
| value      | `String` | The new value            |

### setTreeIcons(open, close, empty)

Sets the tree icons programmatically. This overwrites the default icons.

**Kind**: instance method of [`Table`](#Table)

| Param | Type     | Description                             |
| ----- | -------- | --------------------------------------- |
| open  | `String` | The icon representing the open status.  |
| close | `String` | The icon representing the close status. |
| empty | `String` | The icon representing a final branch.   |

### show()

Shows or unhides the table component.

**Kind**: instance method of [`Table`](#Table)<br>

### size() ⇒ `Integer`

Returns the number of rows in the

**Kind**: instance method of [`Table`](#Table)<br>

### sort(column)

Sorts the data by the provided column

**Kind**: instance method of [`Table`](#Table)

| Param  | Type     | Description    |
| ------ | -------- | -------------- |
| column | `String` | Column to sort |

### syncHeader()

Syncronizes the tables header with the columns width.

**Kind**: instance method of [`Table`](#Table)<br>

### toggle(status)

Toggles the component between hidden and showing. If the parameter is *true*, the component will be shown. If the *false*, the component will be hidden.

**Kind**: instance method of [`Table`](#Table)

| Param  | Type      | Description                            |
| ------ | --------- | -------------------------------------- |
| status | `boolean` | (Optional) True shows and false hides. |

### toggleSearch(mode, reload)

Toggle the search input from visible to hidden. It requires the property `searchable="true"`.

**Kind**: instance method of [`Table`](#Table)

| Param  | Type      | Description                                                            |
| ------ | --------- | ---------------------------------------------------------------------- |
| mode   | `Boolean` | The logic condition. True shows and false hides.                       |
| reload | `Boolean` | (Optional) If true, it clears filtering if the search input is hidden. |

## Events

### on:afterLoad

This event is triggered after the table content has been loaded and its content displayed. Created with the `Table.on("afterLoad", function(){})` method.

**Kind**: event emitted by [`Table`](#Table)<br>

### on:beforeLoad

This event is triggered before the table content is loaded. Created with the `Table.on("beforeLoad", function(){})` method.

**Kind**: event emitted by [`Table`](#Table)<br>

### on:click (coldIndex, dbIndex, realClick, mouseEvent)

This event is triggered when a row is clicked. Created with the `Table.on("click", function(colIndex, dpIndex, mouseEvent){})` method.

**Kind**: event emitted by [`Table`](#Table)

| Param      | Type      | Description                                                         |
| ---------- | --------- | ------------------------------------------------------------------- |
| coldIndex  | `Integer` | The column clicked. The first one is 0.                             |
| dbIndex    | `Integer` | The dataProvider index of the selected row.                         |
| realClick  | `Boolean` | Returns true if the "click" has been triggered by a physical click. |
| mouseEvent | `Object`  | The mouse click even object.                                        |

### on:dataInput

This event is triggered while the input is being generated. If the event's function returns an object, it will be saved as a JSON String in the input's property 'data-json' for use in post operations. Created with the `Table.on("dataInput", function(dpIndex,pdItem,inputType){})` method.

**Kind**: event emitted by [`Table`](#Table)<br>

### on:dragDrop

This event is triggered when a dragged row is dropped over a row area. The event function provides the column index, row index, data provider item, and the mouse event. Created with the `Table.on("dragStart", function(columnIndex, rowIndex, dpItem, event ){})` method. Created with the `Table.on("dragStart", function(columnIndex, rowIndex, dpItem, event ){})` method.

**Kind**: event emitted by [`Table`](#Table)<br>

### on:dragEnter

This event is triggered when a dragged row enters another row area. The event function provides the column index, row index, data provider item, and the mouse event. Created with the `Table.on("dragStart", function(columnIndex, rowIndex, dpItem, event ){})` method.

**Kind**: event emitted by [`Table`](#Table)<br>

### on:dragLeave

This event is triggered when a dragged row leaves a row area. The event function provides the column index, row index, data provider item, and the mouse event. Created with the `Table.on("dragStart", function(columnIndex, rowIndex, dpItem, event ){})` method.

**Kind**: event emitted by [`Table`](#Table)<br>

### on:dragOver

This event is triggered when a dragged row is over another row area. The event function provides the column index, row index, data provider item, and the mouse event. Created with the `Table.on("dragStart", function(columnIndex, rowIndex, dpItem, event ){})` method.

**Kind**: event emitted by [`Table`](#Table)<br>

### on:dragStart

This event is triggered when a row begins to be dragged. The event function provides the column index, row index, data provider item, and the mouse event. Created with the `Table.on("dragStart", function(columnIndex, rowIndex, dpItem, event ){})` method.

**Kind**: event emitted by [`Table`](#Table)<br>

### on:error

Event triggered after an error. Created with the `Table.on("error", function(){})` method.

**Kind**: event emitted by [`Table`](#Table)<br>

### on:filterLoad

This event is triggered before a row item is added to the table content. If the event function returns *false*, the item is ignored and not added. Created with the `Table.on("filterLoad", function(index,item){})` method.

**Kind**: event emitted by [`Table`](#Table)<br>

### on:renderInput

This event is triggered before each input is generated. If the event function returns *true*, the input will be created. If it returns *false*, it will not render an input. If the event returns a text value, the input will be generated, and the provided text is used to define the input's type. The text can contain an added mask separated by a pipe symbol. If the event returns undefined, the input is also generated. Created with the `Table.on("renderInput", function(value,pdIndex,dpItem){})` method.

**Kind**: event emitted by [`Table`](#Table)<br>

### on:searchText (text)

This event is triggered when the search input text changes. It is used to evaluate the text entered in the search input. If the event function returns a value, it will be used to replace the original search value. Created with the `Table.on("searchText", function(){})` method.

**Kind**: event emitted by [`Table`](#Table)

| Param | Type     | Description       |
| ----- | -------- | ----------------- |
| text  | `String` | The entered text. |

### on:textSelection (text)

Triggered when a text has been selected in a table row. Created with the `Table.on("textSelection", function(text){})` method.

**Kind**: event emitted by [`Table`](#Table)

| Param | Type     | Description        |
| ----- | -------- | ------------------ |
| text  | `String` | The selected text. |

### on:toggle

This event is triggered when the table's visibility changes. Created with the `Table.on("toggle", function(toogleStatus){})` method. This event is triggered when the methods show, hide, and toggle are used. If the event function returns true or false, it will overwrite the toggle requested. Not returning a value preserves the original requested status.

**Kind**: event emitted by [`Table`](#Table)<br>

### on:visualSelection (coldIndex, dbIndex, realClick, mouseEvent)

This event is triggered when a row is clicked and will be marked selected. Created with the `Table.on("visualSelection", function(colIndex, dpIndex, mouseEvent){})` method.

**Kind**: event emitted by [`Table`](#Table)

| Param      | Type      | Description                                                         |
| ---------- | --------- | ------------------------------------------------------------------- |
| coldIndex  | `Integer` | The column clicked. The first one is 0.                             |
| dbIndex    | `Integer` | The dataProvider index of the selected row.                         |
| realClick  | `Boolean` | Returns true if the "click" has been triggered by a physical click. |
| mouseEvent | `Object`  | The mouse click even object.                                        |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.silkbuilder.com/js_object/table.js.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.