B4J Question [SOLVED] Banano Vuetify and GRID or TABLE

[Star-Dust]

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?

 

[Star-Dust]

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:

[BANanoVueMaterial] How to create dynamic data-table from database schema & data [SOLVED]

Hi the next step .....but always with the same problem of updating the component (VMDataTable) dt1 = VMDataTable in a module gestDatiArc is show and only the indication of the number of records in the pagination is updated but it does not show the name of the columns and records I read as you...

www.b4x.com

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.

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)

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

 

[Star-Dust]

Me too but I only did AngularJS 2 and my curiosity took me not so far, https://www.b4x.com/android/forum/t...banano-curiosity-has-taken-me.130300/#content

I still find Vue very easy to learn and adapt to. I thought of ReAct but then time will tell.

Yes, I had seen and expressed interest

 

[Star-Dust]

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:

[BANanoVueMaterial] How to create dynamic data-table from database schema & data [SOLVED]

Hi the next step .....but always with the same problem of updating the component (VMDataTable) dt1 = VMDataTable in a module gestDatiArc is show and only the indication of the number of records in the pagination is updated but it does not show the name of the columns and records I read as you...

www.b4x.com

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?

 

[Mashiane]

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.!