topic Re: FeatureTable widget some rows set highlight the background color? in ArcGIS JavaScript Maps SDK Questions

FeatureTable widget some rows set highlight the background color?

mqllin — Mon, 30 Jan 2023 05:39:35 GMT

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.

Re: FeatureTable widget some rows set highlight the background color?

mqllin — Thu, 02 Feb 2023 08:26:53 GMT

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); });

Re: FeatureTable widget some rows set highlight the background color?

MrGIS — Sun, 02 Apr 2023 17:52:03 GMT

@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?

Re: FeatureTable widget some rows set highlight the background color?

mqllin — Tue, 04 Apr 2023 00:46:26 GMT

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.