Open another sort-able table from a sort-able table

Hi all,

This is my design:

1. the 1st screen display only table A which is able to sort.

2. By clicking a link in a column, table B which shows other details of the previous selection, and is able to sort, would be displayed.

Requirements:

1. table A and Table B should be 2 UI objects and be put together in a Master UI

Here are my codes

1. Master page:

 load(
    a!formLayout(
    label: "Master Table,
    contents: {
      
          a!columnLayout(
            contents:{
             
             /*Section A*/
              rule!uiSectionA(
                viewObj : ri!viewObj
              ),
              
              with(
              /*Section B*/
                rule!uiSectionB(
                viewObj : ri!viewObj
              )
              )
          }
        )
            }
          )
          )

2. Section A

load(
  local!objGrp: rule!APP_queryViewObjGrpbyIsActive(
    isActive: 1
  ),
  local!selObj,
  local!objGrpGridSel: a!gridSelection(
    pagingInfo: a!pagingInfo(
      startIndex: 1,
      batchSize: 5
    ),
    selected:local!selObj
  ),
  a!sectionLayout(
    label: "Obj",
    contents: {
      /*Obj Grid*/
      with(
        local!pagedobjGrp: todatasubset(
          local!objGrp,
          local!objGrpGridSel.pagingInfo
        ),
        local!pagedobjGrpData: local!pagedobjGrp.data,
        {
          a!gridField(
          label: " Obj List",
          labelPosition: "ABOVE",
          totalCount: length(
            local!objGrp
          ),
          columns: {
            a!gridTextColumn(
              label: "Obj Id",
              field: "ObjDspid",
              data: index(local!pagedobjGrpData,"ObjDspid",{})
            ),
            a!gridTextColumn(
              label: "Obj Abbreviation",
              field: "ObjAbbv",
              data: index(local!pagedobjGrpData,"ObjAbbv",{}),
              links: apply(
                a!dynamicLink(
                  value: _,
                  saveInto: ri!viewObj
                ),
                 local!pagedobjGrpData
              )
            )
          },
          identifiers: data: index(local!pagedobjGrpData,"id",{}),
          value: local!objGrpGridSel,
          saveInto: local!objGrpGridSel,
          selection:ri!isselObj,
          validations: {},
          shadealternaterows: true,
          spacing: "STANDARD",
          borderstyle: "STANDARD"
        )
      }
      )
    }
  )
)

3. Section B

  
    load(
  local!SubObj: if(
              rule!COM_isBlank(ri!viewObj),
              {},
              rule!APP_queryRulesbyPolicyIdnIsActive(isActive: 1,policyId : index(ri!viewObj,"id",{}))
            ),
  local!SubObjGridSel: a!gridSelection(pagingInfo: a!pagingInfo(1,10)),
  a!sectionLayout(
    label: "Rules",
    showWhen: not(rule!COM_isBlank(ri!viewObj)),
    contents: {
      with(
        
        local!pagedSubObj: todatasubset(
        local!SubObj,
        local!SubObjGridSel.pagingInfo
        ),
        local!pagedSubObjData: local!pagedSubObj.data,
        local!pagedSubObjDataCatImg: a!forEach(
          items: index(
            local!pagedSubObjData,
            "ruleCat",
            {}
          ),
          expression: rule!COM_getSubObjCatIconAndColorByRuleCat(
            boolean: fv!item
          )
        ),
        {
          a!gridField(
          label: "Sub Obj List",
          labelPosition: "ABOVE",
          totalCount: length(
            local!SubObj
          ),
          columns: {
            a!gridTextColumn(
              label: "Rule ID",
              field: "ruleDspId",
              data: index(local!pagedSubObjData,"ruleDspId",{})
            ),
            a!gridImageColumn(
              label: "Rule Category",
              field: "ruleCat",
              data: apply(
                a!documentImage(
                  document: _
                ),
                merge(
                  apply(
                    a!iconIndicator,
                    local!pagedSubObjDataCatImg
                  )
                )
              )
            ),
            a!gridTextColumn(
              label: "Rule Name",
              field: "ruleName",
              data: index(local!pagedSubObjData,"ruleName",{})
            ),
            a!gridTextColumn(
              label: "Rule Description",
              field: "ruleDesc",
              data: index(local!pagedSubObjData,"ruleDesc",{})
            ),
            
          },
          identifiers: index(local!pagedSubObj.data,"id",{}),
          value: local!SubObjGridSel,
          saveInto: local!SubObjGridSel,
          validations: {},
          shadealternaterows: true,
          spacing: "STANDARD",
          borderstyle: "STANDARD"
        )
      }
      )
    }
  )
  )

I have read the following case but it is still a bit confuse to me:

https://community.appian.com/discussions/f/user-interface/11603/load-and-with-function-difference

Any response would be appreciated. Thanks in advance.