Overview

Conditional Styling

Conditional styles on rows, cells, and components based on runtime data.

Screenshot Reference (Metadata Styles Reuse)

metadata-editor-styles-table: table styles list.
metadata-editor-styles-table-edit-popup: table style edit popup.
metadata-editor-styles-column: column styles list.
metadata-editor-styles-column-edit-popup: column style edit popup.

Table Style Metadata

Table metadata uses the _Metadati_UI_Stili_Tabelles collection (metadata route _Metadati_UI_Stili_Tabelle).

Main fields:

must_attribute_name: CSS class to apply to the row.
must_attribute_value: JavaScript callback/condition that returns boolean (true applies the class, false does not).

Behavior:

rules are evaluated at runtime for each record;
when the condition is true, the defined class is added to the grid row.

Column Style Metadata

Column metadata uses the _Metadati_UI_Stili_Colonnes collection (metadata route _Metadati_UI_Stili_Colonne).

Main fields:

musc_attribute_name: attribute/style class name to apply to the cell.
musc_attribute_value: static style value.
musc_attribute_value_callback: JS callback to dynamically calculate the value based on the record.

Behavior:

the style can be static (musc_attribute_value) or dynamic (musc_attribute_value_callback);
evaluation occurs per cell, allowing targeted highlighting column-by-column.

Operational Notes

Prefer CSS classes (must_attribute_name, musc_attribute_name) instead of very long inline styles.
Keep callbacks simple and deterministic to reduce performance impacts on large grids.

In-code injection (this component only)

Conditional styles can also be applied in-code in the `.ts` instead of via DB metadata. The SQL patch on _metadati__u_i__stili__tabelle applies to every component on the route; the in-code injection applies only to this component.

Push into metaInfo.tableMetadata._Metadati_UI_Stili_Tabelles (array already []). must_attribute_name = CSS class applied to the row; must_attribute_value = a JavaScript callback string returning true/false (with record in scope). Same fetchInfo$ wiring with an idempotent guard.

Snippet 1ts

@ViewChild('ds', { static: true }) ds!: DataSourceComponent;

ngOnInit() {
  this.ds.fetchInfo$.subscribe(info => {
    const tm = info?.metaInfo?.tableMetadata;
    if (!tm) return;
    if (tm._Metadati_UI_Stili_Tabelles.some(s => s.must_attribute_name === 'row-danger')) return;