There is any table generator like QuickChart?

[Eric_Ruiz_Molero]

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?

Hello, I need to figure out how to make this tables on Glide: [Captura de pantalla 2021-12-10 a las 14.03.30] 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 that could help me out? Thank you soo much!

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!

[SantiagoPerez]

Take a look at this:

How To: CSS Table with dynamic filtering and sorting

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 Links: divtable.com table styler Experimental code to sort joined list by secondary joined list Copyable Demo App Note that the experimental code column is removed from the copyable app, so the table isn’t sorted.

[Eric_Ruiz_Molero]

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

[BlakeWS]

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

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 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. [ima…

[ThinhDinh]

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

[Darren_Murphy]

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

[Eric_Ruiz_Molero]

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!

[Darren_Murphy]

It’s not simple, see below…

Table as image URL

Does anyone know how I can get something similar to 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…

[Lin_Altshuler]

Works prefect BTW Thanks!

[Eric_Ruiz_Molero]

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.

[Eric_Ruiz_Molero]

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

[Lin_Altshuler]

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

[Lin_Altshuler]

THIS

Pivot table using relations

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. [image] 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:

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

[ThinhDinh]

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

[Lin_Altshuler]

Oh its Pages, Sorry.

[Eric_Ruiz_Molero]

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:

[Darren_Murphy]

Well done!