# There is any table generator like QuickChart?

**URL:** <https://community.glideapps.com/t/there-is-any-table-generator-like-quickchart/35902>\
**Category:** Ask for Help\
**Created:** [December 13, 2021, 1:46pm UTC](https://community.glideapps.com/t/there-is-any-table-generator-like-quickchart/35902 "2021-12-13T13:46:50Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![Eric\_Ruiz\_Molero](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eric_ruiz_molero/32/15371_2.png) [@Eric\_Ruiz\_Molero](https://community.glideapps.com/u/Eric_Ruiz_Molero)\
**Post date:** [December 13, 2021, 1:46pm UTC](https://community.glideapps.com/t/there-is-any-table-generator-like-quickchart/35902/1 "2021-12-13T13:46:50Z")

</div>

Hello all,

I’m continuing struggling with tables on Glide. I want to make a dashboard with two simple tables as I show on the following glide topic:

> [@How I can make these tables? There is something like QuickChart.io?](https://community.glideapps.com/t/how-i-can-make-these-tables-there-is-something-like-quickchart-io/35786):
>
> Hello, I need to figure out how to make this tables on Glide: I know you can create tables on Glide Pages but that’s not a solution when I want more than 3 columns and also should be really visual as I show on the image. So, I wonder what should be the best idea… there is some API like [QuickChart.io](http://QuickChart.io) that could help me out? Thank you soo much! pray

The solution given was perfect but I encountered that Glide Tables does not support CSS. And I am struggling to have a simple but at least good looking table and being responsive also. This is what I have reached already:

Web view:

 ![Captura de pantalla 2021-12-13 a las 13.39.17](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/8/b8cf609cffb1bf5fa9b12a2e174eadf05e9bc0aa.jpeg)

Mobile view:

 ![Captura de pantalla 2021-12-13 a las 13.47.37](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/b/1b7f0700675b2524024ff52fac6eb6df17bc3246.jpeg)

What I need:

 ![Captura de pantalla 2021-12-13 a las 13.48.26](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/9/89fa871a894304347a18ffe96a69784a3319445f.png)

So, is there anyting like [QuickChart.io](http://QuickChart.io) that makes you the table in a URL?

Thank you so so much!

---

<div class="post-metadata">

**Author:** ![SantiagoPerez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/santiagoperez/32/16807_2.png) [@SantiagoPerez](https://community.glideapps.com/u/SantiagoPerez)\
**Post date:** [December 13, 2021, 3:54pm UTC](https://community.glideapps.com/t/there-is-any-table-generator-like-quickchart/35902/2 "2021-12-13T15:54:23Z")

</div>

Take a look at this:

> [@How To: CSS Table with dynamic filtering and sorting](https://community.glideapps.com/t/how-to-css-table-with-dynamic-filtering-and-sorting/35784):
>
> I’ve been asked a few questions about this one, so here is a tutorial that walks through the process step by step. The app I’m working on in the tutorial is copyable, so feel free to make your own copy (see link below). enjoy slight_smile Links: [divtable.com table styler](https://divtable.com/table-styler/) Experimental code to sort joined list by secondary joined list – [Link to use in External Code column](https://mcdarren.github.io/glide-jl-sort-by-keys-advanced/) – [Clone link](https://github.com/mcdarren/glide-jl-sort-by-keys-advanced)[Copyable Demo App](https://html-tables-concept.glideapp.io/) Note that the experimental code column is removed from…

---

<div class="post-metadata">

**Author:** ![Eric\_Ruiz\_Molero](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eric_ruiz_molero/32/15371_2.png) [@Eric\_Ruiz\_Molero](https://community.glideapps.com/u/Eric_Ruiz_Molero)\
**Post date:** [December 13, 2021, 4:11pm UTC](https://community.glideapps.com/t/there-is-any-table-generator-like-quickchart/35902/3 "2021-12-13T16:11:58Z")

</div>

Yesh @SantiagoPerez , thank you! But I have already seen that thread. The thing is that Glide Tables are not supporting CSS and even that having a HTML/CSS table is not responsive for mobile. So the best thing would be to have a tool like [QuickChart.io](http://QuickChart.io) but I cannot found it ☹

---

<div class="post-metadata">

**Author:** ![BlakeWS](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/blakews/32/24377_2.png) [@BlakeWS](https://community.glideapps.com/u/BlakeWS)\
**Post date:** [December 13, 2021, 5:58pm UTC](https://community.glideapps.com/t/there-is-any-table-generator-like-quickchart/35902/4 "2021-12-13T17:58:57Z")

</div>

I’m in a similar position @Eric_Ruiz_Molero , and I think that what @Darren_Murphy and @Jeff_Hager have done with divs for a calendar may give you what you want - even dynamic content.

> [@Generating & displaying a monthly shift roster](https://community.glideapps.com/t/generating-displaying-a-monthly-shift-roster/21708/14):
>
> hehe, you got me playing with this too. I found some stuff here and I’m playing with this particular one: [https://codepen.io/corvus-007/pen/MzEKyJ](https://codepen.io/corvus-007/pen/MzEKyJ) What I like is that it doesn’t use tables, so it seems like it might be a little cleaner. There’s still the question of how to dynamically build it for each month, so I still need to figure that out. Right now I’m playing with the CSS. Changed a couple of things and had to fix some CSS that wasn’t rendering with glide. Got this so far.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [December 13, 2021, 11:42pm UTC](https://community.glideapps.com/t/there-is-any-table-generator-like-quickchart/35902/5 "2021-12-13T23:42:15Z")

</div>

That one also has a lot of CSS, so I think it’s a no go.

---

<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:** [December 14, 2021, 1:59am UTC](https://community.glideapps.com/t/there-is-any-table-generator-like-quickchart/35902/6 "2021-12-14T01:59:30Z")

</div>

If the table has a fixed number of rows/columns, then Cloudinary might be an option.

---

<div class="post-metadata">

**Author:** ![Eric\_Ruiz\_Molero](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eric_ruiz_molero/32/15371_2.png) [@Eric\_Ruiz\_Molero](https://community.glideapps.com/u/Eric_Ruiz_Molero)\
**Post date:** [December 14, 2021, 8:43am UTC](https://community.glideapps.com/t/there-is-any-table-generator-like-quickchart/35902/7 "2021-12-14T08:43:49Z")

</div>

Hey @Darren_Murphy , thank you for your response. This could be a solution as I can make the rows and columns fixed. But I’m searching about info around making tables on Cloudinary but I haven’t found anything related. Could you help me with that? Thank you!

---

<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:** [December 14, 2021, 9:54am UTC](https://community.glideapps.com/t/there-is-any-table-generator-like-quickchart/35902/8 "2021-12-14T09:54:56Z")

</div>

It’s not simple, see below…

> [@Table as image URL](https://community.glideapps.com/t/table-as-image-url/32047):
>
> Does anyone know how I can get something similar to [quickchart.io](http://quickchart.io) but for HTML tables? I would like to display it in a card view. I tried GraphViz but its not the best design I have seen…

---

<div class="post-metadata">

**Author:** ![Lin\_Altshuler](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lin_altshuler/32/32591_2.png) [@Lin\_Altshuler](https://community.glideapps.com/u/Lin_Altshuler)\
**Post date:** [December 14, 2021, 9:58am UTC](https://community.glideapps.com/t/there-is-any-table-generator-like-quickchart/35902/9 "2021-12-14T09:58:29Z")

</div>

Works prefect BTW Thanks!

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/a/dacb541b92802168c7834e274d924ceb8ae640c2.png)

---

<div class="post-metadata">

**Author:** ![Eric\_Ruiz\_Molero](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eric_ruiz_molero/32/15371_2.png) [@Eric\_Ruiz\_Molero](https://community.glideapps.com/u/Eric_Ruiz_Molero)\
**Post date:** [December 14, 2021, 10:31am UTC](https://community.glideapps.com/t/there-is-any-table-generator-like-quickchart/35902/10 "2021-12-14T10:31:06Z")

</div>

Thank you @Darren_Murphy ! This will help me with the fixed table. The other one I could possibly use Glide Table as I could change columns to rows and have a vertical table.

---

<div class="post-metadata">

**Author:** ![Eric\_Ruiz\_Molero](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eric_ruiz_molero/32/15371_2.png) [@Eric\_Ruiz\_Molero](https://community.glideapps.com/u/Eric_Ruiz_Molero)\
**Post date:** [December 14, 2021, 10:31am UTC](https://community.glideapps.com/t/there-is-any-table-generator-like-quickchart/35902/11 "2021-12-14T10:31:41Z")

</div>

Leaves me in peace you could do it! Sounds quite difficult to implement 😅

---

<div class="post-metadata">

**Author:** ![Lin\_Altshuler](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lin_altshuler/32/32591_2.png) [@Lin\_Altshuler](https://community.glideapps.com/u/Lin_Altshuler)\
**Post date:** [December 14, 2021, 5:32pm UTC](https://community.glideapps.com/t/there-is-any-table-generator-like-quickchart/35902/12 "2021-12-14T17:32:33Z")

</div>

Oh, I see now that actually… this is not using Cloudinary it was a regular HTML with CSS from a template data row and a joined list. but maybe it will do?  
I am looking for the relevant thread now

---

<div class="post-metadata">

**Author:** ![Lin\_Altshuler](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lin_altshuler/32/32591_2.png) [@Lin\_Altshuler](https://community.glideapps.com/u/Lin_Altshuler)\
**Post date:** [December 14, 2021, 5:42pm UTC](https://community.glideapps.com/t/there-is-any-table-generator-like-quickchart/35902/13 "2021-12-14T17:42:11Z")

</div>

THIS

> [@Pivot table using relations](https://community.glideapps.com/t/pivot-table-using-relations/30981):
>
> Hi guys, How can I pivot my glide table using only relations within the table and lookup columns? The UserID is also stored as the ViewingUser based on the signed in user column. I started thinking about row numbers as templates with the RowID somehow… Any suggestions? Thanks

BTW I did use CSS on the table like this:

```auto
<p><style>
table.darkTable {
  border: 2px solid #000000;
  background-color: #202020;
  width: 100%;
  height: 200px;
  text-align: center;
direction:rtl;
  border-collapse: collapse;
}
table.darkTable td, table.darkTable th {
  border: 1px solid #4A4A4A;
  padding: 3px 2px;
}
table.darkTable tbody td {
  font-size: 14px;
  color: #FFFFFF;
}
table.darkTable tr:nth-child(even) {
  background: #000000;
}
table.darkTable thead {
  background: #000000;
  border-bottom: 3px solid #000000;
}
table.darkTable thead th {
  font-size: 15px;
  font-weight: normal;
  color: #E6E6E6;
  text-align: center;
  border-left: 2px solid #4A4A4A;
}
table.darkTable thead th:first-child {
  border-left: none;
}

table.darkTable tfoot td {
  font-size: 12px;
}
</style></p>

```

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/e/0e034923360b3ee07db0647bcb1e110acc7581a1.png)

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/e/beb749ea60bbe07c8ec21bc1d9064e120dfde39f.png)

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/9/5920e9fb12d426af98d2c76bd965ffe5a644a646.png)  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/8/2836faae7cf9269c11afe6f1f5a08dde97777bcc.png)  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/3/c3c8a9ce2fe643c20d66dd062c09d4e8ce2f1bf8.png)

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [December 15, 2021, 12:21am UTC](https://community.glideapps.com/t/there-is-any-table-generator-like-quickchart/35902/14 "2021-12-15T00:21:33Z")

</div>

What you used in there includes CSS, so it won’t work for Glide Pages.

---

<div class="post-metadata">

**Author:** ![Lin\_Altshuler](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lin_altshuler/32/32591_2.png) [@Lin\_Altshuler](https://community.glideapps.com/u/Lin_Altshuler)\
**Post date:** [December 15, 2021, 5:23pm UTC](https://community.glideapps.com/t/there-is-any-table-generator-like-quickchart/35902/15 "2021-12-15T17:23:08Z")

</div>

Oh its Pages, Sorry.

---

<div class="post-metadata">

**Author:** ![Eric\_Ruiz\_Molero](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eric_ruiz_molero/32/15371_2.png) [@Eric\_Ruiz\_Molero](https://community.glideapps.com/u/Eric_Ruiz_Molero)\
**Post date:** [December 15, 2021, 5:35pm UTC](https://community.glideapps.com/t/there-is-any-table-generator-like-quickchart/35902/16 "2021-12-15T17:35:38Z")

</div>

Sooo, finally I got it as @Darren_Murphy explained on a thread before.

1. Create a Cloudinary account (free)
2. Upload an image of your table. This is why the rows and columns are fixed, is an image where we will put text on top with a XY position.
3. Create your XY position text.
4. Use template function on Glide to make this values dynamic.

In order to do the step 3 I put some notes here:

**URL TABLE encoded**

- **%20**  **espace**
- **%0D%0A**  **break**
- **%3A**  **":"**

**EXAMPLE OF THE IMAGE URL GENERATED WITH TEXT:**

**[https://res.cloudinary.com/treseiscero/image/upload/](https://res.cloudinary.com/treseiscero/image/upload/)** l\_text:arial\_30: **PERSONA** %20 **1%0D%0APERSONA** %20 **2** ,g\_west,x\_310,y\_-320/l\_text:arial\_30: **PERSONA** %20 **3%0D%0APERSONA** %20 **4** ,g\_west,x\_790,y\_-320/l\_text:arial\_30: **PERSONA** %20 **5%0D%0APERSONA** %20 **6** ,g\_west,x\_1280,y\_-320/l\_text:arial\_30: **PERSONA** %20 **7%0D%0APERSONA** %20 **8** ,g\_west,x\_310,y\_-50/l\_text:arial\_30: **PERSONA** %20 **9%0D%0APERSONA** %20 **10** ,g\_west,x\_790,y\_-50/l\_text:arial\_30: **PERSONA** %20 **11%0D%0APERSONA** %20 **12** ,g\_west,x\_1280,y\_-50/l\_text:arial\_30: **PERSONA** %20 **13%0D%0APERSONA** %20 **14** ,g\_west,x\_310,y\_210/l\_text:arial\_30: **PERSONA** %20 **15%0D%0APERSONA** %20 **16** ,g\_west,x\_790,y\_210/l\_text:arial\_30: **PERSONA** %20 **17%0D%0APERSONA** %20 **18** ,g\_west,x\_1280,y\_210/ **Captura\_de\_pantalla\_2021-12-15\_a\_las\_16.03.25\_cmsmin.png**

**RESULT:**

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/e/6ee86344fb9f655e0a988d33f47201e43a1e3c10.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:** [December 16, 2021, 2:13am UTC](https://community.glideapps.com/t/there-is-any-table-generator-like-quickchart/35902/17 "2021-12-16T02:13:55Z")

</div>

Well done! 👍

---

<div class="post-metadata">

**Author:** ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)\
**Post date:** [December 17, 2021, 2:14am UTC](https://community.glideapps.com/t/there-is-any-table-generator-like-quickchart/35902/18 "2021-12-17T02:14:07Z")

</div>

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.