Table Select a Row and Open a Modal, Open a Different Modal On Row 2

This guide explains how to open different modals when users click different rows in a Table widget. Appsmith supports conditional logic inside widget event handlers, allowing you to choose which modal to display based on row data.

Overview

You can determine which modal to open by inspecting {{Table1.triggeredRow}} inside the event handler. This gives you access to all column values of the clicked row. Using these values, you can implement conditional logic that calls showModal() for the appropriate modal.

This approach follows the same pattern described in the Appsmith documentation on widget properties and JS actions:
https://docs.appsmith.com/reference/appsmith-framework/widget-actions/show-modal

Steps

1. Create your modals

Create two modal widgets, for example:

• Modal1
• Modal2

2. Add a clickable element in the table

You can attach the logic to:

• A button column
• A menu button
• The entire row’s onRowSelected event (depending on your UI needs)

3. Use conditional logic in the event handler

The event handler can execute JavaScript. Use the following pattern:

{{ 
  function() {
    // Inspect a column value in the clicked row.
    // For example, use `status`, `type`, or any other column that helps you decide.
    
    if (Table1.triggeredRow.status === "Modal1") {
      showModal("Modal1");
    } else {
      showModal("Modal2");
    }
  }()
}}

4. Adjust the condition to your needs

You may want to open different modals based on:

• A numeric ID
• A label
• A boolean flag
• The row index (e.g., Table1.triggeredRowIndex === 0)

Example using row index:

{{ 
  function() {
    if (Table1.triggeredRowIndex === 0) {
      showModal("Modal1");
    } else if (Table1.triggeredRowIndex === 1) {
      showModal("Modal2");
    }
  }()
}}

Best Practices

• Ensure each modal has a unique name.
• Avoid hardcoding values unless your table structure is fixed; prefer checking meaningful column values.
• Test with different rows to confirm triggeredRow contains the expected data.