Kendo Grid abstraction

app.component.html

<!-- This use actually shows all 12 properties in my object instead of just two. -->
<my-grid
  [sort]="[{ field: 'name', dir: 'asc' }]"
  [service]="myService">
  <kendo-grid-column field="id" title="ID">
  </kendo-grid-column>
  <kendo-grid-column field="name" title="Name">
  </kendo-grid-column>
</my-grid>

my-grid.component.html

<kendo-grid
  [data]="data | async"
  [loading]="loading | async"
  [pageable]="true"
  (pageChange)="page.next($event)"
  [pageSize]="take | async"
  [reorderable]="true"
  [resizable]="true"
  [skip]="skip | async"
  [sort]="sort | async"
  [sortable]="{ allowUnsort: true, mode: 'multiple' }"
  (sortChange)="sort.next($event)">
  <ng-content></ng-content>
</kendo-grid>

my-grid.component.ts

import { Component, Input, OnInit } from '@angular/core'
import { GridDataResult, PageChangeEvent } from '@progress/kendo-angular-grid'
import { SortDescriptor } from '@progress/kendo-data-query'
import { equals } from 'ramda'
import { BehaviorSubject, Observable, Subject } from 'rxjs'

import { CrudsService } from './cruds.service'

@Component({
  selector: 'my-grid',
  templateUrl: './my-grid.component.html',
})
export class MyGridComponent<T> implements OnInit {

  @Input('page')
  public initialPage: PageChangeEvent = { skip: 0, take: 20 }
  @Input('sort')
  public initialSort: SortDescriptor[] = []
  @Input()
  public service!: CrudsService<T>

  public page!: Subject<PageChangeEvent>
  public sort!: Subject<SortDescriptor[]>
  public data!: Observable<GridDataResult>
  public loading!: Observable<boolean>
  public skip!: Observable<number>
  public take!: Observable<number>

  public ngOnInit (): void {
    this.page = new BehaviorSubject<PageChangeEvent>(this.initialPage)
    this.sort = new BehaviorSubject<SortDescriptor[]>(this.initialSort)
    this.skip = this.page.map(page => page.skip)
    this.take = this.page.map(page => page.take)

    const page = this.page
    .filter(page => !!page)
    .distinctUntilChanged(equals)
    .debounceTime(150)

    const sort = this.sort

    this.data = page
    .combineLatest(sort)
    .switchMap(([page, sort]) => {
      const query = {
        skip: page.skip,
        take: page.take,
        sort: sort,
      }
      return this.service.searchRaw(query)
    })
    // Make this a multicast Observable that initially delivers
    // the last value to every new subscriber.
    .publishReplay(1)
    .refCount()

    this.loading = this.data
    .map(() => false)
    .startWith(true)
  }

}