Hey Joao,

I have created a demo .Hope it will help you!

If you have some other requirement please let me know I will give you a good approach.

Thanks,

Sudip Pal

Hi  Joao,

For instance, you have to edit the movies table:

1- First create a block with an input parameter of data type Movie. Drag Input text widget into that block and assign the value to that input widget to match the field—I'm currently using the title field as my example. And than save the record on the events of input according to your convenience(you can use onkeyup event).

2- Drag the block onto each cell and pass the value accordingly.

Regards,

Hey there,

I've tackled something similar before. To create an editable column in a table like you described, you might want to consider using a combination of event listeners: one for focusing on the input (making it editable) and another for when the focus is lost (blurred) to save the input value.

Here's a basic idea:

1. When the user clicks on the text input, you can use an onFocus event to enable editing.
2. As for saving the data when the user clicks outside, you'll be looking at the onBlur event which is triggered once an element loses focus. Once this event is triggered, you can then capture the value inside the text input and save it.

If you're using a library/framework like React, Vue, or Angular, they all offer easy ways to bind these events to functions.

Here's a simple example with React:

function EditableCell({ value, onSave }) {

  const [inputValue, setInputValue] = useState(value);

  const handleBlur = () => {

    onSave(inputValue);

  };

  return (

      type="text"

      value={inputValue}

      onFocus={(e) => e.target.select()} // Optional: This will select all the text when focused

      onChange={(e) => setInputValue(e.target.value)}

      onBlur={handleBlur}

    />

  );

}

This is a very basic setup, and you might need to refine it further based on your needs. Let me know if you have any questions or if there's anything else I can help with. Good luck! 😊

Hi,

As per your used case, you can explore the data grid component. There are documents which will help you to understand better. 

However, just for your reference, I'm attaching OML with small demo. Hope this would help!