Change the background colour of specific rows?

Hello @mopac , and sorry for the delay.

Yes this should be a new functionality (which honestly, first time that someone is asking for it). Till then you can add a small work-around which I have tested that it works. First you need to add in the callbackColumn a class (e.g. “test-red”) so we recognize that this row will need to be colored. For example:

$crud->callbackColumn('my_date', function ($value) {
    return "<div class='test-red'>" . $value."</div>";
});

And then in JavaScript add something like this:

(function () {
  // marker class inside a cell  ->  class added to the row
  const ROW_MARKERS = {
    'test-red': 'gc-row-red'
  };

  function paint(root) {
    for (const [marker, rowClass] of Object.entries(ROW_MARKERS)) {
      const rows = new Set();
      root.querySelectorAll('tbody .' + marker).forEach(el => {
        const tr = el.closest('tr');
        if (tr) rows.add(tr);
      });

      // remove from rows that no longer match (React reuses the <tr> elements)
      root.querySelectorAll('tr.' + rowClass).forEach(tr => {
        if (!rows.has(tr)) tr.classList.remove(rowClass);
      });
      rows.forEach(tr => tr.classList.add(rowClass));
    }
  }

  function init() {
    document.querySelectorAll('.grocery-crud').forEach(root => {
      let scheduled = false;
      const schedule = () => {
        if (scheduled) return;
        scheduled = true;
        requestAnimationFrame(() => {
          scheduled = false;
          paint(root);
        });
      };

      new MutationObserver(schedule).observe(root, { childList: true, subtree: true });
      schedule();
    });
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
})();

were initially you are adding the logic:

  const ROW_MARKERS = {
    'test-red': 'gc-row-red'
  };

which test-red is the name of the class and gc-row-red will be the class of the tr and you will have something like this:

tr.gc-row-red {
    background-color: red !important;
}

I hope it helped. Since the above is a bit more complicated solution, what is the functionality that you are trying to achieve? from your question I see that you have the color directly as a color which can make the grid too colorful (e.g. usually we add only few row colors)

Regards
Johnny