Table Grid control

The Table grid control is a Display control that is used to fetch the data from a Sheet or connector or any other data source and display the contents in a tabular grid format.

Table Grid Properties


  1. Type : The Type field is automatically generated depending upon the type of control used. In this case, it is a “list” type.

  2. Unique Name : A Unique Name is used to uniquely identify a control in your App. Every control that is added on the screen gets an auto-generated Unique Name on the basis of the Label name given to the control.

  3. Label : Label is the text that is displayed above the control and helps the user to understand the purpose of the Table Grid Control.

    • Hide Label : This option hides the label of the control from the view.
  4. Tooltip: This allows you to add the Tooltip text that would provide a hint to the user for providing input. The Tooltip icon would be visible if you switch on the Show tooltip icon toggle property available below.

  5. Description: Is the description that you can add for your controls. The Description would only be visible if you switch on the Show Description toggle property available below.

  6. External CSS: With this property, one can imply exclusive CSS on controls. You can customize your control with CSS by selecting the correct class or id of the control. You can read more here.

  7. Generic :

    • Caching : When the caching option is selected and if a LOOKUP formula is applied to this control, the state that the LOOKUP returns will be cached and the user will be able to see this state of the field even when user accesses the microapp later with no connectivity. This option is required when you want your app to be accessible in offline mode as well and getting the latest data from the sheets always is not critical.

    • Hidden : The hidden option helps you to hide the field from the user. This might help to perform some computation you don’t want the user to see or if you want to show certain fields only when a specific condition is met/not met.

    • Trigger dependents: When you Disable Trigger Dependents, it helps you to reduce or optimize the unnecessary evaluation of the dependent control’s formula. For a detailed explanation refer to this article here ..By default, Trigger dependents is enabled. However, in complex apps by switching it off, you would limit the evaluation in the dependent control and in turn ensure quicker response times.

  8. Grid Configuration :

    • Hide on desktop: This option hides the selected control in the desktop view.

    • Hide on Mobile : This option hides the selected control in the mobile view.

    • Dynamic Height : This option dynamically increases /decreases the height of the text control based on the given content.

    • Maintain space when hidden : This option maintains the specified space between controls when a particular control is hidden. When a control is hidden the space is maintained in the preceeding control depending on the space the previous control has occupied.

Note: Dynamic height, Hide on Mobile, Hide on Desktop, Maintain space when hidden properties are used in Freeflow Editor only.

  • Properties : These properties help you customize the Label by changing the text size, weight ( Light, Normal, Bold, Extra Bold, X Extra Bold), alignment (Left, Center, Right, Justified) and color of the label.

Top bar

  1. Searchbar: This is used to Toggle ON or OFF to Show the Searchbar.

  2. Buttons:

    • Column reorder and visibility: This toggle button on ON/OFF enables you to reorder the columns and toggle the visibility of columns on the client-side of the app.
      column reorder button

      NOTE: If the visibility of the columns during configuration is set to off then it won’t be visible in the client-side app to toggle it on for visibility.

    • Add: This is used to specify the buttons to be displayed. You can add the button for Add, update, delete, download, refresh, filters, quick filter, and row size. You would have to add the actions for the respective buttons under Actions.

    • Update: Select row/s and click Update to modify the record. You need to specify under Actions, the exact action flow to update the selected record.

    • Delete: Select row/s and click Delete to delete the selected record. You need to specify under Actions, the exact action flow to delete the selected record.

    • Download File Name: Allows you to specify the default file name for the CSV file downloaded from the table grid.

    • Refresh: This will refresh the data in the Table grid depending upon the actions performed.

    • Filters: If you are applying Filter to the data you will get the following view wherein you can choose the filter and click Apply. The data would be displayed according to your selection.

      You also get a check button of Persistent this helps you to maintain the effectiveness of the filters provided even after a refresh of the tablegrid control as well as reopening the app with the tablegrid control. The filters with the persistent button checked are user-specific, meaning that filters applied by a user will be visible to that particular user only.

    • Quick Filter: Allows you to add a quick filter for the selected column. After you toggle to switch ON the Quick filter option you need to select the column here based on which the filter is to be applied.

      Quick filter would be applied on columns that are of type Single Tag or Multi-Tag.

    • Row Size: This adds the option to change the row size as small, medium, or large.

  3. Choose columns that will be editable: This property helps you to choose one or more than one column from the table grid and make it editable. With this, you can edit and make changes in the columns of the table grid from the end-user side of the app after the publishing of the app.

    You can read more about it here.


