Add in row click events to Feature Table widget

wjenkins

I have worked with the Feature Table widget for a couple of projects and it would be great if there were some additional events for the Feature Table Widget.

I would love to just see a row click event that would work much like the selection, but it would just return the feature on that row. Typically I am looking for a function to allow the user to click a row and zoom to the feature instead of requiring the user to select a row.

Justin_Greco

I do agree that being able to click on the row itself would be make the FeatureTable easier to use, also the selection row can take up space if you have a narrow container. 

I have been able to achieve this, but its not something supported or documented with the API.  The FeatureTable is built off the Vaadin grid component, so the trick was to access the vaadin-grid element in the feature table container, then you can listen for the cell-activate event on the grid. I have to add a short timeout, since its not always available when the feature table is ready. 

Then you can tell if the row is selected from the detail.model.selected attribute of the event and get the feature from the detail.model.item.feature.  Here I am just selecting or deselecting the row.

 

 

          featureTable.when(() => {
            setTimeout(() => {
              const grid = featureTable.container.querySelector("vaadin-grid");
              grid?.addEventListener("cell-activate", (e) => {
                const selected = e.detail.model.selected;
                const feature = e.detail.model.item.feature;
                selected ? featureTable.deselectRows(feature) : featureTable.selectRows(feature);
               });
            },100);
          });