Page layout — Table

Flow components let us split our app UI into independent, reusable pieces. A page layout in Flow has the following components:

Content – Hidden | Presentation | List | Outcomes | Image
Input – Input | Radio | Checkbox | Toggle | Text | Rich Text | Combobox
Data – File Upload | Table | Files | Tiles
Charts – Bar | Line | Pie | Doughnut | Polar Area


You can use the Table page component to display objects in tabular form.

Here is how a default table is rendered:

You also have the option of creating a table with a list of radio selection, a table where multiple rows can be selected, a table that is searchable, and a styled table. You can also display outcomes associated with a table in a column.

The data to populate the table can come from either a service (like Salesforce) or from a list value. You can select the data type and source from the configuration panel that opens on the right-hand side when you drag and drop a table component to a container in the page layout. Here is an example:


Key Value Description
borderless true/false Removes all vertical borders, removes table-bordered class.
striped true/false Adds a background color to every other row, adds the table-striped class.
radio true/false Adds an extra column at the beginning of the table with a radio button input for each row. Multi-select tables will display checkboxes.
classes strings Custom class names that will be added to the table-container element.
pagination true/false Enable pagination if the table is bound to a list of items.
paginationSize number Set the number of items displayed on each “page” of this table. Set to zero to display all items (if supported by the Service the table is loading data from).
onlyDisplaySearchResults true/false If true then initially don’t display any results until the user has performed a search.
isExecuteRequestOnRenderDisabled true/false If true then don’t execute the object data request when the table is first displayed.
noResults string Custom message that will be displayed if no results are found.
isRowSelectionDisabled boolean Set to true to disable selecting a row in the table by clicking on it. If this is set to true then you’ll also need to set “radio” to true to allow selection.


Goody bag

  1. Sample flow –
  2. Sample package (sharing token) – 1QWHqTZTBNtkWcTxoFjGJaoLNqCYLBGyoV5YtY3AhwenW7+wM7L878n6MPGUHCIX