How to create custom grid

There's no exact solution for this available in base Appian.  My first approach would be to build a Read-Only Grid where the Name and Code column values are Rich Text, and iterate over all the values that belong in that primary row, separating them with line returns.  There are other possible "approximate" approaches too, like perhaps building a quasi-grid using stacked Cards, etc.

Here's a "portable" example of my primary suggestion above, using your example data structure:

a!localVariables(
  local!array: {
    a!map(
      date: today() - 5,
      people: {
        a!map(name: "Dave", code: 1122),
        a!map(name: "Frank", code: 1133)
      }
    ),
    a!map(
      date: today() - 4,
      people: {
        a!map(name: "Maria", code: 3322),
        a!map(name: "John", code: 1324),
        a!map(name: "Joe", code: 3444)
      }
    ),
    a!map(
      date: today() - 3,
      people: { a!map(name: "Adam", code: 3432) }
    )
  },
  a!gridField(
    data: local!array,
    spacing: "DENSE",
    columns: {
      a!gridColumn(
        label: "Date",
        sortField: "date",
        value: fv!row.date
      ),
      a!gridColumn(
        label: "Name",
        value: a!richTextDisplayField(
          value: {
            a!forEach(
              fv!row.people,
              fv!item.name & if(fv!isLast, "", char(10))
            )
          }
        )
      ),
      a!gridColumn(
        label: "Code",
        value: a!richTextDisplayField(
          value: {
            a!forEach(
              fv!row.people,
              fv!item.code & if(fv!isLast, "", char(10))
            )
          }
        )
      )
    }
  )
)

There's no exact solution for this available in base Appian.  My first approach would be to build a Read-Only Grid where the Name and Code column values are Rich Text, and iterate over all the values that belong in that primary row, separating them with line returns.  There are other possible "approximate" approaches too, like perhaps building a quasi-grid using stacked Cards, etc.

Here's a "portable" example of my primary suggestion above, using your example data structure:

a!localVariables(
  local!array: {
    a!map(
      date: today() - 5,
      people: {
        a!map(name: "Dave", code: 1122),
        a!map(name: "Frank", code: 1133)
      }
    ),
    a!map(
      date: today() - 4,
      people: {
        a!map(name: "Maria", code: 3322),
        a!map(name: "John", code: 1324),
        a!map(name: "Joe", code: 3444)
      }
    ),
    a!map(
      date: today() - 3,
      people: { a!map(name: "Adam", code: 3432) }
    )
  },
  a!gridField(
    data: local!array,
    spacing: "DENSE",
    columns: {
      a!gridColumn(
        label: "Date",
        sortField: "date",
        value: fv!row.date
      ),
      a!gridColumn(
        label: "Name",
        value: a!richTextDisplayField(
          value: {
            a!forEach(
              fv!row.people,
              fv!item.name & if(fv!isLast, "", char(10))
            )
          }
        )
      ),
      a!gridColumn(
        label: "Code",
        value: a!richTextDisplayField(
          value: {
            a!forEach(
              fv!row.people,
              fv!item.code & if(fv!isLast, "", char(10))
            )
          }
        )
      )
    }
  )
)

Hi Mike, 

Thank you for the explanation. But my data is coming from database view insted of local array. However I tried to use the above code but it does not seem to work in grid. Could you please suggest on this.

The primary reason for using local data in the above sample code is for ease of portability (i.e. anyone here can copy/paste that into their interface designer and see what i did, as long as they have a reasonably modern version of Appian).  In a normal use case data would be coming from the database, but the above example would still work pending adjustments to account for the particular configuration of your data.