Performance

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { OgeGrid, OgeColumn } from '@oge-ui/grid';

interface Reading {
  id: number;
  sensor: string;
  value: number;
}

@Component({
  selector: 'demo-root',
  imports: [OgeGrid, OgeColumn],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <!-- a bounded height is what gives the virtualizer a viewport -->
    <oge-grid
      [data]="rows"
      keyField="id"
      [scrolling]="{ mode: 'virtual', columnRenderingMode: 'virtual' }"
      [rowHeight]="32"
      [overscan]="10"
      style="height: 560px"
    >
      <oge-column field="id" caption="Id" [width]="90" dataType="number" />
      <oge-column field="sensor" caption="Sensor" [width]="160" />
      <oge-column field="value" caption="Value" [width]="120" dataType="number" />
    </oge-grid>
  `,
})
export class Demo {
  // 100 000 rows: only the rows in view (plus overscan) are in the DOM
  protected readonly rows: Reading[] = Array.from({ length: 100_000 }, (_, i) => ({
    id: i + 1,
    sensor: 'S-' + (i % 250),
    value: Math.round(Math.sin(i) * 1000) / 10,
  }));
}

// app-wide defaults instead of per-grid inputs
import { ApplicationConfig } from '@angular/core';
import { provideOgeGridConfig } from '@oge-ui/grid';

export const appConfig: ApplicationConfig = {
  providers: [provideOgeGridConfig({ rowHeight: 32, overscan: 8, filterDebounce: 250 })],
};

import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
import { OgeGrid, OgeColumn } from '@oge-ui/grid';
import { CustomDataSource } from '@oge-ui/core';
import type { LoadResult } from '@oge-ui/core';

interface Order {
  id: number;
  customer: string;
  total: number;
}

@Component({
  selector: 'demo-root',
  imports: [OgeGrid, OgeColumn],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <oge-grid [data]="orders" keyField="id" [paging]="{ pageSize: 50 }" [filterRow]="true">
      <oge-column field="id" caption="Order" dataType="number" />
      <oge-column field="customer" caption="Customer" />
      <oge-column field="total" caption="Total" dataType="number" />
    </oge-grid>
  `,
})
export class Demo {
  // the server sorts, filters, groups and pages; the grid sends one query per change
  // and aborts the previous request when a newer one starts
  protected readonly orders = new CustomDataSource<Order>({
    key: 'id',
    load: async ({ signal, ...query }) => {
      const response = await fetch('/api/orders/query', {
        method: 'POST',
        headers: { 'content-type': 'application/json' },
        body: JSON.stringify(query), // { skip, take, sort, filter, searchText, … }
        signal,
      });
      return (await response.json()) as LoadResult<Order>;
    },
  });
}

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { OgeScheduler } from '@oge-ui/scheduler';

@Component({
  selector: 'demo-root',
  imports: [OgeScheduler],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <!-- the scheduler's code loads when the block scrolls into view -->
    @defer (on viewport) {
      <oge-scheduler [dataSource]="appointments" [currentDate]="date" style="height: 560px" />
    } @placeholder {
      <div style="height: 560px">Calendar</div>
    }
  `,
})
export class Demo {
  protected readonly date = new Date(2026, 9, 5);
  protected readonly appointments = [
    { id: 1, text: 'Design review', startDate: new Date(2026, 9, 6, 9), endDate: new Date(2026, 9, 6, 10) },
  ];
}

// exceljs loads with this chunk, on the first click — not with the grid
async exportOrders(grid: OgeGrid<Order>): Promise<void> {
  const { exportGridToExcel } = await import('@oge-ui/grid/export-excel');
  await exportGridToExcel(grid, { filename: 'orders.xlsx', scope: 'all' });
}

// one editor, not the whole inputs family
import { OgeSelectBox } from '@oge-ui/inputs/select-box';
import { OgeSplitter } from '@oge-ui/layout/splitter';
import { OgeFab } from '@oge-ui/buttons/fab';