Server Side Sorting And Filtering

<!DOCTYPE html>
<html>
<head>
    <title>Angular 2 ag-Grid starter</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style> html, body { margin: 0; padding: 0; height: 100%; } </style>


    <!-- Polyfills -->
    <script src="https://unpkg.com/core-js/client/shim.min.js"></script>
    <script src="https://unpkg.com/zone.js@0.8.17?main=browser"></script>
    <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>

    <script>
        var appLocation = '';
        var boilerplatePath = '';
        var systemJsMap = {"ag-grid":"https:\/\/unpkg.com\/ag-grid@16.0.0\/dist\/ag-grid.js","ag-grid\/main":"https:\/\/unpkg.com\/ag-grid@16.0.0\/dist\/ag-grid.js","ag-grid-enterprise":"https:\/\/unpkg.com\/ag-grid-enterprise@16.0.0\/","ag-grid-react":"npm:ag-grid-react@16.0.0\/","ag-grid-angular":"npm:ag-grid-angular@16.0.0\/"};
    </script>

    <script src="systemjs.config.js"></script>

    <script>
    System.import('main.ts').catch(function(err){ console.error(err); });
    </script>

</head>
<body>
    <my-app>Loading ag-Grid example&hellip;<my-app>
</body>
</html>

import { Component, ViewChild } from "@angular/core";
import { HttpClient } from "@angular/common/http";

@Component({
  selector: "my-app",
  template: `<ag-grid-angular
    #agGrid
    style="width: 100%; height: 100%;"
    id="myGrid"
    class="ag-theme-fresh"
    [columnDefs]="columnDefs"
    [floatingFilter]="true"
    [debug]="true"
    [enableServerSideSorting]="true"
    [enableServerSideFilter]="true"
    [enableColResize]="true"
    [rowSelection]="rowSelection"
    [rowDeselection]="true"
    [rowModelType]="rowModelType"
    [paginationPageSize]="paginationPageSize"
    [cacheOverflowSize]="cacheOverflowSize"
    [maxConcurrentDatasourceRequests]="maxConcurrentDatasourceRequests"
    [infiniteInitialRowCount]="infiniteInitialRowCount"
    [maxBlocksInCache]="maxBlocksInCache"
    [getRowNodeId]="getRowNodeId"
    [components]="components"
    (gridReady)="onGridReady($event)"
    ></ag-grid-angular>
`
})
export class AppComponent {
  private gridApi;
  private gridColumnApi;

  private columnDefs;
  private rowSelection;
  private rowModelType;
  private paginationPageSize;
  private cacheOverflowSize;
  private maxConcurrentDatasourceRequests;
  private infiniteInitialRowCount;
  private maxBlocksInCache;
  private getRowNodeId;
  private components;

  constructor(private http: HttpClient) {
    this.columnDefs = [
      {
        headerName: "ID",
        width: 50,
        valueGetter: "node.id",
        cellRenderer: "loadingCellRenderer",
        suppressSorting: true,
        suppressMenu: true,
        suppressFilter: true
      },
      {
        headerName: "Athlete",
        field: "athlete",
        width: 150,
        suppressMenu: true,
        filter: "agTextColumnFilter",
        //suppressFilter: true
      },
      {
        headerName: "Age",
        field: "age",
        width: 90,
        filter: "agNumberColumnFilter",
        filterParams: {
          filterOptions: ["equals", "lessThan", "greaterThan"],
          newRowsAction: "keep"
        }
      },
      {
        headerName: "Country",
        field: "country",
        width: 120,
        filter: "agSetColumnFilter",
        filterParams: {
          values: countries(),
          newRowsAction: "keep"
        }
      },
      {
        headerName: "Year",
        field: "year",
        width: 90,
        filter: "agSetColumnFilter",
        filterParams: {
          values: ["2000", "2004", "2008", "2012"],
          newRowsAction: "keep"
        }
      },
      {
        headerName: "Date",
        field: "date",
        width: 110,
        //suppressFilter: true
        filter: "agDateColumnFilter",
      },
      {
        headerName: "Sport",
        field: "sport",
        width: 110,
        suppressMenu: true,
        suppressFilter: true
      },
      {
        headerName: "Gold",
        field: "gold",
        width: 100,
        suppressMenu: true,
        suppressFilter: true
      },
      {
        headerName: "Silver",
        field: "silver",
        width: 100,
        suppressMenu: true,
        suppressFilter: true
      },
      {
        headerName: "Bronze",
        field: "bronze",
        width: 100,
        suppressMenu: true,
        suppressFilter: true
      },
      {
        headerName: "Total",
        field: "total",
        width: 100,
        suppressMenu: true,
        suppressFilter: true
      }
    ];
    this.rowSelection = "multiple";
    this.rowModelType = "infinite";
    this.paginationPageSize = 100;
    this.cacheOverflowSize = 2;
    this.maxConcurrentDatasourceRequests = 2;
    this.infiniteInitialRowCount = 1;
    this.maxBlocksInCache = 2;
    this.getRowNodeId = function(item) {
      return item.id;
    };
    this.components = {
      loadingCellRenderer: function(params) {
        if (params.value !== undefined) {
          return params.value;
        } else {
          return '<img src="https://raw.githubusercontent.com/ag-grid/ag-grid-docs/master/src/images/loading.gif">';
        }
      }
    };
  }

  onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;

    this.http
      .get("https://raw.githubusercontent.com/ag-grid/ag-grid-docs/master/src/olympicWinners.json")
      .subscribe(data => {
        data.forEach(function(data, index) {
          data.id = "R" + (index + 1);
        });
        var dataSource = {
          rowCount: null,
          getRows: function(params) {
            console.log(params.filterModel);
            console.log("asking for " + params.startRow + " to " + params.endRow);
            setTimeout(function() {
              var dataAfterSortingAndFiltering = sortAndFilter(data, params.sortModel, params.filterModel);
              var rowsThisPage = dataAfterSortingAndFiltering.slice(params.startRow, params.endRow);
              var lastRow = -1;
              if (dataAfterSortingAndFiltering.length <= params.endRow) {
                lastRow = dataAfterSortingAndFiltering.length;
              }
              params.successCallback(rowsThisPage, lastRow);
            }, 3000);
          }
        };
        params.api.setDatasource(dataSource);
      });
  }
}

function countries() {
  return [
    "United States",
    "Russia",
    "Australia",
    "Canada",
    "Norway",
    "China",
    "Zimbabwe",
    "Netherlands",
    "South Korea",
    "Croatia",
    "France",
    "Japan",
    "Hungary",
    "Germany",
    "Poland",
    "South Africa",
    "Sweden",
    "Ukraine",
    "Italy",
    "Czech Republic",
    "Austria",
    "Finland",
    "Romania",
    "Great Britain",
    "Jamaica",
    "Singapore",
    "Belarus",
    "Chile",
    "Spain",
    "Tunisia",
    "Brazil",
    "Slovakia",
    "Costa Rica",
    "Bulgaria",
    "Switzerland",
    "New Zealand",
    "Estonia",
    "Kenya",
    "Ethiopia",
    "Trinidad and Tobago",
    "Turkey",
    "Morocco",
    "Bahamas",
    "Slovenia",
    "Armenia",
    "Azerbaijan",
    "India",
    "Puerto Rico",
    "Egypt",
    "Kazakhstan",
    "Iran",
    "Georgia",
    "Lithuania",
    "Cuba",
    "Colombia",
    "Mongolia",
    "Uzbekistan",
    "North Korea",
    "Tajikistan",
    "Kyrgyzstan",
    "Greece",
    "Macedonia",
    "Moldova",
    "Chinese Taipei",
    "Indonesia",
    "Thailand",
    "Vietnam",
    "Latvia",
    "Venezuela",
    "Mexico",
    "Nigeria",
    "Qatar",
    "Serbia",
    "Serbia and Montenegro",
    "Hong Kong",
    "Denmark",
    "Portugal",
    "Argentina",
    "Afghanistan",
    "Gabon",
    "Dominican Republic",
    "Belgium",
    "Kuwait",
    "United Arab Emirates",
    "Cyprus",
    "Israel",
    "Algeria",
    "Montenegro",
    "Iceland",
    "Paraguay",
    "Cameroon",
    "Saudi Arabia",
    "Ireland",
    "Malaysia",
    "Uruguay",
    "Togo",
    "Mauritius",
    "Syria",
    "Botswana",
    "Guatemala",
    "Bahrain",
    "Grenada",
    "Uganda",
    "Sudan",
    "Ecuador",
    "Panama",
    "Eritrea",
    "Sri Lanka",
    "Mozambique",
    "Barbados"
  ];
}
function sortAndFilter(allOfTheData, sortModel, filterModel) {
  return sortData(sortModel, filterData(filterModel, allOfTheData));
}
function sortData(sortModel, data) {
  var sortPresent = sortModel && sortModel.length > 0;
  if (!sortPresent) {
    return data;
  }
  var resultOfSort = data.slice();
  resultOfSort.sort(function(a, b) {
    for (var k = 0; k < sortModel.length; k++) {
      var sortColModel = sortModel[k];
      var valueA = a[sortColModel.colId];
      var valueB = b[sortColModel.colId];
      if (valueA == valueB) {
        continue;
      }
      var sortDirection = sortColModel.sort === "asc" ? 1 : -1;
      if (valueA > valueB) {
        return sortDirection;
      } else {
        return sortDirection * -1;
      }
    }
    return 0;
  });
  return resultOfSort;
}
function filterData(filterModel, data) {
  var filterPresent = filterModel && Object.keys(filterModel).length > 0;
  if (!filterPresent) {
    return data;
  }
  var resultOfFilter = [];
  for (var i = 0; i < data.length; i++) {
    var item = data[i];
    if (filterModel.age) {
      var age = item.age;
      var allowedAge = parseInt(filterModel.age.filter);
      if (filterModel.age.type == "equals") {
        if (age !== allowedAge) {
          continue;
        }
      } else if (filterModel.age.type == "lessThan") {
        if (age >= allowedAge) {
          continue;
        }
      } else {
        if (age <= allowedAge) {
          continue;
        }
      }
    }
    if (filterModel.year) {
      if (filterModel.year.indexOf(item.year.toString()) < 0) {
        continue;
      }
    }
    if (filterModel.country) {
      if (filterModel.country.indexOf(item.country) < 0) {
        continue;
      }
    }
    resultOfFilter.push(item);
  }
  return resultOfFilter;
}

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms"; // <-- NgModel lives here
// HttpClient
import { HttpClientModule } from "@angular/common/http";

