How To Handle Items Data Binding With Vaadin Grid When Using DataProvider

I am using the following example from vaadin docs with polymer3

<vaadin-grid id="grid" aria-label="Remote Data Example">
  <vaadin-grid-column path="firstName"></vaadin-grid-column>
  <vaadin-grid-column path="lastName"></vaadin-grid-column>
  <vaadin-grid-column path="email"></vaadin-grid-column>
</vaadin-grid>
<script>
  window.addEventListener('WebComponentsReady', function() {
    const grid = document.querySelector('vaadin-grid');

    grid.size = 200;
    grid.dataProvider = function(params, callback) {
      var xhr = new XMLHttpRequest();
      xhr.onload = function() {
        callback(JSON.parse(xhr.responseText).result);
      };
      var index = params.page * params.pageSize;
      xhr.open('GET', 'https://demo.vaadin.com/demo-data/1.0/people?index=' + index + '&count=' + params.pageSize, true);
      xhr.send();
    };
  });
</script>

I could not figure out how to update a row from the loaded items using polymer data binding

I have tried to access the items property in the grid using this.$.grid.items but this always returns the number of items

I want to be able to do something like this.$.grid.items[0].firstName = 'changed' and refelct the change into the grid

Any help is appreciated

currently, there's no API for updating a single item when dataProvider is used. One option is to use grid.clearCache() that makes grid request data for the visible rows again. Of course, storing the items in an additional cache would be useful in this case to avoid unnecessary server requests. If you use path or renderer, you can also invoke grid.render() after changing an item sub-property.

see vaadin/vaadin-grid#1526 and the related forum thread