@keenmate/web-grid 1.0.0-rc07 → 1.0.0-rc08

package/dist/grid.d.ts

@@ -1,4 +1,4 @@
-import type { Column, CellValidationState, RowToolbarConfig, ContextMenuItem, RowShortcut, RowChangeDetail, ToolbarClickDetail, RowActionClickDetail, ContextMenuContext, EditTrigger, EditStartSelection, EditingCell, FocusedCell, SortMode, SortState, DataRequestDetail, DataRequestTrigger, BeforeCommitResult, GridMode, ToggleVisibility, PaginationLabelsCallback, SummaryContentCallback, ValidationTooltipContext, ToolbarPosition, GridLabels, RowLockInfo, RowLockingOptions, RowLockChangeDetail } from './types.js';
+import type { Column, CellValidationState, RowToolbarConfig, ContextMenuItem, RowShortcut, RowChangeDetail, ToolbarClickDetail, RowActionClickDetail, ContextMenuContext, EditTrigger, EditStartSelection, EditingCell, FocusedCell, SortMode, SortState, DataRequestDetail, DataRequestTrigger, BeforeCommitResult, GridMode, ToggleVisibility, PaginationLabelsCallback, SummaryContentCallback, ValidationTooltipContext, ToolbarPosition, GridLabels, RowLockInfo, RowLockingOptions, RowLockChangeDetail, ColumnWidthState, ColumnResizeDetail, ColumnOrderState, ColumnReorderDetail, FillDragDetail, FillDirection, RangeShortcut } from './types.js';
 /**
  * WebGrid - Core logic class for the data grid
  *
@@ -24,6 +24,8 @@ export declare class WebGrid<T = unknown> {
     protected _openDropdownOnEnter: boolean;
     protected _checkboxAlwaysEditable: boolean;
     protected _showRowNumbers: boolean;
+    protected _stickyRowNumbers: boolean;
+    protected _freezeColumns: number;
     protected _invalidCells: CellValidationState[];
     protected _showRowToolbar: boolean;
     protected _rowToolbar: RowToolbarConfig<T>[];
@@ -44,6 +46,16 @@ export declare class WebGrid<T = unknown> {
     protected _rowLocking: RowLockingOptions<T> | undefined;
     protected _externalLocks: Map<unknown, RowLockInfo>;
     protected _onrowlockchange: ((detail: RowLockChangeDetail<T>) => void) | undefined;
+    protected _gridName: string | null;
+    protected _persistColumnWidths: boolean;
+    protected _columnWidths: Map<string, string>;
+    protected _oncolumnresize: ((detail: ColumnResizeDetail) => void) | undefined;
+    protected _allowColumnReorder: boolean;
+    protected _persistColumnOrder: boolean;
+    protected _columnOrder: Map<string, number>;
+    protected _oncolumnreorder: ((detail: ColumnReorderDetail) => void) | undefined;
+    protected _fillDirection: FillDirection;
+    protected _onfilldrag: ((detail: FillDragDetail) => boolean | void) | undefined;
     protected _onrowchange: ((detail: RowChangeDetail<T>) => void) | undefined;
     protected _onroweditstart: ((detail: {
         row: T;
@@ -105,6 +117,9 @@ export declare class WebGrid<T = unknown> {
         prev: any;
         current: any;
     }) => void) | null;
+    protected _selectedRows: Set<number>;
+    protected _lastSelectedRowIndex: number | null;
+    protected _rangeShortcuts: RangeShortcut<T>[];
     get items(): T[];
     set items(value: T[]);
     get columns(): Column<T>[];
@@ -149,6 +164,27 @@ export declare class WebGrid<T = unknown> {
     set checkboxAlwaysEditable(value: boolean);
     get showRowNumbers(): boolean;
     set showRowNumbers(value: boolean);
+    get stickyRowNumbers(): boolean;
+    set stickyRowNumbers(value: boolean);
+    get freezeColumns(): number;
+    set freezeColumns(value: number);
+    /**
+     * Get columns in visual display order.
+     * Columns with frozen: true appear first, followed by non-frozen columns.
+     * Original column indices are preserved for data access.
+     */
+    get visualColumns(): Array<{
+        column: Column<T>;
+        originalIndex: number;
+    }>;
+    /**
+     * Get the total number of frozen columns (from frozen: true + freezeColumns prop).
+     */
+    get totalFrozenColumns(): number;
+    /**
+     * Check if a column at visual index should be frozen.
+     */
+    isColumnFrozen(visualIndex: number): boolean;
     get invalidCells(): CellValidationState[];
     set invalidCells(value: CellValidationState[]);
     get editingCell(): EditingCell;
