# Progress Bar in Table

**URL:** <https://community.glideapps.com/t/progress-bar-in-table/59008>\
**Category:** Feature Requests\
**Created:** [March 10, 2023, 8:56pm UTC](https://community.glideapps.com/t/progress-bar-in-table/59008 "2023-03-10T20:56:42Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![taleno.digital](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/taleno.digital/32/47944_2.png) [@taleno.digital](https://community.glideapps.com/u/taleno.digital)\
**Post date:** [March 10, 2023, 8:56pm UTC](https://community.glideapps.com/t/progress-bar-in-table/59008/1 "2023-03-10T20:56:42Z")

</div>

Hi Team,

I saw this from my Glide Usage.

Is this something we can do with Glide Pages as well.

 ![Screenshot 2023-03-11 at 4.54.33 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/0/3079c6e3f3ffb3abfdb753fb869534f021c47396.png)

Thanks,  
Joey

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [March 10, 2023, 9:13pm UTC](https://community.glideapps.com/t/progress-bar-in-table/59008/2 "2023-03-10T21:13:30Z")

</div>

You can use the Progress component.

 ![Screenshot_20230310-151536](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/2/72845c2acbc48e1477eb5f53acffb990d4e89f17.jpeg)

---

<div class="post-metadata">

**Author:** ![David\_Mendoza](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/david_mendoza/32/45037_2.png) [@David\_Mendoza](https://community.glideapps.com/u/David_Mendoza)\
**Post date:** [June 18, 2023, 3:30am UTC](https://community.glideapps.com/t/progress-bar-in-table/59008/3 "2023-06-18T03:30:14Z")

</div>

Hi, any suggestion to do something like this?  
In a table able to be sort  
 ![Captura de pantalla 2023-06-17 222821](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/6/263d2cecefb093dd069553b9da038efa9a7ed2ff.png)

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [June 18, 2023, 3:45am UTC](https://community.glideapps.com/t/progress-bar-in-table/59008/4 "2023-06-18T03:45:11Z")

</div>

Do the individual rows need to be clickable?  
If not, you could do something like that as a HTML table in a Rich Text component.

---

<div class="post-metadata">

**Author:** ![David\_Mendoza](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/david_mendoza/32/45037_2.png) [@David\_Mendoza](https://community.glideapps.com/u/David_Mendoza)\
**Post date:** [June 18, 2023, 4:37am UTC](https://community.glideapps.com/t/progress-bar-in-table/59008/5 "2023-06-18T04:37:23Z")

</div>

Hi, well I managed to do something like this with Quickchart  
 ![Captura de pantalla 2023-06-17 233603](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/9/29dcc854aa43d8431b7671bafbdc4d45f1aaa14c.png)

https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/164

---

<div class="post-metadata">

**Author:** ![gvalero](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/gvalero/32/1037_2.png) [@gvalero](https://community.glideapps.com/u/gvalero)\
**Post date:** [June 19, 2023, 7:26pm UTC](https://community.glideapps.com/t/progress-bar-in-table/59008/6 "2023-06-19T19:26:00Z")

</div>

Hola David,

This can work for you:

1. Create a template column and replace the variables/param you want to show:

```auto
<table border="0" cellpadding="1" cellspacing="1" style="height:20px; width:340px">
    <tbody>
	<tr>
	  <td style="width:153px"><b> {YourVariable} </b></td>
	  <td style="text-align:center; width:55px"><strong> {YourValue}% </strong></td>
	  <td style="text-align:right; width:160px">
          <div style=" margin:auto; overflow:hidden;border-radius:5px; background-color:#DDDDDD; position:relative; width:100%; height:30px;">
  	      <div style="border-radius:5px; background-color: #196ba6; position:absolute; bottom:0px; width: {YourValue}%; height:100%;">
	  </td>
	</tr>
    </tbody>
</table>

```

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/2/a27331c26a5284b0c795fa84e4865e342ef1a6b9.png)  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/4/043e0dbdcbb1a5b1db67e7d4fe266c1a96b5f361.png)

1. Later using a Rich Text component, your table should look like:

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/1/f1e9e327d1e3eacd53fc5bfee32d43c30abeaf83.png)

Saludos!