0

Having issues with text getting slightly cut of in my lightning datatable.

cut off text

it looks like around 1 letter is getting cut off by the scroll bar. I put some CSS in order to hopefully fix this but it doesn't seem to be working

.THIS .slds-scrollable_x 
{ overflow: visible; }

Heres the rest of my code in case that is helpful. The end result is a lightning grid in a Flow

Component

<aura:component implements="lightning:availableForFlowScreens" 
access="global">

<aura:attribute name="dataArr" type="String[]"/>
<aura:attribute name="data" type="Object"/>
<aura:attribute name="columnsStr" type="String"/>
<aura:attribute name="columns" type="List"/>


<aura:handler name="init" value="{!this }" action="{! c.doInit }"/>

<div style="height: 290px">
<lightning:datatable keyField="id" hideCheckboxColumn="true"
data="{! v.data }"
columns="{! v.columns }"
/>
</div>

Controller

({
doInit : function(component, event, helper) {

var dataArr = new Array();

var colsStr = component.get('v.columnsStr');
var fieldNameArr = new Array();

if(colsStr){
  console.log(colsStr);
  var colStrArr = colsStr.split(';');

  if(colStrArr){
  console.log(colStrArr);
  var colArr = new Array();
  for(var i = 0; i < colStrArr.length; i++){

     console.log(colStrArr[i]);

     var colDetailArr = colStrArr[i].split(',');
     console.log(colDetailArr);

      if(colStrArr[i] == "Notes,Notes,text") {
          fieldNameArr.push("primrecordid");
          fieldNameArr.push("primarysoffer");
          fieldNameArr.push("secondrecordid");
          fieldNameArr.push("secondarysoffer");
      }



     if(colDetailArr.length === 3 && colDetailArr[2] != "url" ){

             if(colStrArr[1] == "Notes,Notes,text" && colDetailArr[i] === 
   "Carrier")
             var colObj = {label: colDetailArr[0], fieldName: 
   colDetailArr[1], type:  colDetailArr[2], initialWidth: 200};
            else {
             var colObj = {label: colDetailArr[0], fieldName: 
   colDetailArr[1], type:  colDetailArr[2]};
         }

        console.log(colObj);
        colArr.push(colObj);
        fieldNameArr.push(colDetailArr[1]);
     } else if (colDetailArr.length === 3 && colDetailArr[2] == "url") {
         var actualLabel = colDetailArr[1] == 'primrecordid' ? 
    'primarysoffer' : 'secondarysoffer';
         var colObj = {label: colDetailArr[0], fieldName: colDetailArr[1], 
    type:  colDetailArr[2], typeAttributes: {
                label: { fieldName: actualLabel }
              } };
        console.log(colObj);
        colArr.push(colObj);
       fieldNameArr.push(colDetailArr[1]);
       fieldNameArr.push(actualLabel);
     }



  }
      console.log(fieldNameArr);
      if(colStrArr.length != 2) {
         fieldNameArr.push('Notes');
         }

 component.set('v.columns', colArr);

  }

}

 var dataStrArr = component.get('v.dataArr');

  console.log(dataStrArr);

  if(dataStrArr){

     for(var j = 0; j < dataStrArr.length; j++){
         var cuck = dataStrArr[j].split('^');
         console.log(cuck[1]);
         var fieldArr = cuck[0].split(',');
         var replaced = cuck[1].replace(/["\""]|[\/]/gi, function (x) {
return '\\' + x;
}).replace(/[\t]|[\f]|[\b]|[\n]|[\r]/gi, ' ');

         fieldArr.push(replaced);
        console.log(fieldArr);
        console.log(fieldArr.length === fieldNameArr.length);
     if(fieldArr.length === fieldNameArr.length){

        var jsonStr = '{';

        for(var k = 0; k < fieldArr.length; k++){
           var delimeter = k === (fieldArr.length - 1) ? '' : ',';

            fieldArr[k] = fieldArr[k].length === 0 ? ' ' : fieldArr[k];

       jsonStr += '"' + fieldNameArr[k] + '" : ' + '"' + fieldArr[k] + '" ' + 
       delimeter;
        }

         jsonStr += '}'

            console.log(jsonStr) 
          dataArr.push(JSON.parse(jsonStr));



     }
  }
    console.log(dataArr[1]);
   component.set('v.data', dataArr);
}

},
})

Design

<design:component >
<design:attribute name="dataArr" label="Data Array" required="true"/>
<design:attribute name="columnsStr" label="Columns" required="true"/>
</design:component>

The Controller is a little bulky as it takes in data in order to display multiple Flow lightning data table screens

The initial width for one of the columns was set after i was having this issue and doesnt seem to be the cause

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.