How do you create a table (grid) to edit or delete items

[Kleyber_Derick]

Hi All,

I've posted something about this before, but it was just a possibility. Now my client decided to see a table (grid) with all data inline, including a button to edit and other button to delete. I was taking a look into TableArrangement, but I've read not so good opinions about it. So, does anyone has an example to create a data table, with these two options (edit and delete)?

[Arman]

if you mean a table data like Google sheets this probaly help

[FREE] TableViewer - fully style customized to show table data

I have make another version of TableViewer, it's a package of Webviewer and Javascript and CSS. so you can set up the style as you wish, if you know some CSS knowledge. v8 UPDATE add event OnShowTable, fired after ShowTable is called. v7 UPDATE add property TransparentBackground, designer only. V6 UPDATE SetStyleSheet now can accept url to an external css file. add SetClass block, which can set class to a tag or id selector add ClearStyle block, which can clear all styles, including the …

[TIMAI2]

You could also use CompCreator to generate a table/grid with dynamic components (also Listviews)

Or

Do it with html

[Kleyber_Derick]

Good option @Arman. Thank you!!!

[Kleyber_Derick]

Thank you @TIMAI2. They are good options too. But I didn't see in any of them how to put a button (or two in my case) in each row of the table, allowing to edit and delete the line...

In HTML I know it's easy to do, but with TableViewer and CompCreator I didn't see how to do it.

[TIMAI2]

Just use buttons for the data

[Kleyber_Derick]

hmmm let me think about it. Maybe it's a good idea. Even the button won't be in each row, but as soon as I click on the item, it could open another screen with buttons... and in this case it won't be necessary a EDIT button, once the click on the item IS for edit...

[TIMAI2]

@Kleyber_Derick

Even the button won't be in each row, but as soon as I click on the item, it could open another screen with buttons...

I can make up some simple examples if you wish for both....

[Kleyber_Derick]

@TIMAI2

I can make up some simple examples if you wish for both....

Oh ok, please...

TIA,

[TIMAI2]

Could you provide an example of your table data?

Also, if you want to delete a table item, what should it be replaced with ?

For example if a row contains 1,2,3 and we delete 2, should it be blank 1,,3 or zero 1,0,3 or another character, perhaps a hyphen 1,-,3 ...

[Kleyber_Derick]

@TIMAI2

Could you provide an example of your table data?

My goal is to enter some data in fields and insert them into a table data, like this:

So you can see in the table there are 2 buttons: one for edit data and another one for delete data.

@TIMAI2

Also, if you want to delete a table item, what should it be replaced with ?

For example if a row contains 1,2,3 and we delete 2, should it be blank 1,,3 or zero 1,0,3 or another character, perhaps a hyphen 1,-,3 ...

None of them. The line must be delete from the table, so the row must contains '1,3' only.

Remember that all data is from an SQLite table.

[TIMAI2]

Which items in the row will be editable ? All three ? e.g. Tinta Amarela, Baldes and 20

[Kleyber_Derick]

Yes!!

[TIMAI2]

@Kleyber_Derick

Remember that all data is from an SQLite table

You will need to "maintain" the record ID if you want to write back any changes to your sqlite DB.

Does your table have to fit the screen, or can it scroll horizontally to view more columns? I assume it will also be OK for your table to scroll vertically....

[Kleyber_Derick]

@TIMAI2

Does your table have to fit the screen, or can it scroll horizontally to view more columns? I assume it will also be OK for your table to scroll vertically....

Yes, it can scroll horizontally without problem. And yes, it must scroll vertically.

[TIMAI2]

It is taking me a bit longer than planned, mostly due to the formatting required....and real world events getting the way of play time

[Kleyber_Derick]

Don't worry... take your time. I understand and appreciate all your efforts in helping me.

[TIMAI2]

Herewith an aia project example using the Tableviewer extension (credits @Kevinkun !!)

tvEditable.aia (31.1 KB)

Notes:

• I set some source data which should represent the query output from sqlite, including the record id. This is needed for writing back an updated record, or deleting a record from the sqlite table. I have not handled this part, but include procedures where additional sqlite blocks can be used.
• the source data is tidied up for the table data, removing the id and adding the two icons for each row
• I used emojis for the edit and delete icons. It is possible to also use images from local or url sources
• You can do more editing to the table format to remove borders as required
• I have written code for the Tableviewer click event, so that only the icons generate a response
• You can improve the formatting for the edit/update dialog if you wish
• This table fits the screen on my phone horizontally, and it will scroll vertically if many more records are added, beyond the height of the screen. You can add further formatting to the table to get a sticky header row.

ref Tableviewer

BLOCKS

SCREEN

ref nth-child recipes

[Kleyber_Derick]

Wow, fantastic!! Thanks so much for your help. This fits exactly what I need. I don’t have words to thank you!!!

[TIMAI2]

I am working on a CompCreator version as well....

You can have a choice with this one. Would you prefer to edit a record in place in the displayed list, or do as I have done for Tableviewer and open a dialog?