Table data Min/Max Highlighter Value – tableMinMax

A Free jQuery Plugins with tableMinMax.js that Highlight colors indicate when the value of table cell with minimum and maximum. tableMinMax is a jQuery plugins for taking care of table information that consequently features the biggest and most reduced qualities in each line or segment utilizing custom CSS styles.This can be useful in discovering maximums and essentials when you are taking a gander at a huge HTML table containing huge amounts of even information.

How to used :

Add Script with JavaScript tableMinMax.js after jQuery library.

From the above code, we inserted Java Script coded files “/path/to/cdn/jquery.slim.min.js” & “/path/to/tableMinMax.js“.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/tableMinMax.js"></script>

Add the HTML table and we’re ready to go.

Here we’re creating a Table using <table> tag. We created a table with id assigning the name as an example. And using tableMinMax function to identify the Min & Max values in the table.

<table id="example">
  ...
</table>

tableMinMax({
  "table": "#example"
});

Determine the in which cells and/or columns you want to highlight the Largest/Lowest Values. Default: ‘all’.

In the tableMinMax we are giving a Query Search. In that Query, we are selecting a mode: which is either row/colour or all. It will be selected based on the given code. And the nr will select the row number and the column number.

tableMinMax({
  "table": "#example",
  "search": {
    "mode": "row", // or 'col', 'all'
    "nr": [1] // row / col number
  },
});

Apply custom CSS to the Largest/Lowest Values.

.min, here the background colour of the particular block will be #DF0101 and the colour is white. The minimum value will have the above background colour & text colour.
.max, here, the background colour of the particular block will be #01DFA4 and the colour is white. The maximum value will have the background as mentioned above, colour & text colour.

.min {
  background-color: #DF0101;
  color: white;
}

.max {
  background-color: #01DFA4;
  color: black;
}

Determine whether to swap min/max classes. Default: false.

In the above function tableMinMax, we were given an attribute CSS which will assign min for the min and max for the max. It only applies when invert is true.

tableMinMax({
  "table": "#example",
  "css": {
    "min": 'min',
    "max": 'max'
  },
  invert: true
});

You can pass the options via HTML data attributes as follows:

<table id="example"
       data-search-mode="col"
       data-css-min="min"
       data-css-max="max">
       ...
</table>

Add Script for plugin makes it possible to auto-contrast text to background using the color2k library.

<script src="https://cdn.jsdelivr.net/npm/color2k@latest/index.min.js"></script>

Done