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 {
    Url: string;
    Description: string;
}

export interface ApproverWithLink {
  name?: string;
  email: string;
  id: number;
  role: string;
  status: string;
  lastmodified: string;
  taskLink: Url;
}


2. Create the object and fill in Url object.

  public static _getApproverWIthUrl(workflowUsers: IWorkflowUsers): ApproverWithLink[] 

    let authors: ApproverWithLink[] = [] as ApproverWithLink[];

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

        let localUrl: Url = {Url: 'https://www.google.com', Description:'Google'};
        let returnRec: ApproverWithLink = {name: localApprovals[i].name, 
email: localApprovals[i].email, id: 0,  role: localApprovals[i].role, 
status: localApprovals[i].status, 
lastmodified: localApprovals[i].lastmodified, taskLink: localUrl  };


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

  }


3. Display on the webpart

let localApprovals: ApproverWithLink[] = 
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