// ag-grid
import { AgGridModule } from "ag-grid-angular";
import { AppComponent } from "./app.component";

@NgModule({
  imports: [
    BrowserModule,
    FormsModule, // <-- import the FormsModule before binding with [(ngModel)]
    HttpClientModule,
    AgGridModule.withComponents([])
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

// Angular entry point file
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from 'app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

/**
 * WEB ANGULAR VERSION
 * (based on systemjs.config.js from the angular tutorial - https://angular.io/tutorial)
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
var templateUrlRegex = /templateUrl\s*:(\s*['"`](.*?)['"`]\s*)/gm;
var stylesRegex = /styleUrls *:(\s*\[[^\]]*?\])/g;
var stringRegex = /(['`"])((?:[^\\]\\\1|.)*?)\1/g;

module.exports.translate = function(load){
  if (load.source.indexOf('moduleId') != -1) return load;

  var url = document.createElement('a');
  url.href = load.address;

  var basePathParts = url.pathname.split('/');

  basePathParts.pop();
  var basePath = basePathParts.join('/');

  var baseHref = document.createElement('a');
  baseHref.href = this.baseURL;
  baseHref = baseHref.pathname;

  if (!baseHref.startsWith('/base/')) { // it is not karma
    basePath = basePath.replace(baseHref, '');
  }

  load.source = load.source
    .replace(templateUrlRegex, function(match, quote, url){
      var resolvedUrl = url;

      if (url.startsWith('.')) {
        resolvedUrl = basePath + url.substr(1);
      }

      return 'templateUrl: "' + resolvedUrl + '"';
    })
    .replace(stylesRegex, function(match, relativeUrls) {
      var urls = [];

      while ((match = stringRegex.exec(relativeUrls)) !== null) {
        if (match[2].startsWith('.')) {
          urls.push('"' + basePath + match[2].substr(1) + '"');
        } else {
          urls.push('"' + match[2] + '"');
        }
      }

      return "styleUrls: [" + urls.join(', ') + "]";
    });

  return load;
};

/**
 * WEB ANGULAR VERSION
 * (based on systemjs.config.js from the angular tutorial - https://angular.io/tutorial)
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function(global) {
    var ANGULAR_VERSION = '5.1.3';

    System.config({
        // DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
        transpiler: 'ts',
        typescriptOptions: {
            // Copy of compiler options in standard tsconfig.json
            target: 'es5',
            module: 'system', //gets rid of console warning
            moduleResolution: 'node',
            sourceMap: true,
            emitDecoratorMetadata: true,
            experimentalDecorators: true,
            lib: ['es2015', 'dom'],
            noImplicitAny: true,
            suppressImplicitAnyIndexErrors: true
        },
        meta: {
            typescript: {
                exports: 'ts'
            }
        },
        paths: {
            // paths serve as alias
            'npm:': 'https://unpkg.com/'
        },
        // RxJS makes a lot of requests to unpkg. This guy addressed it:
        // https://github.com/OasisDigital/rxjs-system-bundle.
        bundles: {
            'npm:rxjs-system-bundle@5.5.5/Rx.system.js': [
                'rxjs',
                'rxjs/*',
                'rxjs/operator/*',
                'rxjs/operators/*',
                'rxjs/observable/*',
                'rxjs/scheduler/*',
                'rxjs/symbol/*',
                'rxjs/add/operator/*',
                'rxjs/add/observable/*',
                'rxjs/util/*'
            ]
        },
        // map tells the System loader where to look for things
        map: Object.assign(
            {
                // angular bundles
                '@angular/animations': 'npm:@angular/animations@' + ANGULAR_VERSION + '/bundles/animations.umd.js',
                '@angular/animations/browser': 'npm:@angular/animations@' + ANGULAR_VERSION + '/bundles/animations-browser.umd.js',
                '@angular/core': 'npm:@angular/core@' + ANGULAR_VERSION + '/bundles/core.umd.js',
                '@angular/common': 'npm:@angular/common@' + ANGULAR_VERSION + '/bundles/common.umd.js',
                '@angular/common/http': 'npm:@angular/common@' + ANGULAR_VERSION + '/bundles/common-http.umd.js',
                '@angular/compiler': 'npm:@angular/compiler@' + ANGULAR_VERSION + '/bundles/compiler.umd.js',
                '@angular/platform-browser': 'npm:@angular/platform-browser@' + ANGULAR_VERSION + '/bundles/platform-browser.umd.js',
                '@angular/platform-browser/animations': 'npm:@angular/platform-browser@' + ANGULAR_VERSION + '/bundles/platform-browser-animations.umd.js',
                '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@' + ANGULAR_VERSION + '/bundles/platform-browser-dynamic.umd.js',
                '@angular/http': 'npm:@angular/http@' + ANGULAR_VERSION + '/bundles/http.umd.js',
                '@angular/router': 'npm:@angular/router@' + ANGULAR_VERSION + '/bundles/router.umd.js',
                '@angular/router/upgrade': 'npm:@angular/router@' + ANGULAR_VERSION + '/bundles/router-upgrade.umd.js',
                '@angular/forms': 'npm:@angular/forms@' + ANGULAR_VERSION + '/bundles/forms.umd.js',
                '@angular/upgrade': 'npm:@angular/upgrade@' + ANGULAR_VERSION + '/bundles/upgrade.umd.js',
                '@angular/upgrade/static': 'npm:@angular/upgrade@' + ANGULAR_VERSION + '/bundles/upgrade-static.umd.js',
                'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
                // material design
                '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
                '@angular/cdk/platform': 'npm:@angular/cdk/bundles/cdk-platform.umd.js',
                '@angular/cdk/bidi': 'npm:@angular/cdk/bundles/cdk-bidi.umd.js',
                '@angular/cdk/coercion': 'npm:@angular/cdk/bundles/cdk-coercion.umd.js',
                '@angular/cdk/keycodes': 'npm:@angular/cdk/bundles/cdk-keycodes.umd.js',
                '@angular/cdk/a11y': 'npm:@angular/cdk/bundles/cdk-a11y.umd.js',
                '@angular/cdk/overlay': 'npm:@angular/cdk/bundles/cdk-overlay.umd.js',
                '@angular/cdk/portal': 'npm:@angular/cdk/bundles/cdk-portal.umd.js',
                '@angular/cdk/observers': 'npm:@angular/cdk/bundles/cdk-observers.umd.js',
                '@angular/cdk/collections': 'npm:@angular/cdk/bundles/cdk-collections.umd.js',
                '@angular/cdk/accordion': 'npm:@angular/cdk/bundles/cdk-accordion.umd.js',
                '@angular/cdk/scrolling': 'npm:@angular/cdk/bundles/cdk-scrolling.umd.js',
                '@angular/cdk/layout': 'npm:@angular/cdk/bundles/cdk-layout.umd.js',
                '@angular/cdk/table': 'npm:@angular/cdk/bundles/cdk-table.umd.js',
                '@angular/cdk/stepper': 'npm:@angular/cdk/bundles/cdk-stepper.umd.js',
                // ngx bootstrap
                'ngx-bootstrap': 'npm:ngx-bootstrap@2.0.0-rc.0',
                // ng2 typeahead
                'ng2-typeahead': 'npm:ng2-typeahead@1.2.0',
                
                ts: 'npm:plugin-typescript@5.2.7/lib/plugin.js',
                tslib: 'npm:tslib@1.7.1/tslib.js',
                typescript: 'npm:typescript@2.3.2/lib/typescript.js',

                // for some of the examples
                lodash: 'npm:lodash@4.17.4/lodash.js',

                // our app is within the app folder, appLocation comes from index.html
                app: appLocation + 'app'
            },
            systemJsMap
        ),
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                main: './main.ts',
                defaultExtension: 'ts',
                meta: {
                    './*.ts': {
                        loader: boilerplatePath + 'systemjs-angular-loader.js'
                    }
                }
            },
            'ag-grid-angular': {
                main: './main.js',
                defaultExtension: 'js'
            },
            'ag-grid-enterprise': {
                main: './main.js',
                defaultExtension: 'js'
            },
            rxjs: {
                defaultExtension: false
            }
        }
    });
})(this);