Editable table in line loading icon

[tomvonheill]

I''ve implemented the editing table, but am running into a problem. It looks like in the example when you are submitting something to be be edited (patch request) the X (checkmark) icons turn into a loading icon.

^regular check, but turns into the image below

How is this happening? Mine seems to just go back to the regular page, and then my updates are shown a little bit later when i refresh my results. I'm hoping to use tanstack query/mutate to put the cell into this loading state while the patch/gets are executing.

[rubencarvalho]

Hello Thomas,

If I understood correctly, you're using the inline editing functionality of our Table component.

For this, you should be using the submitEdit property which specifies a function that will be called after the user submits an inline edit. It should return a promise to keep the loading state while the submit request is in progress. You can see more on our API tab for the Table component.

Furthermore, you should be using the editConfig property on the respective columnDefinition. There, you can define the editingCell function, which determines the display of a cell's content when inline editing is active on a cell. You receive the current table row item and a cellContext object as arguments. The cellContext object contains the following properties:
cellContext.currentValue - State to keep track of a value in input fields while editing.
cellContext.setValue - Function to update currentValue. This should be called when the value in the input field changes, so you can reflect the new value in the cell.

You can get some inspiration from our implementation in our "[Table with inline edit]"(https://cloudscape.design/examples/react/table-editable.html) demo source code.

Let me know if that helped.

Thank you!

[tomvonheill]

Thanks ruben, you are right I added a await new Promise(resolve => setTimeout(resolve, 2000)); after where i submit the changes and that worked. Would be nice to maybe have an 'inline loading' attribute or something like that to get a more granular method of managing the cell state (with tanstack query/mutate), but this is great. Thanks for the help!