odata-data-source
v16.4.0
Published
Data source for material table and angular cdk table that can work with OData version 4 API.
Downloads
394
Maintainers
Readme
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-v15
Demo with dynamic table: https://stackblitz.com/edit/dynamic-table-odata
The supported version of Angular Material will be indicated by the major version number of this library. Version 8.2.0 is for Angular Material ^8.0.0, version 9.3.0 is for ^9.0.0, while versions <1.2.0 should work for angular versions <8.0.0.
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
| 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'. | | expandedFields: string[] | object | Properties in the odata api to be expanded. | | 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
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.