GridColumn<T>

import { GridColumn } from '@gridcraft/angular';

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

const columns: GridColumn<Employee>[] = [
  // Only key is required — everything else is optional
  { key: 'firstName', name: 'First Name', prop: 'firstName', width: 160 },
  { key: 'lastName',  name: 'Last Name',  prop: 'lastName',  width: 160 },
  { key: 'dept',      name: 'Department', prop: 'department', sizing: 'flex' },
  { key: 'salary',    name: 'Salary',     prop: 'salary',    width: 120 },
];

// In your component class:
@ViewChild('salaryCell')   salaryCell!:   TemplateRef<CellContext<Employee>>;
@ViewChild('statusHeader') statusHeader!: TemplateRef<HeaderContext<Employee>>;
@ViewChild('salaryFooter') salaryFooter!: TemplateRef<SummaryContext<Employee>>;

// Wrap in computed() so ViewChild refs are available at render time
readonly columns = computed((): GridColumn<Employee>[] => [
  {
    key:            'salary',
    name:           'Salary',
    prop:           'salary',
    width:          130,
    cellTemplate:   this.salaryCell,
    footerTemplate: this.salaryFooter,
  },
  {
    key:            'status',
    name:           'Status',
    width:          100,
    headerTemplate: this.statusHeader,
  },
]);

// In the component template:

// <ng-template #salaryCell let-value="value">
//   {{ value | currency:'USD':'symbol':'1.0-0' }}
// </ng-template>
//
// <ng-template #salaryFooter let-column="column">
//   Total: {{ total() | currency }}
// </ng-template>
//
// <ng-template #statusHeader let-column="column" let-sortDir="sortDir">
//   {{ column.name }}
//   @if (sortDir === 'asc') { ↑ } @else if (sortDir === 'desc') { ↓ }
// </ng-template>

import {
  CellContext,
  HeaderContext,
  SummaryContext,
  ExpandContext,
} from '@gridcraft/angular';

// ── cellTemplate ─────────────────────────────────────────────
// Provides the full row and the resolved cell value.
interface CellContext<T = any> {
  $implicit: T;       // the row object — use "let-row" shorthand
  row:       T;
  value:     any;     // resolved via valueGetter → prop path → undefined
  column:    GridColumn<T>;
  rowIndex:  number;
}

// ── headerTemplate ────────────────────────────────────────────
// Provides the column definition and the active sort direction.
interface HeaderContext<T = any> {
  column:  GridColumn<T>;
  sortDir: 'asc' | 'desc' | null;
}

// ── subHeaderTemplate / footerTemplate ───────────────────────
// Provides only the column definition (no row data — these are summary rows).
interface SummaryContext<T = any> {
  column: GridColumn<T>;
}

// ── #gcExpandRow template (on <gridcraft>, not a column) ──
// Provides the parent row whose expand panel is being rendered.
interface ExpandContext<T = any> {
  $implicit: T;   // the row object — use "let-row" shorthand
  row:       T;
  rowIndex:  number;
}

import { GridColumn, CellContext, SummaryContext } from '@gridcraft/angular';

const columns: GridColumn<Employee>[] = [
  // Fixed-width column: sort + text filter + resize
  {
    key:       'lastName',
    name:      'Last Name',
    prop:      'lastName',
    width:     160,
    minWidth:  80,
    sortable:  true,
    resizable: true,
    draggable: true,
    filter:    { type: 'text', placeholder: 'Search name…' },
  },

  // Flex column — fills remaining horizontal space
  {
    key:      'email',
    name:     'Email',
    prop:     'email',
    sizing:   'flex',
    flexGrow: 2,
    sortable: true,
    filter:   { type: 'text' },
  },

  // Number column with custom value getter and select filter
  {
    key:         'level',
    name:        'Level',
    width:        90,
    valueGetter: (row) => row.jobLevel ?? 1,
    sortable:    true,
    filter: {
      type:    'select',
      options: [
        { label: 'Junior', value: 1 },
        { label: 'Mid',    value: 2 },
        { label: 'Senior', value: 3 },
      ],
    },
    cellClass: (_row, value) => value >= 3 ? 'cell--senior' : '',
  },

  // Salary with custom templates + number filter
  {
    key:            'salary',
    name:           'Salary',
    prop:           'salary',
    width:           130,
    sortable:        true,
    filter:          { type: 'number', operators: ['>=', '<='] },
    cellTemplate:    this.salaryCellTpl,    // TemplateRef from @ViewChild
    footerTemplate:  this.salaryFooterTpl,
  },

  // Pinned action column hidden from export
  {
    key:               'actions',
    name:              '',
    width:              60,
    pin:               'right',
    cellTemplate:      this.actionsTpl,
    excludeFromExport: true,
  },
];