Excel like Data Bars

[wd_perf]

I'm looking to implement an Excel like DataBars feature for numeric columns. Please see the attached screenshot. For the row containing the max value in the column, it would fill the entire cell's background color. For the row containing the minimum value it would be empty. However for the values in-between it would only fill a certain portion appropriately. Any advice on how we could approach this?

[paramvir]

Use Excel formulas in column.render callback to compute conditional styles.

Code: [Select]

                    render: function (ui) {
                        var F = this.Formulas(),
                            col = pq.toLetter(ui.colIndx),
                            range = col + ":" + col,
                            min = F.exec("MIN(" + range + ")"),
                            max = F.exec("MAX(" + range + ")"),
                            val = ((ui.cellData - min) / (max - min)) * 100;

                        return {
                            style: {
                                background: "linear-gradient(to right, salmon " + val + "%, #fff 0%)"
                            }
                        };
                    }

Example: https://paramquery.com/pro/demos/data_bars

[wd_perf]

Wow. Simply amazing! Thank you.