Lightning Datatable Component With Url Colums by forming the json from Apex Class Salesforce

Apex Classes -
    1. FieldInfoCls
    2. DatatableUrlCompCls

Lightning Component -
    1. LightningDatatableWithUrlColums_v2
-------
Apex Classes - ============== FieldInfoCls -

	// Generated by JSON2Apex http://json2apex.herokuapp.com/
	public class FieldInfoCls {
	@AuraEnabled
	public Boolean editable {get;set;}
	@AuraEnabled
	public String fieldName {get;set;}
	@AuraEnabled
	public String type_Z {get;set;} // in json: type
	@AuraEnabled
	public String type {get;set;} // in json: type
	@AuraEnabled
	public TypeAttributes typeAttributes {get;set;}
	public FieldInfoCls() {}
	public FieldInfoCls(JSONParser parser) {
	while (parser.nextToken() != System.JSONToken.END_OBJECT) {
	if (parser.getCurrentToken() == System.JSONToken.FIELD_NAME) {
	String text = parser.getText();
	if (parser.nextToken() != System.JSONToken.VALUE_NULL) {
	if (text == 'editable') {
	editable = parser.getBooleanValue();
	} else if (text == 'fieldName') {
	fieldName = parser.getText();
	} else if (text == 'type') {
	type_Z = parser.getText();
	} else if (text == 'typeAttributes') {
	typeAttributes = new TypeAttributes(parser);
	} else {
	System.debug(LoggingLevel.WARN, 'JSON2Apex consuming unrecognized property: '+text);
	consumeObject(parser);
	}
	}
	}
	}
	}
	public class TypeAttributes {
	@AuraEnabled
	public Label label {get;set;}
	@AuraEnabled
	public String target {get;set;}
	public TypeAttributes(){}
	public TypeAttributes(JSONParser parser) {
	while (parser.nextToken() != System.JSONToken.END_OBJECT) {
	if (parser.getCurrentToken() == System.JSONToken.FIELD_NAME) {
	String text = parser.getText();
	if (parser.nextToken() != System.JSONToken.VALUE_NULL) {
	if (text == 'label') {
	label = new Label(parser);
	} else if (text == 'target') {
	target = parser.getText();
	} else {
	System.debug(LoggingLevel.WARN, 'TypeAttributes consuming unrecognized property: '+text);
	consumeObject(parser);
	}
	}
	}
	}
	}
	}
	public class Label {
	@AuraEnabled
	public String fieldName {get;set;}
	public Label(){}
	public Label(JSONParser parser) {
	while (parser.nextToken() != System.JSONToken.END_OBJECT) {
	if (parser.getCurrentToken() == System.JSONToken.FIELD_NAME) {
	String text = parser.getText();
	if (parser.nextToken() != System.JSONToken.VALUE_NULL) {
	if (text == 'fieldName') {
	fieldName = parser.getText();
	} else {
	System.debug(LoggingLevel.WARN, 'Label consuming unrecognized property: '+text);
	consumeObject(parser);
	}
	}
	}
	}
	}
	}
	public static FieldInfoCls parse(String json) {
	System.JSONParser parser = System.JSON.createParser(json);
	return new FieldInfoCls(parser);
	}
	public static void consumeObject(System.JSONParser parser) {
	Integer depth = 0;
	do {
	System.JSONToken curr = parser.getCurrentToken();
	if (curr == System.JSONToken.START_OBJECT ||
	curr == System.JSONToken.START_ARRAY) {
	depth++;
	} else if (curr == System.JSONToken.END_OBJECT ||
	curr == System.JSONToken.END_ARRAY) {
	depth--;
	}
	} while (depth > 0 && parser.nextToken() != null);
	}
	}

view raw FieldInfoCls hosted with ❤ by GitHub