These are the table setting to configure the header and data with regard to the font and theme.

  1. Table Header: Here you would be specifying the Font size and Font Weight for the Table header.

  2. Table Data: Here you would be specifying the Font size and Font Weight for the Table data.

  3. Theme: This allows you to specify the Theme for the table grid.

  4. Column width: This allows you to specify the maximum and minimum width of the columns.


  1. Views: Under Views you can select the views as Map view and Detailed View and configure the related properties for the select view type. Moreover, you can also define whether a thumbnail of the image column in your table grid would be shown.

    • Map : This lets you toggle on or off the Map view to display data like the co-ordinates on a Map. So if you select Map view it can be shown as List or Map view as well.

      • Default view: This allows you to select the default view as Map or List.
    • Show Thumbnails: Enable Show Thambnails when you want your Images to be displayed as thumbnails. The column would be of type File. If it contains PDFs the PDF file icon would be shown.

    • Detailed view: This allows you to switch ON or OFF to show data in the Detailed view of your sheet data. Whenever you click any of the records it would display the row data as a detailed view.

      The default look of the Table grid provides a tabular presentation in the regular row-column format. However, with the Detailed View enabled, the Detailed view icon is displayed against each row.

      The following detailed view properties can also be set.

      • Show Key Value Map: This would display the selected row as a key-value map instead of the default grid (as seen in above screenshot).
      • Customize By switching on Customize, you can customize the columns shown in the detailed view. By default all columns are shown, however, you can select a limited number as well if you want to give a quick look at the data.
      • Select column: When you enable Customize property above, you can then select the columns to be displayed in the Detailed view.
    • Group data: Enable to Group your Data and select the column to Group By. The rows would appear in the Accordion Style selected.

      gropu data

      • Group by: Allows you to select the column to group by.
    • Show Aggregation Footer: This checkbox allows you to generate an aggregate value of different distinct information such as unique values, the number of values, the sum of values, empty values, checked values, and more, then displays the result at the bottom of its respective columns.
      Once toggled on you can see the option as well as a button on hover to calculate values at the bottom of each column.

      There are four different types of dropdown menus to calculate values for text type, toggle type, date type, and number type of data.

    Column Type Aggregate Functions
    1. Text Type None, Count all, Count values, Count unique values, Count empty, Count not empty
    2. Number Type None, Count all, Count values, Count unique values, Count empty, Count not empty, Sum, Average, Median, Min, Max, Range
    3. Toggle None, Count all. Checked, Unchecked
    4. Date None, Count all, Count values, Count unique values, Count empty, Count not empty, Earliest date, Latest date, Date Range
    • Freeze Columns: This property enables you to select the number of columns from the table grid control which you want to appear as frozen in tablegrid control while doing horizontal scrolling on it.

    • Fit height to screen: Enable to set the Height of the Table grid to fit the screen. During pagination, the table fits the screen and you can scroll within the table within the area.
      On grid layout if you have stretched the control height more than page than fit to height will leave some extra wight space before starting the next control.

      fit to screen

    • Checkbox: This allows you to add a single select or multi-select check box in your table grid data. It has options as Yes (with single select), Yes (with multi-select), and No.

      • No: This would not show the checkbox type for the table grid rows.
      • Yes (With Single Select): This restricts you to select only a single row from the table grid with a checkbox style.
      • Yes (with Multiselect): This enables you to select multiple rows from the table grid with a checkbox style.
      • Accordion Style: Allows you to select the accordion style to display the grouped data. You can set it to All open, All Close, First Open.
  2. Pagination: This allows you to enable pagination for your data. When you allow pagination some more properties would be added to your list of properties. You can have Limit Offset based pagination or Cursor Based Pagination.

    pagination types

    Typically for connectors that support Cursor-based pagination like that for Airtable, you would have to make sure that you select type as Cursor Based Pagination and use the OFFSET key from the respective Connector. For more details on cursor-based pagination, refer to this article here.

    Note: When the pagination is enabled your Filter and the Search features do not work on the columns. However, if you disable pagination you would note that the search provides you with the rows matching the search text. The Filter featured would also allow you specify the filter conditions.

  • Rows per page: This allows you to set the index value of the default selected row.

  • Default offset: This allows you to set the default Offset to start pagination from.

  • Default selected row: Is the row selected by default on loading of the data.

  • Height: This allows you to set the height for the table grid control.


    • Visible: By default you can set the visible rows and columns to specify the height of the control.


