title: how to get server side pagination but client side sorting
body: <p>i am using Angular Material's data grid. I am able to load data from server side and sorting and pagination both works, however i am trying to sort only the items that are on the table at the moment instead of sorting from server side. </p>
  
  <pre><code>&lt;div &gt;
  &lt;div class="example-table-container" &gt;
  
      &lt;table mat-table [dataSource]="dataSource" class="example-table" style="color:white" matSort matSortActive="accountNumber"
          matSortDisableClear matSortDirection="desc"&gt;
          &lt;!-- Number Column --&gt;
          &lt;ng-container matColumnDef="accountNumber"&gt;
              &lt;th mat-header-cell *matHeaderCellDef&gt;Account Number&lt;/th&gt;
              &lt;td mat-cell *matCellDef="let row"&gt;{{row.accountNumber}}&lt;/td&gt;
          &lt;/ng-container&gt;
  
          &lt;!-- Title Column --&gt;
          &lt;ng-container matColumnDef="accountTitle"&gt;
              &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt;Account Title&lt;/th&gt;
              &lt;td mat-cell *matCellDef="let row"&gt;{{row.accountTitle}}&lt;/td&gt;
          &lt;/ng-container&gt;
  
          &lt;!-- State Column --&gt;
          &lt;ng-container matColumnDef="currentBalance"&gt;
              &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt;Current Balance&lt;/th&gt;
              &lt;td mat-cell *matCellDef="let row"&gt;{{row.currentBalance}}&lt;/td&gt;
          &lt;/ng-container&gt;
  
          &lt;!-- Created Column --&gt;
          &lt;ng-container matColumnDef="email"&gt;
              &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt;
                  Email
              &lt;/th&gt;
              &lt;td mat-cell *matCellDef="let row"&gt;{{row.email}}&lt;/td&gt;
          &lt;/ng-container&gt;
           &lt;!-- Created Column --&gt;
           &lt;ng-container matColumnDef="phoneNumber"&gt;
              &lt;th mat-header-cell *matHeaderCellDef&gt;
                  Phone Number
              &lt;/th&gt;
              &lt;td mat-cell *matCellDef="let row"&gt;{{row.phoneNumber}}&lt;/td&gt;
          &lt;/ng-container&gt;
           &lt;!-- Created Column --&gt;
           &lt;ng-container matColumnDef="accountStatus"&gt;
              &lt;th mat-header-cell *matHeaderCellDef mat-sort-header &gt;
                 Account Status
              &lt;/th&gt;
              &lt;td mat-cell *matCellDef="let row"&gt;{{row.accountStatus}}&lt;/td&gt;
          &lt;/ng-container&gt;
  
          &lt;tr mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/tr&gt;
          &lt;tr mat-row *matRowDef="let row; columns: displayedColumns;"&gt;&lt;/tr&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  
  &lt;mat-paginator [length]="resultsLength" [pageSize]="pageSize" style="margin-right: 20px;"&gt;&lt;/mat-paginator&gt;
  </code></pre>
  
  <p></p>
  
  <p>In my TS i understand that i am calling merge on sorting which is required for server side sorting. but i want to do just client side sorting.</p>
  
  <pre><code>export class ManageAccountsComponent implements OnInit, AfterViewInit {
  
  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
  @ViewChild(MatSort, { static: true }) sort: MatSort;
  
  constructor(private http: HttpClient) { }
  dataSource: Account[] = [];
  displayedColumns: string[] = ['accountNumber', 'accountTitle', 'currentBalance', 'email', 'phoneNumber', 'accountStatus'];
  resultsLength = 0;
  pageSize = 2;
  isLoadingResults: boolean;
  ngOnInit() {
  
  }
  ngAfterViewInit() {
  
      merge(this.sort.sortChange, this.paginator.page)
          .pipe(
              startWith({}),
              switchMap(() =&gt; {
                  this.isLoadingResults = true;
                  return this.http.get(this.getAccountsUrl());
              }),
              map(data =&gt; {
                  this.isLoadingResults = false;
                  this.sort.sortChange.subscribe(() =&gt; this.paginator.pageIndex = 0);
                  this.resultsLength = data['@odata.count'];
  
                  return data['value'];
              }),
              catchError((ex) =&gt; {
                  this.isLoadingResults = false;
                  return observableOf([]);
              })
          ).subscribe(data =&gt; this.dataSource = data);
  
  }
  getAccountsUrl() {
      const href = "https://localhost:44391/odata/Accounts?";
      if (this.paginator.pageIndex == 0) {
          var requestUrl = "";
          requestUrl =
              `${href}$top=${this.pageSize}&amp;$count=true&amp;$orderby=${this.sort.active + ' ' + this.sort.direction}`;
  
      } else {
          requestUrl =
              `${href}$top=${this.pageSize}&amp;$skip=${this.pageSize}&amp;$count=true&amp;$orderby=${this.sort.active + ' ' + this.sort.direction}`;
      }
      return requestUrl;
  }}
  </code></pre>
  
  <p>and the model looks like this</p>
  
  <pre><code>export interface Account {
  accountNumber: string;
  accountTitle: string;
  currentBalance: string;
  email: string;
  phoneNumber: string;
  accountStatus: string;
  </code></pre>
  
  <p>}</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>i converted the datasource to </p>
  
  <pre><code>  dataSource: MatTableDataSource&lt;Account&gt;
  </code></pre>
  
  <p>and i removed sorting from merge and populated datasource's sort after data is loaded </p>
  
  <pre><code>  ).subscribe(data =&gt; {
      this.dataSource = data;
      this.dataSource.sort = this.sort;
    });
  </code></pre>
  
  <p>but didnt worked. </p>