Heatmap Cells Table
Feature usage matrix with weekday columns, value shaded cells, per row totals, and an intensity legend beneath the table.
Feature usage matrix with weekday columns, value shaded cells, per row totals, and an intensity legend beneath the table.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Heatmap Cells Table is the feature usage matrix where every numeric cell is shaded by its own value. Six features run as rows (Dashboards, Reports, Alerts, API explorer, Exports, and Integrations) against seven weekday columns, and each session count sits inside a rounded chip whose fill darkens with volume: transparent under 25, then four steps up to a solid foreground fill at 400 or more. A right-aligned Total column rolls up each row, and an intensity legend runs from Fewer to More below the grid so the shading has a key.
The rows are one typed array of value arrays and a single intensity function maps each number to its Tailwind fill and text class, keeping contrast readable at every step. Totals are computed inline with reduce, and the whole grid sits in an overflow-x-auto wrapper so the seven day columns scroll on narrow viewports instead of crushing.
Reach for this block whenever the shape of a two dimensional grid matters more than any single number: usage by feature and day, activity by hour and weekday, or spend by team and month. The shading surfaces hot and dead zones that a plain grid of digits hides, so scan first and read exact counts second.
A natural flow around it on an Application Pro page:
Before
After
One strong use is feature usage by weekday. Other heatmap grids:
Tip: cap the scale at a sensible ceiling; one runaway cell can wash every other value to the palest step and flatten the pattern you built the grid to show.