Components: Simplify tables. Simplify other stuff as well.

[Hermholtz]

I'm submitting a...

[x] Bug report  
[x] Performance issue
[x] Feature request
[x] Documentation issue or request
[x] Other... Please describe: general direction

Current behavior

This is current example table from the docs. It contains mostly noise and only a little of useful code hidden in garbage.

<mat-table [dataSource]="dataSource">
  <!-- User name Definition -->
  <ng-container cdkColumnDef="username">
    <mat-header-cell *cdkHeaderCellDef> User name </mat-header-cell>
    <mat-cell *cdkCellDef="let row"> {{row.username}} </mat-cell>
  </ng-container>

  <!-- Age Definition -->
  <ng-container cdkColumnDef="age">
    <mat-header-cell *cdkHeaderCellDef> Age </mat-header-cell>
    <mat-cell *cdkCellDef="let row"> {{row.age}} </mat-cell>
  </ng-container>

  <!-- Title Definition -->
  <ng-container cdkColumnDef="title">
    <mat-header-cell *cdkHeaderCellDef> Title </mat-header-cell>
    <mat-cell *cdkCellDef="let row"> {{row.title}} </mat-cell>
  </ng-container>

  <!-- Header and Row Declarations -->
  <mat-header-row *cdkHeaderRowDef="['username', 'age', 'title']"></mat-header-row>
  <mat-row *cdkRowDef="let row; columns: ['username', 'age', 'title']"></mat-row>
</mat-table>

Expected behavior

I would like you to eliminate noise and allow it to look like this instead:

<mat-table [dataSource]="dataSource" [dataItem]="row">
  <!-- User name Definition -->
  <mat-header-cell> User name </mat-header-cell>
  <mat-cell> {{row.username}} </mat-cell>

  <!-- Age Definition -->
  <mat-header-cell> Age </mat-header-cell>
  <mat-cell> {{row.age}} </mat-cell>

  <!-- Title Definition -->
  <mat-header-cell> Title </mat-header-cell>
  <mat-cell> {{row.title}} </mat-cell>
</mat-table>

So much stuff in Angular and Material is done in far too verbose way, it's a huge problem to do things easy way. The choice of defaults is poor and it generates a lot of noise and boilerplate in code. I loathe many stupid features like the need to specify let row in every column, or cdkHeaderCellDef within mat-header-cell. Can't material-header-cell already use this cdkHeaderCellDef by default? Isn't mat-table material enough? Does it need another thing which is called CDK and a lot of cdk... attributes everywhere?

Not to mention that mat-header-row is at the bottom... (in official docs, so I assume this is encouraged even if not required).

I marked "performance issue" as it's impacting performance of developers and in this sense it's relevant.

Feature request would be to eliminate necessity to specify stuff that should be just enabled/included/inferred by default - and allow to customize it for advanced usage scenarios.

Environment

Angular version: 7.0.0

Started my adventure with Angular with v6. Coming from different technologies, all of them much easier to use and not requiring so much verbosity - but allowing a lot of flexibility.

[andrewseguin]

Hey @chojrak11, thanks for taking the time to provide your feedback about the verbosity of the table API. We agree that it is too verbose for simple use cases (e.g. showing simple text data). It was our intention to first build the table in a way that could handle the most advanced use cases first, and then we can simplify things later.

Every part of the table syntax right now is very intentional in its purpose and reducing it means that some features would not be supported. This was particularly important for the CdkTable which aimed to be a foundational table solution for all Angular users and we wanted to make sure it was as flexible as possible while maximizing performance.

To address your specific concerns,

• Each cell is a template that is stamped out multiple times by the table, and let row is the mechanism that allows the cell to have access to the specific row data. I agree this particular syntax is odd but its necessary for the template to have a handle on the row data. In your example, you have [dataItem]=row but this isn't doing what you think it does (this gives the table an input of row)
• In your example, you mix cdk and mat. I'm not sure we do this in our examples. The CDK is the base layer that the Material components rely on, and in general they do not mix. If you see an example on the table docs that do this, we can fix it.
• The mat-header-row and mat-row are there because the rows need to know what columns you want to display and in what order. Also, if you want to add any attribute or event bindings, this allows you to hook those up.

The good news is that since the table has a rock steady foundation (albeit verbose), we can build on top of it and make a nice layer of abstraction for simple cases. It sounds like you'd benefit from this. Here's an example of what this would look like:

<table mat-table [dataSource]="dataSource">
  <simple-column name="name"></simple-column>
  <simple-column name="position"></simple-column>
  <simple-column name="weight"></simple-column>
  <simple-column name="symbol"></simple-column>
</table>

In this case, the name to each simple column matches the header text as well as the data accessor for each row. Each can be optionally overriden with an additional @Input (label, dataAccessor). It would by default assume that you want to show all the columns defined, and the order in which you defined them.

For a prototype of this syntax, check out this stackblitz - https://stackblitz.com/edit/angular-5xthcl?file=app%2Ftable-simple-column-example.html

Note that we haven't yet added support for the default mat-row, mat-header-row case yet, so those are still there.

What do you think about that syntax?

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}