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, 2019 at 17:18

2 Answers 2

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, 2018 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, 2018 at 13:09
  • If this answer solves your problem mark this as correct answer to help others. Sep 19, 2018 at 13:17

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .