B4J Question [SOLVED] Banano Vuetify and GRID or TABLE

Star-Dust

Expert
Licensed User
I need to have a grid or table, of which I don't know the number of columns and rows until I get the data from the database.

VueTable is an interesting grid but you have to set the number of columns and name of columns in advance.

It was fine with Vue's HeatMap which is not in Vuetify. How can I fix it?
 
Solution
you have to set the number of columns and name of columns in advance.
True, but its NOT the only mode that you can, you can define your tables at run-time, without knowing what they will contain, fortunately it has been done before.

Before the table creation via the abstract designer existed, the example below was how everything was done in BVAD3, pure code. Now the abstract designer approach just "abstracts" this code for you. You can see that when you open the VueTable.BuildSchema method on the source code.

How I do it, I get the schema of the table I want to get data for, i create the vue table headers, I read the data and add it to the data-table, but you just have to code that.

Here is an old example of how you can...

Star-Dust

Expert
Licensed User
Thanks for the code, I have quickly reviewed it and whilst understanding that you are still new to this. I would greatly recommend that you follow the approach that was provided in micros question, on this thread:


Anyway, with version 6.05, this is how I recommend this be done.

Things to note: The BindState/BindStateOnpp methods are recommended above .BindVueElement as these are more powerful and have extra functionality.

B4X:
Sub Initialize
    'establish a reference to the app
    vuetify = pgIndex.vuetify
    'initialize the component
    home.Initialize(Me, name)
    home.vuetify = vuetify
    'make this the start page
    home.Path = "/"
    path = home.path
    '
    'build the page html here
    banano.LoadLayout(home.Here, "home")
    VContainer1.BindState(home)
 
    ' btn
   btnNew.BindState(home)
 
    ' Color conditional
    VueTable1.SetRowColorOnCondition("rowcolor")
    VueTable.BindState(home)
 
    home.SetMounted(Me, "onmounted", Null)
 
    'add this route component to the app
    vuetify.AddRoute(home)
End Sub
I will mark the lines with * and comment something in brackets on this one, those added with suffix with (added)

B4X:
Private Sub btnNew_Click (e As BANanoEvent)
    Dim Head As Map = CreateMap()

    *VueTable1.Clear (this clears the rows on the table ONLY this line can be removed as .Reset below also does it)
    VueTable1.Reset 'this clears everything on the table including the row data and headers
  
    Dim CasualAsciiValue As Int = Rnd(1,20)
    Dim Letter As String = Chr(64+CasualAsciiValue)
    For i=1 To Rnd(5,15)
        Dim NameField As String = Letter.ToLowerCase & i
        Dim title As String = Chr(64+i)
        Head.Put(NameField, title)
        VueTable1.AddColumn(NameField,title)
    Next
  
    * home.BindVueTable(VueTable1) (because vuetable1.BindState is used on initialize, this can be removed)
    vuetable1.UpdateHeaders (added)
    * VueTable1.GetData.Clear (this is not necessary as it has been called twice, with .Clear and .Reset above, .Reset will suffice)

'as the code below adds 1 row at a time, lets create a list and use that to add rows in one go. There is nothing wrong / amiss im just indicating another option.
'If you want to add many many rows, DONT use the .AddItem method, use the List first approach. .AddItem is very useful where for example one would have a table that 'will be updated in real-time e.g. a stock data view etc where you want to see changes as and when they happen in realtime.

dim lst as List (added)
lst.Initialize    (added)
For i=1 To 10
        Dim TableRow As Map =  CreateMap()
        For Each field As String In Head.Keys
            Dim V As String = Head.Get(field) & I
            TableRow.Put(field, V)
        Next
        VueTable1.AddItem(TableRow) (replace with lst.add(TableRow))
    Next
vuetable1.Reload(lst)
End Sub

Overall, this is very good progress, congrats.
Thanks, these are very useful instructions. I have updated the example
 
Upvote 0

Star-Dust

Expert
Licensed User
Upvote 0

Star-Dust

Expert
Licensed User
Thanks for the code, I have quickly reviewed it and whilst understanding that you are still new to this. I would greatly recommend that you follow the approach that was provided in micros question, on this thread:

With this suggestion I got confused. The Approach you suggest to me is based on BananoVueMaterial and not on BananoVuetiFyAD3.

But in the BVM thread you write that this project is no longer maintained for the newer one ...
Why use an unmaintained library table when you are developing a new library that has its own table?
 
Upvote 0

Mashiane

Expert
Licensed User
Longtime User
With this suggestion I got confused. The Approach you suggest to me is based on BananoVueMaterial and not on BananoVuetiFyAD3.

But in the BVM thread you write that this project is no longer maintained for the newer one ...
Why use an unmaintained library table when you are developing a new library that has its own table?
You are right, that will create a confusion. I have scratched that content out.

Rather just work with the updated example you did.!
 
Upvote 0
Top