What is the difference between component 'mat-table' and the directive '<table mat-table>'?

Question

<mat-table>
<table mat-table ...>

I found a similar question Should I use "<table mat table ... " or "<mat-table ...", but I still have a misunderstanding. Angular Material website https://material.angular.io/components/table/overview#tables-with-code-display-flex-code- has a small note:

Note that this approach means you cannot include certain native-table >features such colspan/rowspan or have columns that resize themselves based on >their content.

But I don’t understand what:

or have columns that resize themselves based on their content means.

Could you please give an example of this, what are the columns that are resizing?

Ultimately, I want to achieve the correct display of tables on mobile devices (with the mat-table component this is easier to do, because he uses Flex), here is an example of this https://stackblitz.com/edit/angular-mohmt5?file=app%2Ftable-basic-example.ts And I want to immediately understand what difficulties may be in view of the notes above.

it means you can use as an element or an attribute, both are same. — joyBlanks
What the documentation meant is that you cannot do some of the stuff you are able to do with native HTML with table for example in html you can do <td colspan="2"> but colspan is not available in <mat-table> method — penleychan

joyBlanks joyBlanks · Accepted Answer · 2019-10-03T02:09:52

From the source if you see the directive's selector can use as an element mat-table or as an attribute to table table[mat-table]

@Component({
  ...
  selector: 'mat-table, table[mat-table]',
  ...
})
export class MatTable<T> extends CdkTable<T> {}

Option 1: mat-table: When you use as an element it uses CSS flex-box properties to align your data/table so when you have very long text it will not resize automatically unless specified otherwise. Note using this option you have to compromise on rowspan and colspan such as if the need arises you can't span your rows/cols

Stackblitz: https://stackblitz.com/edit/angular-prq2ju

Option 2: table[mat-table]: When you use as an attribute to html table the td takes care of auto resizing its content based on the cell in turn based to the column. So the whole column gets the width

Stackblitz: https://stackblitz.com/edit/angular-pxpwet

The modern approach would be to use the Option-1 CSS flex-box approach, but if you have very long content in cell you can specify the column width to a large number, but if you don't want to go to a lot of hassle you can use it with Option-2 native html table/tr/td

What is the difference between component 'mat-table' and the directive '<table mat-table>'?

1 Answers