--- title: "Interactive table widgets" slug: "interactive-table-widgets" tags: ["App Editor (Route)", "Widget", "Widgets"] updated: 2026-02-10T21:21:07Z published: 2026-02-10T21:21:07Z canonical: "support.tulip.co/interactive-table-widgets" --- > ## Documentation Index > Fetch the complete documentation index at: https://support.tulip.co/llms.txt > Use this file to discover all available pages before exploring further. # Interactive table widgets *Add and modify an Interactive Table widget* In this article, you will learn... - What is an Interactive Table widget? - How to use Interactive Table widgets Note Complete [this tutorial](https://support.tulip.co/docs/building-your-first-table-walkthrough) if you have not yet created a table. ## Add the Interactive Table Widget The Interactive Table widget is found under the **Embed** dropdown in the App Editor Toolbar. ![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/What%20is%20an%20Interactive%20Table%20Widget_410819614.png) ## Datasource The Interactive Table widget can be used to visualize data from the following sources: - **Variable**: Any variable within the App (the variable must be an array of objects). - **Table**: An existing Tulip Table. - **Table Query**: A query within a Tulip Table to return filtered records. ![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/What%20is%20an%20Interactive%20Table%20Widget_410820331.png) ## Linked Record Placeholder / Variable An Interactive Table Widget can also include a Linked Placeholder or variable, depending on datasource. This represents a container for a single object, with an Interactive Table representing a list of Objects. If a linked placeholder or variable is set, selecting a row within the table will load that row of data into the container. ![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/What%20is%20an%20Interactive%20Table%20Widget_421503268.png) ## Columns To add columns, select them from the dropdown list to add them one at a time. Columns are represented by columns in the selected Tulip Table, Table Query, or by object keys in the selected variable. ![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/What%20is%20an%20Interactive%20Table%20Widget_410821336.png) We recommend you **display no more than 20 columns per step** for optimal user experience and app performance. To reorder columns, click and drag the labels in the widget properties. To change the width of the columns, drag the lines of each column in the App Editor or Player. ## Text wrap Text within an Interactive Table cell can be set to wrap. With wrapping enabled, longer-form text will create additional vertical space. With wrapping disabled, text will be shortened with an ellipsis when approaching the column edge. ![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/What%20is%20an%20Interactive%20Table%20Widget_410823482.png) To toggle text wrapping in the header and record text, toggle the switches in the Side Pane. ![Text Wrap.png](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Text%20Wrap.png) ## Select button A select button can be added to the Interactive Table widget to provide additional clarity to which row is selected if a Linked Placeholder/Variable has been added. ![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/What%20is%20an%20Interactive%20Table%20Widget_410823799.png) ## Filters Static or dynamic filters can be added to the Interactive Table widget to filter out data in the interactive table widget. Filters can be set to match *all* or *any* condition and can be compared to Static Value, Variables, application information, and Table Record Field. ![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/What%20is%20an%20Interactive%20Table%20Widget_410824518.png) ## Sorting Sorting the Interactive Table based on a specific column can be set up with the "Sort By" option in ascending or descending order (based on data type). You can also add multiple sorting methods per the columns in the table widget. ![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/What%20is%20an%20Interactive%20Table%20Widget_553512446.png) Columns already added in the **Sort By** option can also be sorted in the player. Click the **^** icon symbol to reverse the sort. ![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/What%20is%20an%20Interactive%20Table%20Widget_553511501.png) ![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/What%20is%20an%20Interactive%20Table%20Widget_553512145.png) Performance Recommendation - Do not sort by filtered columns! In order to ensure a performant app and user experience, we recommend NOT sorting the embedded table by any columns on which the embedded interactive table is filtered by. ## Row index A row index can be added to the Interactive Table widget to indicate the row count on the left side. The row count is specific to the content actively being displayed or rendered by the widget. ![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/What%20is%20an%20Interactive%20Table%20Widget_410824120.png) ## Rows per page The number of rows per page on the Interactive Table widget can be can be adjusted here. Increasing the number of rows beyond a certain number will add vertical scrolling functionality to the widget. ## Triggers Triggers can be configured to run when a row is selected within the Interactive Table widget. To add a trigger, click the **+** button next to the Trigger label in the widget properties menu. Triggers can leverage information from the selected row by setting a Linked Record/Variable and using this within the body of the trigger. ## Font size and pagination font size The font size of the data displayed in the table and the size of the page number labels can be adjusted within the widget properties menu. ![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/What%20is%20an%20Interactive%20Table%20Widget_410825255.png) ## Conditional Formatting In the app editor, **Conditional formatting** enables users to pick table fields as arguments for formatting rules in the interactive table widget Conditional formatting rules shows a **Duplicate** option when there are fewer than 20 rules in the list. ![image.png](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/image%28899%29.png) Learn more about conditional formatting [here](/r230/docs/conditional-formatting). ## Further reading - [How To Use Table Records in the App Editor](https://support.tulip.co/docs/how-to-modify-tables-within-the-app-editor) - [Displaying Interactive Lists of Table Records Or Connector Output in Apps](https://support.tulip.co/docs/displaying-interactive-lists-of-table-records-or-connector-output-in-apps) --- Did you find what you were looking for? You can also head to [community.tulip.co](https://community.tulip.co/?utm_source=intercom&utm_medium=article-link&utm_campaign=all) to post your question or see if others have solved a similar topic! **App Editor** The web interface used for building applications. Where you design a user interface, add logic, and connect your applications to **Tables**. ![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Screen%20Shot%202022-09-13%20at%207.50.23%20AM.png) **Widget Toolbar** The **Widget Toolbar**Is the menu where widgets can be found and added to your application. ![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/toolbar.png) **Variable** **Variables**are a location to store app information. Variables have a specific type that must match the contents they can store. Variables are only accessible within a single application and are cleared when the app is restarted or completed. **Table Query** **Table Queries**are a mechanism to filter and sort **Tulip Tables**. Queries can either be filtered based on static values or dynamically based on app input. Queried data can be displayed directly within the interactive table widget. **Linked Placeholder** **Linked Placeholder**are one of the**Side Pane**settings for the Interactive Table **Widget**and **Record** **History** Widget**.**This setting can be tied to a **Table Record Placeholder,**and when users select a row in the **Widget,**that record is loaded into the mapped **Record Placeholder.** **Object** **Objects**are a Tulip Datatype. Objects represent an arbitrary grouping of attributes. Leveraging objects can simplify the process of working with complex data architectures. Often **Connector** **Functions** will return **Arrays** of **Objects** *ex. My car object has 5 attributes, Color, Make, Model, # of wheels, # of seats.* **Tulip Tables** **Tulip Tables** are a global location to store your production data. **Tables** are made up of **Records** (rows). A single can be accessed from multiple apps or stations at the same time. ![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Tulip%20Tables%20Overview%20-%20Feature%20Overview(1).gif) **Tulip Player** **Tulip Player** is the Windows/Mac executable program where users can run Tulip apps. Tulip player allows you to create a more seamless user experience by removing the need for a web browser, and allows increased IT controls. **Side Pane** **(Context Pane)** The**Side Pane**is the configuration pane on the right side of the **App Editor**where steps, apps, and widgets can be configured. **Triggers**can be added to adjust widget behavior.![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Context%20Pane.png) **Static Value** **Static values**are unchanging values that can be used within Triggers. Static values can be of any **Variable**type. **Variables** **Variables**are a location to store app information. Variables have a specific type that must match the contents they can store. Variables are only accessible within a single application and are cleared when the app is restarted or completed. **Table Record Field** **Table Record Fields**are single columns within a **Tulip Table.****![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Table%20Record%20Field.gif)** **Trigger** **Triggers** are groups of logic that are tied to an app event, such as step open, timer, widget interaction, etc. App builders can add triggers to **widgets**, **machines**, **devices**, **apps**, and **steps**. **Triggers** can contain **actions**, **transitions**, and **conditions**. **Linked Records** **Linked Records**are interconnections between multiple **Tulip Tables.**Fields in one Table can be mapped to another table. Linked records simplify traceability, genealogy, and data association for more advanced Tulip apps and app suites.