Table

​

Overview

The Table component is available only for Web, built to deliver a consistent design through FlowX.AI’s theming framework. It closely mirrors the Collection component functionality, offering dynamic data handling and flexible row/column configurations.

​

Table elements

1. Table Header (th)
   Displays column labels, typically one th element per column.

2. Rows (tr)
   Each row represents a single data entry from the source array. Rows automatically repeat based on your data size.

3. Cells
   Cells hold data points within each row. You can place multiple UI elements (text, image, link, buttons) inside a cell.

4. Actions Column
   If you enable row deletion or editing, an actions column is automatically created to handle row-level features (delete icon, edit icon, etc.).

​

Configuring the table

When building a Table, you’ll primarily interact with:

• Generic Settings (source key, columns, table body, expressions, styling)
• Cell-Specific Settings (sorting, filtering, editing, validators)

 users = [
    {
        "firstName": "John",
        "lastName": "Doe",
        "loanAmount": {
            "amount": 1000.00,
            "code": "USD"
        },
        "birthDate": "1985-01-01T00:00:00Z",
        "email": "john.doe@example.com"
    },
    {
        "firstName": "John",
        "lastName": "Does",
        "loanAmount": {
            "amount": 2000.00,
            "code": "USD"
        },
        "birthDate": "1985-02-01T00:00:00Z",
        "email": "john.does@example.com"
    },
    {
        "firstName": "Jane",
        "lastName": "Doe",
        "loanAmount": {
            "amount": 3000.00,
            "code": "USD"
        },
        "birthDate": "1985-03-01T00:00:00Z",
        "email": "jane.doe@example.com"
    },
    {
        "firstName": "Jane",
        "lastName": "Does",
        "loanAmount": {
            "amount": 4000.00,
            "code": "USD"
        },
        "birthDate": "1985-04-01T00:00:00Z",
        "email": "jane.does@example.com"
    },
    {
        "firstName": "Jim",
        "lastName": "Doe",
        "loanAmount": {
            "amount": 5000.00,
            "code": "USD"
        },
        "birthDate": "1985-05-01T00:00:00Z",
        "email": "jim.doe@example.com"
    },
    {
        "firstName": "Jim",
        "lastName": "Does",
        "loanAmount": {
            "amount": 6000.00,
            "code": "USD"
        },
        "birthDate": "1985-06-01T00:00:00Z",
        "email": "jim.does@example.com"
    },
    {
        "firstName": "Jake",
        "lastName": "Doe",
        "loanAmount": {
            "amount": 7000.00,
            "code": "USD"
        },
        "birthDate": "1985-07-01T00:00:00Z",
        "email": "jake.doe@example.com"
    },
    {
        "firstName": "Jake",
        "lastName": "Does",
        "loanAmount": {
            "amount": 8000.00,
            "code": "USD"
        },
        "birthDate": "1985-08-01T00:00:00Z",
        "email": "jake.does@example.com"
    },
    {
        "firstName": "Jill",
        "lastName": "Doe",
        "loanAmount": {
            "amount": 9000.00,
            "code": "USD"
        },
        "birthDate": "1985-09-01T00:00:00Z",
        "email": "jill.doe@example.com"
    },
    {
        "firstName": "Jill",
        "lastName": "Does",
        "loanAmount": {
            "amount": 10000.00,
            "code": "USD"
        },
        "birthDate": "1985-10-01T00:00:00Z",
        "email": "jill.does@example.com"
    },
    {
        "firstName": "Joe",
        "lastName": "Doe",
        "loanAmount": {
            "amount": 11000.00,
            "code": "USD"
        },
        "birthDate": "1985-11-01T00:00:00Z",
        "email": "joe.doe@example.com"
    },
    {
        "firstName": "Joe",
        "lastName": "Does",
        "loanAmount": {
            "amount": 12000.00,
            "code": "USD"
        },
        "birthDate": "1985-12-01T00:00:00Z",
        "email": "joe.does@example.com"
    }
];

application = {
    "users": users
};

output.put("application", application);

​

Table generic settings

The following generic settings are found in the Generic tab and apply to all platforms (Web, iOS, and Android):

• Source key
• Columns
• Table body
• Expressions
• Table Styling

​

Source key

• Specify an array of objects (e.g., application.users), enabling dynamic row creation based on your data structure.
• Similar to the Collection component.

​

Columns

• Customize the Table’s columns: add, delete, rename, or reorder.
• Each column automatically includes a corresponding th (header cell) and td (body cell).

​

Table body

• Pagination: Control how data is displayed by configuring pagination or enabling scrolling.
  • Page Size: Set the maximum number of entries displayed per page.
• Scrollable: Disable pagination to enable continuous scrolling through data.

​

Hide condition

• Optionally hide the entire Table based on a JavaScript expression including the data key from another component.
• Useful for conditional flows (e.g., only show the Table if certain conditions are met).

Demonstration:

​

Feature highlights

​

Default sorting

• Enable default sorting in table settings.

• Select the desired column and sort direction (ascending by default).

​

Pagination & scrolling

• Pagination: Define how many rows appear on each page.

• Scrolling: Disable pagination to allow continuous scrolling.

​

Editable rows

• Enable row editing in cell-level → column settings.

• Editing can be triggered by double-click or the dedicated Edit button icon.

• Edits are validated and saved row-by-row.

​

Deletable rows

• Toggle Deletable in Table settings to enable row deletion.

​

Filters

• Mark columns as filterable to enable filtering icons.

• Filter type automatically matches the column data type (string, number, date, boolean, or currency).

​

Actions

Configure cell-level or row-level actions to trigger logic such as:

• Save Data
• Upload
• Trigger Workflow

• Table Item Key: Each cell action uses a unique key to identify the exact row/cell for storing or retrieving data changes.

​

Table styling

​

Sizing

• Fit Width: By default, the Table stretches to occupy available width.
• Fit Height: Grows automatically based on content height.

​

Cell styling

Layout Options:

• Direction: Horizontal (default).
• Justify: Space-around (evenly spaces elements within each cell).
• Align: Start (left-aligned).
• Wrap: Enables text wrapping.
• Gap: 8px spacing between cell elements.

Column Style Options:

• Width Fit Options:
  • Fill: Fills available container space.
  • Fixed: Keeps a fixed column width.
  • Auto: Adjusts column width to fit content.

• User Resizable Columns: Adjust column width by dragging the column edges in the header, enhancing customization.

This Table component enhances flexibility and offers a cohesive design, integrated with FlowX.AI’s theming framework for a consistent, web-optimized user experience.

​

Actions in table cells

When configuring actions within a Table component, each action is bound to a unique table item key, ensuring that interactions within each cell are tracked and recorded precisely. The key allows the action to target specific rows and store results or updates effectively.

• Table Item Save Key:

  • This key is essential for identifying the exact cell or row where an action should be executed and saved.
  • It ensures that data within each cell remains distinct and correctly mapped to each table entry.

• Custom Key for Data Saving:

  • Important: To properly send the data from a selected cell/row to the backend, you must configure both a Custom Key (in your SaveData action) and a Table Item Save Key (in your column/cell configuration) using the same value.
  • Having only a Table Item Save Key is not sufficient to propagate the updated information. The matching Custom Key in the SaveData action tells the system which row/cell data to capture and transmit.

• Supported Action Types - Available actions include:
  • Action: Initiates predefined actions within the cell.
  • Start Process Inherit: Enables workflows inherited from process configurations to be triggered.
  • Upload: Allows file or data uploads directly within a table cell.
  • External: Used to create an action that will open a link in a new tab.

​

FAQs