Thursday, September 26, 2019

How to display Url object in reatctable

If you need to display Url object with link and descriptions inside reatctable, here are the steps.

1. Create a Url interfance and add to the object.
export interface Url {
    Urlstring;
    Descriptionstring;
}

export interface ApproverWithLink {
  name?: string;
  emailstring;
  idnumber;
  rolestring;
  statusstring;
  lastmodifiedstring;
  taskLinkUrl;
}


2. Create the object and fill in Url object.

  public static _getApproverWIthUrl(workflowUsersIWorkflowUsers): ApproverWithLink[] 

    let authorsApproverWithLink[] = [] as ApproverWithLink[];

    if(workflowUsers != null && workflowUsers != undefined && 
workflowUsers.approvers != null &&  workflowUsers.approvers != undefined){
      let localApprovalsApprover[] = workflowUsers.approvers;  
      for (let i = 0i < localApprovals.lengthi++) {

        let localUrlUrl = {Url: 'https://www.google.com'Description:'Google'};
        let returnRecApproverWithLink = {name: localApprovals[i].name
email: localApprovals[i].emailid: 0,  role: localApprovals[i].role
status: localApprovals[i].status
lastmodified: localApprovals[i].lastmodifiedtaskLink: localUrl  };


        authors.push(returnRec);
      }
    }
    
    return authors;

  }


3. Display on the webpart

let localApprovalsApproverWithLink[] = 
SPFacade._getApproverWIthUrl(this.props.wfApprovalReviewerList);


<ReactTable
                                  data={localApprovals}
                                  columns={[
                                    {
                                      
                                      columns: [
                                        {
                                          Header: "Name",
                                          accessor: "name"
                                          
                                        },
 
                                        {
                                          Header: "Role",
                                          accessor: "role"
                                        },
                                        {
                                          Header: "Status",
                                          accessor: "status"
                                        },
                                        {
                                          Header: "Last Modified",
                                          accessor: "lastmodified"
                                        },
                                        {
                                          Header: "Link",
                                          accessor: "taskLink",
                                          Cell: e=><a href={e.value.Url}> {e.value.Description} </a>
                                          
                                        }
                                      ]
                                    }
                                  ]}
                                  defaultPageSize={5}
                                  showPagination={false}
                                  noDataText="No approvals assigned!"
                                  style={{
                                    height: "200px" // This will force the table body to overflow and scroll, since there is not enough room
                                  }}
                                  className="-striped -highlight"
                                />
                          </div>



No comments:

Post a Comment