GridConfig<T>

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

// T is your row data type — inferred from your columns or data source
const config: GridConfig<MyRow> = {
  // All properties are optional; the grid has safe defaults for everything
};

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

// Option 1 — localStorage (survives browser restart)
const persist: ColumnPersistConfig = {
  mode: 'local-storage',
  key: 'my-grid-columns',   // unique key per grid
};

// Option 2 — sessionStorage (cleared on tab close)
const persist: ColumnPersistConfig = {
  mode: 'session-storage',
  key: 'my-grid-columns',
};

// Option 3 — server-side (you provide load/save functions)
const persist: ColumnPersistConfig = {
  mode: 'server',
  save: (states) => this.http.put('/api/column-prefs', states).pipe(map(() => undefined)),
  load: ()       => this.http.get<ColumnState[]>('/api/column-prefs'),
};

// Option 4 — disable persistence explicitly
const persist: ColumnPersistConfig = { mode: 'none' };

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

const config: GridConfig<Employee> = {
  // ── Scrolling ─────────────────────────────────────────────
  scrollMode:      'infinite',
  pageSize:        50,
  scrollThreshold: 150,

  // ── Layout ────────────────────────────────────────────────
  rowHeight:    48,
  headerHeight: 48,
  height:       600,          // px — fixed height enables grouping overlay

  // ── Columns ───────────────────────────────────────────────
  columnReorder:    true,
  columnResize:     true,
  columnVisibility: true,
  persistColumns: { mode: 'local-storage', key: 'emp-grid-v1' },

  // ── Theming ───────────────────────────────────────────────
  messages: {
    loading:   'Fetching employees…',
    empty:     'No employees found',
    allLoaded: 'All employees loaded',
  },

  // ── Row behaviour ─────────────────────────────────────────
  trackBy:      'id',
  rowClass:     (row) => row.isActive ? '' : 'row--inactive',
  initialSorts: [{ key: 'lastName', dir: 'asc' }],

  // ── Selection ─────────────────────────────────────────────
  rowSelection: {
    mode:             'multi',
    checkboxColumn:   true,
    checkboxPosition: 'left',
  },

  // ── Filtering ─────────────────────────────────────────────
  filterMode: 'row',

  // ── Grouping ──────────────────────────────────────────────
  grouping: {
    groupBy:        'department',
    label:          (v) => `Dept: ${v}`,
    showCount:      true,
    startCollapsed: true,
  },

  // ── Row expansion ─────────────────────────────────────────
  rowExpand: {
    expandMode:      'multi',
    estimatedHeight: 240,
    canExpand:       (row) => row.hasDetails,
  },

  // ── Export ────────────────────────────────────────────────
  export: {
    formats:  ['csv', 'excel', 'word'],
    filename: 'employees',
  },
};