Pushdown to a live OData service

import * as ng from '@angular/core';
import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import * as Lattice from '@toclocoinc/lattice-grid';
import '@toclocoinc/lattice-grid/css';
import createLatticeGrid from '@toclocoinc/lattice-grid/modules/angular';

const { createGrid, createPushdownSource, odataAdapter } = Lattice;
const { LatticeGridComponent } = createLatticeGrid({ ng, createGrid });

// The adapter takes a URL and imports nothing. createPushdownSource turns the
// grid's query into an OData request and finishes any residual in the grid.
const adapter = odataAdapter({
  url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Orders',
});
const source = createPushdownSource({
  adapter,
  compute: Lattice,   // the grid's own kernels, for anything the service could not do
  pageSize: 100,
});

const columns = [
  { field: 'OrderID', title: 'Order', type: 'number' },
  { field: 'CustomerID', title: 'Customer', filter: { type: 'set' } },
  { field: 'ShipCountry', title: 'Ship to', filter: { type: 'set' } },
  { field: 'Freight', title: 'Freight', type: 'number' },
  { field: 'OrderDate', title: 'Ordered', type: 'dateString' },
];

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [LatticeGridComponent],
  template: '<lattice-grid [config]="grid" (rows-changed)="onRowsChanged()" style="display:block;height:520px"></lattice-grid>',
})
export class AppComponent {
  grid = {
    rowKey: 'OrderID',
    toolPanel: { side: 'left', panels: ['filters', 'columns'] },
    columns,
    source,
  };

  // After each query, lastPlan() reports what the service ran and what stayed here.
  onRowsChanged() {
    const plan = source.lastPlan();
    if (plan) console.log(plan.unpushed.length ? 'pushed part' : 'pushed all', plan);
  }
}

bootstrapApplication(AppComponent);