5

I'm trying to use lightning:datatable with row selection enabled, but also build a custom filter mechanism so that users can filter the records shown. For example, filtering records by State.

I don't want the user's row selections to be cleared when they change filters, I want to remember them and reapply them as they change filters.

For example, if a user filtered rows based on the state "California" and selected some records, then changed the filter to "Nevada" and selected more records, and then went back to "California" (or "All"), all their previous selections would display again.

But since lightning:datatable doesn't seem to support any kind of filtering yet, I think I'd have to rebuild it's data attribute each time, which means I need to be able to store all the row selections myself and reset them as I rebuild the data based on the filters.

I think I can use the existing methods to get the list of selected rows, and store that off each time they change a filter. But I'm not finding a way to set row selections when they change filters, and I need to rebuild the data attribute.

Is it possible to set which records are initially selected when the data attribute is set with new data?

If not, I may have to abandon trying to use lightning:datatable in favor of something more robust, such as jQuery's DataTables, but I'd rather not do that, as I'd prefer to use a built-in Lightning component if possible.

Thanks for any guidance on this!

4

It's possible to preselect items, however I noticed a bug on API v42 (current version) and I confirmed that with SFDC support team. When using the attribute to bind the selected rows, it simply doesn't work, however if you find the lightning:datatable and then change the selectedRows, it works properly.

    component = component.find("partnerTable");
    component.set("v.selectedRows", selectedRowsIds);

Please find an example below, I'm creating a mockdata and selecting the first item by the Id.

Component

    <aura:attribute name="partnerdata" type="Object" access="private" />
    <aura:attribute name="partnercolumns" type="List" access="private" />
    <aura:attribute name="partnerSelectedRows" type="List" access="private" default="" />

    <!--
    <lightning:datatable aura:id="partnerTable" data="{!v.partnerdata}" 
    columns="{!v.partnercolumns}" keyField="Id" selectedRows="{!v.partnerSelectedRows}"/>
    -->

    <lightning:datatable aura:id="partnerTable" data="{!v.partnerdata}" 
    columns="{!v.partnercolumns}" keyField="Id" /> 

Controller

({
    doInit : function(component, event, helper) {
        helper.getMockData(component, event, helper);
    }
})

Helper

({
    getMockData: function(component, event) {
        console.log("Load mock data!");
        component.set("v.partnercolumns", [{
                label: "Name",
                fieldName: "Name",
                type: "text"
            },
            {
                label: "Status",
                fieldName: "status__c",
                type: "text"
            },
            {
                label: "Created Date",
                fieldName: "createdate__c",
                type: "date"
            }
        ]);
        component.set("v.partnerdata", [{
                Id: "a0319000001GtsjAAC",
                Name: "John Doe",
                status__c: "Active",
                createdate__c: "2005-01-01"
            },
            {
                Id: "a0319000001GtsjAAD",
                Name: "Mary Doe",
                status__c: "Active",
                createdate__c: "2005-02-10"
            }
        ]);

        var selectedRowsIds = ["a0319000001GtsjAAC"];

        // I was expecting the line below to work
        //component.set("v.partnerSelectedRows", selectedRowsIds);

        // Workaround to selectRows
        component = component.find("partnerTable");
        component.set("v.selectedRows", selectedRowsIds);

    }
})
  • Actually it works properly when loading data from Salesforce, however it doesn't work when using mock data. Find a example on the following link: gist.github.com/sumugapadman/b31488774df70e50c9f8bf64d3c9ac33 – Pablo Fischer Apr 13 '18 at 13:25
  • New update from salesforce support team: Our R&D team has logged a bug for the Mocked Data "Pre-Select issue" . Looks like the issue caused because of a Race Condition. The ETA of the fix is currently targeted in 214 release ( not the 214 pre-release build ) #Safe_harbor. – Pablo Fischer Apr 23 '18 at 10:33
0

I started to use lightning:datatable and then ran into the problem that at present there is no way to hook in a row menu.

So instead I created by own table component and table row component using the SLDS styling and that allowed me to get the user interface I wanted. I used the lightning:buttonMenu component for the menu on each row. My needs were quite modest, so using the platform made more sense than hooking in a rich (and in my experience excellent) but non-platform solution like DataTables.

Down the line hopefully, lightning:datatable will offer more.

0

Posting an answer with the details on what I did, since manipulating row selections doesn't seem possible with the current version of lightning:datatable.

I ended up using the jQuery DataTables plugin (which I've successfully used in the past) with a new DataTables plugin I found called Checkboxes. This plugin is available at: https://www.gyrocode.com/projects/jquery-datatables-checkboxes

Based on the testing I've done so far with this Checkboxes plugin, it works fantastic. It seems to be very intelligent on handling filtered rows, and sets the column header checkbox to checked, unchecked, or indeterminate based on the filtered results, which is exactly what I needed.

I haven't added handlers yet to process rows as they're selected or not, but so far it solves my needs for row selection.

I was trying to stay with native lightning:datatable, but it just doesn't have enough functionality right now. No doubt they'll enhance it over time, but in the end I had to go back to jQuery DataTables.

  • I am stuck in a exact same situation and I don't have much time (due to timelines) to figure out a way to use jquery datatables in lightning. Would it be possible for you to share the code snippet or so it can be a bit more fast and easier for me. – the_phantom Jan 28 '18 at 21:52

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.