@@ -280,6 +316,30 @@ export declare class WebGrid<T = unknown> {
     set rowLocking(value: RowLockingOptions<T> | undefined);
     get onrowlockchange(): ((detail: RowLockChangeDetail<T>) => void) | undefined;
     set onrowlockchange(value: ((detail: RowLockChangeDetail<T>) => void) | undefined);
+    get gridName(): string | null;
+    set gridName(value: string | null);
+    get persistColumnWidths(): boolean;
+    set persistColumnWidths(value: boolean);
+    get oncolumnresize(): ((detail: ColumnResizeDetail) => void) | undefined;
+    set oncolumnresize(value: ((detail: ColumnResizeDetail) => void) | undefined);
+    get allowColumnReorder(): boolean;
+    set allowColumnReorder(value: boolean);
+    get persistColumnOrder(): boolean;
+    set persistColumnOrder(value: boolean);
+    get oncolumnreorder(): ((detail: ColumnReorderDetail) => void) | undefined;
+    set oncolumnreorder(value: ((detail: ColumnReorderDetail) => void) | undefined);
+    get fillDirection(): FillDirection;
+    set fillDirection(value: FillDirection);
+    get onfilldrag(): ((detail: FillDragDetail) => boolean | void) | undefined;
+    set onfilldrag(value: ((detail: FillDragDetail) => boolean | void) | undefined);
+    get selectedRows(): number[];
+    get rangeShortcuts(): RangeShortcut<T>[];
+    set rangeShortcuts(value: RangeShortcut<T>[]);
+    isRowSelected(rowIndex: number): boolean;
+    selectRow(rowIndex: number, mode?: 'replace' | 'toggle' | 'range'): void;
+    selectRowRange(fromIndex: number, toIndex: number): void;
+    clearSelection(): void;
+    getSelectedRowsData(): T[];
     get isNavigateMode(): boolean;
     get filteredItems(): T[];
     get sortedItems(): T[];
@@ -423,5 +483,58 @@ export declare class WebGrid<T = unknown> {
      * Check if a cell can be edited (respects lock state)
      */
     canEditCell(rowIndex: number, field: string): boolean;
+    /**
+     * Get runtime column width override (or undefined if using column definition)
+     */
+    getColumnWidth(field: string): string | undefined;
+    /**
+     * Set runtime column width override
+     */
+    setColumnWidth(field: string, width: string): void;
+    /**
+     * Set multiple column widths at once (for restoring saved state)
+     * Accepts the same format as oncolumnresize.allWidths
+     */
+    setColumnWidths(widths: ColumnWidthState[]): void;
+    /**
+     * Get all column widths state (for persistence/callback)
+     */
+    getColumnWidthsState(): ColumnWidthState[];
+    /**
+     * Load column widths from localStorage
+     */
+    loadPersistedWidths(): void;
+    /**
+     * Save column widths to localStorage
+     */
+    savePersistedWidths(): void;
+    /**
+     * Load persisted state (widths, order) from localStorage
+     * Automatically cleans up orphaned entries for columns that no longer exist
+     */
+    loadPersistedState(): void;
+    /**
+     * Save persisted state (widths, order) to localStorage
+     */
+    savePersistedState(): void;
+    /**
+     * Get runtime column order override (or undefined if using original order)
+     */
+    getColumnOrder(field: string): number | undefined;
+    /**
+     * Set multiple column orders at once (for restoring saved state)
+     * Accepts the same format as oncolumnreorder.allOrder
+     */
+    setColumnOrder(order: ColumnOrderState[]): void;
+    /**
+     * Get all column order state (for persistence/callback)
+     * Returns only non-frozen columns in their visual order
+     */
+    getColumnOrderState(): ColumnOrderState[];
+    /**
+     * Move a column to a new visual index (among non-frozen columns)
+     * Used by the reorder drag handler
+     */
+    moveColumn(field: string, toIndex: number): void;
 }
 export default WebGrid;

package/dist/index.d.ts

@@ -1,4 +1,4 @@
 export { GridElement } from './web-component.js';
 export { WebGrid } from './grid.js';
-export type { EditorType, EditTrigger, OptionsLoadTrigger, DateOutputFormat, EditorOption, EditorOptions, CustomEditorContext, CellValidationState, ValidationResult, BeforeCommitContext, BeforeCommitResult, Column, CellRenderCallback, RowChangeDetail, PredefinedToolbarItemType, ToolbarPosition, ToolbarTooltip, RowToolbarItem, RowToolbarConfig, NormalizedToolbarItem, ToolbarClickDetail, RowActionType, RowActionClickDetail, ContextMenuContext, ContextMenuItem, QuickGridProps, SortState, DataRequestDetail, DataRequestTrigger, GridLabels, RowLockInfo, RowLockingOptions, RowLockChangeDetail, LockedRowEditBehavior, EditingCell, FocusedCell, SortDirection, ToolbarRowGroup, PopupPosition, ConnectorArrowDir } from './types.js';
+export type { EditorType, EditTrigger, OptionsLoadTrigger, DateOutputFormat, EditorOption, EditorOptions, CustomEditorContext, CellValidationState, ValidationResult, BeforeCommitContext, BeforeCommitResult, Column, CellRenderCallback, RowChangeDetail, PredefinedToolbarItemType, ToolbarPosition, ToolbarTooltip, RowToolbarItem, RowToolbarConfig, NormalizedToolbarItem, ToolbarClickDetail, RowActionType, RowActionClickDetail, ContextMenuContext, ContextMenuItem, QuickGridProps, SortState, DataRequestDetail, DataRequestTrigger, GridLabels, RowLockInfo, RowLockingOptions, RowLockChangeDetail, LockedRowEditBehavior, ColumnWidthState, ColumnResizeDetail, ColumnOrderState, ColumnReorderDetail, FillDragDetail, FillDirection, RangeShortcut, RangeShortcutContext, EditingCell, FocusedCell, SortDirection, ToolbarRowGroup, PopupPosition, ConnectorArrowDir } from './types.js';
 export { GridElement as default } from './web-component.js';

package/dist/modules/events/index.d.ts

@@ -0,0 +1,2 @@
+export { handleSortClick } from './sort.js';
+export { handlePaginationClick, handlePageSizeChange } from './pagination.js';

package/dist/modules/events/pagination.d.ts

@@ -0,0 +1,11 @@
+import type { GridContext } from '../types.js';
+/**
+ * Handle pagination button click (first, prev, next, last).
+ * Returns true if page changed (caller should re-render).
+ */
+export declare function handlePaginationClick<T>(ctx: GridContext<T>, e: Event): boolean;
+/**
+ * Handle page size select change.
+ * Returns true if page size changed (caller should re-render).
+ */
+export declare function handlePageSizeChange<T>(ctx: GridContext<T>, select: HTMLSelectElement): boolean;

package/dist/modules/events/sort.d.ts

@@ -0,0 +1,6 @@
+import type { GridContext } from '../types.js';
+/**
+ * Handle header click for sorting.
+ * Supports single and multi-column sorting (Ctrl+Click for multi).
+ */
+export declare function handleSortClick<T>(ctx: GridContext<T>, e: MouseEvent): void;

package/dist/modules/fill-handle/index.d.ts

@@ -0,0 +1,17 @@
+import type { GridContext } from '../types.js';
+/**
+ * Check if fill drag is in progress
+ */
+export declare function isFilling(): boolean;
+/**
+ * Check if fill drag is pending (mouse down but not dragging yet)
+ */
+export declare function isFillPending(): boolean;
+/**
+ * Create and position the fill handle on the focused cell
+ */
+export declare function updateFillHandle<T>(ctx: GridContext<T>): void;
+/**
+ * Remove the fill handle from DOM
+ */
+export declare function removeFillHandle(): void;

package/dist/modules/keyboard/index.d.ts

@@ -0,0 +1 @@
+export { parseKeyCombo, matchesKeyCombo, formatKeyCombo } from './key-combo.js';

package/dist/modules/keyboard/key-combo.d.ts

@@ -0,0 +1,14 @@
+import type { ParsedKeyCombo } from '../../types.js';
+/**
+ * Parse a key combination string like "Ctrl+D", "Shift+F3", "Alt+Delete"
+ * into a structured object for matching against KeyboardEvents.
+ */
+export declare function parseKeyCombo(keyStr: string): ParsedKeyCombo;
+/**
+ * Check if a KeyboardEvent matches a parsed key combination.
+ */
+export declare function matchesKeyCombo(e: KeyboardEvent, combo: ParsedKeyCombo): boolean;
+/**
+ * Format a key combination for display (e.g., "Ctrl+D" → "Ctrl+D")
+ */
+export declare function formatKeyCombo(keyStr: string): string;

package/dist/modules/reorder/index.d.ts

@@ -0,0 +1,34 @@
+import type { GridContext } from '../types.js';
+/**
+ * State for tracking an active reorder operation
+ */
+export interface ReorderState {
+    isPending: boolean;
+    isReordering: boolean;
+    field: string;
+    startX: number;
+    startY: number;
+    headerCell: HTMLElement | null;
+    ghost: HTMLElement | null;
+    dropIndicator: HTMLElement | null;
+    fromIndex: number;
+    currentDropIndex: number;
+}
+/**
+ * Get the current reorder state
+ */
+export declare function getReorderState(): ReorderState;
+/**
+ * Check if reorder is currently active or was just completed.
+ * This is used to block click-to-sort after a drag operation.
+ * The dragJustCompleted flag is reset after being checked.
+ */
+export declare function isReordering(): boolean;
+/**
+ * Check if a reorder operation is pending (mouse down but threshold not exceeded)
+ */
+export declare function isReorderPending(): boolean;
+/**
+ * Start a column reorder operation (pending state until threshold exceeded)
+ */
+export declare function handleReorderStart<T>(ctx: GridContext<T>, e: MouseEvent, field: string): void;

package/dist/modules/resize/index.d.ts

@@ -0,0 +1,25 @@
+import type { GridContext } from '../types.js';
+/**
+ * State for tracking an active resize operation
+ */
+export interface ResizeState {
+    isResizing: boolean;
+    startX: number;
+    startWidth: number;
+    field: string;
+    headerCell: HTMLElement | null;
+    minWidth: number;
+    maxWidth: number | null;
+}
+/**
+ * Get the current resize state (useful for checking if resize is active)
+ */
+export declare function getResizeState(): ResizeState;
+/**
+ * Start a column resize operation
+ */
+export declare function handleResizeStart<T>(ctx: GridContext<T>, e: MouseEvent, field: string): void;
+/**
+ * Apply all stored column widths (called after render)
+ */
+export declare function applyStoredColumnWidths<T>(ctx: GridContext<T>): void;

package/dist/modules/scroll/calculations.d.ts

@@ -0,0 +1,41 @@
+export interface VisibleRangeParams {
+    scrollTop: number;
+    viewportHeight: number;
+    rowHeight: number;
+    buffer: number;
+    totalItems: number;
+    editingRowIndex?: number;
+}
+export interface VisibleRange {
+    startIndex: number;
+    endIndex: number;
+}
+/**
+ * Calculate the visible row range for virtual scrolling.
+ * Pure function - no side effects.
+ */
+export declare function calculateVisibleRange(params: VisibleRangeParams): VisibleRange;
+export interface ScrollToRowParams {
+    targetRow: number;
+    rowHeight: number;
+    buffer: number;
+    totalItems: number;
+    viewportHeight: number;
+    scrollHeight: number;
+    clientHeight: number;
+}
+export interface ScrollToRowResult {
+    scrollTop: number;
+    startIndex: number;
+    endIndex: number;
+}
+/**
+ * Calculate scroll position and visible range for scrolling to a specific row.
+ * Pure function - no side effects.
+ */
+export declare function calculateScrollToRow(params: ScrollToRowParams): ScrollToRowResult;
+/**
+ * Check if infinite scroll should trigger (near bottom of container).
+ * Pure function - no side effects.
+ */
+export declare function shouldTriggerInfiniteScroll(scrollTop: number, scrollHeight: number, clientHeight: number, threshold: number): boolean;

package/dist/modules/scroll/index.d.ts

@@ -0,0 +1 @@
+export { calculateVisibleRange, calculateScrollToRow, shouldTriggerInfiniteScroll, type VisibleRangeParams, type VisibleRange, type ScrollToRowParams, type ScrollToRowResult } from './calculations.js';

package/dist/modules/selection/index.d.ts

@@ -0,0 +1,21 @@
+import type { GridContext } from '../types.js';
+/**
+ * Check if selection drag is in progress
+ */
+export declare function isSelecting(): boolean;
+/**
+ * Check if selection drag is pending (mouse down but not dragging yet)
+ */
+export declare function isSelectionPending(): boolean;
+/**
+ * Handle mousedown on a row number cell
+ */
+export declare function handleRowNumberMouseDown<T>(ctx: GridContext<T>, rowIndex: number, event: MouseEvent): void;
+/**
+ * Clear selection when clicking outside row numbers
+ */
+export declare function handleContainerClick<T>(ctx: GridContext<T>, event: MouseEvent): void;
+/**
+ * Handle Escape key to clear selection
+ */
+export declare function handleEscapeKey<T>(ctx: GridContext<T>): boolean;

package/dist/types.d.ts

@@ -5,6 +5,7 @@ export type ToggleVisibility = "always" | "on-focus";
 export type OptionsLoadTrigger = "immediate" | "oneditstart" | "ondropdownopen";
 export type DateOutputFormat = "date" | "iso" | "timestamp";
 export type EditStartSelection = "mousePosition" | "selectAll" | "cursorAtStart" | "cursorAtEnd";
+export type FillDirection = "vertical" | "all";
 export type EditorOption = {
     value: string | number | boolean;
     label: string;
@@ -121,6 +122,9 @@ export type Column<T> = {
     beforeCopyCallback?: (value: unknown, row: T) => string;
     beforePasteCallback?: (value: string, row: T) => unknown;
     validationTooltipCallback?: (context: ValidationTooltipContext<T>) => string | null;
+    frozen?: boolean;
+    resizable?: boolean;
+    fillDirection?: FillDirection;
 };
 export type ValidationTooltipContext<T> = {
     field: string;
@@ -211,6 +215,17 @@ export type RowShortcut<T> = {
     action: (ctx: ShortcutContext<T>) => void | Promise<void>;
     disabled?: boolean | ((ctx: ShortcutContext<T>) => boolean);
 };
+export type RangeShortcutContext<T> = {
+    rows: T[];
+    rowIndices: number[];
+};
+export type RangeShortcut<T> = {
+    key: string;
+    id: string;
+    label: string;
+    action: (ctx: RangeShortcutContext<T>) => void | Promise<void>;
+    disabled?: boolean | ((ctx: RangeShortcutContext<T>) => boolean);
+};
 export type ParsedKeyCombo = {
     key: string;
     ctrl: boolean;
@@ -227,6 +242,8 @@ export type QuickGridProps<T> = {
     striped?: boolean;
     hoverable?: boolean;
     showRowNumbers?: boolean;
+    stickyRowNumbers?: boolean;
+    freezeColumns?: number;
     class?: string;
     style?: string;
     customStylesCallback?: () => string;
@@ -303,6 +320,13 @@ export type QuickGridProps<T> = {
         rowIndex: number;
         row: T;
     }) => void;
+    gridName?: string;
+    persistColumnWidths?: boolean;
+    oncolumnresize?: (detail: ColumnResizeDetail) => void;
+    allowColumnReorder?: boolean;
+    persistColumnOrder?: boolean;
+    oncolumnreorder?: (detail: ColumnReorderDetail) => void;
+    onfilldrag?: (detail: FillDragDetail) => boolean | void;
 };
 export type EditingCell = {
     rowIndex: number;
@@ -403,3 +427,41 @@ export type RowLockChangeDetail<T> = {
     lockInfo: RowLockInfo | null;
     source: 'property' | 'callback' | 'external';
 };
+export type ColumnWidthState = {
+    field: string;
+    width: string;
+};
+export type GridPersistenceState = {
+    columnWidths?: ColumnWidthState[];
+    columnOrder?: ColumnOrderState[];
+};
+export type ColumnResizeDetail = {
+    field: string;
+    oldWidth: string;
+    newWidth: string;
+    allWidths: ColumnWidthState[];
+};
+export type ColumnOrderState = {
+    field: string;
+    order: number;
+};
+export type ColumnReorderDetail = {
+    field: string;
+    fromIndex: number;
+    toIndex: number;
+    allOrder: ColumnOrderState[];
+};
+export type FillDragDetail = {
+    sourceCell: {
+        rowIndex: number;
+        colIndex: number;
+        field: string;
+        value: unknown;
+    };
+    targetCells: Array<{
+        rowIndex: number;
+        colIndex: number;
+        field: string;
+    }>;
+    direction: 'up' | 'down' | 'left' | 'right';
+};

package/dist/web-component.d.ts

@@ -1,5 +1,5 @@
 import { WebGrid } from './grid.js';
-import type { Column, CellValidationState, RowToolbarConfig, ContextMenuItem, RowShortcut, RowChangeDetail, ToolbarClickDetail, RowActionClickDetail, ContextMenuContext, EditTrigger, EditStartSelection, EditorOption, EditorOptions, GridMode, ToggleVisibility, DataRequestDetail, SortState, SortMode, PaginationLabelsCallback, SummaryContentCallback, ValidationTooltipContext, ToolbarPosition, GridLabels, RowLockInfo, RowLockingOptions, RowLockChangeDetail } from './types.js';
+import type { Column, CellValidationState, RowToolbarConfig, ContextMenuItem, RowShortcut, RowChangeDetail, ToolbarClickDetail, RowActionClickDetail, ContextMenuContext, EditTrigger, EditStartSelection, EditorOption, EditorOptions, GridMode, ToggleVisibility, DataRequestDetail, SortState, SortMode, PaginationLabelsCallback, SummaryContentCallback, ValidationTooltipContext, ToolbarPosition, GridLabels, RowLockInfo, RowLockingOptions, RowLockChangeDetail, ColumnResizeDetail, ColumnWidthState, ColumnReorderDetail, ColumnOrderState, FillDragDetail, RangeShortcut } from './types.js';
 import type { GridContext } from './modules/types.js';
 /**
  * GridElement - Custom HTML Element for WebGrid
@@ -98,6 +98,10 @@ export declare class GridElement<T = unknown> extends HTMLElement implements Gri
     set checkboxAlwaysEditable(value: boolean);
     get showRowNumbers(): boolean;
     set showRowNumbers(value: boolean);
+    get stickyRowNumbers(): boolean;
+    set stickyRowNumbers(value: boolean);
+    get freezeColumns(): number;
+    set freezeColumns(value: number);
     get invalidCells(): CellValidationState[];
     set invalidCells(value: CellValidationState[]);
     get showRowToolbar(): boolean;
@@ -126,6 +130,14 @@ export declare class GridElement<T = unknown> extends HTMLElement implements Gri
     set contextMenuYOffset(value: number);
     get rowShortcuts(): RowShortcut<T>[] | undefined;
     set rowShortcuts(value: RowShortcut<T>[] | undefined);
+    get rangeShortcuts(): RangeShortcut<T>[];
+    set rangeShortcuts(value: RangeShortcut<T>[]);
+    get selectedRows(): number[];
+    selectRow(rowIndex: number, mode?: 'replace' | 'toggle' | 'range'): void;
+    selectRowRange(fromIndex: number, toIndex: number): void;
+    clearSelection(): void;
+    isRowSelected(rowIndex: number): boolean;
+    getSelectedRowsData(): T[];
     get showShortcutsHelp(): boolean;
     set showShortcutsHelp(value: boolean);
     get shortcutsHelpPosition(): 'top-right' | 'top-left';
@@ -206,6 +218,25 @@ export declare class GridElement<T = unknown> extends HTMLElement implements Gri
     set rowLocking(value: RowLockingOptions<T> | undefined);
     get onrowlockchange(): ((detail: RowLockChangeDetail<T>) => void) | undefined;
     set onrowlockchange(value: ((detail: RowLockChangeDetail<T>) => void) | undefined);
+    get gridName(): string | null;
+    set gridName(value: string | null);
+    get persistColumnWidths(): boolean;
+    set persistColumnWidths(value: boolean);
+    get allowColumnReorder(): boolean;
+    set allowColumnReorder(value: boolean);
+    get persistColumnOrder(): boolean;
+    set persistColumnOrder(value: boolean);
+    /**
+     * Try to load persisted state (widths/order) if conditions are met
+     */
+    private tryLoadPersistedState;
+    private tryLoadPersistedWidths;
+    get oncolumnresize(): ((detail: ColumnResizeDetail) => void) | undefined;
+    set oncolumnresize(value: ((detail: ColumnResizeDetail) => void) | undefined);
+    get oncolumnreorder(): ((detail: ColumnReorderDetail) => void) | undefined;
+    set oncolumnreorder(value: ((detail: ColumnReorderDetail) => void) | undefined);
+    get onfilldrag(): ((detail: FillDragDetail) => boolean | void) | undefined;
+    set onfilldrag(value: ((detail: FillDragDetail) => boolean | void) | undefined);
     get virtualScroll(): boolean;
     set virtualScroll(value: boolean);
     get virtualScrollThreshold(): number;
@@ -244,6 +275,11 @@ export declare class GridElement<T = unknown> extends HTMLElement implements Gri
     updateRowById(id: unknown, newData: Partial<T>): boolean;
     replaceRowById(id: unknown, newRow: T): boolean;
     canEditCell(rowIndex: number, field: string): boolean;
+    setColumnWidth(field: string, width: string): void;
+    setColumnWidths(widths: ColumnWidthState[]): void;
+    getColumnWidthsState(): ColumnWidthState[];
+    setColumnOrder(order: ColumnOrderState[]): void;
+    getColumnOrderState(): ColumnOrderState[];
     /**
      * Programmatically focus a cell. Updates state and focuses the DOM element.
      * State is updated immediately so pending renders use the correct position.