FeatureTable widget some rows set highlight the background color?

[mqllin]

I have some ideas. Can I do something to dynamically set a custom highlighted background color for some rows in the table?

For example：all rows with an update table field value of 1 are set to green background.

[mqllin · Accepted solution]

I have achieved this effect!

I read about vaadin ui document, the framework that the table relies on, which provides a method to customize the table color. 

look code:

this.viewFeatureTable.when().then(table => {
        setTimeout(() => {
          let style = document.createElement('style');
          style.textContent = `
            .tb-row-add {
              background: rgba(54,173,71,0.3);
            }
            .tb-row-update {
              background: rgba(1,122,194,0.3);
            }
      `;
          const ref = document.getElementsByTagName('vaadin-grid')[0];
          ref.shadowRoot?.appendChild(style);
          (this.viewFeatureTable as any).grid._grid.cellClassNameGenerator = (column: any, model: any) => {
            let classes = '';
            if (model && model.item) {
              classes += column.path;
              const item = model.item;
              if (item.feature.attributes.update_type === 'add') {
                classes += ' tb-row-add';
              } else if (item.feature.attributes.update_type === 'update') {
                classes += ' tb-row-update';
              }
            }
            return classes;
          };
        }, 1000);
        this.tableToolsService.viewFeatureTable$.next(table);
      });

[MrGIS]

@mqllin I am trying to implement this on new FeatureTable. Where do you put the above code at? Can you share more of your code?

[mqllin]

In my code：

this.viewFeatureTable //that is FeatureTable()

// In some where 
this.viewFeatureTable = new featureTable({
      container: this.datatableRef.nativeElement,
      ...some other properties
)

After create  new FeatureTable(),use`.when()`and put the above code.