# Table view change the colour of the current date row in a csv or google sheet table

**URL:** <https://community.thunkable.com/t/table-view-change-the-colour-of-the-current-date-row-in-a-csv-or-google-sheet-table/889936>\
**Category:** Questions about Thunkable X\
**Created:** [October 10, 2020, 5:57pm UTC](https://community.thunkable.com/t/table-view-change-the-colour-of-the-current-date-row-in-a-csv-or-google-sheet-table/889936 "2020-10-10T17:57:20Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![samdar](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/samdar/32/85337_2.png) [@samdar](https://community.thunkable.com/u/samdar)\
**Post date:** [October 10, 2020, 5:57pm UTC](https://community.thunkable.com/t/table-view-change-the-colour-of-the-current-date-row-in-a-csv-or-google-sheet-table/889936/1 "2020-10-10T17:57:20Z")

</div>

Hi,

I am coming from MIT App inventor  
Please have a look to the pictures attached as well as the aia file to finalise the challenge

I aim to create 3 columns (lables) along with the day lable (brk stands for breakfast, lun stands for lunch, din stands for dinner)  
I uploaded a csv file that feeds that information(I will fill the meals later)  
and then highlight (change the colours) for the whole row according to  
the current date

Any Advice by any chance?  
Thank you in advance 🙏

 ![Capture](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/d/0/d0c6457b4f6da2ada285df186fecbb85f66b5b67.jpeg) [diet.csv](https://community.thunkable.com/uploads/short-url/xOv1XU8FJgt84B0KgAnctIoVLCb.csv) (686 Bytes)

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [October 10, 2020, 7:16pm UTC](https://community.thunkable.com/t/table-view-change-the-colour-of-the-current-date-row-in-a-csv-or-google-sheet-table/889936/2 "2020-10-10T19:16:49Z")

</div>

I would do that with formulas in Google Sheets.

---

<div class="post-metadata">

**Author:** ![samdar](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/samdar/32/85337_2.png) [@samdar](https://community.thunkable.com/u/samdar)\
**Post date:** [October 10, 2020, 7:34pm UTC](https://community.thunkable.com/t/table-view-change-the-colour-of-the-current-date-row-in-a-csv-or-google-sheet-table/889936/3 "2020-10-10T19:34:00Z")

</div>

More explanation on this will be highly appreciated  
I am after an app and I don’t want the app to require any connection to the Internet  
Local csv file or db to feed the table

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [October 10, 2020, 8:34pm UTC](https://community.thunkable.com/t/table-view-change-the-colour-of-the-current-date-row-in-a-csv-or-google-sheet-table/889936/4 "2020-10-10T20:34:09Z")

</div>

You said you would use a Google Sheet. I guess it would have to be offline but I don’t think you can connect to an offline Google Sheet in Thunkable.

I can’t give you an example without knowing more about what you’re wanting to do. For example, “all cells in a row are yellow if it’s the current day (based on cell A1 being the date format) and all cells in all other cells are blue.”

---

<div class="post-metadata">

**Author:** ![samdar](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/samdar/32/85337_2.png) [@samdar](https://community.thunkable.com/u/samdar)\
**Post date:** [October 10, 2020, 8:51pm UTC](https://community.thunkable.com/t/table-view-change-the-colour-of-the-current-date-row-in-a-csv-or-google-sheet-table/889936/5 "2020-10-10T20:51:39Z")

</div>

Thanks for taking the time to reply  
However  
I’ve attached csv file  
I am trying to create an app to organise a diet in a table  
Head row is as follows  
Date, what to eat for breakfast, what… For lunch, for dinner

October for instance  
I want the to highlight the row that belongs to the current date  
The data will be feeding from a csv file (or offline sheet)

So it should work offline no Internet connection needed

I hope it’s clear enough now what I exactly need to do

---

<div class="post-metadata">

**Author:** ![drted](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/drted/32/92694_2.png) [@drted](https://community.thunkable.com/u/drted)\
**Post date:** [October 10, 2020, 10:33pm UTC](https://community.thunkable.com/t/table-view-change-the-colour-of-the-current-date-row-in-a-csv-or-google-sheet-table/889936/6 "2020-10-10T22:33:54Z")

</div>

Check out this tread ([JSON-Bound List Demonstration](http://community.thunkable.com/t/json-bound-list-demonstration/780221)), it has an example project that creates a list (much like you have described) based on a JSON list. You will need to convert your spreadsheet to JSON. To do that, check out this thread [Data Source Performance Workaround FOUND!](http://community.thunkable.com/t/data-source-performance-workaround-found/756227).

The great thing about JSON is you can save it as a stored variable.

I hope that get you started.

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [October 11, 2020, 1:10am UTC](https://community.thunkable.com/t/table-view-change-the-colour-of-the-current-date-row-in-a-csv-or-google-sheet-table/889936/7 "2020-10-11T01:10:51Z")

</div>

Here’s a demo I made that shows how to do this with the data entered manually (since there’s no csv import feature… we need one!). I only put in the first 12 rows. The design consists of one row component and one label component and relies on the Any Component blocks.

[https://x.thunkable.com/copy/29582d834b69991c3a70982ca85fb063](https://x.thunkable.com/copy/29582d834b69991c3a70982ca85fb063)

 ![Screen Shot 2020-10-10 at 6.11.04 PM](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/3/d/3d82d9340ec2c48218cf9ec3b9dbd2eb1a70f96e.png)

---

<div class="post-metadata">

**Author:** ![samdar](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/samdar/32/85337_2.png) [@samdar](https://community.thunkable.com/u/samdar)\
**Post date:** [October 11, 2020, 6:20am UTC](https://community.thunkable.com/t/table-view-change-the-colour-of-the-current-date-row-in-a-csv-or-google-sheet-table/889936/8 "2020-10-11T06:20:06Z")

</div>

That’s fantastic job… Greatly appreciated  
Wow…  
Perfect, comprehensive and professional

The only issue now is the data source is filled manually  
I wonder if the table of the whole year is already ready to feed the app in a format of csv, excel sheet or Google sheet  
Is there any way to get the data from those preprepared files without need to connect to the Internet so that it can work offline?

---

<div class="post-metadata">

**Author:** ![drted](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/drted/32/92694_2.png) [@drted](https://community.thunkable.com/u/drted)\
**Post date:** [October 11, 2020, 11:18am UTC](https://community.thunkable.com/t/table-view-change-the-colour-of-the-current-date-row-in-a-csv-or-google-sheet-table/889936/9 "2020-10-11T11:18:10Z")

</div>

Currently there is no way to import a local file. But a Text Input Box can accept VERY long strings (thousands of characters. You can cut and past your CSV file into a text box and parse it into a list. Try a 2 step approach. First use the convert text to list block with the separator of a NEWLINE block. Loop thorough the resulting list and convert each list entry into another list using the CONVERT TEXT TO LIST block again, but this time, use a comma as the delimiter.

Good Luck!

---

<div class="post-metadata">

**Author:** ![samdar](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/samdar/32/85337_2.png) [@samdar](https://community.thunkable.com/u/samdar)\
**Post date:** [October 11, 2020, 11:45am UTC](https://community.thunkable.com/t/table-view-change-the-colour-of-the-current-date-row-in-a-csv-or-google-sheet-table/889936/10 "2020-10-11T11:45:11Z")

</div>

Thank you so much for the very professional reply  
However for a beginner like me and for the sake of any viewer to this discussion, it will be always more beneficial if you can send me the implementation of the above perfect explanation in a form of demo file to go from there  
Many of the terms mentioned are not easy enough for a person like me to understand yet 🙂

---

<div class="post-metadata">

**Author:** ![drted](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/drted/32/92694_2.png) [@drted](https://community.thunkable.com/u/drted)\
**Post date:** [October 11, 2020, 11:54am UTC](https://community.thunkable.com/t/table-view-change-the-colour-of-the-current-date-row-in-a-csv-or-google-sheet-table/889936/11 "2020-10-11T11:54:44Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![samdar](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/samdar/32/85337_2.png) [@samdar](https://community.thunkable.com/u/samdar)\
**Post date:** [October 11, 2020, 12:07pm UTC](https://community.thunkable.com/t/table-view-change-the-colour-of-the-current-date-row-in-a-csv-or-google-sheet-table/889936/12 "2020-10-11T12:07:04Z")

</div>

🤔 🤔 🤔

---

<div class="post-metadata">

**Author:** ![drted](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/drted/32/92694_2.png) [@drted](https://community.thunkable.com/u/drted)\
**Post date:** [October 11, 2020, 12:36pm UTC](https://community.thunkable.com/t/table-view-change-the-colour-of-the-current-date-row-in-a-csv-or-google-sheet-table/889936/13 "2020-10-11T12:36:19Z")

</div>

When the form loads, cut and paste the CSV into the text input box. Click the button. Then the loop will give you the contents. You will have to do a lot more work to get it into the grid you displayed.

Unfortunately, what you are trying to do is pretty tough in Thunkable. Perhaps you should consider the built in controls thunkable has and change your UI to match what Thunkable can do.

---

<div class="post-metadata">

**Author:** ![samdar](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/samdar/32/85337_2.png) [@samdar](https://community.thunkable.com/u/samdar)\
**Post date:** [October 11, 2020, 12:51pm UTC](https://community.thunkable.com/t/table-view-change-the-colour-of-the-current-date-row-in-a-csv-or-google-sheet-table/889936/14 "2020-10-11T12:51:00Z")

</div>

[https://x.thunkable.com/copy/73ad26dd1b820b65fd6166dc5a583f36](https://x.thunkable.com/copy/73ad26dd1b820b65fd6166dc5a583f36)

I followed the above proposal and I copied the csv file and did paste it into input\_box as suggested but got nothing  
Where shall I see the data ?  
I assumed that it will feed the data source and/or displayed in the webview component but nothing happened

Any advice?

I shared the link also I attached the csv file[diet.csv](https://community.thunkable.com/uploads/short-url/xOv1XU8FJgt84B0KgAnctIoVLCb.csv) (686 Bytes)

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [October 11, 2020, 3:44pm UTC](https://community.thunkable.com/t/table-view-change-the-colour-of-the-current-date-row-in-a-csv-or-google-sheet-table/889936/15 "2020-10-11T15:44:47Z")

</div>

@samdar Your code is not correct. You used **set list of rows** twice but if you look at @drted’s screenshot, you need to use **set list of columns** inside the _for each item_ loop.

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [October 11, 2020, 4:03pm UTC](https://community.thunkable.com/t/table-view-change-the-colour-of-the-current-date-row-in-a-csv-or-google-sheet-table/889936/16 "2020-10-11T16:03:15Z")

</div>

I modified your project a bit, @samdar.

[https://x.thunkable.com/copy/838adef765b462e49c82446f87eb0741](https://x.thunkable.com/copy/838adef765b462e49c82446f87eb0741)

Just preview the project and click the button.

I think with the data you have, you can just use a text string. So I copied the csv data from a text file on my computer and pasted it in. It does **not** work if I copy and paste from a spreadsheet (Excel, Google Sheets). The text has to have actual commas visible for it to work.

@drted, this is a very clever way to import the data. When I test this, though, it doesn’t quite work. It could be the way my csv is formatted. It joins the first column data with the fourth column. So instead of **ev(6-8)•1•brk1** it’s displaying it as **ev(6-8) 1•brk1**. I think the newline character isn’t getting included when I copy and paste:

 ![Screen Shot 2020-10-11 at 9.10.56 AM](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/9/09c9f6d141a24d4173f48fc0b53342eed42b158d.png)

 ![Screen Shot 2020-10-11 at 9.02.30 AM](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/d/d/dd90bcc2846abdc722aefcbfe0fda2aec8c00596.png)

---

<div class="post-metadata">

**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:** [October 11, 2020, 4:26pm UTC](https://community.thunkable.com/t/table-view-change-the-colour-of-the-current-date-row-in-a-csv-or-google-sheet-table/889936/17 "2020-10-11T16:26:11Z")

</div>

Nice work guys!

---

<div class="post-metadata">

**Author:** ![samdar](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/samdar/32/85337_2.png) [@samdar](https://community.thunkable.com/u/samdar)\
**Post date:** [October 11, 2020, 4:43pm UTC](https://community.thunkable.com/t/table-view-change-the-colour-of-the-current-date-row-in-a-csv-or-google-sheet-table/889936/18 "2020-10-11T16:43:07Z")

</div>

👏 👏 👏  
That’s mastering in this platform  
And a very thought out indeed  
3 quick points

- In MIT app Inventor we can split data at specific string can we do something similar here?
- Also I don’t think we need input\_box any longer?
- where’s the code of highlighting of the current date row ?

Thank you so much for your comprehensive reply

---

<div class="post-metadata">

**Author:** ![drted](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/drted/32/92694_2.png) [@drted](https://community.thunkable.com/u/drted)\
**Post date:** [October 11, 2020, 4:59pm UTC](https://community.thunkable.com/t/table-view-change-the-colour-of-the-current-date-row-in-a-csv-or-google-sheet-table/889936/19 "2020-10-11T16:59:24Z")

</div>

You might also neet to set the text input to multi-line. I’m not sure, I didn’t have time to work it all out. THanks for picking up my slack!

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [October 11, 2020, 5:23pm UTC](https://community.thunkable.com/t/table-view-change-the-colour-of-the-current-date-row-in-a-csv-or-google-sheet-table/889936/20 "2020-10-11T17:23:41Z")

</div>

- where’s the code of highlighting of the current date row ?

I’m not going to build the whole project for you. The point of the forums is to get help with specific issues you’re having coding something. You now have the pieces you need to make this whole. Put everything together and then if something doesn’t work, provide details and screenshots if possible and we can help you more.

[Next page](https://community.thunkable.com/t/table-view-change-the-colour-of-the-current-date-row-in-a-csv-or-google-sheet-table/889936.md?page=2)
