> For the complete documentation index, see [llms.txt](https://docs.silkbuilder.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.silkbuilder.com/tags/table.md).

# 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:

```xml
<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.

```xml
<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.

```xml
<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.

```xml
<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.

```xml
<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.

```xml
<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

<sup>\*</sup>Required property.

### id<sup>\*</sup>

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. The values are true, false.\
By default, a table row is not visually selected; change the row color if the host page is the only one visible. If the desire is to have the chosen row always marked selected, then the values should be set to "always."\
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](https://github.com/silkbuider/documentation/tree/master/tags/how_to/server_code_logic.md) 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*.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.silkbuilder.com/tags/table.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.