Skip to contents

Generate an HTML table with color-coded cells and a legend

Source: R/Userm_html_table.R
Userm_html_table.Rd

This function creates an HTML representation of a numeric matrix with each cell color-coded based on its value. A color legend is also appended to help interpret the color scale.

Usage

Userm_html_table(
  mat,
  val_min,
  val_mid,
  val_max,
  colormin,
  colormid,
  colormax,
  Legend = "Color Legend"
)

Arguments

mat

A numeric matrix to be displayed as an HTML table.

val_min

Minimum value for color scaling.

val_mid

Midpoint value for color scaling.

val_max

Maximum value for color scaling.

colormin

Color corresponding to val_min.

colormid

Color corresponding to val_mid.

colormax

Color corresponding to val_max.

Legend

A character string for the legend title. Default is "Color Legend".

Value

A character string containing HTML code for the table and legend.

Details

This function is useful for visualizing matrices with a heatmap-like color gradient directly in Shiny apps or HTML reports. It relies on a helper function getColor() to compute the appropriate background color for each cell.

Examples

mat <- matrix(runif(9, 0, 100), nrow = 3)
rownames(mat) <- paste0("Row", 1:3)
colnames(mat) <- paste0("Col", 1:3)
Userm_html_table(mat, 0, 50, 100, "#0000FF", "#FFFFFF", "#FF0000")
#> [1] "<table style='border-collapse:collapse;'><tr><th></th><th class='rotate'><div><span>Col1</span></div></th><th class='rotate'><div><span>Col2</span></div></th><th class='rotate'><div><span>Col3</span></div></th></tr><tr><th style = 'white-space: nowrap; text-align: right;'>Row1</th><td style='background-color:#FF9494; text-align:center; padding:4px;'>70.89</td><td style='background-color:#FFEBEB; text-align:center; padding:4px;'>53.94</td><td style='background-color:#FFAEAE; text-align:center; padding:4px;'>65.92</td></tr><tr><th style = 'white-space: nowrap; text-align: right;'>Row2</th><td style='background-color:#FF5858; text-align:center; padding:4px;'>82.67</td><td style='background-color:#FFE3E3; text-align:center; padding:4px;'>55.53</td><td style='background-color:#7C7CFF; text-align:center; padding:4px;'>24.34</td></tr><tr><th style = 'white-space: nowrap; text-align: right;'>Row3</th><td style='background-color:#FF3737; text-align:center; padding:4px;'>89.19</td><td style='background-color:#8D8DFF; text-align:center; padding:4px;'>27.64</td><td style='background-color:#9393FF; text-align:center; padding:4px;'>28.83</td></tr></table>\n                          <div style='margin-top:15px; font-family:Arial; font-size:12px;'>\n                            <div style='margin-bottom:4px;'>Color Legend</div>\n                            <div style='width:50%; display:flex; justify-content:space-between; margin-top:4px;'>\n                              <span >0.00</span>\n                              <span >50.00</span>\n                              <span >100.00</span>\n                            </div>\n                            <div style='width:50%; height:20px; background:linear-gradient(to right, #0000FF, #FFFFFF, #FF0000); border:1px solid #ccc;'></div>\n\n                          </div>\n                        "