bug(mat-table): Unable to use mat-table-row-item-container-height

[melroy89]

Description

As discussed earlier here: #26438 (closed)

height: unset; is done on purpose: https://github.com/angular/components/blob/204b289588106d90c991f26a50c23c80c68d4fc3/src/material/table/table.scss#L150C11-L150C16

However, why does Material 3 have tokens to allow to you change those heights: https://material.angular.io/components/table/styling..?

Like: row-item-container-height, header-container-height etc. But they will NOT work...

Reproduction

1. Try to use:

  @include mat.table-overrides((
    header-container-height: 32px,
    row-item-container-height: 32px,
    footer-container-height: 32px
  ));

2. You will notice it won't work at all

Expected Behavior

• Either support these mixins like shown above.
• Or: Remove the token support from it?

Actual Behavior

You provide style override tokens, but it's not working at all. Its very confusing.

Environment

• Angular: 19.x
• CDK/Material: 19.x
• Browser(s): Firefox
• Operating System (e.g. Windows, macOS, Ubuntu): Ubuntu

[crisbeto]

It looks like the tokens currently only apply to the native table, but not the flexbox-based one. The flexbox table has a hardcoded height: https://github.com/angular/components/blob/main/src/material/table/_table-flex-styles.scss#L3. Fixing it is fairly straightforward, but I expect this will be difficult to land internally. There are a couple of ways to work around it:

1. Switch to using the native MatTable.
2. Add the following style to your app:

mat-header-row {
  min-height: var(--mat-table-header-container-height);
}

mat-row {
  min-height: var(--mat-table-row-item-container-height);
}

mat-footer-row {
  min-height: var(--mat-table-footer-container-height);
}