@keenmate/web-grid 1.0.0-rc02

package/dist/modules/dropdown/interaction.d.ts

@@ -0,0 +1,34 @@
+import type { EditorOptions } from '../../types.js';
+import type { GridContext } from '../types.js';
+/**
+ * Select dropdown option by index
+ */
+export declare function selectDropdownOption<T>(ctx: GridContext<T>, index: number, moveAfterSelect?: boolean): void;
+/**
+ * Update dropdown highlight visually
+ */
+export declare function updateDropdownHighlight<T>(ctx: GridContext<T>): void;
+/**
+ * Scroll highlighted option into view
+ */
+export declare function scrollHighlightedIntoView<T>(ctx: GridContext<T>): void;
+/**
+ * Update loading indicator visibility
+ */
+export declare function updateLoadingIndicator<T>(ctx: GridContext<T>, show: boolean): void;
+/**
+ * Open dropdown for current editor
+ */
+export declare function openDropdownForCurrentEditor<T>(ctx: GridContext<T>): void;
+/**
+ * Toggle dropdown open/close
+ */
+export declare function toggleDropdown<T>(ctx: GridContext<T>): void;
+/**
+ * Attach event listeners to dropdown element
+ */
+export declare function attachDropdownListeners<T>(ctx: GridContext<T>, dropdown: HTMLElement): void;
+/**
+ * Update select dropdown filter based on current filterText
+ */
+export declare function updateSelectFilter<T>(ctx: GridContext<T>, opts: EditorOptions): void;

package/dist/modules/dropdown/options.d.ts

@@ -0,0 +1,33 @@
+import type { EditorOption, EditorOptions } from '../../types.js';
+/**
+ * Get display value for a selected value from options list
+ */
+export declare function getOptionDisplayValue(value: unknown, options: EditorOption[], opts: EditorOptions): string;
+/**
+ * Get display label from option object
+ */
+export declare function getOptionLabel(opt: EditorOption, opts: EditorOptions): string;
+/**
+ * Get value from option object
+ */
+export declare function getOptionValue(opt: EditorOption, opts: EditorOptions): unknown;
+/**
+ * Get searchable text from option object (falls back to display)
+ */
+export declare function getOptionSearchText(opt: EditorOption, opts: EditorOptions): string;
+/**
+ * Get icon from option object
+ */
+export declare function getOptionIcon(opt: EditorOption, opts: EditorOptions): string | null;
+/**
+ * Get subtitle from option object
+ */
+export declare function getOptionSubtitle(opt: EditorOption, opts: EditorOptions): string | null;
+/**
+ * Check if option is disabled
+ */
+export declare function isOptionDisabled(opt: EditorOption, opts: EditorOptions): boolean;
+/**
+ * Get group from option object
+ */
+export declare function getOptionGroup(opt: EditorOption, opts: EditorOptions): string | null;

package/dist/modules/dropdown/rendering.d.ts

@@ -0,0 +1,11 @@
+import type { EditorOption, EditorOptions } from '../../types.js';
+import type { GridContext } from '../types.js';
+/**
+ * Render dropdown overlay using Floating UI for positioning
+ * Returns the dropdown element so caller can attach listeners
+ */
+export declare function renderDropdown<T>(ctx: GridContext<T>, anchor: HTMLElement, options: EditorOption[], opts: EditorOptions): HTMLElement;
+/**
+ * Remove dropdown from DOM
+ */
+export declare function removeDropdown<T>(ctx: GridContext<T>): void;

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

@@ -0,0 +1,2 @@
+export { commitCurrentEditor, handleCheckboxChange, toggleCheckboxAndMove, handleEditorBlur, moveFocusAfterCommit, focusCellAfterCancel } from './lifecycle.js';
+export { renderCellEditor, renderTextEditor, renderNumberEditor, renderCheckboxEditor, renderSelectEditor, renderComboboxEditor, renderAutocompleteEditor } from './renderers.js';

package/dist/modules/editing/lifecycle.d.ts

