Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


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.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • 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