Table component

Display data on a page in an interactive table.

Overview

Add a table component to a page to present data in an interactive table. Retrieve and display data from a connector, or a list value.

Although the table component is similar to a combobox or a radio component, using a table component allows you to display multiple properties for each line item, whereas a combobox or radio component only presents a single property to a user for selection.

When setting up the component, you must choose the Data Source:
- The type of data to be provided.
- The data source itself, as a table can be populated using the data from a list value or a connector.
- The value that contains the actual table data (if using a list value), or the type binding that should be used to retrieve data (if using a connector).
Select the value that you wish to save the user selection data into in the Save the component state into field. For example, if you wish a user to be able to select a table row and move to a step containing further detail about the selected row.
Any outcomes associated with the table component are displayed in an automatically generated Actions column, rendered as outcome buttons.
- Each outcome only operates on the item that the table row is associated with. For example, an Edit outcome in a table will edit the row that the outcome is in.
- If an outcome has This Outcome should appear at the top of the Component set to true, it will be displayed above the table component, and will operate on whatever item(s) are selected in the table.

General settings

Configure the general settings for the component.

Setting	Description
Name	Enter a name for the table component.
Label	Enter a label for the table component. The label is displayed above the component by default. Do not enter a label if you do not require this text to be shown.
Load when scrolling	Enables automatic data loading as you scroll through the table. With this option, additional rows load dynamically when you reach the bottom of the page, making it useful for viewing large datasets continuously without switching pages.
Pagination buttons	Displays numbered navigation buttons (such as 1, 2, 3…) at the bottom of the table, allowing you to move between pages of data. This option helps manage large datasets by dividing them into smaller, easy-to-navigate pages.
Page size	Input a number (eg: 20, 30) into this field to set the pagination size, which controls how many results display per page.
No results message	Use this field to set the specific message (eg: "Nothing to show") that appears if the component finds no results.
Multi-select	Specify if the table component allows a user to select multiple rows in the table. If this is enabled, a checkbox is displayed to indicate the selected rows. If allowing multiple selections, the user selection should be saved into a list value, rather than an object value. • Select the checkbox to enable a user to make multiple selections. • De-select the checkbox to prevent a user from selecting more than one option in the component.
Searchable	Add a search field above the table that allows a user to search the table, and display matching items. • Select the checkbox to enable the search feature on the component. • De-select the checkbox to disable the search feature on the component.
Allow for sorting on columns	Enables sorting of table data by clicking the column headers. Each column can be sorted independently in ascending or descending order, making it easier to organize and analyze information within the table.
Display Export CSV Button	This configuration adds a button above the table, enabling you to download its contents in CSV format. You can specify a custom file name for the download; if a name is not provided, the component's label automatically serves as the default file name. This feature is only available in the default Runtime. • Select the checkbox Display export CSV button to enable the ‘Export CSV' button on the component. • De-select the checkbox to disable the feature.
Help information about this component	Display help text directly below the component, for example to provide further information on how to use the component.
Only search display columns	If Searchable is enabled, by toggling this option, searches will only consider data presentation columns that are marked as "Display this column".
Persist search term	If Searchable is enabled, by toggling this option, you can preserve your last search criteria and results, ensuring that when you return to the table, the previous search is automatically reapplied.

Data source

Choose the data source for the component:

Get the data from a Connector: Retrieve the table data from a connector.

Select the type for the data that you wish to display in the The Type of data to be provided field. This will determine the properties that you can select.
Select the type binding in the The Binding that should be used to get the data drop-down menu.
Add a Filter in the Data source filter section if required. See Type Bindings and Data action filters.

Get the data from a List Value: Retrieve the table data from a list value.

Click Select or create a new Value to choose an existing list value or create a new list value.

State

Select the value that you wish to save the user selection data into. For example, you may present a summary table, that then allows a row to be selected, with the next page displaying all the details for the selected item/row.

Save the component state into: Click Select or create a new value to select an existing value or create a new value. If the table allows multi-select, the value should be a list value, rather than an object value.

Validation

Add client-side page validation to the component. You cannot add validation if you are saving state data into a boolean or object value.

Click Add Validation.
Select the validation Type.
Enter a valid Value for the validation type.
Enter a feedback Message to show to the user if the validation criteria is not met.
Click Update to add the validation item.

Setting	Description
Message	Enter a message to show to the user if the validation criteria is not met. For example, if the user has entered a numeric value that exceeds the Maximum number value you have set.
Value	Enter the validation criteria. • Minimum number: Enter a minimum number or character limit for the component. • Maximum number: Enter a maximum number or character limit for the component. • Regular expression pattern: Enter a valid Regular Expression (Regex) to validate the component.
Type	Select the type of validation to apply to the component. • Minimum number: A user must enter more than this value into the field. • Maximum number: A user is unable to enter more than this value into the field. • Regular expression pattern: Apply Regular Expression (Regex) validation to the component.
Required	Specify if the component requires user input before the next step in the flow can be navigated to. For example, a user must complete the input for this field before they are allowed to progress in the flow. • Switch on the toggle to set the component as requiring input from a user before they can progress in the flow, such as to the next page for example. A red asterisk is displayed next to the field name to indicate it is required. • Switch off the toggle to allow a user to progress in the flow even if they have not entered any input into the component, for example if the field is optional.

Data presentation

Click Add Column in the Data Presentation section to choose the properties you wish to display as columns in the table.

Property: Properties depend on the data available from the specified data source. For example, String data.
Label: The label of the column appears above the column by default. Display this column: Selecting this option will display the column in the grid.
Display this column: Select this option to show or hide a column in the table component. When enabled, the selected column appears in the table at runtime. Clearing this option hides the column without deleting its configuration. This allows you to control which data fields are visible to end users while keeping the column settings intact for future use.
Component Type: The component type allows you to override the contents of every cell in the column with a different component. You can select one of our in-built components, or any Column Custom Component you have in your Tenant to tailor the data presentation to meet specific needs. You can choose from several built-in component types, such as Image Formatter, Progress Bar, Hyperlink, or Status Icon. Each component type formats the underlying data differently—for example, the Image Formatter displays an image from a URL, while the Progress Bar represents numeric data as a percentage indicator. Selecting the correct component type ensures that the data appears as intended in the table layout.

Styles

Apply additional CSS styling to the component.

Enter space-delimited CSS classes/selectors into the CSS Classes field.

When you run the flow, these classes are appended to the main component class.

Custom components

Custom components help you display cell values in a certain way that is not supported out of the box, such as displaying icons in cells or applying custom formatting to data. This can be achieved by writing a custom React component. Your component can accept the following properties:

Properties	Status	Description
cellValue	required	A string that displays the value of the cell.
columnKey	optional	The column identifier for the column currently being edited.

An example of a read-only custom cell:

const { React } = window.boomi.flow;
const CustomCellValue = ({ cellValue }) => {
    return React.createElement('div', {
        className: 'custom-cell',
    }, cellValue);
};
export default CustomCellValue;