@@ -0,0 +1,25 @@
+import type { GridContext } from '../types.js';
+/**
+ * Commit the value from the current editor
+ */
+export declare function commitCurrentEditor<T>(ctx: GridContext<T>, editor: HTMLElement): void;
+/**
+ * Handle checkbox change (commits immediately)
+ */
+export declare function handleCheckboxChange<T>(ctx: GridContext<T>, checkbox: HTMLInputElement): void;
+/**
+ * Toggle checkbox value and move to next row (for Space key in Focused state)
+ */
+export declare function toggleCheckboxAndMove<T>(ctx: GridContext<T>, rowIndex: number, colIndex: number): void;
+/**
+ * Handle editor blur (commit for text/number inputs)
+ */
+export declare function handleEditorBlur<T>(ctx: GridContext<T>, input: HTMLInputElement): void;
+/**
+ * Move focus after committing an edit
+ */
+export declare function moveFocusAfterCommit<T>(ctx: GridContext<T>, rowIndex: number, field: string, direction: 'down' | 'up' | 'next' | 'prev'): void;
+/**
+ * Focus cell after cancelling edit
+ */
+export declare function focusCellAfterCancel<T>(ctx: GridContext<T>, rowIndex: number, field: string): void;

package/dist/modules/editing/renderers.d.ts

@@ -0,0 +1,39 @@
+import type { Column } from '../../types.js';
+import type { GridContext } from '../types.js';
+/**
+ * Render the appropriate editor for a cell
+ */
+export declare function renderCellEditor<T>(ctx: GridContext<T>, rowIndex: number, colIndex: number, column: Column<T>): string;
+/**
+ * Render text input editor
+ */
+export declare function renderTextEditor<T>(ctx: GridContext<T>, rowIndex: number, field: string, value: unknown, column: Column<T>): string;
+/**
+ * Render number input editor
+ */
+export declare function renderNumberEditor<T>(ctx: GridContext<T>, rowIndex: number, field: string, value: unknown, column: Column<T>): string;
+/**
+ * Render date input editor with custom datepicker
+ */
+export declare function renderDateEditor<T>(ctx: GridContext<T>, rowIndex: number, field: string, value: unknown, column: Column<T>): string;
+/**
+ * Render checkbox editor
+ */
+export declare function renderCheckboxEditor<T>(ctx: GridContext<T>, rowIndex: number, field: string, value: unknown, column: Column<T>): string;
+/**
+ * Render select dropdown editor (custom trigger like v3, not native select)
+ */
+export declare function renderSelectEditor<T>(ctx: GridContext<T>, rowIndex: number, field: string, value: unknown, column: Column<T>): string;
+/**
+ * Render combobox editor (filterable dropdown)
+ */
+export declare function renderComboboxEditor<T>(ctx: GridContext<T>, rowIndex: number, field: string, value: unknown, column: Column<T>): string;
+/**
+ * Render autocomplete editor (async search dropdown)
+ */
+export declare function renderAutocompleteEditor<T>(ctx: GridContext<T>, rowIndex: number, field: string, value: unknown, column: Column<T>): string;
+/**
+ * Render custom editor placeholder
+ * The actual editing UI is provided by cellEditCallback
+ */
+export declare function renderCustomEditor<T>(ctx: GridContext<T>, rowIndex: number, field: string, value: unknown, column: Column<T>): string;

package/dist/modules/navigation/focus.d.ts

