title: Angular material sorting table not working
body: <p>I'm using Angular Material and I generate the tables inside a for loop in the template. I want to add sorting and pagination to these generated tables but what I tried is not working.
  I have a list of groups and each group has its items which is a table and I want to be able to sort by <code>price, quantity, sales</code>.</p>
  <pre><code>groups: any[] = [
      {
        name: 'Group 1',
        items: [
          { name: 'Product 1', price: 20, quantity: 33, sales: 11 },
          { name: 'Product 2', price: 10, quantity: 43, sales: 11 },
          { name: 'Product 3', price: 23, quantity: 63, sales: 11 },
        ],
      },
      {
        name: 'Group 2',
        items: [
          { name: 'Product 2', price: 40, quantity: 33, sales: 11 },
          { name: 'Product 4', price: 10, quantity: 143, sales: 211 },
          { name: 'Product 61', price: 63, quantity: 63, sales: 151 },
        ],
      },
      {
        name: 'Group 20',
        items: [
          { name: 'Product 22', price: 40, quantity: 33, sales: 11 },
          { name: 'Product 14', price: 10, quantity: 143, sales: 211 },
        ],
      },
    ];
  </code></pre>
  <p>And On HTML I have these:</p>
  <pre><code>&lt;div *ngFor=&quot;let group of groups&quot;&gt;
    &lt;p&gt;{{ group.name }}&lt;/p&gt;
    &lt;div class=&quot;mat-elevation-z8&quot;&gt;
      &lt;table [dataSource]=&quot;group.items&quot; mat-table matSort&gt;
        &lt;ng-container matColumnDef=&quot;name&quot;&gt;
          &lt;th *matHeaderCellDef mat-header-cell&gt;Name&lt;/th&gt;
          &lt;td *matCellDef=&quot;let element&quot; mat-cell&gt;{{ element.name }}&lt;/td&gt;
        &lt;/ng-container&gt;
        &lt;ng-container matColumnDef=&quot;price&quot;&gt;
          &lt;th *matHeaderCellDef mat-sort-header mat-header-cell&gt;Price&lt;/th&gt;
          &lt;td *matCellDef=&quot;let element&quot; mat-cell&gt;{{ element.price }}&lt;/td&gt;
        &lt;/ng-container&gt;
        &lt;ng-container matColumnDef=&quot;quantity&quot;&gt;
          &lt;th *matHeaderCellDef mat-sort-header mat-header-cell&gt;Quantity&lt;/th&gt;
          &lt;td *matCellDef=&quot;let element&quot; mat-cell&gt;{{ element.quantity }}&lt;/td&gt;
        &lt;/ng-container&gt;
        &lt;ng-container matColumnDef=&quot;sales&quot;&gt;
          &lt;th *matHeaderCellDef mat-sort-header mat-header-cell&gt;Sales&lt;/th&gt;
          &lt;td *matCellDef=&quot;let element&quot; mat-cell&gt;{{ element.sales }}&lt;/td&gt;
        &lt;/ng-container&gt;
        &lt;tr *matHeaderRowDef=&quot;displayedColumns&quot; mat-header-row&gt;&lt;/tr&gt;
        &lt;tr *matRowDef=&quot;let row; columns: displayedColumns&quot; mat-row&gt;&lt;/tr&gt;
      &lt;/table&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  </code></pre>
  <p>Can someone help me please I'm stuck?</p>
  <p>Check in this <a href="https://stackblitz.com/edit/angular-material-mat-table-sort-pgw6lj?file=src/app/app.component.css" rel="nofollow noreferrer">stackblitz</a></p>