[SalesForce] Infinite Scrolling in lightning:datatable combined with search filter functionality

I got a lightning:datatable where I also have a search input field to search for whatever the user types in the input field. I can't get this to work together with an infinite scrolling table. Wonder if someone can help me out. If I have infinitescrolling enabled, the filter functionality does not work (I assume because the table keeps re-rendering when I type into the input field)

My markup:

<extends="c:Base" controller="AccountBrowserForm">
<aura:handler name="init" value="{! this }" action="{! c.doInit }"/>
<aura:attribute name="selectedAccountId" type="Id" access="public" />
<aura:attribute name="accounts" type="List"/>
<aura:attribute name="mycolumns" type="List"/>
<aura:attribute name="sortedBy" type="String" />
<aura:attribute name="sortedDirection" type="Boolean" default="true" />
<aura:attribute name="backingdata" type="List" /> <!-- backing data to allow a narrowed down datatable -->
<aura:attribute name="filter" type="String" /> <!-- filter input -->
<aura:registerEvent name="AccountFilterChange" type="c:AccountFilterChange" />



<aura:attribute name="enableInfiniteLoading" type="Boolean" default="true"/>
<aura:attribute name="initialRows" type="Integer" default="5"/>
<aura:attribute name="rowsToLoad" type="Integer" default="1"/>
<aura:attribute name="totalNumberOfRows" type="Integer" default="5"/>
<aura:attribute name="loadMoreStatus" type="String" default=""/>
<aura:attribute name="rowNumberOffset" type="Integer" default="0"/>
<aura:attribute name="currentCount" type="Integer" default="10"/>

<div class="forminput">
<lightning:input type="text"
                 onchange="{!c.filter}"
                 value="{!v.filter}"
                 placeholder="{!$Label.c.Searchfield_Placeholder}" />
</div>
<lightning:datatable aura:id="lightningTable"
                     data="{! v.accounts }"
                     columns="{! v.mycolumns }"
                     keyField="Id"
                     onrowaction="{! c.handleRowAction }"
                     onsort="{!c.updateColumnSorting}"
                     sortedBy="{!v.sortedBy}"
                     sortedDirection="{!v.sortedDirection}"

                     loadMoreOffset="{! v.loadMoreOffset }"
                     enableInfiniteLoading="{!v.enableInfiniteLoading}"
                     onloadmore="{! c.loadMoreData }"

                     hideCheckboxColumn="true"/>
{! v.loadMoreStatus }

Controller:

doInit: function (component, event, helper) {
    helper.callServer(component, "c.getAccounts", $A.getCallback(function (response) {
        component.set("v.accounts", response);
        component.set("v.backingdata", response); // Need to fetch a copy because we use this when we filter the data.
        component.set('v.mycolumns', [{
                type: "button",
                typeAttributes: {
                    label: '',
                    iconName: 'utility:add',
                    name: 'selectRecord',
                    title: 'selectRecord',
                    disabled: false,
                    value: 'edit',
                    variant: {
                        fieldName: 'variantValue'
                    },
                }
            },
            {label: $A.get("$Label.c.Name"), fieldName: 'Name', type: 'text', sortable: true},
            {label: $A.get("$Label.c.Street"), fieldName: 'BillingStreet', type: 'text', sortable: true},
            {label: $A.get("$Label.c.Postal_Code"), fieldName: 'BillingPostalCode', type: 'text', sortable: true},
            {label: $A.get("$Label.c.City"), fieldName: 'BillingCity', type: 'text', sortable: true},
            {label: $A.get("$Label.c.Country"), fieldName: 'BillingCountry', type: 'text', sortable: true},
        ]);
    }))
},

filter: function (component, event, helper) {
    var data = component.get("v.backingdata"),
        term = component.get("v.filter"),
        results = data, regex;
    try {
        regex = new RegExp(term, "i");
        // filter checks each row, constructs new array where function returns true
        results = data.filter(row => regex.test(row.Name) ||
        regex.test(row.BillingStreet) ||
        regex.test(row.BillingPostalCode.toString()) ||
        regex.test(row.BillingCity) ||
        regex.test(row.BillingCountry));
    }
    catch (e) {
        // invalid regex, use full list
    }
    component.set("v.accounts", results);
},

loadMoreData: function (cmp, event, helper) {
        //Display a spinner to signal that data is being loaded
        event.getSource().set("v.isLoading", true);
        //Display "Loading" when more data is being loaded
        cmp.set('v.loadMoreStatus', 'Loading');
        helper.fetchData(cmp, cmp.get('v.rowsToLoad'))
            .then($A.getCallback(function (data) {
                if (cmp.get('v.accounts').length >= cmp.get('v.totalNumberOfRows')) {
                    cmp.set('v.enableInfiniteLoading', false);
                    cmp.set('v.loadMoreStatus', 'No more data to load');
                } else {
                    var currentData = cmp.get('v.accounts');
                    //Appends new data to the end of the table
                    var newData = currentData.concat(data);
                    cmp.set('v.accounts', newData);
                    cmp.set('v.loadMoreStatus', '');
                }
               event.getSource().set("v.isLoading", false);
            }));
    }

Helper