@@ -0,0 +1,46 @@
+import type { FocusedCell } from '../../types.js';
+import type { GridContext } from '../types.js';
+/**
+ * Focus a cell element in the DOM
+ * In virtual scroll mode, only scroll if cell is outside viewport (minimal scroll)
+ */
+export declare function focusCellElement<T>(ctx: GridContext<T>, rowIndex: number, colIndex: number): void;
+/**
+ * Scroll to position a row as the second visible row (for PageUp/PageDown)
+ * Exported so keyboard handlers can use it directly
+ */
+export declare function scrollToRowPosition<T>(ctx: GridContext<T>, rowIndex: number): void;
+/**
+ * Update focus visual state surgically (without full re-render)
+ * This directly manipulates CSS classes on existing DOM elements
+ */
+export declare function updateFocusVisual<T>(ctx: GridContext<T>, oldFocus: FocusedCell | null, newFocus: FocusedCell | null): void;
+/**
+ * Surgically remove the editing visual (blue border) from current editing cell.
+ * Call this BEFORE cancelEdit() to ensure the DOM class is removed immediately,
+ * rather than waiting for the async re-render.
+ */
+export declare function clearEditingVisual<T>(ctx: GridContext<T>): void;
+/**
+ * Handle cell focus event
+ */
+export declare function handleCellFocus<T>(ctx: GridContext<T>, rowIndex: number, colIndex: number): void;
+/**
+ * Helper to move focus to a new cell with surgical DOM updates
+ */
+export declare function moveFocus<T>(ctx: GridContext<T>, newRowIndex: number, newColIndex: number): void;
+/**
+ * Try to start editing a cell (checks if editable first)
+ */
+export declare function tryStartEdit<T>(ctx: GridContext<T>, rowIndex: number, colIndex: number, options?: {
+    initialSearchQuery?: string;
+    cursorPosition?: number;
+}): void;
+/**
+ * Calculate cursor position from a click event using binary search (v3 pattern)
+ */
+export declare function getCursorPositionFromClick(event: MouseEvent, cell: HTMLElement): number | null;
+/**
+ * Handle focus leaving the table
+ */
+export declare function handleTableFocusOut<T>(ctx: GridContext<T>, e: FocusEvent): void;

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

@@ -0,0 +1 @@
+export { focusCellElement, updateFocusVisual, clearEditingVisual, handleCellFocus, moveFocus, tryStartEdit, getCursorPositionFromClick, handleTableFocusOut, scrollToRowPosition } from './focus.js';

package/dist/modules/rendering/display.d.ts

@@ -0,0 +1,7 @@
+import type { Column } from '../../types.js';
+import type { GridContext } from '../types.js';
+/**
+ * Render a cell in display mode (not editing)
+ * For dropdown cells, always renders toggle - CSS controls visibility via hover/focus
+ */
+export declare function renderCellDisplay<T>(ctx: GridContext<T>, rowIndex: number, colIndex: number, column: Column<T>, value: string, isFocused: boolean): string;

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

@@ -0,0 +1,3 @@
+export { getContainerClasses, renderHeaderRow, renderDataRows, renderDataRowsVirtual, renderPagination, renderSummary } from './table.js';
+export type { VirtualScrollParams } from './table.js';
+export { renderCellDisplay } from './display.js';

package/dist/modules/rendering/table.d.ts

@@ -0,0 +1,39 @@
+import type { GridContext } from '../types.js';
+/**
+ * Get container CSS classes
+ */
+export declare function getContainerClasses<T>(ctx: GridContext<T>): string;
+/**
+ * Render header row
+ */
+export declare function renderHeaderRow<T>(ctx: GridContext<T>): string;
+/**
+ * Render data rows
+ */
+export declare function renderDataRows<T>(ctx: GridContext<T>): string;
+/**
+ * Virtual scroll parameters
+ */
+export type VirtualScrollParams = {
+    startIndex: number;
+    endIndex: number;
+    rowHeight: number;
+    totalItems: number;
+};
+/**
+ * Render data rows with virtual scrolling (spacer rows pattern)
+ * Only renders visible rows + buffer, with spacer rows for correct scroll height
+ */
+export declare function renderDataRowsVirtual<T>(ctx: GridContext<T>, params: VirtualScrollParams): string;
+/**
+ * Render pagination controls
+ * @param ctx Grid context
+ * @param position Position string (e.g., "bottom-center", "top-right")
+ */
+export declare function renderPagination<T>(ctx: GridContext<T>, position?: string): string;
+/**
+ * Render summary content
+ * @param ctx Grid context
+ * @param position Position string (e.g., "bottom-left", "top-right")
+ */
+export declare function renderSummary<T>(ctx: GridContext<T>, position: string): string;

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

