Angular Material table featuring nested subrows with varying cell heights

Question

Angular Material table featuring nested subrows with varying cell heights

I am attempting to create a table with nested cells that mimic subrows. Everything works well as long as the content in each cell does not exceed the min-height property value of the nested cell (A).

Unfortunately, if this value is exceeded, the table layout breaks down (B). Is there a straightforward way to properly align the nested cells to achieve a table layout like (C)?

Here is the code: https://stackblitz.com/edit/angular-aejwfm

https://i.sstatic.net/vvg6B.png

(*) I am aware that JavaScript can be used to set the height of all cells representing a specific subrow to the maximum height of all cells from that subrow, but I would prefer a solution using pure HTML/CSS/Angular.

angular css flexbox angular-material

Answer 1

Answer №1

If you want to ensure that all cells in a row have the same height, one solution is to create a directive that can identify cells of a single row based on a specific criteria.

Since you are rendering data column by column, you'll need to provide some information to the directive so it can determine which cells belong to the same row.

I've made updates to your code to achieve the desired outcome.

Here is the link to the modified demo.

Below is a summary of the changes I made:

Create a directive named MatchCellHeightDirective that takes the 'book' object as input. This object helps identify cells belonging to the same row.

@Directive({
  selector: '[matchCellHeight]'
})
export class MatchCellHeightDirective {

  @Input() matchCellHeight: any;

  constructor(private el: ElementRef) { 

  }
}

Bind this directive to each cell element in your template.

<mat-cell [matchCellHeight]='book' *ngFor="let book of genre.books">
    {{book.title}} 
</mat-cell>

Create a service named MatchCellHeightService to store references of each cell and handle the logic for matching heights.

If you're interested, you can also check out another implementation of a directive that achieves similar results here.

Answer 2

If you want to ensure that all cells in a row have the same height, one solution is to create a directive that can identify cells of a single row based on a specific criteria.

Since you are rendering data column by column, you'll need to provide some information to the directive so it can determine which cells belong to the same row.

I've made updates to your code to achieve the desired outcome.

Here is the link to the modified demo.

Below is a summary of the changes I made:

Create a directive named MatchCellHeightDirective that takes the 'book' object as input. This object helps identify cells belonging to the same row.

@Directive({
  selector: '[matchCellHeight]'
})
export class MatchCellHeightDirective {

  @Input() matchCellHeight: any;

  constructor(private el: ElementRef) { 

  }
}

Bind this directive to each cell element in your template.

<mat-cell [matchCellHeight]='book' *ngFor="let book of genre.books">
    {{book.title}} 
</mat-cell>

Create a service named MatchCellHeightService to store references of each cell and handle the logic for matching heights.

If you're interested, you can also check out another implementation of a directive that achieves similar results here.

Angular Material table featuring nested subrows with varying cell heights

Answer №1

Similar questions

The impact of empty space on design aesthetics and practical solutions to utilize white space effectively

What is the best way to expand my navigation bar to fill the entire width of my div?

Refreshing the PrimeNg Organization Chart through code executionPrimeNg Organization Chart

Replace current CSS classes with new classes provided by the API

Can someone help me extract a value from Bootstrap's datetimepicker using Angular 4?

Image input not working in Internet Explorer

Event emitter in Ionic/Angular 2 component fails to refresh the view

Retrieving user input from a personalized autocomplete cell editor

Issue with Reactive Form - The call signatures of 'FormGroup' are not compatible

Displaying information collected from a submission form

The vertical alignment of an image within a colorbox is not functioning properly

Issue with registering Service worker for Angular 9 PWA with Carousel remains unresolved

Having trouble incorporating symbols with functionalities using HTML, CSS, and JS

Preventing Partial Overlap of Two Divs in HTML5

Triggering an event from a component to its parent module resulting in an exception situation

Utilizing Bootstrap for Efficient Image Alignment

Can you explain the expected behavior of the ::before and ::after pseudo-elements when used with the <details> element?

Creating a visually appealing layout with three equal columns side by side in Bootstrap 4

Is there a way to change the text (price) when I select an option?

A linear progress indicator composed of a continuous solid line and dotted markers to represent individual steps