How to show empty message in data table angular material, If no data found

Question

I am using this code

Answer 1

My solution does not alter the footer, and shows the message inside of the actual table by using CSS and adding a box :before the footer:

First some CSS:

td.no-content {
  padding-top: 7rem;
}

td.no-content:before {
  content: attr(data-empty-message);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  padding: 3rem 0 3rem 0;
  background-color: white;
}

Then add the no-content class to the footer TD when nothing is showing: