interface making

I suggest to work through the Academy trainings and tutorials to learn the basic steps. Once done, you will understand how Appian works. We are happy to support you with more specific questions then.

you can save your selection index of first grid into a local variable along with entire row value. and after that use the new local variable to show it into the next grid.

a!localVariables(
  local!selection,
  local!selectedEmployees,
  {
    a!richTextDisplayField(
      label: "",
      labelPosition: "COLLAPSED",
      value: {
        a!richTextHeader(
          text: "Performance Review Portal"
        )
      }
    ),
    {a!gridField(
      label: "Employee Directory",
      data: todatasubset(
        {
          a!map(id: 11, name: "Elizabeth Ward",  dept: "Engineering",     role: "Senior Engineer",       team: "Front-End Components",     pto: 15, startDate: today()-500),
          a!map(id: 22, name: "Michael Johnson", dept: "Finance",         role: "Payroll Manager",       team: "Accounts Payable",         pto: 2,  startDate: today()-100),
          a!map(id: 33, name: "John Smith",      dept: "Engineering",     role: "Quality Engineer",      team: "User Acceptance Testing",  pto: 5,  startDate: today()-1000),
          a!map(id: 44, name: "Diana Hellstrom", dept: "Engineering",     role: "UX Designer",           team: "User Experience",          pto: 49, startDate: today()-1200),
          a!map(id: 55, name: "Francois Morin",  dept: "Sales",           role: "Account Executive",     team: "Commercial North America", pto: 15, startDate: today()-700),
          a!map(id: 66, name: "Maya Kapoor",     dept: "Sales",           role: "Regional Director",     team: "Front-End Components",     pto: 15, startDate: today()-1400),
          a!map(id: 77, name: "Anthony Wu",      dept: "Human Resources", role: "Benefits Coordinator",  team: "Accounts Payable",         pto: 2,  startDate: today()-300)
        },
        fv!pagingInfo
      ),
      columns: {
        a!gridColumn(
          label: "Name",
          sortField: "name",
          value: fv!row.name
        ),
        a!gridColumn(
          label: "Department",
          sortField: "dept",
          value: fv!row.dept
        ),
        a!gridColumn(
          label: "Start Date",
          sortField: "startDate",
          value: fv!row.startDate,
          align: "END"
        )
      },
      pageSize: 3,
      selectable: true,
      selectionValue: local!selection,
      selectionSaveInto: {
        local!selection,
        a!save(local!selectedEmployees, append(local!selectedEmployees, fv!selectedRows)),
        a!save(local!selectedEmployees, difference(local!selectedEmployees, fv!deselectedRows))
      }
    ),
    a!gridField(
      pageSize: 2,
      data: local!selectedEmployees,
      showWhen: not(a!isNullOrEmpty(local!selectedEmployees)),
      columns: {
        a!gridColumn(
          label: "Name",
          sortField: "name",
          value: fv!row.name
        ),
        a!gridColumn(
          label: "Department",
          sortField: "dept",
          value: fv!row.dept
        ),
        a!gridColumn(
          label: "Start Date",
          sortField: "startDate",
          value: fv!row.startDate,
          align: "END"
        )
      }
    )
    }
  }
)