Overview

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

@Component({
  selector: 'app-employees',
  imports: [OgeCellTemplate, OgeColumn, OgeGrid],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <oge-grid [data]="employees" keyField="id" [paging]="{ pageSize: 10 }">
      <oge-column field="id" caption="Id" [width]="70" dataType="number" />
      <oge-column field="firstName" caption="First Name" />
      <oge-column field="department" caption="Department">
        <!-- cell templates are plain Angular templates — Tailwind classes just work -->
        <span *ogeCellTemplate="let value"
              class="rounded-full bg-indigo-50 px-2 py-0.5 text-xs font-medium text-indigo-700">
          {{ value }}
        </span>
      </oge-column>
      <oge-column field="salary" caption="Salary" dataType="number" [format]="money" />
    </oge-grid>
  `,
})
export class EmployeesPage {
  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' },
  ];

  protected readonly money = (value: unknown): string =>
    `₺${(value as number).toLocaleString('tr-TR')}`;
}