Topic: Customise 'No matching records found' message
viviejed free asked 5 years ago
Hi Hopefully just an easy yes/no question... just wondering is there a way to customise the 'no matching records found' message that appears when no data is available?
Thanks
Konrad Stępień staff answered 5 years ago
Hi @viviejed,
Did you mean data for datatable? For now, it is not possible to add custom text if we don't have data. But I did make a little script which adds a custom message if data is empty.
My code:
import React, { useEffect } from 'react';
import { MDBDataTable } from 'mdbreact';
const DatatablePage = () => {
const data = {
columns: [
{
label: 'Name',
field: 'name',
sort: 'asc',
width: 150
},
{
label: 'Position',
field: 'position',
sort: 'asc',
width: 270
},
{
label: 'Office',
field: 'office',
sort: 'asc',
width: 200
},
{
label: 'Age',
field: 'age',
sort: 'asc',
width: 100
},
{
label: 'Start date',
field: 'date',
sort: 'asc',
width: 150
},
{
label: 'Salary',
field: 'salary',
sort: 'asc',
width: 100
}
],
rows: [
// {
// name: 'Tiger Nixon',
// position: 'System Architect',
// office: 'Edinburgh',
// age: '61',
// date: '2011/04/25',
// salary: '$320'
// }
]
};
useEffect(() => {
if (data.rows.length === 0) {
let error = document.createElement('td');
error.setAttribute('colspan', `${data.columns.length}`);
error.innerText='No matching records found';
document.querySelector('tbody').appendChild(error);
}
}, [data.rows.length, data.columns.length]);
return <MDBDataTable striped bordered hover data={data} />;
};
export default DatatablePage;
If you want I can forward it for our technical team and suggest adding this for the near future.
Best regards, Konrad.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: MDB React
- MDB Version: 4.13.0
- Device: laptop
- Browser: any
- OS: windows
- Provided sample code: No
- Provided link: No