Hi
In terms of the V-Data-Table API, the "show-select" is to
Shows the select checkboxes in both the header and rows (if using default rows)
Let me first exlplain a little the use of check-boxes in the context of the view table.
Use Case 1 - Simple Tabls
1. When using a simple table, for example this "Task Manager", as per this URL,
https://mashiane.github.io/BANanoVuetifyAD3/#/adsimpletable
What happens here is that when each task is marked as "complete", the task name is striked.
To find the source code for this example, first look at the browser address bar, it says,
Open the Kitchen Sink Source Code and do a search for the page name "
adsimpletable", via Edit > Quick Search.
This provides you a list of found items.
We want the last one, so click on the last entry..
This open us the Class Module that has the code... "see that public name As string = adsimpletable"
Locate the Initialize subroutine, and find BANano.LoadLayout.
This tells you the layout name that creates the UI interface for that table,
Click the "Files" tab, bottom right..
Do a search for "mysimpletable"
Click Open designer, this opens the designer. Below I have also opened the Tools > Generate Members.
Now you will notice that the "simpletable", which is the name of this table, there are some events, "edit", "clone", "delete", "check". These events receive a map, which is the row being processed with fieldnames and values for each column in that row.
Also when you check the Property Bag of this table, you will note some properties, we have 4 columns, id, done, name and calories.
We have indicated that the "done" column should display "Checkboxes"
Thus, this on the table.
As that is the VSimpleTable, for the VueTable, this property is
Also note that one of the properties here has a condition. This expects a JSON, being the name of the column and the callback/subroutine to execute to apply to the class of that column on that row. So this means, whenever the subroutine "isitdone" is fired, the result should be applied to the "name" column for the row being processed.
There are 2 things that need to happen for the subroutine to fire, (a) it should be registered and (b), it should be defined.
In Initialize you will see the registration of the sub-routine..
Dim itm As Map
about.SetMethod(Me, "isitdone", Array(itm))
What this does is to add "isitdone" as a method to a list of available callbacks that Vue/Vuetify should recognize. If we dont define this registration, you will find an error that say "isitdone" is not defined or does not have a reference.
The second leg is creating the sub-routine.
'we check if the task is done or not
'this will be applied to the name column depending
'on the value of done
Sub isitdone(item As Map) As String
'read the done status
Dim bDone As Boolean = item.GetDefault("done", False)
'parse it just to be save
bDone = BANanoShared.parseBool(bDone)
'return the class to apply
Return vuetify.LineThroughIfTrue(bDone)
End Sub
The subroutine is fired per row received, thus us passing the row map (key value having fields & values for that row) here.
So for that row i.e. item, read the "done" key. Depending on the Truthy / Falsy of that return LineThroughIfTrue, of course when false it returns ""
This has an effect of adding the returned class.
Just to understand what that class name is
'return line through if true
Sub LineThroughIfTrue(b As Boolean) As String
If b Then
Return "text-decoration-line-through"
Else
Return ""
End If
End Sub
So this applies this class to that row, thus when clicking the check, which is true/false it completes the process. Remember, you defined "done" as a checkbox, it expects a boolean value true/false.
Thus in the events you wont see any code that actually does this..
Private Sub simpletable_Edit (item As Map)
Log(item)
End Sub
Private Sub simpletable_Clone (item As Map)
Log(item)
End Sub
Private Sub simpletable_Delete (item As Map)
Log(item)
End Sub
Private Sub simpletable_Check (item As Map)
Log(item)
End Sub
How ever, you can add any code that you want to be processed on these events for that row.
I hope this use case is clear enough.
Happy BVAD3 coding!
