"Tapable" Table with buttons

Solar2D General Questions/Discussion
#1

Hello,

I was wondering if it was at all possible to set up a table (with SQlite or otherwise) then have the rows be tap or touch enabled to then go to a new page. So basically have a table be called with a certain amount of rows that each have a description, date, and number. Once the table is up on the page the user can tap one of the rows which then brings them to a new unique page (here there will be an in depth display of exactly what they chose). There may be a discussion on this already but I have searched everywhere to no avail. Any help would be greatly appreciated!

-B

#2

Hi @bkove12,

Do you mean a TableView widget? That seems to be basically what you’re describing:

https://docs.coronalabs.com/api/library/widget/newTableView.html

Brent

#3

I looked everywhere including there and must have skipped right over it -_-’ I knew it was going to be obvious. 

Another question I had somewhat pertaining to this (I’m not sure if I should open a new thread) is, if I want to create a search bar now using this table. So for example if someone were to type in the ID number of a specific row in the search bar only it would show in the table. Is this at all possible? If so is there documentation on it somewhere? 

Thanks for your help!!

#4

We have a sample app that has this type of functionality.  See:

https://github.com/coronalabs-samples/CoronaWeather

And look at the locations tab. It has a location search that will create a tableView filtered on what’s typed into the search bar.

Rob

#5

Awesome I’ll look into it. Thanks Rob! While I have you i’m having an issue with the SQLite table. I’m sure its something in my code. When I crate the table the only thing that show are the rows themselves. The actual data is missing. Its just blank rows (which do correspond to how many I have in the SQLite database file. What is wrong in my code?

require ("sqlite3") local path = system.pathForFile("test.db", systemDocumentsDirectory) local db = sqlite3.open( path ) local table\_options = { top = 50, onRowRender = onRowRender, } local tableView = widget.newTableView( table\_options ) for row in db:nrows("SELECT \* FROM project") do local rowParams = { id = row.id, name = row.name, description = row.description, number = row.number, } tableView:insertRow( { rowHeight = 30, rowColor = { default={0.8,0.8,0.8,0.8} } lineColor = { 1, 0, 0 } params = rowParams, } ) end local function onRowRender( event ) local row = event.row local font = native.systemFont local fontsize = 25 local rowHeight = row.height / 2 local options\_id = { parent = row, text = row.params.id, x = 50, y = rowHeight, font = font, fontSize = fontSize, } row.id = display.newText( options\_id ) row.id.anchorX = 0 row.id:setFillColor( 155, 152, 253 ) local options\_name = { parent = row, text = row.params.name, x = 100, y = rowHeight, font = font, fontSize = fontSize, } row.name = display.newText( options\_name ) row.name.anchorX = 0 row.name:setFillColor( 1, 12, 23 ) local options\_description = { parent = row, text = row.params.description, x = 150, y = rowHeight, font = font, fontSize = fontSize, } row.description = display.newText( options\_description ) row.description.anchorX = 0 row.description:setFillColor( 1, 12, 23 ) local options\_number = { parent = row, text = row.params.number, x = 200, y = rowHeight, font = font, fontSize = fontSize, } row.number = display.newText( options\_number ) row.number.anchorX = 0 row.number:setFillColor( 1, 12, 23 ) sceneGroup:insert(row.id) sceneGroup:insert(row.name) sceneGroup:insert(row.description) sceneGroup:insert(row.number) end -------------------------------------------------------------------------- end
#6

Can you start a new topic for this one?

#7

Sure thing!

#8

Hi @bkove12,

Do you mean a TableView widget? That seems to be basically what you’re describing:

https://docs.coronalabs.com/api/library/widget/newTableView.html

Brent

#9

I looked everywhere including there and must have skipped right over it -_-’ I knew it was going to be obvious. 

Another question I had somewhat pertaining to this (I’m not sure if I should open a new thread) is, if I want to create a search bar now using this table. So for example if someone were to type in the ID number of a specific row in the search bar only it would show in the table. Is this at all possible? If so is there documentation on it somewhere? 

Thanks for your help!!

#10

We have a sample app that has this type of functionality.  See:

https://github.com/coronalabs-samples/CoronaWeather

And look at the locations tab. It has a location search that will create a tableView filtered on what’s typed into the search bar.

Rob

#11

Awesome I’ll look into it. Thanks Rob! While I have you i’m having an issue with the SQLite table. I’m sure its something in my code. When I crate the table the only thing that show are the rows themselves. The actual data is missing. Its just blank rows (which do correspond to how many I have in the SQLite database file. What is wrong in my code?

require ("sqlite3") local path = system.pathForFile("test.db", systemDocumentsDirectory) local db = sqlite3.open( path ) local table\_options = { top = 50, onRowRender = onRowRender, } local tableView = widget.newTableView( table\_options ) for row in db:nrows("SELECT \* FROM project") do local rowParams = { id = row.id, name = row.name, description = row.description, number = row.number, } tableView:insertRow( { rowHeight = 30, rowColor = { default={0.8,0.8,0.8,0.8} } lineColor = { 1, 0, 0 } params = rowParams, } ) end local function onRowRender( event ) local row = event.row local font = native.systemFont local fontsize = 25 local rowHeight = row.height / 2 local options\_id = { parent = row, text = row.params.id, x = 50, y = rowHeight, font = font, fontSize = fontSize, } row.id = display.newText( options\_id ) row.id.anchorX = 0 row.id:setFillColor( 155, 152, 253 ) local options\_name = { parent = row, text = row.params.name, x = 100, y = rowHeight, font = font, fontSize = fontSize, } row.name = display.newText( options\_name ) row.name.anchorX = 0 row.name:setFillColor( 1, 12, 23 ) local options\_description = { parent = row, text = row.params.description, x = 150, y = rowHeight, font = font, fontSize = fontSize, } row.description = display.newText( options\_description ) row.description.anchorX = 0 row.description:setFillColor( 1, 12, 23 ) local options\_number = { parent = row, text = row.params.number, x = 200, y = rowHeight, font = font, fontSize = fontSize, } row.number = display.newText( options\_number ) row.number.anchorX = 0 row.number:setFillColor( 1, 12, 23 ) sceneGroup:insert(row.id) sceneGroup:insert(row.name) sceneGroup:insert(row.description) sceneGroup:insert(row.number) end -------------------------------------------------------------------------- end
#12

Can you start a new topic for this one?

#13

Sure thing!