editable grid

hi ,

i need to created a grid in which data is coming from a table in DB.

The user can update any column value from that grid. On click of submit , the new column values will be saved into DB.

User should be able to delete a row or any column value from the grid also. Those should also be saved into Db on submit. How to pursue this using editable grid ?

Update 1:

 Grid data is visible , Values are coming from the DB.

 But whenever I try to change any column values , for example producer code , data doesnt persists, same value comes on clicking elsewhere.

Texfiled values are saved into local variable , saveinto is an Ri mapping of that table type . 

Attached the updated Code.

load(
  local!pagingInfo: a!pagingInfo(
    startIndex: 1,
    batchSize: 20,
    sort: a!sortInfo(
      field: "prdcr_cde",
      ascending: false()
    )
  ),
  local!showLink,
  local!tableDetails: rule!APAC_SGP_getProducercodeAHmapDetails(
    pagingInfo: local!pagingInfo
  )a!sectionLayout(
    contents: {
      a!gridLayout(
        label: "",
        headerCells: {
          a!gridLayoutHeaderCell(
            label: "Account Handler User "
          ),
          a!gridLayoutHeaderCell(
            label: "Producer Code",
            
          ),
          a!gridLayoutHeaderCell(
            label: "Is Active",
            
          ),
          a!gridLayoutHeaderCell(
            label: "",
            
          )
        },
        columnConfigs: {
          a!gridLayoutColumnConfig(
            width: "DISTRIBUTE",
            weight: 3
          ),
          a!gridLayoutColumnConfig(
            width: "DISTRIBUTE",
            weight: 3
          ),
          a!gridLayoutColumnConfig(
            width: "DISTRIBUTE",
            weight: 3
          ),
          a!gridLayoutColumnConfig(
            width: "ICON"
          )
        },
        rows: {
          a!forEach(
            items: local!tableDetails,
            expression: a!gridRowLayout(
              contents: {
                a!textField(
                  value:  local!tableDetails[fv!index].ah_id,
                  saveInto:  local!tableDetails[fv!index].ah_id
                ),
                a!textField(
                  value:  local!tableDetails[fv!index].prdcr_cde,
                  saveInto:  local!tableDetails[fv!index].prdcr_cde
                ),
                a!textField(
                  value:  local!tableDetails[fv!index].is_active,
                  saveInto:  local!tableDetails[fv!index].is_active
                ),
                a!imageField(
                  label: "Delete " & fv!index,
                  images: a!documentImage(
                    document: a!iconIndicator(
                      "REMOVE"
                    ),
                    altText: "Remove Data",
                    caption: "Remove ",
                    link: a!dynamicLink(
                      value: fv!index,
                      saveInto: {
                        a!save(
                          local!tableDetails,
                          remove(
                            local!tableDetails,
                            save!value
                          )
                        )
                      }
                    )
                  ),
                  size: "ICON"
                )
              }
            )
          )
        },
        addRowlink: a!dynamicLink(
          label: "Add Rows",
          value: {
            startDate: today() + 1
          },
          saveInto: {
            a!save(
              local!tableDetails,
              append(
                local!tableDetails,
                save!value
              )
            )
          }
        ),
        rowHeader: 1,
        /*showWhen: toboolean(*/
        /*local!showLink*/
        /*) = true(),*/
        
      ),
      a!buttonLayout(
        primaryButtons: {
          a!buttonWidgetSubmit(
            label: cons!APAC_TEXT_ACTIONS[1],
            confirmMessage: "Are you sure you want to submit?",
            value: cons!APAC_TEXT_ACTIONS[1],
            saveInto: {
              ri!buttonAction,
              
            },
            style: "PRIMARY",
            skipValidation: true()
          )
        },
        secondaryButtons: {
          a!buttonWidgetSubmit(
            label: cons!APAC_TEXT_ACTIONS[2],
            value: cons!APAC_TEXT_ACTIONS[2],
            saveInto: ri!buttonAction,
            style: "DESTRUCTIVE",
            skipValidation: true()
          )
        }
      )
    }
  )
)

Ri mapping is of the producer table type and array type.  Kindly help.