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.

Gone through them

To achieve this, you should understand the below concepts 

1. Layouts. 
   
2. Setting up a grid with selections
   
3. Understanding how a!save() works. 

If you have gone through the course, then I assume you are comfortable with how components are configured on an interface. Using the same knowledge, try to explore the configurations as shown in the above pictures. Use the help of extensive documentation that Appian has created. 

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