Tick a row on child table on Dialog resulted different row

ERPNext
1

Hello,

If I select(check) first row on the table, then console shows differently, ticked row always last row. Anyone had ever experienced this issue before? I;m using v12

frappe.ui.form.on('Sales Order', {
onload_post_render(frm){
    frm.trigger("make_test_dialog");
},
make_test_dialog: function (frm) {
    var data = [
        {
            "item_code": 'item1',
	        "warehouse": "w1",
            "qty": "1"
        },
	    {
            "item_code": 'item2',
	        "warehouse": "w2",
            "qty": "2"
        },
    ]
	var fields = [
		{
			fieldtype:'Table', fieldname: 'items', read_only:1,
			description: __('Select item, Qty and Warehouse'),
			fields: [
				{fieldtype:'Read Only', fieldname:'item_code',
					label: __('Item Code'), in_list_view:1},
				{fieldtype:'Read Only', fieldname:'warehouse',
					label: __('For Warehouse'), in_list_view:1},
				{fieldtype:'Float', fieldname:'required_qty',
					label: __('Qty'), in_list_view:1},
			],
			data: data,
			get_data: function() {
				return data
			}
		}
	]
	var d = new frappe.ui.Dialog({
		title: __("Test Select Items"),
		fields: fields,
		primary_action: function() {
			var values = d.get_values();
			console.log("values = " + JSON.stringify(values));
			let selected_items = d.fields_dict.items.grid.get_selected_children();
		
	    	console.log("selected children = " + JSON.stringify(selected_items));
		},
		primary_action_label: __('Create')
	});
	d.show();
}

})

2

you have to define unique name and idx to data table source, like this:

var data = [
    {
            "idx":1,
            "name":"23456",
            "item_code": 'item1',
	        "warehouse": "w1",
            "qty": "1"
        },
	    {
	        "idx":2,
            "name":"987",
            "item_code": 'item2',
	        "warehouse": "w2",
            "qty": "2"
        }
]