# Data Viewer Grid size restrictions

**URL:** https://community.thunkable.com/t/data-viewer-grid-size-restrictions/1075314
**Category:** Questions about Thunkable X
**Created:** [January 30, 2021, 6:26am UTC](https://community.thunkable.com/t/data-viewer-grid-size-restrictions/1075314 "2021-01-30T06:26:04Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![codeswept](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/codeswept/32/87755_2.png) [@codeswept](https://community.thunkable.com/u/codeswept)
#### Post date: [January 30, 2021, 6:26am UTC](https://community.thunkable.com/t/data-viewer-grid-size-restrictions/1075314/1 "2021-01-30T06:26:04Z")

</div>

In my app, I’m using a data viewer grid to display data. But these rows are limited to only two blocks per row. It looks very uneven and is also a waste of space. I want to display my data in a grid like the way apps are displayed on a phone, with around four items per row.  
[![](https://i.pinimg.com/originals/25/28/1a/25281a74de72e7aeacca0331000693cc.jpg) ](https://i.pinimg.com/originals/25/28/1a/25281a74de72e7aeacca0331000693cc.jpg)  
Is there any way I can break these size restrictions and display my data?

Thanks

---

<div class="post-metadata">

### Author: ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)
#### Post date: [January 30, 2021, 8:56am UTC](https://community.thunkable.com/t/data-viewer-grid-size-restrictions/1075314/2 "2021-01-30T08:56:38Z")

</div>

You may build your own custom grid and use the component’s size you want.

---

<div class="post-metadata">

### Author: ![codeswept](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/codeswept/32/87755_2.png) [@codeswept](https://community.thunkable.com/u/codeswept)
#### Post date: [January 30, 2021, 1:46pm UTC](https://community.thunkable.com/t/data-viewer-grid-size-restrictions/1075314/3 "2021-01-30T13:46:48Z")

</div>

I forgot to mention that this is a custom DVL.

---

<div class="post-metadata">

### Author: ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)
#### Post date: [January 30, 2021, 4:10pm UTC](https://community.thunkable.com/t/data-viewer-grid-size-restrictions/1075314/4 "2021-01-30T16:10:46Z")

</div>

You shocked me by your answer so I had to test it before replying.

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/9/9/99fd1cf0be85df0d5472ccb73dd05364b8062c3f.png)

The data is not nicely presentable but I have more than just two columns in the same row of the grid.

---

<div class="post-metadata">

### Author: ![codeswept](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/codeswept/32/87755_2.png) [@codeswept](https://community.thunkable.com/u/codeswept)
#### Post date: [January 31, 2021, 3:20am UTC](https://community.thunkable.com/t/data-viewer-grid-size-restrictions/1075314/5 "2021-01-31T03:20:06Z")

</div>

@muneer  
 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/8/1/81c846f905bf0d087569c24bbe9d27a6906b7577.png)  
That’s how mine has turned out.  
This is what I created for my custom DVL:  
 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/3/9/39fd857fd4f728150ebf6daf3d36e26e1bcbb496.png)  
The column is enlarged when I added it as the layout in my DVL. This is the look of the DVL:  
 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/6/d/6d702407fe4b7e018009756493a1372812d60026.png)  
Any idea what to do? I can privately send you the project link if needed.

---

<div class="post-metadata">

### Author: ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)
#### Post date: [January 31, 2021, 6:26am UTC](https://community.thunkable.com/t/data-viewer-grid-size-restrictions/1075314/6 "2021-01-31T06:26:04Z")

</div>

I got what you mean. I tricked Thunkable by placing TWO images side by side (in the custom layout) and this way I forced Thunkable to repeat them on the screen and it looks like you have 4 icons in a row.

If this can be a solution to what you have now then you need to modify the structure of your table to fit this customization.

---

<div class="post-metadata">

### Author: ![codeswept](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/codeswept/32/87755_2.png) [@codeswept](https://community.thunkable.com/u/codeswept)
#### Post date: [January 31, 2021, 6:27am UTC](https://community.thunkable.com/t/data-viewer-grid-size-restrictions/1075314/7 "2021-01-31T06:27:28Z")

</div>

So basically I should put two images in my DVL?

---

<div class="post-metadata">

### Author: ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)
#### Post date: [January 31, 2021, 6:29am UTC](https://community.thunkable.com/t/data-viewer-grid-size-restrictions/1075314/8 "2021-01-31T06:29:51Z")

</div>

You need to have a row and place TWO columns in it and in each column you will have an image and a label under it.

It worked for me

---

<div class="post-metadata">

### Author: ![codeswept](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/codeswept/32/87755_2.png) [@codeswept](https://community.thunkable.com/u/codeswept)
#### Post date: [January 31, 2021, 6:35am UTC](https://community.thunkable.com/t/data-viewer-grid-size-restrictions/1075314/9 "2021-01-31T06:35:45Z")

</div>

![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/f/1/f1424f82406873a8a9c1bd5c3f5d1f20b5f8354a.png)  
I just did that and the clock and calendar are overlapping

---

<div class="post-metadata">

### Author: ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)
#### Post date: [January 31, 2021, 6:37am UTC](https://community.thunkable.com/t/data-viewer-grid-size-restrictions/1075314/10 "2021-01-31T06:37:53Z")

