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

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', 'cdk-no-data-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', 'mat-no-data-cell');
+  }
 }

src/material/table/testing/cell-harness.ts

@@ -56,7 +56,7 @@ export abstract class _MatCellHarnessBase extends ContentContainerComponentHarne
 /** Harness for interacting with an Angular Material table cell. */
 export class MatCellHarness extends _MatCellHarnessBase {
   /** The selector for the host element of a `MatCellHarness` instance. */
-  static hostSelector = '.mat-mdc-cell';
+  static hostSelector = '.mat-mdc-cell:not(.mat-no-data-cell)';
 
   /**
    * Gets a `HarnessPredicate` that can be used to search for a table cell with specific attributes.

src/material/table/testing/row-harness.ts

@@ -61,7 +61,7 @@ export abstract class _MatRowHarnessBase<
 /** Harness for interacting with an Angular Material table row. */
 export class MatRowHarness extends _MatRowHarnessBase<typeof MatCellHarness, MatCellHarness> {
   /** The selector for the host element of a `MatRowHarness` instance. */
-  static hostSelector = '.mat-mdc-row';
+  static hostSelector = '.mat-mdc-row:not(.mat-mdc-no-data-row)';
   protected _cellHarness = MatCellHarness;
 
   /**