diff --git a/goldens/cdk/table/index.api.md b/goldens/cdk/table/index.api.md index f6c06e122fba..93a9abaafb67 100644 --- a/goldens/cdk/table/index.api.md +++ b/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; // (undocumented) diff --git a/goldens/material/table/index.api.md b/goldens/material/table/index.api.md index 030ed971513f..a019f4778ae0 100644 --- a/goldens/material/table/index.api.md +++ b/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; // (undocumented) diff --git a/src/cdk/table/row.ts b/src/cdk/table/row.ts index 9d89438e0229..588c83eaf525 100644 --- a/src/cdk/table/row.ts +++ b/src/cdk/table/row.ts @@ -366,7 +366,9 @@ export class CdkRow {} export class CdkNoDataRow { templateRef = inject>(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() {} diff --git a/src/cdk/table/table.ts b/src/cdk/table/table.ts index a8ffcfabcbeb..c704690e1163 100644 --- a/src/cdk/table/table.ts +++ b/src/cdk/table/table.ts @@ -1419,7 +1419,13 @@ export class CdkTable // 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(); diff --git a/src/material/table/row.ts b/src/material/table/row.ts index 1f5a3042d082..1c0ac4b234c3 100644 --- a/src/material/table/row.ts +++ b/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'); + } } diff --git a/src/material/table/testing/cell-harness.ts b/src/material/table/testing/cell-harness.ts index 420244fa3e1b..47fa5ccc92f5 100644 --- a/src/material/table/testing/cell-harness.ts +++ b/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. diff --git a/src/material/table/testing/row-harness.ts b/src/material/table/testing/row-harness.ts index 70ad44a3c499..5db30792c7ce 100644 --- a/src/material/table/testing/row-harness.ts +++ b/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 { /** 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; /**