B4J Tutorial TableView Tutorial

Erel · Dec 10, 2013

TableView is useful to show data in a tabular view.

The data is held in a List. Each item in this list is an array of objects. The length of each array equals to the number of colums.

For example to fill a table with three columns with some random data we can use this code:

B4X:

TableView1.SetColumns(Array As String("Column 1", "Column 2", "Column 3"))
For i = 1 To 1000
Dim Row() As Object = Array ("a", "b", "c")
TableView1.Items.Add(Row)
Next

TableView can also accept Nodes as items. In this case the nodes will be displayed inside the cells.
By adding nodes as items you can fully customize the TableView appearance.

Another advantage of nodes is that they can be easily updated. The attached example creates a table with two columns. The second column can be updated:

DBUtils.ExecuteTableView fills a TableView from a SQLite database. It should be simple to change the code to other DBs.

electro179 · Jun 24, 2014

Hi

can I add col with scene builder and not use items.add(array.......)

I used with only scene builder but it does not work

B4X:

    Dim row(6) As Object
  
    row(0) = "TEST 1"
    row(1) = "TEST 1"
    row(2) = "TEST 1"
    row(3) = "TEST 1"
    row(4) = "TEST 1"
    row(5) = "TEST 1"
    TableView_cabinet.Items.Add(row)

all line is empty

thank you

Erel · Jun 24, 2014

No. You need to add the columns with TableView.SetColumns.

CHAUVET · Jan 19, 2015

hello,

In a tableView how can we add an image in a cell?

thank you,

Erel · Jan 20, 2015

The code here adds labels as the items: https://www.b4x.com/android/forum/threads/tableview-tutorial.35542/#post-222413

You can add ImageViews with images or you can add Panes with other nodes.

CHAUVET · Jan 20, 2015

Hello Erel.
It's OK !

B4X:

Private pictoImage As ImageView
Private tableView1 As TableView

B4X:

Dim img_http As Image
img_http.Initialize(File.DirAssets,"http.png")
             
Dim row(2) As Object
pictoImage.Initialize("ImageView")
pictoImage.SetImage(img_http)
             
row(0) = pictoImage
row(1) = "File -> http.png"

tableView1.Items.Add(row)

tdocs2 · Aug 14, 2015

Greetings.

Newbie question....

I could not find a Member for Number_of_Rows in the Tableview. For example,

B4X:

For I =0 to Tableview1.NumberRows -1

Obviously, I missed a basic block...

Thank you for your help.

Sandy

Roycefer · Aug 14, 2015

Use

B4X:

For i = 0 to Tableview1.Items.Size-1
'.....

tdocs2 · Aug 14, 2015

Roycefer said:
Use

B4X:

For i = 0 to Tableview1.Items.Size-1 '.....

Me - NEWBIE!!!!!!!!!!!!!!!

Thank you, Roycefer.

Sandy

Erel · Aug 16, 2015

Another option:

B4X:

For Each row() As Object in TableView.Items

Next

raphipps2002 · Nov 11, 2015

If this selects a row

jo.RunMethodJO("getSelectionModel",Null).RunMethod("select",Array(j))

How can one DEselect a row?

Erel · Nov 12, 2015

You can call clearSelection instead of select.

IslandMedic · Jan 14, 2016

I want to use a table view for showing incoming message from the server. It seems like a good tool to use, has alot of formatting controls etc all built in. Here is my code and here arey questions.

B4X:

'setup the table view for messaging 
    OpTableView1.SetColumns(Array As String("Time","Sender","Message"))
    OpTableView1.SetColumnSortable(0,True)  'can sort by time
    OpTableView1.SetColumnSortable(1,True)  'can sort by sender
    OpTableView1.SetColumnSortable(2,False)  'cannot sort by message
    OpTableView1.SetColumnWidth(0,60) 'fixes the time column width.
    OpTableView1.SetColumnWidth(0,100) 'fixes the time column width.

Public Sub WriteMsg(msg As String,from As String)
    Dim row(3) As Object
    row(0) = DateTime.Time(DateTime.Now)
    row(1) = from
    row(2) = msg
       
    'add the new items
    OpTableView1.Items.Add(row)
   'sort the time column to put the newest message at the top.
   
End Sub

1. I want the new message to be at the top of the view. I know I can sort the column by clicking on the header, but can I do it in code? So what I would do is insert the row and then get it to sort by time for the user so the newest message is always at the top.

2. I only want to have three columns, so doing this OpTableView1.SetColumnVisible(3) etc doesn't seem practical, how would I just have three?

3. the third column it would be nice to have the size of it be the remaining percentage of the table view window.

thanks in advance,

Brad

Erel · Jan 15, 2016

Please start a new thread for these questions.

Erel · Jun 7, 2017

The example in the first thread was updated. The layout is now done with the internal designer. All the cells are made of labels and there are helper methods to make it simple to get and set the cells values.

B4J Tutorial TableView Tutorial

Attachments

electro179

Active Member

Erel

B4X founder

CHAUVET

Member

Erel

B4X founder

CHAUVET

Member

tdocs2

Well-Known Member

Roycefer

Well-Known Member

tdocs2

Well-Known Member

Erel

B4X founder

raphipps2002

Active Member

Erel

B4X founder

IslandMedic

Member

Erel

B4X founder

Erel

B4X founder

Similar Threads

B4J Tutorial TableView Tutorial

Attachments

Active Member

B4X founder

Member

B4X founder

Member

Well-Known Member

Well-Known Member

Well-Known Member

B4X founder

Active Member

B4X founder

Member

B4X founder

B4X founder

Similar Threads

Privacy & Transparency

Privacy & Transparency