Editable and editableInNewRows are not separately configurable if editable is dynamic/true

App Building
1

Goal

I'm trying to create a table that users can edit, and add row(s) to. I want to disable editing if a custom "delete row" row action I've created is enabled.

Steps (to reproduce error)

  1. Create a switch component with the label "Enable Editing".
  2. Create a table component and use the demo data as it exists.
  3. Remove ID as the primary key.
  4. Go to any column - let's say First Name.
  5. In its Interaction settings, set Editable to dynamic, and its value to be {{ switch1.value }} (assuming you didn't rename the switch component).
  6. In the table's Interaction settings, make the Add Row toolbar button visible.
  7. Now, assuming you've got all this setup, make sure you can edit the existing table rows when you enable the switch.
  8. Add a row and see if the column you chose in Step 4 is editable or not when the switch is enabled. You will see that it is not.

Details:
This can be worked around when you do the following:

  1. Go to the column you chose in Step 4 earlier.
  2. Disable Editing and then setup Editing in new rows only to be dependent on the value of the switch.
  3. Now setup the same dynamic setting for Editing as. you did in Step 5 earlier.
  4. Try to add a row with and without the switch enabled. You'll see that the column selected in Step 4 will now be editable.

App json export:
Here are the relevant parts that changed upon implementing the workaround:

      <Column
        id="bfee8"
        alignment="left"
        editable="{{ switch1.value }}"
        editableInNewRows="{{ switch1.value }}" # this gets added
        format="string"
        groupAggregationMode="none"
        key="firstName"
        label="First name"
        placeholder="Enter value"
        position="center"
        size={100}
        summaryAggregationMode="none"
      />
3 Likes
2

Hi @Avinash_Mallya, welcome to the forum! :wave:

I was able to reproduce it, definitely a bug. Thank you for such a detailed report and workaround. There seems to be a conflict between the components props (editable, editableInNewRows) and how their values are set through the UI.

We created a bug report internally and will update you here when it's fixed.

2 Likes