There is any table generator like QuickChart?

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:

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:

Mobile view:

What I need:

So, is there anyting like QuickChart.io that makes you the table in a URL?

Thank you so so much!

Take a look at this:

1 Like

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 but I cannot found it :frowning:

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.

1 Like

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

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

1 Like

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!

It’s not simple, see below…

3 Likes

Works prefect BTW Thanks!

3 Likes

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.

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

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

THIS

BTW I did use CSS on the table like this:

<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


image

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

2 Likes

Oh its Pages, Sorry.

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/ 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:

4 Likes

Well done! :+1:

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