npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

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

Readme

npm version

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.