Gojs array iteration with itemTemplate in row1 and row2

GoJS
#1

Guys ,

May be a beginner question , but tried many way to accomplish same , but not getting in right format.
Can you guys help me on same

mylist=[{name:'Arjun', grade:'A'},{name:'Mithal', grade:'B'},{name:'Rakhi', grade:'C'}]

And am using gojs Table to iterate it (need table for iteration for various other reason)

$(
          go.Panel,
          'Table',
    new go.Binding('itemArray', 'mylist'),
{
            itemTemplate: $(
              go.Panel,
              'TableRow',
             $(
                go.TextBlock,
 new go.Binding('text', 'name')
              ),
 $(
                go.TextBlock,
               new go.Binding('text', 'grade')
              ),
)}

Something am looking for name in row1 and grade in row2. Below image is something am looking for
Need same thing in table

Screenshot 2022-06-11 at 7.12.07 PM
Screenshot 2022-06-11 at 7.12.07 PM776×640 6.1 KB

Can you guys please help me on same ?

Thanks in Advance

#2

image

function init() {
            var $ = go.GraphObject.make, 
	diagram = $(go.Diagram, "myDiagramDiv");
diagram.nodeTemplate =
	$(go.Node, "Auto",
	  $(go.Shape, { fill: "white" }),
	  $(go.Panel, "Table",
		new go.Binding("itemArray", "mylist"),
		{
	defaultAlignment: go.Spot.Center,
	itemTemplate:
	$(go.Panel, "TableRow",
    $(go.Shape, "Rectangle",        { width: 100, height: 60, margin: 4, fill: null }),
    $(go.Panel, "Vertical",
    $(go.TextBlock, new go.Binding("text", "name"),
		{margin: 2,stroke:'#000'}),
	  $(go.TextBlock, new go.Binding("text", "grade"),
		{ margin: 2,stroke:'#000' })
        )
	  
	 )  // end of itemTemplate
})
	 );
     diagram.model.nodeDataArray =
     [
			{ key: "group1",
            mylist: [{name:'Arjun', grade:'A'},{name:'Mithal', grade:'B'},{name:'Rakhi', grade:'C'}] }
		]
        }

        window.addEventListener('DOMContentLoaded', init);

You can modify the style according to your needs

#3

@gunmo Thanks for the reply
One more doubt can i make vertical line same for name and grade, meaning for first in which position Arjun start , same position down vertically grade A should start , giving impression , vertically alligned

#4

vertical line same? like this?
image

you can add a width

$(go.TextBlock, new go.Binding("text", "name"),
		{margin: 2,width: 50,stroke:'#000'}),
	  $(go.TextBlock, new go.Binding("text", "grade"),
		{ margin: 2,width: 50,stroke:'#000' })
        )
#5

Thank you, @gunmo.
Another solution would be to set alignment: go.Spot.Left on each TextBlock.
Or else set Panel.defaultAlignment to go.Spot.Left.