DatatableUrlCompCls -

	public class DatatableUrlCompCls {
	@AuraEnabled
	public static Map<String,Object> initData() {
	//Constructing FieldInfoCls
	FieldInfoCls fi = new FieldInfoCls();
	fi.editable = true;
	fi.fieldName = 'Id';
	fi.type = 'url';
	//Constructing TypeAttributes
	fi.typeAttributes = new FieldInfoCls.TypeAttributes();
	fi.typeAttributes.target = '_blank';
	//Constructing Label
	fi.typeAttributes.label = new FieldInfoCls.Label();
	fi.typeAttributes.label.fieldName = 'Name';
	Map<String,Object> contrlResp = new Map<String,Object>{
	'fields' => new List<FieldInfoCls>{fi}
	};
	return contrlResp;
	}
	}

view raw DatatableUrlCompCls hosted with ❤ by GitHub

Lightning Component - ===================== LightningDatatableWithUrlColums_v2 - ---------------------- LightningDatatableWithUrlColums_v2 Component -

	<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" controller="DatatableUrlCompCls">
	<!-- attributes -->
	<aura:attribute name="data" type="Object"/>
	<aura:attribute name="columns" type="List"/>
	<!-- handlers-->
	<aura:handler name="init" value="{! this }" action="{! c.init }"/>
	<!-- the container element determine the height of the datatable -->
	<div style="height: 300px">
	<lightning:datatable
	keyField="id"
	data="{! v.data }"
	columns="{! v.columns }"
	hideCheckboxColumn="true"/>
	</div>
	</aura:component>

view raw LightningDatatableWithUrlColums_v2 Component hosted with ❤ by GitHub

LightningDatatableWithUrlColums_v2 Controller -

	({
	init : function(cmp, event, helper) {
	var action = cmp.get("c.initData");
	action.setCallback(this,function(response){
	var state = response.getState();
	if(state === 'SUCCESS') {
	var res = response.getReturnValue();
	console.log(JSON.stringify(res.fields));
	cmp.set('v.columns', res.fields);
	var fetchData = [{
	Id: "/0019000001j9i7b",
	Name: "Aethna Home Products"
	}];
	cmp.set("v.data",fetchData);
	/*cmp.set('v.columns', [
	{"label": "Name", "fieldName": "Id", "type": "url", "typeAttributes": {"label": { "fieldName": "Name" }, "target": "_blank"}}
	]);
	cmp.set('v.columns', [
	{"editable":true,"fieldName":"Id","type":"url","typeAttributes":"{label :{ fieldName : 'Name'}, target: '_blank'}"}
	]);*/
	//id field is used for the url link
	//Name field is used as the url name
	}
	});
	$A.enqueueAction(action);
	}
	})

view raw LightningDatatableWithUrlColums_v2 Controller hosted with ❤ by GitHub

Reason behind the above post. Problem -

 

	Apex Class -
	public class DatatableUrlCompCls {
	@AuraEnabled
	public static Map<String,Object> initData() {
	FieldInfo fi = new FieldInfo();
	fi.fieldName = 'Id';
	fi.type = 'url';
	string label = '{label :{ fieldName : \'Name\'}, target: \'_blank\'}';
	system.debug(JSON.serialize(label));
	fi.typeAttributes=label;
	Map<String,Object> contrlResp = new Map<String,Object>{
	'fields' => new List<FieldInfo>{fi}
	};
	return contrlResp;
	}
	public class FieldInfo {
	@AuraEnabled
	public String label, fieldName, type;
	@AuraEnabled
	public boolean editable= true;
	@AuraEnabled
	public string typeAttributes;
	@AuraEnabled
	public boolean isCustom;
	}
	}
	Above class is generating below json which is not Working -
	{"editable":true,"fieldName":"Id","type":"url","typeAttributes":"{label :{ fieldName : 'Name'}, target: '_blank'}"}
	Altered to make it Work -
	{"editable":true,"fieldName":"Id","type":"url","typeAttributes":{label :{ fieldName : 'Name'}, target: '_blank'}}
	---------------------
	Solution -
	1. Enclose all the name and values of the working json in "" -
	{
	"editable":true,
	"fieldName":"Id",
	"type":"url",
	"typeAttributes":{
	"label":{
	"fieldName":"Name"
	},
	target:"_blank"
	}
	}
	2. Open: http://json2apex.herokuapp.com
	3. paste the json which is in step 1 and click on Create Apex.
	4. Use the generated apex class for the parsing.

view raw LightningDatatableWithUrlColums Issue hosted with ❤ by GitHub