javascript tables

MFColumnDataBar

MFColumnDataBar is a simple javaScript class that will add a data-bar to your html table cell based on a percentage value you provide, similar to that seen in Excel Conditional Formatting Data Bars.

Implementation

To implement, simply include the .js and .css files

html

<script src='https://methodfish.com/Download/MFColumnDataBar/files/latest/js/mf-column-databar.js'></script>
<link rel='stylesheet preload prefetch' as='style' href='https://www.methodfish.com/Download/MFColumnDataBar/files/latest/css/mf-column-databar.css'>

Have a table on your webpage:

Cat	%
A	50
B	25
C	13
D	12

then call the following javaScript to tell the class to add bars....

js

window.addEventListener('load',function() {
    const cdb = new MfColumnDataBar();
        
    document.querySelectorAll('td').forEach(cell => {
            cdb.setColumnDataBar(cell, parseFloat(cell.innerText));
        });
});

Resulting in

Cat	%
A	50
B	25
C	13
D	12

Changing the bar colours

To change the colour of the bar, simply add a css for .mf-column-databar:

css

.mf-column-databar {
    background-color:red;
    opacity:0.3;
}

See https://jsfiddle.net for an editable demo.

Click to view a demo

About

License

Latest Release

Version 1.02024-12-22