1

I have a datatable of certain groups. There is a Field on group Object(Datatype: checkbox ) which makes a group global ( there are two types of groups -Global and Local), How can I make a filter in Lightning datatable such that whever I select Global/Local from Dropdown (lightning:select) the data in table should Change.

Examples would be much appreciated!!

Lightning Component:-

<aura:component controller="PDCNGroupListController" 
implements="flexipage:availableForAllPageTypes,force:hasRecordId,force:appHostable" 
                access="global" >
    <!-- New PDCNGroup Object -->
    <aura:attribute name="PDCNGroup" type="PDCNGroup__c"
                    default="{
                             'SObjectType': 'PDCNGroup__c',
                             'Name': '',
                             'Description__c': '',
                             }">            
    </aura:attribute>
    <aura:attribute name="isLoading" type="Boolean" default="false" />
    <aura:attribute name="mydata" type="Object"/>
    <aura:attribute name="mycolumns" type="List"/>
    <aura:handler name="init" value="{! this }" action="{! c.init }"/>
    <aura:if isTrue="{!v.isLoading}">
        <lightning:spinner variant="brand" size="medium" aura:id="isLoading"/>
    </aura:if>
    <lightning:card title="PDCN Groups">
        <!-- Body of lightning card starts here -->
        <aura:set attribute="actions">
            <!-- New button -->
            <lightning:button label="New" 
                              variant="brand"
                              onclick="{!c.newPDCNGroup}" />
        </aura:set>
    </lightning:card>
    <div class="slds-m-left_small">
        <lightning:datatable data="{! v.mydata }" 
                             columns="{! v.mycolumns }" 
                             keyField="Id"
                             onrowaction="{! c.handleRowAction }"
                             hideCheckboxColumn="true"/>
    </div>

</aura:component>

Controller.js:-

({
    init: function(component, event, helper) {
        var actions = [{ label: 'Show details', name: 'show_details' }];

        component.set('v.mycolumns', [
            { type: 'action', typeAttributes: { rowActions: actions } },
            {label: 'Name', fieldName: 'Name', type: 'text'},
            {label: 'Description', fieldName: 'Description__c', type: 'text'}
        ]);
        helper.getData(component);
    },

    handleRowAction : function(component, event, helper){
        var action = event.getParam('action');
        var row = event.getParam('row');
        // navigate to sObject detail page     
        var navEvt = $A.get("e.force:navigateToSObject");
        navEvt.setParams({
            "recordId": row.Id,
            "slideDevName": "detail"
        });
        navEvt.fire();
    },
    // Function used to create a new PDCNGroup
    newPDCNGroup: function(component, event, helper) {
       helper.newPDCNGrouphelper(component, event, helper);
    },

})

Helper.js

({
    getData:function(cmp){
        var action=cmp.get('c.getPDCNGroupList');
        action.setCallback(this,$A.getCallback(function(response){
            var state=response.getState();
            if(state==="SUCCESS"){
                var oResponse=response.getReturnValue();
                cmp.set("v.mydata",oResponse);
            }else if(state==="ERROR"){
                var errors=response.getError();console.error(errors);
            }
        }
        ));
        $A.enqueueAction(action)
    },

    newPDCNGrouphelper: function(component, event, helper) {
        // Global event force:createRecord is used
        var createPDCNGroup = $A.get("e.force:createRecord");
        // Parameters like apiName and defaultValues are set
        createPDCNGroup.setParams({
            "entityApiName": "PDCNGroup__c",
        });
        // Event fired and new contact dialog open
        createPDCNGroup.fire();
    },
})

Server Side Controller:-

@AuraEnabled
    public static List <PDCNGroup__c> getPDCNGroupList() {
        return [SELECT Id, name, Description__c FROM PDCNGroup__c ORDER BY createdDate DESC LIMIT 200];
    }
2

You need to change data for datatable on on change of the lightning:select

<lightning:select aura:id="select" name="select" label="Select group" onchange="{! c.onChange }">
    <option value="">choose one...</option>
    <option value="apple">Global</option>
    <option value="pumpkin">Local</option>
</lightning:select>

On Change event:

({
onChange: function (cmp, evt, helper) {

    var action = cmp.get("c.getGroups");
    action.setParams({
        groupType: cmp.find('select').get('v.value')
    });
    action.setCallback(this, function(response) {
        var state = response.getState();
        if (state === "SUCCESS" ) {
            var resultData = response.getReturnValue();
            cmp.set("v.data", resultData);
        }
    });
}
})

v.data is data attribute for datatable

<aura:attribute name="data" type="Object"/>
    <lightning:datatable
            keyField="id"
            data="{! v.data }"
            columns="{! v.columns }"
            hideCheckboxColumn="true"/>

Apex Controller

@AuraEnabled
    public static List<GroupDataWrapper> getGroups(String groupType){
return wrappeddatafromsoql(or not wrapped if you have fields from group matching fieldnames of columns)
}
4
  • Can You Tell me using the code I added?? Aug 24 '18 at 11:47
  • 2
    I basically provided you whole solution. Could you try to implement it? There isn't anything in your code that shows that you actually tried to do it Aug 24 '18 at 11:55
  • Yes I got your Point, But Thing is I don't Understand how table would be refreshed also Is there any thing in lightning components about filtering, I just want to get Concept. Thanks!! Aug 24 '18 at 17:59
  • When data for the table is changed (so the data attribute in comoponent) data table will refresh automatically. About filtering: for the data table component the isnt any out of the box solution. There is sorting - you can read about it in the documentation of this component Aug 24 '18 at 18:20

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.