# Using a Data Grid component to simulate a Heat Map

**URL:** <https://community.glideapps.com/t/using-a-data-grid-component-to-simulate-a-heat-map/82783>\
**Category:** Ask for Help\
**Created:** [June 27, 2025, 4:01pm UTC](https://community.glideapps.com/t/using-a-data-grid-component-to-simulate-a-heat-map/82783 "2025-06-27T16:01:57Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![Eric\_Penn](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eric_penn/32/73888_2.png) [@Eric\_Penn](https://community.glideapps.com/u/Eric_Penn)\
**Post date:** [June 27, 2025, 4:18pm UTC](https://community.glideapps.com/t/using-a-data-grid-component-to-simulate-a-heat-map/82783/2 "2025-06-27T16:18:43Z")

</div>

Here is a custom Heat Map I created, please feel free to try it. It uses dates for the heat map, but even if it doesn’t fit your needs, maybe it could spark some ideas.

> [@fire Color Your Calendar: Custom Heat Map with 3 Stunning Accent Colors! datesparkles](https://community.glideapps.com/t/color-your-calendar-custom-heat-map-with-3-stunning-accent-colors/82114):
>
> What is a Heat Map Calendar? This guide will walk you through adding a Heat Map Calendar to your Glide app. HOW TO (3 EASY STEPS) STEP 1: COPY THE CODES • Use a one-row table or the user table if signed in. • Copy the desktop version code and paste it into a JavaScript column. play_button Desktop Version • Copy the mobile version code and paste it into a separate JavaScript column designated for mobile. play_button Mobile Version • Navigate to Settings \> Appearance \> Custom CSS, paste the provided CSS, and e…

---

_[View the full topic](https://community.glideapps.com/t/using-a-data-grid-component-to-simulate-a-heat-map/82783)._