Table

​

Configuring the Table element

The Table component closely mirrors some of the functionalities of the Collection component. When configuring a Table, you define the number of columns, which automatically generates two prototypes: th (table header) and tr (table row).

• th - Used for defining column headers.
• tr - Repeated for each row based on the source data.

 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 Elements

• Table Header: The top row containing column labels.
• Rows: Each row represents a single data entry.
• Cells: Individual cells hold data points within each row.
• Cell Elements: Customizable elements within each cell for dynamic data presentation.

​

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

​

Columns

Customize the columns displayed in the table, including adding, deleting, or renaming columns.

​

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

Using the data key from a related element, apply JavaScript expressions to control the Table’s visibility based on dependencies.

Demonstration:

​

Table styling

​

Sizing

• Fit Width: Expands to fill available width (default).
• Fit Height: Automatically adjusts height to content (default).

​

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: You must add a custom key to save action data in a table cell, especially when handling unique interactions like inline editing or dynamic data updates within cells.

• 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