odata-data-source

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.

Demo

Online demo: https://stackblitz.com/edit/odata-data-source

Demo with dynamic table: https://stackblitz.com/edit/dynamic-table-odata

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';

@NgModule({
  ...
  imports: [
    ...

    HttpClientModule
  ],
})
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) {}

@Component({
  selector: 'app',
  templateUrl: './app.component.html',
})
export class AppComponent {

  const resourcePath = 'https://services.odata.org/V4/OData/OData.svc/Products';
  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">
    ...
</table>

Further info

API reference for odata-data-source

ODataFilter

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.