This allows you to select the actions for each of the action buttons added to the table grid.

  • On Row click: This is the default action on click of the Table grid row. You can Navigate to another page, Select a Row, or Show details


If you select the Navigate with Selection action you would be able to further define the navigation

  • Type as Navigate (With validation) or Navigate (Without validation).

  • To: Specify the page/ screen to navigate to.

  • Transition: You can specify the transition style for your page when navigating.

The remaining Actions (Action 1, Action 2…) allow you to set the actions that would be performed when the row/s are selected. To add a custom action, you can add a Action Text and select a color for the Action Text . Now to further define the action to be taken, click Actions button. The list of actions is opened where you can select your action number and define the steps. Steps could include Communication actions like call, email, sms, Navigation actions like OpenURL, navigate to screen, ExitApp, Submission actions like Call workflow, Delay, Reset pages, Validate pages, Confirm popup, and Call API. The Custom Actions can also be defined to initiate actions other than those mentioned earlier.

  • Text: Is the text that appears when you hover over the action item.

  • Icon: Allows you to select the Icon for the action.

  • Color: Allows you to add the color of the icon

  • Show on: Allows you to set when the action should be shown. It can be Single-select, Multiselect, or Both.

  • Show on hover: Allows you to set whether the action or action icon would be shown when you hover over the selected row.

  • Add as column: This adds the action as a column which can then be selected by you to trigger further action. It will appear as the action text in the last column by default but you can set the position for the column to display in your table grid control using Column Index of Action by specifying the position for the column to be added in numeric value.


How to Use a Table Grid Control?

Start with selecting the Table Grid Control from the Display section of the Controls Menu.

The Table Grid Control will then appear on the screen in the builder, you can then set all the above properties as per your requirements.

You can use the data option to bind data to Table Grid Control. You can learn more about validations here. There are different ways in which you can bind data.

  1. Static Data: You can add Static data as an array of objects like the one shown in this example here:
         "id": 1,
         "name": "Carlyn Bartle",
         "email": ""
        "id": 2,
        "name": "Murry Rowsel",
        "email": ""
  1. Sheets : This allows you to get value from a sheet and display it in the control.

  2. Controls: You can select Controls to fetch data from for the Table grid control.

  3. Variables and Keywords: You can make use of the Variables and Keywords to get data for the table grid control.

  4. Query String: This assigns the value returned by the Query string.

  5. Logged In User: This allows you to select properties for the Logged In user like UserName, UserMail that would be the data for the table grid

  6. Connectors: This allows you to add a Connector and select the values returned by the respective Connectors. You can select multiple keys to display values in the detail view.

  7. Custom Formula:: This can be used to apply formulas and use the output of those formulas to set the control. You can learn more about formulas here.

Format Data

After you select the source of your table grid data, you can also apply formatting to the rows and columns based on conditions. Refer to this article here to know more about Formatting columns and rows for your table grid control.


Without Pagination


With pagination

Using Hide on Mobile

Using the Format Data

To further understand how to use the Table grid control you can go through the article here and have a look at the following video.