Excel & PDF Export

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

interface Employee {
  id: number;
  firstName: string;
  lastName: string;
  department: string;
  city: string;
  salary: number;
  hireDate: string;
}

@Component({
  selector: 'demo-root',
  imports: [OgeColumn, OgeColumnGroup, OgeGrid],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <oge-grid #grid [data]="employees" keyField="id"
              selectionMode="multiple" [groupBy]="['department']">
      <oge-column field="id" caption="Id" [width]="70" dataType="number" pinned="left" />
      <!-- a band becomes a merged two-row header in Excel and PDF -->
      <oge-column-group caption="Employee">
        <oge-column field="firstName" caption="First Name" [width]="140" />
        <oge-column field="lastName" caption="Last Name" [width]="140" />
      </oge-column-group>
      <oge-column field="city" caption="City" />
      <oge-column field="hireDate" caption="Hired" dataType="date" />
      <oge-column field="salary" caption="Salary" dataType="number"
                  groupSummary="sum" groupSummaryPosition="footer" totalSummary="sum" />
    </oge-grid>

    <button type="button" (click)="excel()">Excel</button>
    <button type="button" (click)="excel(true)">Selected rows</button>
  `,
})
export class Demo {
  readonly employees = [
    { id: 1, firstName: 'Ali', lastName: 'Yılmaz', department: 'Engineering', city: 'İstanbul', salary: 8400, hireDate: '2019-03-11' },
    { id: 2, firstName: 'Ayşe', lastName: 'Kaya', department: 'Sales', city: 'Ankara', salary: 7200, hireDate: '2020-07-02' },
    { id: 3, firstName: 'Mehmet', lastName: 'Demir', department: 'Engineering', city: 'İzmir', salary: 9100, hireDate: '2018-01-23' },
    { id: 4, firstName: 'Zeynep', lastName: 'Şahin', department: 'Finance', city: 'İstanbul', salary: 6800, hireDate: '2021-11-15' },
    { id: 5, firstName: 'Emre', lastName: 'Çelik', department: 'Support', city: 'Bursa', salary: 5400, hireDate: '2022-05-09' },
  ];

  private readonly grid = viewChild.required<OgeGrid<Employee>>('grid');

  // conditional formatting: one value-level hook styles Excel and PDF alike
  protected readonly cellStyle = ({ column, value, kind }: OgeExportCellStyleArgs<Employee>) =>
    kind === 'data' && column.field === 'salary' && Number(value) > 8000
      ? { background: '#fff4ce', color: '#7a4b00', bold: true }
      : undefined;

  // the lazy secondary entry keeps exceljs out of the main bundle
  protected async excel(selectedRowsOnly = false): Promise<void> {
    const { exportGridToExcel } = await import('@oge-ui/grid/export-excel');
    await exportGridToExcel(this.grid(), {
      filename: 'employees.xlsx',
      selectedRowsOnly,
      summaryFormulas: true, // group footers + total as SUBTOTAL formulas
      columnFormats: { salary: '#,##0 "€"' },
      cellStyle: this.cellStyle,
    });
  }
}

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

interface Employee {
  id: number;
  firstName: string;
  lastName: string;
  department: string;
  city: string;
  salary: number;
  hireDate: string;
}

@Component({
  selector: 'demo-root',
  imports: [OgeColumn, OgeGrid],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <oge-grid #grid [data]="employees" keyField="id" [groupBy]="['department']">
      <oge-column field="firstName" caption="First Name" />
      <oge-column field="lastName" caption="Last Name" />
      <oge-column field="city" caption="City" />
      <oge-column field="salary" caption="Salary" dataType="number" totalSummary="sum" />
    </oge-grid>

    <button type="button" (click)="pdf()">PDF</button>
  `,
})
export class Demo {
  readonly employees = [
    { id: 1, firstName: 'Ali', lastName: 'Yılmaz', department: 'Engineering', city: 'İstanbul', salary: 8400, hireDate: '2019-03-11' },
    { id: 2, firstName: 'Ayşe', lastName: 'Kaya', department: 'Sales', city: 'Ankara', salary: 7200, hireDate: '2020-07-02' },
    { id: 3, firstName: 'Mehmet', lastName: 'Demir', department: 'Engineering', city: 'İzmir', salary: 9100, hireDate: '2018-01-23' },
    { id: 4, firstName: 'Zeynep', lastName: 'Şahin', department: 'Finance', city: 'İstanbul', salary: 6800, hireDate: '2021-11-15' },
    { id: 5, firstName: 'Emre', lastName: 'Çelik', department: 'Support', city: 'Bursa', salary: 5400, hireDate: '2022-05-09' },
  ];

  private readonly grid = viewChild.required<OgeGrid<Employee>>('grid');

  protected async pdf(): Promise<void> {
    const { exportGridToPdf } = await import('@oge-ui/grid/export-pdf');
    await exportGridToPdf(this.grid(), {
      filename: 'employees.pdf',
      title: 'Employees by department',
      orientation: 'portrait',
      // the header repeats on every page; widths follow the grid, fitted to the page
      pageHeader: () => 'OGE UI · HR report',
      pageFooter: ({ pageNumber, pageCount }) => `Page ${pageNumber} of ${pageCount}`,
      customizeCell: ({ field, style }) => {
        if (field === 'salary' && style) style.alignment = 'end';
        return undefined;
      },
    });
  }
}