Table

The component silk:Table visualizes data from a silk:DataProvider in a tabular format with columns and rows.

Tag Definition

Used as a container:

<silk:Table
  id=""
  title=""
  cssClass=""
  dataSource=""
  autoSelect="true"
  selectable="true"
  targetPage=""
  header="fixed"
  treeData="undefined"
  rootLabel=""
  noRoot="false"
  multiRoot="false"
  deleteBranch="false"
  iconOpen="far fa-folder-open fa-lg"
  iconClose="far fa-folder  fa-lg"
  iconEmpty="far fa-file fa-lg"
  collapsable="true"
  collapsedLevel="100"
  parentList=""
  searchable="false"
  dpSearch="false"
  input="false"
  renderIf=""
  init="true"
  toggleList=""
>
   Contains: silk:Column, silk:Header, and silk:Body components.
</silk:Table>

Basic Configuration

For a basic configuration, a table only needs an ID, the name of the silk:DataProvider working as the dataSource, and contain the definition of the columns to be displayed. The columns are defined with the silk:Columns component.

<silk:Table id="dataList" dataSource="dataDP" >
<silk:Columns title="Name" />{name}<silk:columns/>
  <silk:Columns title="Address" />{address}<silk:columns/>
</silk:Table>

With a Title

If it is necessary to differentiate the information the table is showing from other components, a title can be added using the title property. This will add a header showing the provided text.

<silk:Table id="dataList" dataSource="dataDP" title="People List" >
<silk:Columns title="Name" />{name}<silk:columns/>
  <silk:Columns title="Phone" />{phoneNumber}<silk:columns/>
</silk:Table>

Searchable

With a large number of rows, it becomes necessary to be able to filter the rows based on a search text criterion. Setting the property searchable to "true" will add a search input to the header. Using this input, the user can enter a text that will be used to filter the rows.

<silk:Table id="dataList" dataSource="dataDP" title="People List" searchable="true" >
<silk:Columns title="Name" />{name}<silk:columns/>
  <silk:Columns title="Phone" />{phoneNumber}<silk:columns/>
</silk:Table>

Header with elements

The component silk:TableHeader is used to add extra elements to the table's header. This works in conjunction with the silk:TableBody component to group the table's columns.

<silk:Table id="dataList" dataSource="dataDP" title="People List" >
  <silk:TableHeader>
    <silk:Button id="" label="" />
  </silk:TableHeader>
  <silk:TableBody>
<silk:Columns title="Name" />{name}<silk:columns/>
  <silk:Columns title="Phone" />{phoneNumber}<silk:columns/>
  </silk:TableBody>
</silk:Table>

Empty Message

The component silk:TableEmpty is used to define a message, or other elements, to indicate that the table does not have rows to display.

<silk:Table id="dataList" dataSource="dataDP" title="People List" >
  <silk:TableBody>
<silk:Columns title="Name" />{name}<silk:columns/>
  <silk:Columns title="Phone" />{phoneNumber}<silk:columns/>
  </silk:TableBody>
  <silk:TableEmpty>
  No records return.
  </silk:TableEmpty>
</silk:Table>

With the use of other properties, the silk:Table component can be configured to be used in multiple scenarios.

Properties

^*Required property.

id^*

The component's unique identifier. Default Value: Empty.

title

The table's title. This is not a required attribute. Default Value: Empty.

cssClass

A list of extra CSS classes styling the table. Default Value: Empty.

dataSource

The ID of the silk:DataProvider used to fill the table content. Default Value: Empty.

autoSelect

Defines if the first row will be auto-selected. This is set to true by default. Default Value: true.

selectable

Determines if the rows will change their background when selected. Default Value: true.

targetPage

This indicates how the header will be placed. The values are: - fixed: Attaches the top header and table header to the page's top. - inline: Attaches the header and table header to the top of the table's location. - none: No top header or table header. - top-fixed: Attached top header to the page's top, no table header. Default Value: Empty.

header

This indicates how the header will be placed. The values are: - fixed: Attaches the top header and table header to the page's top. - inline: Attaches top header and table header to the top of the table's location. - none: No top header or table header. - top-fixed: Attached top header to the page's top, no table header. Default Value: fixed.

treeData

Defines if the table should process the data as a data tree. This value is usually inherited from the DataProvider but can be overwritten with this property if necessary. Default Value: undefined.

rootLabel

Set the label/name of the tree's root. This only works if dataProvider is set to treeData="true". Default Value: Empty.

noRoot

Sets the root to be treated like a "regular row". Only works in data tree mode. Default Value: false.

multiRoot

Sets the tree to support multiple root branches. Only works in data tree mode and when noRoot is true. Default Value: false.

deleteBranch

Defines whether the tree allows a branch to be deleted. By default, only leaves are to be deleted. It is the developer's responsibility to program the child branches or leaves deletion. Default Value: false.

iconOpen

The Font Awesome classes defining the open branch icon. Only works in data tree mode. Default Value: far fa-folder-open fa-lg.

iconClose

The Font Awesome classes defining the close branch icon. Only works in data tree mode. Default Value: far fa-folder fa-lg.

iconEmpty

The Font Awesome classes defining the empty branch icon. Only works in data tree mode. Default Value: far fa-file fa-lg.

collapsable

Sets the branch to be able to collapse or unfold. Only works in data tree mode. Default Value: true.

collapsedLevel

Indicates which level the branch will initially be displayed collapsed. Only works in data tree mode. Default Value: 100.

parentList

The ID of another silk:Table component, whose click row event will trigger a load event in this component. Default Value: Empty.

searchable

Opens a text input to filter the table data based on the entered text. By default, it searches and filters the data that has been loaded. When dpSearch="true" it will search and filter based on conditions set in the ORM. Default Value: false.

dpSearch

If set to true, a search action will trigger the event select in the selected dataSource. The developer should send the search text to the ORM using the beforeSelect event in the silk:DataProvider. Default Value: false.

input

Defines if the table will be initialized in "data entry" mode. Default Value: false.

renderIf

It contains the logic sentence defining whether the component should be rendered. The logic statement's explanation is in the Server Code Logic documentation. Default Value: Empty.

init

Indicates if the table should initialize at creation time. This property should be set to true if it will be initialized programmatically. Default Value: true.

toggleList

The list of comma-separated elements that will be toggled together with the component. The value "parent" toggles the immediate parent element. The value "grandpa" toggles the grandparent element. Default Value: Empty.