@@ -0,0 +1,55 @@
+import type { RowToolbarConfig, NormalizedToolbarItem } from '../../types.js';
+import type { GridContext } from '../types.js';
+export type ConnectorState = {
+    path: string | null;
+    arrowPos: {
+        x: number;
+        y: number;
+    } | null;
+    arrowDir: 'left' | 'right' | 'down' | 'up';
+};
+/**
+ * Convert toolbar config (strings or objects) to normalized items
+ */
+export declare function normalizeToolbarItems<T>(config: RowToolbarConfig<T>[]): NormalizedToolbarItem<T>[];
+/**
+ * Render toolbar HTML for a specific row
+ */
+export declare function renderToolbarHTML<T>(items: NormalizedToolbarItem<T>[], row: T, rowIndex: number): string;
+/**
+ * Open toolbar for a specific row
+ */
+export declare function openToolbar<T>(ctx: GridContext<T>, rowElement: HTMLElement, rowIndex: number, items: NormalizedToolbarItem<T>[], row: T, onItemClick: (item: NormalizedToolbarItem<T>) => void, cursorX?: number): void;
+/**
+ * Close the active toolbar
+ */
+export declare function closeToolbar(): void;
+/**
+ * Get currently active toolbar row index
+ */
+export declare function getActiveToolbarRowIndex(): number | null;
+/**
+ * Check if active toolbar belongs to a specific shadow root
+ */
+export declare function isToolbarOwnedBy(shadow: ShadowRoot): boolean;
+/**
+ * Check if toolbar is open for a specific row
+ */
+export declare function isToolbarOpenForRow(rowIndex: number): boolean;
+/**
+ * Get the row item reference for the active toolbar
+ */
+export declare function getActiveToolbarRowItem<T>(): T | null;
+/**
+ * Get the current connector state for rendering
+ */
+export declare function getConnectorState(): ConnectorState;
+/**
+ * Update connector path after row has moved
+ * Call this after a moveUp/moveDown action to draw the bracket-shaped connector
+ */
+export declare function updateConnector<T>(ctx: GridContext<T>, displayItems: T[]): void;
+/**
+ * Render the toolbar trigger button HTML
+ */
+export declare function renderTriggerButton(rowIndex: number, isActive: boolean): string;

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

@@ -0,0 +1 @@
+export { showTooltip, hideTooltip, createTooltip } from './tooltip.js';

package/dist/modules/tooltip/tooltip.d.ts

@@ -0,0 +1,13 @@
+import type { GridContext } from '../types.js';
+/**
+ * Show tooltip for an element
+ */
+export declare function showTooltip<T>(ctx: GridContext<T>, anchor: HTMLElement, text: string, delay?: number): void;
+/**
+ * Hide tooltip
+ */
+export declare function hideTooltip<T>(ctx: GridContext<T>, delay?: number): void;
+/**
+ * Create and position tooltip element
+ */
+export declare function createTooltip<T>(ctx: GridContext<T>, anchor: HTMLElement, text: string): void;

package/dist/modules/types.d.ts

@@ -0,0 +1,32 @@
+import type { WebGrid } from '../grid.js';
+import type { Column, EditorOption, EditorOptions } from '../types.js';
+/**
+ * GridElement context interface for module functions
+ * This is the subset of GridElement that modules need access to
+ */
+export interface GridContext<T = unknown> {
+    readonly shadow: ShadowRoot;
+    readonly grid: WebGrid<T>;
+    dropdownOpen: boolean;
+    dropdownOptions: EditorOption[];
+    highlightedIndex: number;
+    filterText: string;
+    isUserFiltering: boolean;
+    justSelected: boolean;
+    isOpeningDropdown: boolean;
+    isCommittingFromKeyboard: boolean;
+    searchDebounceTimer: ReturnType<typeof setTimeout> | null;
+    searchAbortController: AbortController | null;
+    isSearching: boolean;
+    tooltipElement: HTMLElement | null;
+    tooltipArrowElement: HTMLElement | null;
+    tooltipAnchor: HTMLElement | null;
+    tooltipShowTimer: ReturnType<typeof setTimeout> | null;
+    tooltipHideTimer: ReturnType<typeof setTimeout> | null;
+    readonly tooltipShowDelay: number;
+    readonly tooltipHideDelay: number;
+    escapeHtml(text: string): string;
+    getCurrentEditingColumn(): Column<T> | null;
+    getCurrentEditorOptions(): EditorOptions;
+    moveFocusAfterCommit(rowIndex: number, field: string, direction: 'down' | 'up' | 'next' | 'prev'): void;
+}

