Types and Interfaces

/**
 * Regular column definition extending reusable column type
 */
interface ColumnRegular extends ColumnType {
  /** Column property for data mapping - must be unique */
  prop: ColumnProp;
  /** Column pinning position */
  pin?: DimensionColPin;
  /** Column header display text */
  name?: any;
  /** Enable automatic column sizing */
  autoSize?: boolean;
  /** Filter configuration - boolean, string, or array of strings */
  filter?: boolean | string | string[];
  /** Enable column sorting */
  sortable?: boolean;
  /** Current sort order */
  order?: Order;
  /** Row drag configuration */
  rowDrag?: RowDrag;
  /** Reference to reusable column type */
  columnType?: string;
  /** Pre-setup hook function */
  beforeSetup?(rgCol: ColumnRegular): void;
}

/**
 * Reusable column type definition
 */
interface ColumnType {
  /** Read-only configuration */
  readonly?: ReadOnlyFormat;
  /** Default column size in pixels */
  size?: number;
  /** Minimum column size */
  minSize?: number;
  /** Maximum column size */
  maxSize?: number;
  /** Custom editor definition */
  editor?: string | EditorCtr;
  /** Cell styling function */
  cellProperties?: PropertiesFunc;
  /** Custom cell renderer template */
  cellTemplate?: CellTemplate;
  /** Custom sorting comparison function */
  cellCompare?: CellCompareFunc;
  /** Value parser function */
  cellParser?: (model: DataType, column: ColumnRegular) => any;
}

/**
 * Column grouping definition for nested headers
 */
interface ColumnGrouping<T = any> {
  /** Child columns or sub-groups */
  children: (ColumnGrouping<T> | ColumnRegular)[];
  /** Group header name */
  name: DataFormat<T>;
}

import { ColumnRegular, ColumnType, ColumnGrouping } from '@revolist/revogrid';

// Define reusable column type
const numericType: ColumnType = {
  size: 100,
  cellProperties: (row, col) => ({
    class: { 'numeric-cell': true },
    style: { textAlign: 'right' }
  }),
  cellCompare: (a, b) => parseFloat(a) - parseFloat(b)
};

// Define columns
const columns: (ColumnRegular | ColumnGrouping)[] = [
  { prop: 'name', name: 'Name', size: 150 },
  {
    name: 'Personal Info',
    children: [
      { prop: 'age', name: 'Age', columnType: 'numeric' },
      { prop: 'email', name: 'Email', filter: true }
    ]
  },
  { prop: 'salary', name: 'Salary', columnType: 'numeric', pin: 'colPinEnd' }
];

// Register column types
grid.columnTypes = { numeric: numericType };
grid.columns = columns;

/**
 * Represents a single row of data in the grid
 */
type DataType<D = any> = {
  [T in ColumnProp]: DataFormat<D>;
};

/**
 * Data format for individual cell values
 */
type DataFormat<D = any> = any;

/**
 * Column property type - string or number identifier
 */
type ColumnProp = string | number;

/**
 * Sort order enumeration
 */
type Order = 'asc' | 'desc';

/**
 * Row index type
 */
type RowIndex = number;

/**
 * Column index type
 */
type ColIndex = number;

// Strongly typed data interface
interface UserRecord {
  id: number;
  firstName: string;
  lastName: string;
  email: string;
  age: number;
  isActive: boolean;
}

// Grid data with type safety
const userData: DataType<UserRecord>[] = [
  {
    id: 1,
    firstName: 'John',
    lastName: 'Doe',
    email: 'john.doe@example.com',
    age: 30,
    isActive: true
  }
];

/**
 * Cell coordinate in virtual grid space
 */
interface Cell {
  /** Virtual column index */
  x: ColIndex;
  /** Virtual row index */
  y: RowIndex;
}

/**
 * Selection range area
 */
interface RangeArea {
  /** Start column index */
  x: ColIndex;
  /** Start row index */
  y: RowIndex;
  /** End column index */
  x1: ColIndex;
  /** End row index */
  y1: RowIndex;
}

/**
 * Selection store state
 */
interface SelectionStoreState {
  /** Currently selected range */
  range: RangeArea | null;
  /** Temporary selection during drag */
  tempRange: RangeArea | null;
  /** Type of temporary selection */
  tempRangeType: string | null;
  /** Currently focused cell */
  focus: Cell | null;
  /** Cell being edited */
  edit: EditCellStore | null;
  /** Last focused cell */
  lastCell: Cell | null;
  /** Next cell to focus */
  nextFocus: Cell | null;
}

/**
 * Edit cell store information
 */
interface EditCellStore {
  /** Row index being edited */
  row: number;
  /** Column property being edited */
  col: ColumnProp;
  /** Current edit value */
  val: any;
  /** Row dimension type */
  rowType: DimensionRows;
}

// Set cell focus programmatically
const targetCell: Cell = { x: 2, y: 5 };
await grid.setCellsFocus(targetCell);

