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

Highlight Largest/Lowest Value In Each Row Or Column - tableMinMax
File Size: 11.4 KB
Views Total: 119
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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": "2" // 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/[email protected]/index.min.js"></script>

Changelog:

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.