1

I'm using lightning:datatable to display the Account object in a table. I've also added a regex that lets users search for any field in any column. What I wish to do is, if there are no matches, display a button to let the user create a new account.

Basically, I got this table with a search functionality here:

<lightning:input type="text"
                 onchange="{!c.filter}"
                 value="{!v.filter}"
                 placeholder="Search any column" />

<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}"
                     hideCheckboxColumn="true"/>

That triggers this controller everytime a user types in the search field:

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) ||
        regex.test(row.BillingCity) ||
        regex.test(row.BillingCountry));
    }
    catch (e) {
        // invalid regex, use full list
        console.log(e);
    }
    if (results.length === 0) {
        // Show a lightning button to let the user add a new account
    }
    component.set("v.accounts", results);
},

What I wish to do is, if there are no results from the search, I'd like to display a lightning button, but not sure how to put that, seeing as it's a lightning:datatable.

Any ideas?

1
  • Hi @erikvm, May I see your full code for this? May 28 '19 at 17:18
1

One way of doing this would be to have a CSS class where visibility is dependent on the state of results and apply that to the button wherever you have located it in the Lightning Table.

0

you can put the lightning:button in Component like this and you can show this button when there is no search result.

<aura:attribute name="ShowNewButton" type="Boolean" default="false"/>
<aura:if isTrue="{!v.ShowNewButton}">
<lightning:button label="New" onclick="{!c.createNew}"/>
</aura:If>

Controller Code

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) ||
        regex.test(row.BillingCity) ||
        regex.test(row.BillingCountry));
    }
    catch (e) {
        // invalid regex, use full list
        console.log(e);
    }
    if (results.length === 0) {
        // Show a lightning button to let the user add a new account

component.set("v.ShowNewButton", "True");

    }
    component.set("v.accounts", results);
},
3
  • But is it possible to put it inside the lightning data table?
    – erikvm
    Sep 19 '18 at 12:57
  • yes. you can put this button inside the Lightning Data table but that depends on requirement and Look/feel.you can add new button as extra column.but i would suggest put this button outside of Lightning:DataTable. for showing the button as extra column refer this link: infallibletechie.com/2018/04/… Sep 19 '18 at 13:09
  • If this answer solves your problem mark this as correct answer to help others. Sep 19 '18 at 13:17

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.