fix(material/table): style no data row properly

The "no data" row in the table goes through a different creation flow than the regular table rows which means that it can't get its CSS classes and ends up being unstyled.

These changes add some logic to apply the appropriate classes.

Fixes #22349.

Author: crisbeto

goldens/cdk/table/index.api.md

@@ -249,7 +249,11 @@ export class CdkHeaderRowDef extends BaseRowDef implements CanStick, OnChanges {
 export class CdkNoDataRow {
     constructor(...args: unknown[]);
     // (undocumented)
-    _contentClassName: string;
+    _cellClassNames: string[];
+    // (undocumented)
+    _cellSelector: string;
+    // (undocumented)
+    _contentClassNames: string[];
     // (undocumented)
     templateRef: TemplateRef<any>;
     // (undocumented)

goldens/material/table/index.api.md

@@ -130,8 +130,9 @@ export class MatHeaderRowDef extends CdkHeaderRowDef {
 
 // @public
 export class MatNoDataRow extends CdkNoDataRow {
+    constructor();
     // (undocumented)
-    _contentClassName: string;
+    _cellSelector: string;
     // (undocumented)
     static ɵdir: i0.ɵɵDirectiveDeclaration<MatNoDataRow, "ng-template[matNoDataRow]", never, {}, {}, never, never, true, never>;
     // (undocumented)

src/cdk/table/row.ts

@@ -366,7 +366,9 @@ export class CdkRow {}
 export class CdkNoDataRow {
   templateRef = inject<TemplateRef<any>>(TemplateRef);
 
-  _contentClassName = 'cdk-no-data-row';
+  _contentClassNames = ['cdk-no-data-row', 'cdk-row'];
+  _cellClassNames = ['cdk-cell'];
+  _cellSelector = 'td, cdk-cell, [cdk-cell], .cdk-cell';
 
   constructor(...args: unknown[]);
   constructor() {}

src/cdk/table/table.ts

@@ -1419,7 +1419,13 @@ export class CdkTable<T>
       // to figure out which one to add it to when there are multiple.
       if (view.rootNodes.length === 1 && rootNode?.nodeType === this._document.ELEMENT_NODE) {
         rootNode.setAttribute('role', 'row');
-        rootNode.classList.add(noDataRow._contentClassName);
+        rootNode.classList.add(...noDataRow._contentClassNames);
+
+        const cells = rootNode.querySelectorAll(noDataRow._cellSelector);
+
+        for (let i = 0; i < cells.length; i++) {
+          cells[i].classList.add(...noDataRow._cellClassNames);
+        }
       }
     } else {
       container.clear();

src/material/table/row.ts

@@ -130,5 +130,11 @@ export class MatRow extends CdkRow {}
   providers: [{provide: CdkNoDataRow, useExisting: MatNoDataRow}],
 })
 export class MatNoDataRow extends CdkNoDataRow {
-  override _contentClassName = 'mat-mdc-no-data-row';
+  override _cellSelector = 'td, mat-cell, [mat-cell], .mat-cell';
+
+  constructor() {
+    super();
+    this._contentClassNames.push('mat-mdc-no-data-row', 'mat-mdc-row', 'mdc-data-table__row');
+    this._cellClassNames.push('mat-mdc-cell', 'mdc-data-table__cell');
+  }
 }