Customise 'No matching records found' message

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.