package/dist/types.d.ts

@@ -0,0 +1,311 @@
+export type EditorType = "text" | "number" | "checkbox" | "select" | "combobox" | "date" | "autocomplete" | "custom";
+export type EditTrigger = "click" | "dblclick" | "button" | "always" | "navigate";
+export type GridMode = "read-only" | "excel" | "input-matrix";
+export type ToggleVisibility = "always" | "on-focus";
+export type OptionsLoadTrigger = "immediate" | "oneditstart" | "ondropdownopen";
+export type DateOutputFormat = "date" | "iso" | "timestamp";
+export type EditStartSelection = "selectAll" | "cursorAtStart" | "cursorAtEnd";
+export type EditorOption = {
+    value: string | number | boolean;
+    label: string;
+    [key: string]: unknown;
+};
+export type OptionRenderContext = {
+    index: number;
+    isHighlighted: boolean;
+    isSelected: boolean;
+    isDisabled: boolean;
+};
+export type EditorOptions<T = unknown> = {
+    options?: EditorOption[];
+    loadOptions?: (row: T, field: string) => Promise<EditorOption[]>;
+    optionsLoadTrigger?: OptionsLoadTrigger;
+    valueMember?: string;
+    displayMember?: string;
+    searchMember?: string;
+    iconMember?: string;
+    subtitleMember?: string;
+    disabledMember?: string;
+    groupMember?: string;
+    getValueCallback?: (option: EditorOption) => string | number;
+    getDisplayCallback?: (option: EditorOption) => string;
+    getSearchCallback?: (option: EditorOption) => string;
+    getIconCallback?: (option: EditorOption) => string;
+    getSubtitleCallback?: (option: EditorOption) => string;
+    getDisabledCallback?: (option: EditorOption) => boolean;
+    getGroupCallback?: (option: EditorOption) => string;
+    renderOptionCallback?: (option: EditorOption, context: OptionRenderContext) => string;
+    onselect?: (option: EditorOption, row: T) => void;
+    allowEmpty?: boolean;
+    emptyLabel?: string;
+    maxLength?: number;
+    placeholder?: string;
+    pattern?: string;
+    inputMode?: "text" | "numeric" | "email" | "tel" | "url";
+    editStartSelection?: EditStartSelection;
+    min?: number;
+    max?: number;
+    step?: number;
+    decimalPlaces?: number;
+    allowNegative?: boolean;
+    trueValue?: unknown;
+    falseValue?: unknown;
+    minDate?: Date | string;
+    maxDate?: Date | string;
+    dateFormat?: string;
+    outputFormat?: DateOutputFormat;
+    initialOptions?: EditorOption[];
+    onSearchCallback?: (query: string, row: T, signal?: AbortSignal) => Promise<EditorOption[]>;
+    minSearchLength?: number;
+    debounceMs?: number;
+    multiple?: boolean;
+    maxSelections?: number;
+};
+export type CustomEditorContext<T> = {
+    value: unknown;
+    row: T;
+    rowIndex: number;
+    field: string;
+    commit: (newValue: unknown) => void;
+    cancel: () => void;
+};
+export type CellValidationState = {
+    rowIndex: number;
+    field: string;
+    error: string;
+};
+export type ValidationResult = {
+    valid: boolean;
+    message?: string;
+    transformedValue?: unknown;
+};
+export type BeforeCommitContext<T> = {
+    value: unknown;
+    oldValue: unknown;
+    row: T;
+    rowIndex: number;
+    field: string;
+};
+export type BeforeCommitResult = ValidationResult | boolean | string | null | undefined;
+export type CellRenderCallback<T> = (row: T, element: HTMLElement) => void;
+export type Column<T> = {
+    field: keyof T | string;
+    title: string;
+    headerInfo?: string;
+    sortable?: boolean;
+    filterable?: boolean;
+    width?: string;
+    minWidth?: string;
+    maxWidth?: string;
+    textOverflow?: 'wrap' | 'ellipsis';
+    align?: "left" | "center" | "right";
+    cellClass?: string;
+    cellClassCallback?: (value: unknown, row: T) => string | null;
+    formatCallback?: (value: unknown, row: T) => string;
+    templateCallback?: (row: T) => string;
+    renderCallback?: CellRenderCallback<T>;
+    editable?: boolean;
+    editor?: EditorType;
+    editTrigger?: EditTrigger;
+    dropdownToggleVisibility?: ToggleVisibility;
+    openDropdownOnEnter?: boolean;
+    editorOptions?: EditorOptions<T>;
+    validateCallback?: (value: unknown, row: T) => string | null | Promise<string | null>;
+    beforeCommitCallback?: (context: BeforeCommitContext<T>) => BeforeCommitResult | Promise<BeforeCommitResult>;
+    cellEditCallback?: (context: CustomEditorContext<T>) => void;
+    showEditButton?: boolean;
+    tooltipMember?: string;
+    tooltipCallback?: (value: unknown, row: T) => string | null;
+    beforeCopyCallback?: (value: unknown, row: T) => string;
+    beforePasteCallback?: (value: string, row: T) => unknown;
+};
+export type RowChangeDetail<T> = {
+    row: T;
+    draftRow: T;
+    rowIndex: number;
+    field: string;
+    oldValue: unknown;
+    newValue: unknown;
+    isValid: boolean;
+    validationError?: string | null;
+};
+export type PredefinedToolbarItemType = 'add' | 'delete' | 'duplicate' | 'moveUp' | 'moveDown';
+export type RowToolbarItem<T> = {
+    id: string;
+    icon: string;
+    title: string;
+    label?: string;
+    row?: number;
+    group?: number;
+    type?: PredefinedToolbarItemType;
+    danger?: boolean;
+    disabled?: boolean | ((row: T, rowIndex: number) => boolean);
+    onclick?: (detail: {
+        row: T;
+        rowIndex: number;
+    }) => void | Promise<void>;
+};
+export type RowToolbarConfig<T> = PredefinedToolbarItemType | RowToolbarItem<T>;
+export type NormalizedToolbarItem<T> = Required<Pick<RowToolbarItem<T>, 'id' | 'icon' | 'title' | 'row' | 'group'>> & Omit<RowToolbarItem<T>, 'id' | 'icon' | 'title' | 'row' | 'group'>;
+export type ToolbarClickDetail<T> = {
+    item: NormalizedToolbarItem<T>;
+    rowIndex: number;
+    row: T;
+};
+export type RowActionType = PredefinedToolbarItemType;
+export type RowActionClickDetail<T> = {
+    action: RowActionType;
+    rowIndex: number;
+    row: T;
+};
+export type ContextMenuContext<T> = {
+    row: T;
+    rowIndex: number;
+    colIndex: number;
+    column: Column<T>;
+    cellValue: unknown;
+};
+export type ContextMenuItem<T> = {
+    id: string;
+    label: string | ((context: ContextMenuContext<T>) => string);
+    icon?: string | ((context: ContextMenuContext<T>) => string);
+    disabled?: boolean | ((context: ContextMenuContext<T>) => boolean);
+    visible?: boolean | ((context: ContextMenuContext<T>) => boolean);
+    danger?: boolean;
+    dividerBefore?: boolean;
+    onclick?: (context: ContextMenuContext<T>) => void | Promise<void>;
+};
+export type QuickGridProps<T> = {
+    items: T[];
+    columns: Column<T>[];
+    sortable?: boolean;
+    filterable?: boolean;
+    pageable?: boolean;
+    pageSize?: number;
+    striped?: boolean;
+    hoverable?: boolean;
+    showRowNumbers?: boolean;
+    class?: string;
+    style?: string;
+    customStylesCallback?: () => string;
+    rowClassCallback?: (row: T, rowIndex: number) => string | null;
+    sort?: SortState[];
+    currentPage?: number;
+    totalItems?: number;
+    showPagination?: boolean | 'auto';
+    pageSizes?: number[];
+    paginationPosition?: string;
+    paginationLabelsCallback?: PaginationLabelsCallback;
+    paginationLayout?: string;
+    summaryPosition?: string;
+    summaryContentCallback?: SummaryContentCallback<T>;
+    summaryInline?: boolean;
+    editable?: boolean;
+    editTrigger?: EditTrigger;
+    mode?: GridMode;
+    dropdownToggleVisibility?: ToggleVisibility;
+    dropdownShowOnFocus?: boolean;
+    openDropdownOnEnter?: boolean;
+    checkboxAlwaysEditable?: boolean;
+    invalidCells?: CellValidationState[];
+    showRowToolbar?: boolean;
+    rowToolbar?: RowToolbarConfig<T>[];
+    toolbarAlign?: 'center' | 'top';
+    toolbarTopPosition?: 'start' | 'center' | 'end' | 'cursor';
+    toolbarTrigger?: 'hover' | 'click' | 'button';
+    showRowActions?: boolean;
+    rowActions?: RowToolbarConfig<T>[];
+    contextMenu?: ContextMenuItem<T>[];
+    oncontextmenuopen?: (context: ContextMenuContext<T>) => void;
+    virtualScroll?: boolean;
+    virtualScrollThreshold?: number;
+    virtualScrollRowHeight?: number;
+    virtualScrollBuffer?: number;
+    infiniteScroll?: boolean;
+    infiniteScrollThreshold?: number;
+    hasMoreItems?: boolean;
+    onrowchange?: (detail: RowChangeDetail<T>) => void;
+    onroweditstart?: (detail: {
+        row: T;
+        rowIndex: number;
+        field: string;
+    }) => void;
+    onroweditcancel?: (detail: {
+        row: T;
+        rowIndex: number;
+        field: string;
+    }) => void;
+    onvalidationerror?: (detail: {
+        row: T;
+        rowIndex: number;
+        field: string;
+        error: string;
+    }) => void;
+    ontoolbarclick?: (detail: ToolbarClickDetail<T>) => void;
+    onrowaction?: (detail: RowActionClickDetail<T>) => void;
+    ondatarequest?: (detail: DataRequestDetail) => void;
+    onrowdelete?: (detail: {
+        rowIndex: number;
+        row: T;
+    }) => void;
+};
+export type EditingCell = {
+    rowIndex: number;
+    field: string;
+    initialSearchQuery?: string;
+    cursorPosition?: number;
+} | null;
+export type FocusedCell = {
+    rowIndex: number;
+    colIndex: number;
+} | null;
+export type SortDirection = "asc" | "desc";
+export type ToolbarRowGroup<T> = {
+    rowNum: number;
+    groups: {
+        groupNum: number;
+        items: NormalizedToolbarItem<T>[];
+    }[];
+};
+export type PopupPosition = 'left' | 'right' | 'top';
+export type ConnectorArrowDir = 'right' | 'left' | 'down';
+export type SortState = {
+    column: string;
+    direction: SortDirection;
+};
+export type DataRequestTrigger = 'sort' | 'page' | 'pageSize' | 'init' | 'loadMore';
+export type DataRequestMode = 'replace' | 'append';
+export type DataRequestDetail = {
+    sort: SortState[];
+    page: number;
+    pageSize: number;
+    trigger: DataRequestTrigger;
+    mode: DataRequestMode;
+    skip: number;
+};
+export type PaginationPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+export type PaginationLabels = {
+    first: string;
+    previous: string;
+    next: string;
+    last: string;
+    pageInfo: string;
+    itemCount: string;
+    perPage: string;
+};
+export type PaginationLabelsContext = {
+    currentPage: number;
+    totalPages: number;
+    totalItems: number;
+    pageSize: number;
+};
+export type PaginationLabelsCallback = (context: PaginationLabelsContext) => Partial<PaginationLabels>;
+export type SummaryContext<T> = {
+    items: T[];
+    allItems: T[];
+    totalItems: number;
+    currentPage: number;
+    pageSize: number;
+    metadata: unknown;
+};
+export type SummaryContentCallback<T> = (context: SummaryContext<T>) => string;