# Graphic Rendering **URL:** \ **Category:** Questions about Thunkable X\ **Tags:** design\ **Created:** [May 16, 2020, 9:08am UTC](https://community.thunkable.com/t/graphic-rendering/570061 "2020-05-16T09:08:54Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![wikilinks.infooleua0](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/wikilinks.infooleua0/32/68594_2.png) [@wikilinks.infooleua0](https://community.thunkable.com/u/wikilinks.infooleua0)\ **Post date:** [May 16, 2020, 9:08am UTC](https://community.thunkable.com/t/graphic-rendering/570061/1 "2020-05-16T09:08:54Z")
Hi, I was trying to improve my app. It is an app meant for restaurants and this is the screen that displays the tables and their state ( free/ reserved/ waiting for waiter etc). At the moment this is what it looks like, I used a list. All the data are read from a Real-time DB, the number of tables can be chosen by the user and so it’s different from case to case. Using a list to display all the data is functional since it adapts to the number of elements but, it is not exactly a pleasure for the eyes. ![be918ae8-3d75-4bd7-85e7-93923efbfe6c](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/a/9/a9b527e5e023397c7582c5f410408c0f5d5870f8.jpeg) I would like to have something like this (below) to display the data but I don’t know if it’s possible to have it and if it will grant me the same flexibility of the list. Do you have any suggestions? Which instruments could I use? Moreover, as you can see, each square contains more than just an info (always taken from the DB): -State of the sable -Red or green point -Number of the table Does exist a component to design custom elements? ![0a9c8c87-bea2-4194-8071-558f81cec984](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/1/a/1ad702e92899dadb882ce4b835286d09c89b94de.jpeg) Thank you for your time! ---
**Author:** ![sirfrancisdrake](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/sirfrancisdrake/32/70212_2.png) [@sirfrancisdrake](https://community.thunkable.com/u/sirfrancisdrake)\ **Post date:** [May 16, 2020, 10:12am UTC](https://community.thunkable.com/t/graphic-rendering/570061/2 "2020-05-16T10:12:33Z")
Ciao, suppongo sia italiano 🙂 ! Mi verrebbe in mente di fare lo schermo verticale, mettere un container colonna scrollabile, all’interno ci sono un numero sufficiente di container riga. Dentro ogni container riga metti 3 button (un button un tavolo). Ogni button ha immagine diversa a seconda dello stato del tavolo che cambi col metodo del button stesso. Non credo sia malvagia come struttura. Se vuoi farlo interattivo metti un timer che ogni n secondi verifica il database e riscarica la lista dello status dei tavoli e una procedura ti riassegna le immagini ai pulsanti a seconda dello stato il pulsante si puo’ anche aggiungere in runtime con anyobject… ma la vedo molto piu complicata ciao ---
**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\ **Post date:** [May 16, 2020, 12:39pm UTC](https://community.thunkable.com/t/graphic-rendering/570061/3 "2020-05-16T12:39:07Z")
You can absolutely make this with thunkable! Check this project out > [@Custom Dataviewer and data sources (extended list viewer)](http://community.thunkable.com/t/custom-dataviewer-and-data-sources-extended-list-viewer/568413): > > I wanted to share this with those who want to use a data source not yet set up for the new dataviewer, like an API. this example uses my news API account (feel free to abuse it and get it shut down if you really desire) it imitates the cards created by the new dataviewer.let me know what you think. remix it up and come back to share! [https://thunk.app/w/-P6GK8VPv](https://thunk.app/w/-P6GK8VPv)[https://x.thunkable.com/copy/76e5b05a875febe850f44366434e959d](https://x.thunkable.com/copy/76e5b05a875febe850f44366434e959d) blocks used I just realiz… I made custom cards and linked 6 pieces of info to each card. This could be updated after a button press, timer, or via the variable listener methods eith RealtimeDB You’ll end up using multiple components to make a model of what each should look like. Like this Column Row Column Row Column Label Column Image Row Label For styling Set all nested row/columns to fill container. Set outer column to fit contents for height and width. set the outer column corner radius to 20 Set the shadow for the putter column. Now style the font size for the labels Now use absolute positioning to place them exactly where you want. Be sure to use your phone for this past part. This won’t appear correctly on the live preview on a computer. Now come the blocks ---
**Author:** ![wikilinks.infooleua0](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/wikilinks.infooleua0/32/68594_2.png) [@wikilinks.infooleua0](https://community.thunkable.com/u/wikilinks.infooleua0)\ **Post date:** [May 18, 2020, 2:50pm UTC](https://community.thunkable.com/t/graphic-rendering/570061/4 "2020-05-18T14:50:21Z")
Ciao, grazie della risposta! Soluzione già testata, ha il grande problema che scaricando dati in continuazione mi fa consumare un sacco di dati ---
**Author:** ![sirfrancisdrake](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/sirfrancisdrake/32/70212_2.png) [@sirfrancisdrake](https://community.thunkable.com/u/sirfrancisdrake)\ **Post date:** [May 18, 2020, 6:18pm UTC](https://community.thunkable.com/t/graphic-rendering/570061/5 "2020-05-18T18:18:38Z")
ciao @wikilinks.infooleua0 beh ovviamente se il telefono e’ collegato 3g/4g/lte/5g ecc… hai questo piccolo difetto!! Pero’ se la pensi bene puoi far si che il telefono trasmetta solamente un flag che indichi che ci sono degli update: server e telefono si scambiano solamente pochissimi dati se non ci sono update rilevanti. Come uno dei due ha una prenotazione allora il flag diventa imperativo “SCARICA!!” e giu dati… 🙂 Magari non conoscendo a fondo il progetto l’ho pensata troppo facile ! buon lavoro!! ---
**Author:** ![wikilinks.infooleua0](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/wikilinks.infooleua0/32/68594_2.png) [@wikilinks.infooleua0](https://community.thunkable.com/u/wikilinks.infooleua0)\ **Post date:** [May 22, 2020, 2:46pm UTC](https://community.thunkable.com/t/graphic-rendering/570061/6 "2020-05-22T14:46:05Z")
Mi hai dato comunque degli spunti di riflessione molto utili !! ---
**Author:** ![wikilinks.infooleua0](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/wikilinks.infooleua0/32/68594_2.png) [@wikilinks.infooleua0](https://community.thunkable.com/u/wikilinks.infooleua0)\ **Post date:** [May 26, 2020, 9:29am UTC](https://community.thunkable.com/t/graphic-rendering/570061/7 "2020-05-26T09:29:28Z")
Hey Jared, sorry for the late response, it was very helpful! This is the outcome 😄 ![Screenshot 2020-05-26 at 11.26.41](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/3/5/351db9c532e7c464d368f04611092b2170bc4e01.png) It just takes a while to create the layout every time, I’m using the clone function, so I read every time how many tables there are and clone the squares until they display all the tables. ---
**Author:** ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)\ **Post date:** [November 8, 2024, 11:28am UTC](https://community.thunkable.com/t/graphic-rendering/570061/8 "2024-11-08T11:28:59Z")