Grid Field Rows with Expandable/Collapsible Section

Try this. 

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

There is no OOTB component, but you can easily built such.

This is how they want it to look. They want to show/hide the section below the selected row itself and still list the unselected ones.

OK. Appian does not support that in the OOTB grid component. But you could build a custom grid using columns layouts and then do whatever you want or need to do.

IMHO, I would try to challenge that requirement and try to find a solution that provides the same UX but using a slightly different UI. Staying with the OOTB components saves you a ton of effort and ensures a more consistent UI across apps.

As suggested by other members, no OOTB component to address this requirement, however it can be built easily by using other components with show/hide on condition. 

Yeah, I've built a custom grid (image below). But I think the level of effort to maintain/scale this would be higher compare to when we use an OOTB component and I also think that this kind of design is not ideal for large grids, not sure how it would accommodate large number of columns.

Absolutely!