Quickie: Change values in table cells

In a table I have a calculated field that result in either 0 or 1. When scrolling down, because of the mass of data it is hard to see where the differences are. With a small javascript function I can change the values and highlight differences better. I show the result and the javascript code needed for it.

Standard Table View

Modified with only little code

Standard Table View

I have blurred out confidential data which is not relevant for this sample

Did YOU notice the records having is_expired == 1?

Modified Table View

Check for yourself if you can identify the highlighted records faster now:

Did you notice them now?

Javascript Code

Are you interested in the source code?

// file: hooks/TABLENAME-tv.js
jQuery(function () {
  var options = {
    tn: "orders",
    cn: "is_expired",
    if: [
            { value: 1, text: 'Expired', icon: 'remove', class: 'danger', rowClass: 'danger' },
            { value: 0, text: 'Valid', icon: 'ok', class: 'success' },
    ]
  }
  autoHighlight(options);
});

function autoHighlight(options) {
  const tn = options.tn ?? AppGini.currentTablename();
  options.if.forEach(condition => {
    const elements = $j("tr[data-id][data-id!=''] > td." + tn + "-" + options.cn + ":contains(" + condition.value + ")")
      .addClass("text-center")
      .html($j('<span/>').addClass('label label-' + condition.class).text('').append($j('<i/>').addClass("glyphicon glyphicon-" + condition.icon)).append(" " + condition.text));
        if (condition.rowClass != undefined) elements.closest("tr[data-id]").addClass(condition.rowClass);
  });
}

Options

  • tn Table Name
  • cn Column Name
  • if
    array of conditions and settings for modifying the cell
    • value
      Every cell is checked. If the content of the cell matches value, the cell is formatted
    • text
    • icon
      Glyphicon name (without prefix)
    • class
      CSS class for the cell
      for example info, success, warning, danger or your own custom class
    • rowClass
      CSS class for the row
      for example info, success, warning, danger or your own custom class

Summary

From my point of view this is much better having those red highlighted rows and indicators. I am considering including such a feature in the next version of our AppGini Helper Javascript Library

Do you like it?