Disable cell button onClick

App Building
1

Hello,
I am tying to find a way to disable a column button in a table once it has been clicked.

I have conditional logic currently in the disabled settings for the button that evaluates other values in each row to determine if the button should be disabled or not. My issue is we are pulling a decent amount of data into the table, and waiting for it all to re-render to disable the button would be an impact to the overall functionality of the app. However, leaving the button clickable, opens us up to processing an order multiple times if it gets clicked again.

Screenshot 2024-05-14 at 9.23.12 PM
Screenshot 2024-05-14 at 9.23.12 PM1960×358 37.9 KB

In the above screenshot, you can see the button as I have it now. If the commission status is "pending approval", it is enabled. When you click it, the create commission API call fires. I just need it to also disable, so the user can continue approving orders without the entire table loading in between every click.

2

Hi there @Chris_Skiles,

I'm thinking you could create a variable with your query data results and use that as your data source in your table. Then, either the button or the API call trigger an event to set in the value of commission status as pending approval within the variable. As such, you would see the changes in both columns immediately as you would be updating your data source within the variable as well, without having to wait for the query with your data source to reload.

3

Wouldn't I need a variable for every row?

4

No, it would be a clone of your table data upon loading.

Here's an example on how to update a nested value in an object. You would use your row index and commission_status and set the new value.

1 Like
5

This looks good!
My struggle with implementing, is I have a state array with indexes for each order. Then, inside of each order, is an array of line items. I need to update the value of "commission_status" for every line item.

Here is what I have, but it isn't working. I get an error saying "line.setIn is not a function"

let lineItems = mappingArray.value[salesTable.selectedDataIndex].line_item_fields;

lineItems.forEach(line => {
  line.setIn(["commission_status"],{value: "paid"})
})
6

I got it!!

Here's what I ended up with:

let lineItems = mappingArray.value[salesTable.selectedDataIndex].line_item_fields;

for ( var i = 0; i < lineItems.length; i++ ) {
  mappingArray.setIn([salesTable.selectedDataIndex,'line_item_fields',i,'commission_status'], "paid")
}
1 Like
7

Wohooo! Glad that's working.