fetchData: function(component , rows){
        return new Promise($A.getCallback(function(resolve, reject) {
            var currentDatatemp = component.get('c.getAccounts');
            var counts = component.get("v.currentCount");
            currentDatatemp.setCallback(this, function(a) {
                resolve(a.getReturnValue());
                var countstemps = component.get("v.currentCount");
                countstemps = countstemps+component.get("v.initialRows");
                component.set("v.currentCount",countstemps);
            });
            $A.enqueueAction(currentDatatemp);
        }));

    } ,

Appreciate your help

Best Answer

Hope you have figured this out by now @erikvm :-)

For other viewers, have a look at this very helpful page:

https://rajvakati.com/2018/02/18/usage-of-lightningdatatable/

Also, the fetchData function, which is missing from the 'Documentation' tab, is shown on the 'Example' tab:

lightning:datatable documentation

Related Solutions

[SalesForce] Search functionality for lightning:dualListbox

Yes, it's possible. Here's a demonstration app:

<aura:application extends="force:slds">
    <!-- search term -->
    <aura:attribute name="term" type="String" />
    <!-- currently displayed items -->
    <aura:attribute name="options" type="List" default="[]" />
    <!-- all items -->
    <aura:attribute name="allOptions" type="List" default="[]" />
    <!-- selected values -->
    <aura:attribute name="selected" type="List" default="[]" />

    <!-- load data from somewhere -->
    <aura:handler name="init" value="{!this}" action="{!c.init}" />
    <!-- update list when term changes -->
    <aura:handler name="change" value="{!v.term}" action="{!c.search}" />

    <lightning:input type="text" value="{!v.term}" label="Filter" />
    <lightning:dualListbox value="{!v.selected}" options="{!v.options}" label="Items"
                           sourceLabel="Available" selectedLabel="Selected" />
</aura:application>

({
    init: function(component, event, helper) {
        // Load data
        helper.init(component);
    },
    search: function(component, event, helper) {
        // Filter list
        helper.search(component);
    }
})

({
    init: function(component) {
        // Load some default values.
        component.set("v.allOptions", [
            { value: "Hello", label: "Hello" },
            { value: "World", label: "World" },
            { value: "Test", label: "Test" }
        ]);
        // Initialize the options list
        this.search(component);
    },
    search: function(component) {
        // Search term
        var term = component.get("v.term");
        // Show all when no filter, or when filter matches label or value
        component.set("v.options",
                      component.get("v.allOptions")
                      .filter(
                          item => !term || 
                          item.value.match(term) || 
                          item.label.match(term)));
    }
})

[SalesForce] How to implement a professional infinite/virtual scrolling in Lightning

I tried to make this code work inside Lightning but failed because Lightning seems to be only a subset of Aura.

Lightning is running a full copy of Aura. However, it's not running the current version of Aura. There's some lag time between what we have in Lightning and what we have in Aura; most likely, the introduction of ui:scroller means that we'll see it in the next release or two (obvious warning: we might never see it, for a variety of reasons). This is also the reason why, for example, we don't currently have a lightning:progressRing element, even though it's in the Salesforce Lightning Design System. Lightning as we know it is always at least one release behind SLDS.

How do you do it?

Today, you write really convoluted code, like the code you've found. However, I would also argue such code is overkill for the majority of use cases. If you're displaying "thousands" of items, or more, you may need to consider performance. If you're likely never going to show more than a few hundred items in a list, it's probably not a priority to be perfectly optimized.

Ultimately, what you're going to need is some custom rendering or something, and a complicated scrolling library. Or just go the easy way like Lightning does today, and just detect when you're within a few pixels of the scroll bottom and add more items. Or use pagination/filtering/etc. Naive infinite scrolling is "slower", especially on mobile devices, but should perform acceptably. Pagination, on the other hand, handles tens of thousands of records with ease, as I've demonstrated in a gist (note: yes, I realize it doesn't use newer Lightning features, it needs to be updated).

Do you know of any Salesforce roadmap to release their internal scroller component?

Even if we knew, we couldn't tell you, unless salesforce.com announces it publicly in an official manner, or unless you were under a Salesforce NDA (and even then, you'd learn through an official NDA'd channel, not the general community). Future Looking Statements (previously Safe Harbor Statements) are always prefixed with a warning that you should buy the Salesforce of today, not the Salesforce of the future. Anyone in a position to know what the roadmap looks like probably couldn't tell you, either, since that might be a violation of NDA.

What else could be of help to build a "good enough" solution?

That depends. What's good enough for me may not be good enough for you. For now, I strongly recommend pagination, even though SLDS would have us believe that infinite scrolling is a thing of the now. If you do implement infinite scrolling, consider a simplistic approach that simply updates the entire DOM. It's trivial to write, and it's good enough for Salesforce, so it should be good enough for us (for now).

The difference between pagination and infinite scrolling is that the user has greater control of the page loads. This is a Good Thing in the general sense. Nothing destroys a good user experience than having things repeatedly happening unexpectedly or unexpected slowdowns while just "browsing". For now, I would just suggest using lightning:datatable if it suits your needs, and if not, consider pagination. Infinite scrolling should still be considered a last resort for the moment.

Best Answer

Related Solutions

[SalesForce] Search functionality for lightning:dualListbox

[SalesForce] How to implement a professional infinite/virtual scrolling in Lightning

Related Topic