How to make editable column when row is selected in vaadin-grid using JavaScript

I want to make editable column when row is selected in vaadin-grid using JavaScript.

The second approach that I used is I put a paper-input inside of vaadin-grid but the value that I'm getting is undefined

<vaadin-grid items=[[loadItems]] active-item="{{activeItem}}" id="datagrid">
<vaadin-grid-column resizable>
<template class="header">
<vaadin-grid-sorter path="Name">Name</vaadin-grid-sorter>
</template>
<template>
[[item.Name]]
</template>
</vaadin-grid-column>

<vaadin-grid-column resizable>
<template class="header">
<vaadin-grid-sorter path="Address">Address</vaadin-grid-sorter>
</template>
<template>
[[item.Address]]
</template>
</vaadin-grid-column>

<vaadin-grid-column resizable>
<template class="header">
<vaadin-grid-sorter path="ContactNo">Contact No</vaadin-grid-sorter>
</template>
<template>
[[item.ContactNo]]
</template>
</vaadin-grid-column>

<vaadin-grid-column resizable>
<template class="header">
<vaadin-grid-sorter path="jobPosition">Job Position</vaadin-grid-sorter>
</template>
<template>
[[item.jobPosition]]
</template>
</vaadin-grid-column>
</vaadin-grid>


Have you checked this demo and example vaadin.com/components/vaadin-grid/html-examples/grid-crud-demos ?
– Tatu Lund
Jun 29 at 9:40

Oh nice found, I havent check it yet. Thank you @TatuLund
– noob101
Jun 29 at 9:49

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.