</div>

Which means you need to adjust the borders / padding of your components. That’s what I presume.

---

<div class="post-metadata">

### Author: ![codeswept](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/codeswept/32/87755_2.png) [@codeswept](https://community.thunkable.com/u/codeswept)
#### Post date: [January 31, 2021, 6:38am UTC](https://community.thunkable.com/t/data-viewer-grid-size-restrictions/1075314/11 "2021-01-31T06:38:32Z")

</div>

Trying that right now

---

<div class="post-metadata">

### Author: ![codeswept](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/codeswept/32/87755_2.png) [@codeswept](https://community.thunkable.com/u/codeswept)
#### Post date: [January 31, 2021, 6:42am UTC](https://community.thunkable.com/t/data-viewer-grid-size-restrictions/1075314/12 "2021-01-31T06:42:05Z")

</div>

I am unable to save the updated row as a DVL. I tried duplicating it and then saving it, but it isn’t working.

---

<div class="post-metadata">

### Author: ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)
#### Post date: [January 31, 2021, 6:45am UTC](https://community.thunkable.com/t/data-viewer-grid-size-restrictions/1075314/13 "2021-01-31T06:45:37Z")

</div>

Can you go to main Thunkable page and delete saved layout for this particular one from the Saved Custom Layout List. Just a suggestion because I could not think of anything else.

---

<div class="post-metadata">

### Author: ![codeswept](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/codeswept/32/87755_2.png) [@codeswept](https://community.thunkable.com/u/codeswept)
#### Post date: [January 31, 2021, 6:59am UTC](https://community.thunkable.com/t/data-viewer-grid-size-restrictions/1075314/14 "2021-01-31T06:59:23Z")

</div>

Thanks. I hard refreshed the page, and it worked. How does this look?  
 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/2/a/2a842a44e2fa891acf1117702fdee1d119197ecf.png)  
Is it too crowded?

---

<div class="post-metadata">

### Author: ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)
#### Post date: [January 31, 2021, 7:04am UTC](https://community.thunkable.com/t/data-viewer-grid-size-restrictions/1075314/15 "2021-01-31T07:04:26Z")

</div>

I must say you are a persistent person and persistence pays off.

This is just beautifying and decoration. You might check reducing the image size

---

<div class="post-metadata">

### Author: ![codeswept](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/codeswept/32/87755_2.png) [@codeswept](https://community.thunkable.com/u/codeswept)
#### Post date: [January 31, 2021, 7:07am UTC](https://community.thunkable.com/t/data-viewer-grid-size-restrictions/1075314/16 "2021-01-31T07:07:00Z")

</div>

Thanks for the tip. Will reduce the image size.  
Also, there’s another problem. I want to navigate to a page(specified in my data table) when any image is clicked. But since there are two image in one DVL that are meant to be separate, both images are clicked at once. Do you know of any workarounds?

---

<div class="post-metadata">

### Author: ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)
#### Post date: [January 31, 2021, 7:14am UTC](https://community.thunkable.com/t/data-viewer-grid-size-restrictions/1075314/17 "2021-01-31T07:14:03Z")

</div>

> [@codeswept](#):
>
> both images are clicked at once. Do you know of any workarounds?

One thing I like about Thunkable is the availability of a workaround

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/d/0ddb138240a42d30e247b6a620b7313b8ced2df0.png)

In the data viewer grid, you can drill down to each component. The image here is for a list but the same applies here. I do not have the exact answer but I know with your level of persistency you will find a way.

---

<div class="post-metadata">

### Author: ![codeswept](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/codeswept/32/87755_2.png) [@codeswept](https://community.thunkable.com/u/codeswept)
#### Post date: [January 31, 2021, 7:17am UTC](https://community.thunkable.com/t/data-viewer-grid-size-restrictions/1075314/18 "2021-01-31T07:17:14Z")

</div>

So how do I know whether the user clicked image1 or image2?

---

<div class="post-metadata">

### Author: ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)
#### Post date: [January 31, 2021, 7:19am UTC](https://community.thunkable.com/t/data-viewer-grid-size-restrictions/1075314/19 "2021-01-31T07:19:42Z")

</div>

One thing that comes in mind is the Any image

![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/2/c/2c7628f750319939c94e4ac3824eff357b3843b1.png)

Sorry, the wrong photo but I think you got what I mean.

---

<div class="post-metadata">

### Author: ![codeswept](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/codeswept/32/87755_2.png) [@codeswept](https://community.thunkable.com/u/codeswept)
#### Post date: [January 31, 2021, 7:23am UTC](https://community.thunkable.com/t/data-viewer-grid-size-restrictions/1075314/20 "2021-01-31T07:23:36Z")

</div>

Thank you so much for your help! I managed to do this:

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/f/7/f74f15d19f68f8193f162e90839f8ed81211eedf.png) I initially tried to find a when column1 click block, but I didn’t find any, so went with image. The only thing is that the user will go to the wrong pageif he/she is slightly off-center.

[Next page](https://community.thunkable.com/t/data-viewer-grid-size-restrictions/1075314.md?page=2)
