Grid in Appian

You can do it in two ways. 

1. Simple way - Just add all of it in the same grid and use the background color of the cells to create visual groups. You can then define the label of these colors in the legends below the grid. 
2. Add 4 grids adjacent to each other, with every row having the same height, and then you will be able to achieve this. (This adds a lot of configurations that you will manually have to adjust and control to ensure that the symmetry never breaks. 

You can do it in two ways. 

1. Simple way - Just add all of it in the same grid and use the background color of the cells to create visual groups. You can then define the label of these colors in the legends below the grid. 
2. Add 4 grids adjacent to each other, with every row having the same height, and then you will be able to achieve this. (This adds a lot of configurations that you will manually have to adjust and control to ensure that the symmetry never breaks. 

Harshit Bumb (Appyzie) , If we go by 1st way, how to display the headers in the grid.

You can't display the header groups (eg. Team Member, Overall Competency). That is what we're using colors for. 

For displaying headers, you can simply use the 'label' property in a!gridColumn()

I would recommend use the 2nd way for your requirement as it would have better readability and understanding for the user. For the 1st Approach you need to have a separate legend on what color is for what as you cannot have both the header and the grid column labels. Only one can be accommodated.

Thanks Harshit Bumb (Appyzie) ,

I have one other grid design which I am not sure how to build it.

Is it possible to have a down arrow at the right of grid row to display meta of the record.

Yes and No. Yes you can create something like this but No it can't be done using a grid. You will have to build a grid like layout using the card layouts. 

a!localVariables(
  local!expandedIndex,
  a!forEach(
    items: enumerate(10),
    expression: {
      a!cardLayout(
        contents: {
          a!richTextDisplayField(
            labelPosition: "COLLAPSED",
            value: {
              a!richTextItem(
                text: fv!index
              )
            }
          ),
          a!sectionLayout(
            showWhen: tointeger(local!expandedIndex)=fv!index,
            label: "Transaction History"
          )
        },
        link: a!dynamicLink(
          value: if(tointeger(local!expandedIndex)=fv!index,null,fv!index),
          saveInto: local!expandedIndex
        )
      )
    }
  )
)