Namibian Pyjama Merchant

    TypeScript icon, indicating that this package has built-in type declarations

    1.3.0 • Public • Published


    Data source for material table and angular cdk table that can work with odata version 4 api. It supports sorting with MatSort and pagination with MatPaginator as well as per column filtering.


    Online demo:

    Demo with dynamic table:

    Getting started

    1. Install odata-data-source:

    npm install --save odata-data-source @angular/cdk odata-query

    2. Import http client module:

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { HttpClientModule } from '@angular/common/http';
    import { AppComponent } from './app';
      imports: [
    export class AppModule {}

    4. Initialize ODataDataSource in your component with http client and resource path:

    import { HttpClient } from '@angular/common/http';
    constructor(private readonly httpClient: HttpClient) {}
      selector: 'app',
      templateUrl: './app.component.html',
    export class AppComponent {
      const resourcePath = '';
      this.dataSource = new ODataDataSource(this.httpClient, resourcePath);

    5. Use the data source for material or cdk table with column templates matching data

    <table cdk-table [dataSource]="dataSource">

    Further info

    API reference for odata-data-source

    Name Description
    selectedFields: string[] Properties to select from the odata api
    sort: MatSort Instance of the MatSort directive used by the table to control its sorting. Sort changes emitted by the MatSort will trigger a request to get data from the api.
    paginator: MatPaginator Instance of the MatPaginator component used by the table to control what page of the data is displayed. Page changes emitted by the MatPaginator will trigger a request to get data from the api.
    filters: ODataFilter[] Array of filters that implement ODataFilter interface. Setting filters will trigger a request to get data from the api.
    initialSort: string[] Sort that will be applied initialy, which will be overriden when manual sort is performed. Data can be sorted by multiple columns. Follow column name with 'desc' for descending order: 'columnName desc'.
    data: any[] Result last propagated to subscribed observers. Setting this value would update subscribed observers.
    loading: Observable Observable that indicates if data is being loaded.
    errors: Observable Observable that indicates errors being returned from the OData api. Emits errors from httpClient or null when they are cleared by subsequesnt successful requests.
    refresh() Triggers a new request to refresh the data.


    ODataFilter has getFilter() method which needs to return an object that conforms to odata-query filter definition. Individual filters are then composed together using 'and' operator.


    npm i @agentender/odata-data-source

    DownloadsWeekly Downloads






    Unpacked Size

    152 kB

    Total Files


    Last publish


    • agentender