// Set range selection
const selectionRange: RangeArea = {
  x: 0, y: 0,    // Start at column 0, row 0
  x1: 2, y1: 4   // End at column 2, row 4
};
await grid.setCellsFocus(
  { x: selectionRange.x, y: selectionRange.y },
  { x: selectionRange.x1, y: selectionRange.y1 }
);

/**
 * Row dimension types
 */
type DimensionRows = DimensionTypeRow | DimensionRowPin;
type DimensionTypeRow = 'rgRow';
type DimensionRowPin = 'rowPinStart' | 'rowPinEnd';

/**
 * Column dimension types
 */
type DimensionCols = DimensionColPin | DimensionTypeCol;
type DimensionTypeCol = 'rgCol';
type DimensionColPin = 'colPinStart' | 'colPinEnd';

/**
 * All dimension types combined
 */
type AllDimensionType = {
  rowType: DimensionRows;
  colType: DimensionCols;
};

/**
 * Multi-dimensional type for operations affecting multiple dimensions
 */
type MultiDimensionType = {
  [T in DimensionRows | DimensionCols]: number;
};

// Work with different dimensions
const mainRowData = await grid.getSource('rgRow');
const pinnedTopData = await grid.getSource('rowPinStart');
const pinnedBottomData = await grid.getSource('rowPinEnd');

// Set focus in specific dimension
await grid.setCellsFocus(
  { x: 0, y: 0 }, 
  { x: 0, y: 0 }, 
  'rgCol',      // Column dimension
  'rgRow'       // Row dimension  
);

/**
 * Editor constructor type - function or class
 */
type EditorCtr = EditorCtrCallable | EditorCtrConstructible;

/**
 * Callable editor constructor
 */
type EditorCtrCallable = (
  column: ColumnDataSchemaModel,
  save: (value?: any, preventNextFocus?: boolean) => void,
  close: (focusNext?: boolean) => void,
  focus?: () => void,
  defaultValue?: any
) => EditorBase;

/**
 * Class-based editor constructor
 */
interface EditorCtrConstructible {
  new(
    column: ColumnDataSchemaModel,
    save: (value?: any, preventNextFocus?: boolean) => void,
    close: (focusNext?: boolean) => void,
    focus?: () => void,
    defaultValue?: any
  ): EditorBase;
}

/**
 * Base interface for custom editors
 */
interface EditorBase {
  /** Get current editor value */
  getValue?(): any;
  /** Hook called before auto-save */
  beforeAutoSave?(val?: any): boolean;
  /** Hook called before editor update */
  beforeUpdate?(): void;
  /** Hook called before editor disconnect */
  beforeDisconnect?(): void;
  /** Hook called after render */
  componentDidRender?(): void;
  /** Cleanup callback */
  disconnectedCallback?(): void;
  /** Render method for editor UI */
  render(createElement: HyperFunc<VNode>, additionalData?: any): VNode | VNode[] | string | void;
}

/**
 * Column data schema for editors
 */
interface ColumnDataSchemaModel {
  /** Column definition */
  column: ColumnRegular;
  /** Current cell value */
  value: any;
  /** Row data */
  model: DataType;
  /** Row index */
  row: number;
  /** Column property */
  prop: ColumnProp;
}

import { EditorBase, ColumnDataSchemaModel, VNode } from '@revolist/revogrid';

// Custom dropdown editor
class DropdownEditor implements EditorBase {
  private value: any;
  private options: string[];

  constructor(
    private column: ColumnDataSchemaModel,
    private save: (value?: any) => void,
    private close: (focusNext?: boolean) => void
  ) {
    this.value = column.value;
    this.options = column.column.editor?.options || [];
  }

  getValue() {
    return this.value;
  }

  render(createElement: any): VNode {
    return createElement('select', {
      value: this.value,
      onChange: (e: Event) => {
        this.value = (e.target as HTMLSelectElement).value;
      },
      onBlur: () => this.save(this.value)
    }, this.options.map(option => 
      createElement('option', { value: option }, option)
    ));
  }
}

// Register custom editor
grid.editors = { dropdown: DropdownEditor };

// Use in column definition
const columns: ColumnRegular[] = [
  {
    prop: 'category',
    name: 'Category',
    editor: 'dropdown'
  }
];

/**
 * Cell template function for custom cell rendering
 */
interface CellTemplate {
  (
    createElement: HyperFunc<VNode>,
    props: CellTemplateProp,
    additionalData?: any
  ): VNode | VNode[] | string | void;
}

/**
 * Cell template properties
 */
interface CellTemplateProp {
  /** Cell model/data */
  model: DataType;
  /** Column definition */
  column: ColumnRegular;
  /** Cell value */
  value: any;
  /** Row index */
  rowIndex: number;
  /** Column index */
  colIndex: number;
}

/**
 * Column header template function
 */
type ColumnTemplateFunc = (
  createElement: HyperFunc<VNode>,
  column: ColumnRegular,
  additionalData?: any
) => VNode | VNode[] | string | void;

/**
 * Focus template function for custom focus rendering
 */
