Add user picker to grid

load(
local!employees: {
{
id: 1,
firstName: "John",
lastName: "Smith"
},
{
id: 2,
firstName: "Michael",
lastName: "Johnson"
},
{
id: 3,
firstName: "Mary",
lastName: "Reed"
},

},
local!groupList: a!forEach(
items: local!employees,
expression: null
),
a!formLayout(
label: "Example",
contents: {
a!gridLayout(
totalCount: count(
local!employees
),
headerCells: {
a!gridLayoutHeaderCell(
label: "First Name"
),
a!gridLayoutHeaderCell(
label: "Last Name"
),
a!gridLayoutHeaderCell(
label: "Group",
align: "RIGHT"
)
},
columnConfigs: {
a!gridLayoutColumnConfig(
width: "DISTRIBUTE",
weight: 3
),
a!gridLayoutColumnConfig(
width: "DISTRIBUTE",
weight: 3
),
a!gridLayoutColumnConfig(
width: "DISTRIBUTE",
weight: 3
)
},
rows: a!forEach(
items: local!employees,
expression: a!gridRowLayout(
contents: {
a!textField(
label: "first name " & fv!index,
value: fv!item.firstName,
saveInto: fv!item.firstName,
readOnly: true()
),
a!textField(
label: "last name " & fv!index,
value: fv!item.lastName,
saveInto: fv!item.lastName,
readOnly: true()
),
a!pickerFieldUsersAndGroups(
value: local!groupList[fv!index],
saveInto: local!groupList[fv!index],
maxSelections: 1
)
},
id: fv!index
)
),
rowHeader: 1
)
},
buttons: a!buttonLayout(
primaryButtons: a!buttonWidget(
label: "Submit",
submit: true
)
)
)
)

When  submitting  the form save local value to your cdt like 

a!forEach(
items: local!groupList,
expression: a!save(
ri!cdt[fv!index].group,
fv!item
)
)

How can I load data from a CDT into a grid and also have it put inside a form so that I can submit it to save the last column (group/user picker) to the same CDT ?

As you mention you have the data present in DB you can use expression rule to fetch the data and use the expression rule into the interface and use the above code mention by krishna