# URLs not clickable in data grid

**URL:** <https://community.glideapps.com/t/urls-not-clickable-in-data-grid/56085>\
**Category:** Ask for Help\
**Created:** [December 27, 2022, 12:20pm UTC](https://community.glideapps.com/t/urls-not-clickable-in-data-grid/56085 "2022-12-27T12:20:24Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![amessios](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/amessios/32/52096_2.png) [@amessios](https://community.glideapps.com/u/amessios)\
**Post date:** [December 27, 2022, 12:20pm UTC](https://community.glideapps.com/t/urls-not-clickable-in-data-grid/56085/1 "2022-12-27T12:20:24Z")

</div>

Hi all,

Here’s my project: [MP Second Jobs](https://mpsecondjobs.uk/dl/a400f7)

I have a few questions:

- If you scroll to the right of the data grid, you’ll see a Source column with URLs. These don’t seem to be clickable for the visitor. Does anyone have a solution?

- The data grid loads very very slowly and is laggy - even on desktop. On mobile, the ‘Earnings summary’ page doesn’t seem to be loading at all. Any ideas?

Also - side point to creators of the app - I wish there was a way to have some control over the default width of the columns so that I could make the Source column fit the page. 😅

Best,  
Andrew

---

<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:** [December 27, 2022, 12:35pm UTC](https://community.glideapps.com/t/urls-not-clickable-in-data-grid/56085/2 "2022-12-27T12:35:22Z")

</div>

> [@amessios](#):
>
> If you scroll to the right of the data grid, you’ll see a Source column with URLs. These don’t seem to be clickable for the visitor. Does anyone have a solution?

Try changing the column type to a URL column type in the data editor.

---

<div class="post-metadata">

**Author:** ![amessios](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/amessios/32/52096_2.png) [@amessios](https://community.glideapps.com/u/amessios)\
**Post date:** [December 27, 2022, 12:38pm UTC](https://community.glideapps.com/t/urls-not-clickable-in-data-grid/56085/3 "2022-12-27T12:38:44Z")

</div>

It is set as URL in the data source and the data grid layout page (see below). But I can also see the ‘A’ next to the column heading when it’s published, indicating it is publishing as a text-type column, which is strange.

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/2/525305b059f50e02b38a6beccea34990c2ab6ff0.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 27, 2022, 12:42pm UTC](https://community.glideapps.com/t/urls-not-clickable-in-data-grid/56085/4 "2022-12-27T12:42:19Z")

</div>

> [@amessios](#):
>
> The data grid loads very very slowly and is laggy - even on desktop. On mobile, the ‘Earnings summary’ page doesn’t seem to be loading at all. Any ideas?

I noticed this when I looked at your page earlier, and almost commented on it then.  
I think you’re loading up too much data in the Data Grid.  
I’m not sure if pagination will help, but I’d give that a try for a start.

But personally, I think I’d switch to a different collection style - probably a list. The benefit of this is that you get list item actions, so each item would be clickable.

---

<div class="post-metadata">

**Author:** ![amessios](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/amessios/32/52096_2.png) [@amessios](https://community.glideapps.com/u/amessios)\
**Post date:** [December 27, 2022, 12:46pm UTC](https://community.glideapps.com/t/urls-not-clickable-in-data-grid/56085/5 "2022-12-27T12:46:09Z")

</div>

Thanks @Darren_Murphy . I chose a data grid collection as I want to give the visitor a quick snapshot of the data i.e., now they can immediately scroll down through all of the MPs and quickly see who’s earning a lot, who’s not earning anything etc.

I don’t want to hide that information in a table or a list. I like that it’s all immediately available to view. Unless there’s a trick I’m missing with tables and lists?

---

<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:** [December 27, 2022, 12:46pm UTC](https://community.glideapps.com/t/urls-not-clickable-in-data-grid/56085/6 "2022-12-27T12:46:54Z")

</div>

> [@amessios](#):
>
> It is set as URL in the data source and the data grid layout page (see below). But I can also see the ‘A’ next to the column heading when it’s published, indicating it is publishing as a text-type column, which is strange.

Then I guess I’m not not sure. I would probably take @Darren_Murphy’s advice and change your approach. Either a simpler collection where you can click to view more details, or use template columns and joined list columns to build out an html table that you can display in a rich text component.

---

<div class="post-metadata">

**Author:** ![amessios](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/amessios/32/52096_2.png) [@amessios](https://community.glideapps.com/u/amessios)\
**Post date:** [December 27, 2022, 12:51pm UTC](https://community.glideapps.com/t/urls-not-clickable-in-data-grid/56085/7 "2022-12-27T12:51:36Z")

</div>

Thanks @Jeff_Hager . Does seem strange why it isn’t being published as URL-type - must be a glitch? For the latter of your points, I’ll need to look up the Glide tutorials (going through them at the moment) as it’s Japanese to me right now 😛 . But I’ll keep in mind for once I’ve learned a bit more about Glide.

---

<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 27, 2022, 1:01pm UTC](https://community.glideapps.com/t/urls-not-clickable-in-data-grid/56085/8 "2022-12-27T13:01:43Z")

</div>

> [@amessios](#):
>
> I chose a data grid collection as I want to give the visitor a quick snapshot of the data i.e., now they can immediately scroll down through all of the MPs and quickly see who’s earning a lot, who’s not earning anything etc.

If you’re game, I could show you a way to embed [Datatables](https://datatables.net/) in a Glide Web View component.  
It requires a little bit of coding, but I see that you’re a programmer so that shouldn’t be a problem.

So you could have something like this:

 ![Screen Shot 2022-12-27 at 8.56.16 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/1/21de6d152dc91185756090fc233d1fc3cbd3f0c0.png)

Caveats:

- Web embed is a paid Glide Feature, so if you’re on a Free Plan then you can’t use this option.
- This also has its limits when it comes to the amount of data you can load in a single table. The absolute limit is one million characters, but it starts bogging down at about 300k.
- Although the table is sortable/filterable, individual rows are not clickable.

---

<div class="post-metadata">

**Author:** ![amessios](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/amessios/32/52096_2.png) [@amessios](https://community.glideapps.com/u/amessios)\
**Post date:** [December 27, 2022, 4:07pm UTC](https://community.glideapps.com/t/urls-not-clickable-in-data-grid/56085/9 "2022-12-27T16:07:10Z")

</div>

Hi @Darren_Murphy - I’m interested! I’m on the starter package so I should have web embeds. The amount of data I load is: for the first page ~650 rows/~60K characters; for the second page ~850-1000 rows/~125K characters. So, should be OK?

---

<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 27, 2022, 5:09pm UTC](https://community.glideapps.com/t/urls-not-clickable-in-data-grid/56085/10 "2022-12-27T17:09:49Z")

</div>

Yeah, 125k shouldn’t be a problem.

Okay, so the general idea is:

- Create a HTML table for your data, using templates and a joined list
- Create a HTML document using a template, which includes the following:  
– CDN links for the required JavaScript and CSS  
– The HTML table  
– Additional JavaScript to initialise the data table
- Use a bit of JavaScript to URI encode the HTML document
- Display the URI in a web view

Here’s a video that provides a walk through.

The App I’m working with in the video is a concept I built a while back, just as a proof of concept. As you’ll see in the video, the generated URI comes out at about 118k characters. The initial table load takes a second or two, but once it’s loaded it performs fine.

The JavaScript for generating the URI:

```auto
return `data:text/html;charset=utf-8,${encodeURIComponent(p1)}`;

```

And the template I use for the HTML doc:

```auto
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    {links}
    <script type="text/javascript" class="init">
    $(document).ready(function () {
      $('#books').DataTable({
        colReorder: {colreorder},
        dom: '{dom}',
        buttons: [
            {buttons}
        ]
      });
    });
    </script>
  </head>
  <body>
    {table}
  </body>
</html>

```

Yours will probably be a bit different, depending on which options you want included - buttons & DOM options, etc.  
Consult the [datatables docs](https://datatables.net/reference/index) to learn all the gory details.

Let me know how you get on.

---

<div class="post-metadata">

**Author:** ![amessios](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/amessios/32/52096_2.png) [@amessios](https://community.glideapps.com/u/amessios)\
**Post date:** [December 28, 2022, 3:11pm UTC](https://community.glideapps.com/t/urls-not-clickable-in-data-grid/56085/11 "2022-12-28T15:11:59Z")

</div>

Awesome @Darren_Murphy, thanks so much. I’ve been playing with a plain old web embed today (linked to an excel spreadsheet hosted on my GitHub). I’ll take a closer look at your process soon - vid is very helpful too. Thank you! 🙂

---

<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:** [July 17, 2023, 7:28pm UTC](https://community.glideapps.com/t/urls-not-clickable-in-data-grid/56085/12 "2023-07-17T19:28:24Z")

</div>

[quote=“Darren\_Murphy, post:10, topic:56085”]  
The JavaScript for generating the URI:

```auto
return `data:text/html;charset=utf-8,${encodeURIComponent(p1)}`;

```

Hola Darren,

BTW, do you know a trick to open a URI link (without protocol) as a URL link? 🙄

Sounds weird but it’s my situation (and tragedy)

The URI works fine if this is sent to web browser directly or using the Glide’s Web Viewer but I need to open it as a URL in order to use **Open Link action** and show my template as a web page and print it as PDF if the user wants to.

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

The Open Link action only works with URLs so far… a tragedy 🥴

Thanks in advance for any help.

Saludos!