0

I am using lightning data table for displaying data. In data table i am defining 4 columns.c1,c2,c3,c4. On selection of some rows,i am navigating the page to other page where i am displaying all the selected rows.Now i want only c1,c2,c3 columns to be displayed on my second screen.I dont want to display all the four columns on the second screen.Can we display like this? will this be possible? when i tried it is not showing any results in second page as column structure is changed.Please help me in achieving this/any idea would be much appreciated.

First data table:

    <lightning:datatable columns="{!v.columns}"
                 data="{!v.searchResult}"
                 keyField="Id"
                 onrowaction="{!c.handleRowAction}"
                 selectedRows="{!v.selectedRows}"
                 maxRowSelection="{!v.maxRowSelection}"
                 onrowselection="{!c.handlesecondSelectedRow}"                                                      
                 enableInfiniteLoading="false"
                 loadMoreOffset="{!v.loadMoreOffset}"
                 sortedBy="{!v.sortedBy}"                                                                
                 sortedDirection="{!v.sortedDirection}"                      
                 defaultSortDirection="{!v.defaultSortDirection }"
                 onsort="{!c.handleColumnSorting}"
                 onloadmore="{!c.handleLoadMoredata}"                                                               
                 showRowNumberColumn="false"/>

second data table:

    <aura:if isTrue="{!v.nxtAfterSelbtnbool}">

    <lightning:datatable columns="{!v.columns1}"
                 data="{!v.selectedRowsList}"
                 keyField="Id"
                 onrowaction="{!c.handleRowAction}"                                                                
                 hideCheckboxColumn="true"
                 onsave ="{!c.onSave}"                                                              
                 aura:id="DataTable"                                                                 
                 showRowNumberColumn="false"                                                                 
                 enableInfiniteLoading="false"/>
    </aura:if>

On click of save button i am making one boolean value to true and displaying second data table.

Controller:

    doint:({
     doInit : function(component, event, helper) {
     cmp.set('v.columns', [
            { label: 'account name', fieldName: 'accountName', type:'text'},
           { label: 'phone', fieldName: 'phone', type:'number'},
           { label:'account type',fieldName: 'accountype', type:'text'},
    ]),
   cmp.set('v.columns1', [
          { label: 'account name', fieldName: 'accountName', type:'text'},
          { label: 'phone', fieldName: 'phone', type:'number'},
   ])
      })

As in above code in second data table i want only (v.columns1) only two columns i want.How can this be possible?

  • Can you please add relevant parts of the code to this question? Also, how are you passing the data to the next screen/datatable? – Brian Miller Apr 2 at 7:35
  • @BrianMiller added code too.I am passing the data to the next screen by using another data table which will show the selected rows by rendering boolean value – dileep Apr 2 at 8:41
  • Can you clean up the code and show the whole <lightning:datatable> component as well? You can use ` and ``` to create code block highlights – Brian Miller Apr 2 at 8:42
  • @BrianMiller formatted – dileep Apr 2 at 8:49
0

Is your second screen other component ? I am bit confused with your question, I do not see onSave method on your first dataTable. If you have a table , select few rows and then display the selected rows with fewer columns after hit save, you can do something like this. (I would create a generic dataTable component and call that from these two components passing attributes)

cmp1:

 <aura:handler name="init" value="{! this }" action="{! c.init }"/>
 <lightning:datatable columns="{!v.columns}"
              data="{!v.searchResult}"
              keyField="Id"
              onrowaction="{!c.handleRowAction}"
              selectedRows="{!v.selectedRows}"
              onrowselection="{!c.handlesecondSelectedRow}"                                                      
              onsave = "{!c.onSave}"/>

   <aura:if istrue ={v.showNextCmp}>
      <cmp2 data={newData} columns={newColumns}/>
   </aura:if>   

something like this in controller :

onSave : function(cmp){
    cmp.set('v.newData', selected rows) (with only columns required.. remove the columns you do not need)
    cmp.set('v.newColumns', required cols)
    cmp.set('v.showNextCmp', true) // make sure to set this to false as default.
},

and cmp2:

<lightning:datatable columns="{!v.columns}"
             data="{!v.data}"
             keyField="Id"/>

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.