Create a circular progress bar for table cell data

App Building
, ,
1

Hey,
I have a very simple thing to do , I just want to show a circular progress bar in one of my table cell. I am trying to use this library (GitHub - tomik23/circular-progress-bar: ⭕ A circular progress bar in svg. No dependencies. ~2KB gzip) added it in the app's javascript. in the table cell put html for it , now I'm not sure where js functions will go , tried from scripts & style > javascript but nothing is showing

Can any one help me on this thanks

2

Hey @mpmohi! Would you mind sharing your current HTML column's code? And out of curiosity, just to make sure this library is actually supported in Retool, does the code work if you put it in a standalone HTML component?

3

hello @victoria ,

  1. No this does not work with the HTML component also but I am not sure if I am doing everything correctly. What I did a) added one HTML block and added the div clas.... b) added js library in apps and script c) added const circle... js in apps_script_and_style javascript block.
    image
    image1135×245 31.8 KB

image
image1784×485 40.5 KB

My final goal is to use a circular progress bar for the Goal value in table
I am not sure about how should I use this js library. So far it seems to me it doesn't using any 'require' statement and it's just a function on it's core: https://cdn.jsdelivr.net/gh/tomik23/circular-progress-bar@1.1.9/dist/circularProgressBar.min.js

4

Hey mpmohi! I am able to get this library to work in Retool, but only in a custom component. I don't believe you'll be able to add this particular library's progress circle to the table component because of its requirement to grab an element on the page by its class name. I would suggest using a listview instead of a table, and then using our native progress circle component there. Let me know if you have any questions on that setup!

1 Like
5

Hey @joeBumbaca ,
Thanks for looking into this. As you suggested I have tried with list view but it is not as nice looking as table so skipping this.

Thanks for your time though.