type FocusTemplateFunc = (
  createElement: HyperFunc<VNode>,
  editMode: boolean,
  itemIndex: number,
  colType: DimensionCols,
  rowType: DimensionRows
) => VNode | VNode[] | string | void;

/**
 * Properties function for dynamic cell properties
 */
type PropertiesFunc = (
  model: DataType,
  column: ColumnRegular,
  rowIndex?: number
) => CellProperties;

/**
 * Cell properties for styling and behavior
 */
interface CellProperties {
  /** CSS classes */
  class?: string | Record<string, boolean>;
  /** Inline styles */
  style?: Record<string, any>;
  /** HTML attributes */
  [key: string]: any;
}

// Custom cell template with conditional styling
const statusTemplate: CellTemplate = (createElement, { value, model }) => {
  const isActive = value === 'active';
  
  return createElement('div', {
    class: {
      'status-cell': true,
      'status-active': isActive,
      'status-inactive': !isActive
    },
    style: {
      color: isActive ? 'green' : 'red',
      fontWeight: 'bold'
    }
  }, [
    createElement('span', {}, value),
    createElement('i', {
      class: isActive ? 'icon-check' : 'icon-x'
    })
  ]);
};

// Cell properties function for dynamic styling
const cellProperties: PropertiesFunc = (model, column, rowIndex) => {
  return {
    class: {
      'even-row': rowIndex % 2 === 0,
      'odd-row': rowIndex % 2 === 1,
      'high-value': model[column.prop] > 1000
    },
    style: {
      backgroundColor: model.priority === 'high' ? '#ffe6e6' : 'transparent'
    }
  };
};

// Use in column definition
const columns: ColumnRegular[] = [
  {
    prop: 'status',
    name: 'Status',
    cellTemplate: statusTemplate
  },
  {
    prop: 'amount',
    name: 'Amount',
    cellProperties: cellProperties
  }
];

/**
 * Theme configuration
 */
type Theme = 'default' | 'material' | 'compact' | 'darkMaterial' | 'darkCompact' | string;

/**
 * Theme configuration object
 */
interface ThemeConfig {
  /** Default row size for theme */
  rowSize: number;
}

/**
 * Auto-size column configuration
 */
interface AutoSizeColumnConfig {
  /** Sizing mode */
  mode: 'content' | 'header' | 'headerContent';
  /** Apply to all columns */
  allColumns?: boolean;
  /** Letter block size for calculation */
  letterBlockSize?: number;
  /** Maximum column size */
  maxSize?: number;
}

/**
 * Read-only format configuration
 */
type ReadOnlyFormat = boolean | ReadOnlyFunc;
type ReadOnlyFunc = (model: DataType, column: ColumnRegular) => boolean;

/**
 * Row drag configuration
 */
interface RowDrag {
  /** Enable row dragging */
  enable: boolean;
  /** Custom drag handle selector */
  dragHandle?: string;
}

/**
 * Additional data for templates and editors
 */
interface AdditionalData {
  [key: string]: any;
}

// Configure grid with various options
const grid = document.querySelector('revo-grid') as HTMLRevoGridElement;

// Theme configuration
grid.theme = 'material';

// Auto-size configuration
grid.autoSizeColumn = {
  mode: 'headerContent',
  allColumns: false,
  maxSize: 300
};

// Read-only configuration function
const readOnlyConfig: ReadOnlyFunc = (model, column) => {
  return model.locked === true || column.prop === 'id';
};

// Row drag configuration
const rowDragConfig: RowDrag = {
  enable: true,
  dragHandle: '.drag-handle'
};

// Additional data for templates
grid.additionalData = {
  theme: 'dark',
  userPreferences: { showIcons: true },
  apiEndpoint: '/api/data'
};

/**
 * Extract keys of specific type from object
 */
type KeysOfType<T, U> = {
  [K in keyof T]: T[K] extends U ? K : never;
}[keyof T];

/**
 * Make specific properties optional
 */
type PartialBy<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;

/**
 * Make specific properties required
 */
type RequiredBy<T, K extends keyof T> = T & Required<Pick<T, K>>;

/**
 * HyperScript function type for creating virtual nodes
 */
type HyperFunc<T> = (
  sel: any,
  data?: any,
  children?: T[] | string
) => T;

/**
 * Virtual node type for templates
 */
interface VNode {
  sel?: string;
  data?: any;
  children?: VNode[] | string;
  elm?: Element;
  text?: string;
  key?: string | number;
}

// Use utility types for type-safe operations
type NumericColumns = KeysOfType<UserRecord, number>; // 'id' | 'age'
type OptionalNameColumn = PartialBy<ColumnRegular, 'name'>; // name becomes optional
type RequiredSizeColumn = RequiredBy<ColumnRegular, 'size'>; // size becomes required

// Type-safe template function
const typedTemplate: CellTemplate = (createElement, props) => {
  // createElement is typed as HyperFunc<VNode>
  return createElement('div', { class: 'custom-cell' }, props.value?.toString());
};