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?
Best Answer
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.