Gojs array iteration with itemTemplate in row1 and row2

[Midhun]

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

Can you guys please help me on same ?

Thanks in Advance

[gunmo]

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

[Midhun]

@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

[gunmo]

vertical line same? like this?

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' })
        )

[walter]

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.