Data Grid component

Overview

The Data Grid component displays data in a grid format and offers user interaction and data management features. You can edit cell values by double-clicking a cell, allowing quick updates. Column sorting enables you to organize data efficiently. You can also select multiple rows in the grid and perform bulk actions. Reordering columns is simple through a drag-and-drop interface, and resizing columns is easy by dragging the edges. Filtering options are available for certain column types, and you can pin specific columns to the left of the grid for easy access to important data. Additionally, you can export the grid contents as a CSV file for external use. For enhanced customization, you can override cells in specific columns with custom components.

Any outcomes associated with the data grid component are displayed in an automatically generated Actions column, rendered as outcome buttons.

• Each outcome only operates on the item that the data grid row is associated with. For example, an Edit outcome in a data grid 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 data grid component, and will operate on whatever item(s) are selected in the data grid.

General settings

Add a Data Grid component to a page to present data in a tabular grid. Configure the general settings for the component.

Settings	Description
Name	Enter a name for the data grid.
Label	Enter a label for the data grid.
Page size	Input a number into this field to specify the number of items displayed per page. The default value is 100. Note that setting the pagination size to very small values, such as less than 10, may cause issues with scrolling pagination.
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	This option allows you to select multiple rows in the table. If enabled, a checkbox per row will appear to allow you to make one or more selections. • Select the checkbox to enable multiple selections. • De-select the checkbox to prevent selecting multiple options in the component.
Searchable	This option enables searchable options for specific columns. It displays a search box for all applicable columns and allows for filtering the grid. Applicable column types include strings, numbers, content, and boolean types. • 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	This feature enables the sorting of data on applicable columns. Applicable column types include strings, numbers, dates, date-times, and boolean types. • Select the checkbox Allow for sorting on columns to enable sorting on columns. • De-select the checkbox to disable the sorting feature on the component.
Display Export CSV Button	This configuration adds a button above the grid, 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. • 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	Displays help text directly below the component, providing further information.

Data source

Specify the data source for the grid. There are two different options for populating the grid with data:

• 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 one.
• Get the data from a Connector in Flow: Retrieve the table data from a connector.
  • Select the type of data you wish to display in the Type of provided data field, which will determine the properties you can select.
  • In the Use this binding to get the data field, select the type binding from the drop-down menu.
  • Add a Filter in the Data source filter section if required. See Type Bindings and Data action filters.

note

If the grid is populated using the SQL connector, it is recommended to specify a column for initial data ordering by selecting Filter using a 'WHERE' clause.

State

Select the value into which you wish to save the data grid data. Click Select or create a new value in the Save the component state into field to select an existing value or create a new value. Ensure to use a list value in order to support common data grid use cases.

Data presentation

After defining the data source, 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.
• Make editable: You can choose whether to make columns editable, which applies to all cells in that column. This feature is checked by default, which allows you to edit any cell in the specified column while running it in a flow.
• Pin column: You can pin columns to fix them to the left side of the grid. This feature is useful when the number of columns exceeds the width of the grid container, ensuring that the pinned columns remain visible while you scroll through other columns.
• 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.

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.
row	optional	An object that describes the row currently being edited. The keys are column identifiers, and the values are the cell values.
columnKey	optional	The column identifier for the column currently being edited.
onRowChange	optional	A callback function to be called when you want to change the value of the cell. This callback accepts one required argument - row. The row object must have the value of its column key updated to the new value.
onClose	optional	A callback function to be called when the cell being edited loses focus. It accepts two optional arguments - commitChanges and shouldFocusCell.

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;

An example of an editable custom cell:

const { React } = window.boomi.flow;
const CustomCellValue = ({ cellValue, onRowChange, onClose, row, columnKey }) => {


    // These props are only ever supplied when a cell is being edited
    if (onRowChange && onClose && row && columnKey) {
        return React.createElement('input', {
            className: 'custom-cell-input',
            onChange: (e) => {
                onRowChange({ ...row, [columnKey]: e.target.value });
            },
            onBlur: () => onClose(true, false),
            value: cellValue
        });
    }


    return React.createElement('div', {
        className: 'custom-cell',
    }, cellValue);
};


export default CustomCellValue;

Styles

Styles are represented as a space-delimited list of CSS classes. To apply custom CSS classes to the data grid for styling, enter space-delimited CSS classes/selectors into the CSS Classes field. When you run the flow, these classes append to the main component class.