Highlight Largest/Lowest Value In Each Row Or Column - tableMinMax

tableMinMax is a jQuery plugin for handling table data that automatically highlights the largest and lowest values in each row or column using custom CSS styles.

This can be helpful in finding maximums and minimums when you are looking at a large HTML table containing tons of tabular data.

See Also:

• Highlight Different Values In Table - oddMenOut
• jQuery Plugin To Highlight Duplicate Table Cells - duplifer.js
• Visual Tabular Data Comparison Plugin - jQuery Table Compare
• Highlight Table Cells Based On Predefined Content - tableCellColorizer

How to use it:

1. Download the package and load the JavaScript tableMinMax.js after jQuery JavaScript library.

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

2. Attach the plugin to the HTML table and we're ready to go.

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

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

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

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

4. Apply custom CSS styles to the Largest/Lowest Values.

tableMinMax({
  "table": "#example",
  "css": {
    "min": 'min',
    "max": 'max'
  },
  colorize: 'span' // apply CSS class(es) to 'span' or 'cell' (default)
});

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

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

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

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

6. 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>

7. Additionally, the 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>

Changelog:

v2.1 (2021-07-24)

• JS Updated

v2.0 (2020-10-27)

• JS Updated

v1.4.1 (2020-10-14)

• Added automatic contrast mode

---

This awesome jQuery plugin is developed by THWillert. For more Advanced Usages, please check the demo page or visit the official website.