How can I create a responsive table using Angular Material?

How can I create a responsive table using Angular Material?

You can create a responsive table in Angular Material by using the <mat-table> component along with CSS for responsiveness.

What CSS styles should I apply to make it responsive?

You can use media queries to adjust the table layout for different screen sizes, and set the table width to 100%.

Can you provide a code example?

Sure! Here's a basic example:

<mat-table [dataSource]=data>
  <ng-container matColumnDef="name">
    <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
  </ng-container>
  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>