@reforgium/data-grid 1.0.2 → 1.1.0

package/types/reforgium-data-grid.d.ts

@@ -1,230 +1,1038 @@
 import * as _angular_core from '@angular/core';
 import { TemplateRef, ElementRef } from '@angular/core';
 
+/**
+ * Directive for defining type-specific cell templates in a data grid.
+ *
+ * This directive allows developers to create custom cell renderers for specific data types
+ * within the data grid component. It binds a template to a type identifier, enabling
+ * the grid to dynamically select and render the appropriate template based on column type.
+ *
+ * Example usage:
+ * ```html
+ * <ng-template reDataGridTypeCell="date" let-data>
+ *   {{ data.value | date }}
+ * </ng-template>
+ * ```
+ *
+ * The directive captures the template reference and makes it available to the parent
+ * data grid component for rendering cells of the specified type.
+ */
 declare class DataGridTypeCellTemplateDirective {
+    /**
+     * The type identifier for this cell template.
+     *
+     * Specifies which data type this template should be used for.
+     * When the data grid encounters a column with a matching type,
+     * it will use this template to render cells in that column.
+     *
+     * @default ''
+     */
     type: _angular_core.InputSignal<string>;
+    /**
+     * Reference to the template defined in the directive.
+     *
+     * This template will be rendered for each cell of the matching type,
+     * receiving `RenderTemplateData` as its context with cell-specific information.
+     */
     tpl: TemplateRef<any>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DataGridTypeCellTemplateDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DataGridTypeCellTemplateDirective, "ng-template[ssDataGridTypeCell]", never, { "type": { "alias": "ssDataGridTypeCell"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DataGridTypeCellTemplateDirective, "ng-template[reDataGridTypeCell]", never, { "type": { "alias": "reDataGridTypeCell"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+declare class DataGridCellTemplateDirective {
+    key: _angular_core.InputSignal<string>;
+    /**
+     * The injected template reference containing the custom cell template.
+     * The template context is of the type `DataGridCellTemplateDirective`.
+     */
+    tpl: TemplateRef<any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DataGridCellTemplateDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DataGridCellTemplateDirective, "ng-template[reDataGridCell]", never, { "key": { "alias": "reDataGridCell"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Directive for defining custom header templates in data grid columns.
+ *
+ * This directive allows you to specify a custom template for rendering column headers
+ * in the data grid. The template is associated with a column key and receives
+ * header-specific context data.
+ *
+ * @example
+ * ```html
+ * <ng-template reDataGridHeader="username" let-header>
+ *   <div class="custom-header">{{ header.label }}</div>
+ * </ng-template>
+ * ```
+ */
 declare class DataGridHeaderTemplateDirective {
+    /**
+     * The column key this header template is associated with.
+     * Uses the `reDataGridHeader` directive attribute as an alias.
+     * Defaults to an empty string if not provided.
+     */
     key: _angular_core.InputSignal<string>;
+    /**
+     * The injected template reference containing the custom header template.
+     * The template context is of the type `HeaderTemplateData`.
+     */
     tpl: TemplateRef<any>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DataGridHeaderTemplateDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DataGridHeaderTemplateDirective, "ng-template[ssDataGridHeader]", never, { "key": { "alias": "ssDataGridHeader"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DataGridHeaderTemplateDirective, "ng-template[reDataGridHeader]", never, { "key": { "alias": "reDataGridHeader"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+/**
+ * Directive for providing a custom template to display when the data grid has no data.
+ *
+ * Used as a structural directive on `<ng-template>` elements within data grid components.
+ * The template receives a boolean context value indicating the empty state.
+ *
+ * Example:
+ * ```html
+ * <ng-template reDataGridEmpty let-isEmpty>
+ *   <div *ngIf="isEmpty">No data available</div>
+ * </ng-template>
+ * ```
+ *
+ * Template context:
+ * - `$implicit: boolean` — indicates whether the grid is in an empty state
+ */
 declare class DataGridCellEmptyDirective {
     tpl: TemplateRef<any>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DataGridCellEmptyDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DataGridCellEmptyDirective, "ng-template[ssDataGridEmpty]", never, {}, {}, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DataGridCellEmptyDirective, "ng-template[reDataGridEmpty]", never, {}, {}, never, never, true, never>;
 }
+/**
+ * Directive for providing a custom template to display when the data grid is loading data.
+ *
+ * Used as a structural directive on `<ng-template>` elements within data grid components.
+ * The template receives a boolean context value indicating the loading state.
+ *
+ * Example:
+ * ```html
+ * <ng-template reDataGridLoading let-isLoading>
+ *   <div *ngIf="isLoading">Loading...</div>
+ * </ng-template>
+ * ```
+ *
+ * Template context:
+ * - `$implicit: boolean` — indicates whether the grid is in loading state
+ */
 declare class DataGridCellLoadingDirective {
     tpl: TemplateRef<any>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DataGridCellLoadingDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DataGridCellLoadingDirective, "ng-template[ssDataGridLoading]", never, {}, {}, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DataGridCellLoadingDirective, "ng-template[reDataGridLoading]", never, {}, {}, never, never, true, never>;
+}
+
+declare class DataGridSortIconDirective {
+    tpl: TemplateRef<any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DataGridSortIconDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DataGridSortIconDirective, "ng-template[reDataGridSortIcon]", never, {}, {}, never, never, true, never>;
+}
+declare class DataGridExpanderIconDirective {
+    tpl: TemplateRef<any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DataGridExpanderIconDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DataGridExpanderIconDirective, "ng-template[reDataGridExpanderIcon]", never, {}, {}, never, never, true, never>;
+}
+
+declare class DataGridPaginator {
+    current: _angular_core.InputSignalWithTransform<number, string | number | undefined>;
+    totalElements: _angular_core.InputSignalWithTransform<number, string | number | undefined>;
+    pageSize: _angular_core.InputSignalWithTransform<number, string | number | undefined>;
+    maxShowPages: _angular_core.InputSignalWithTransform<number, string | number | undefined>;
+    pageChange: _angular_core.OutputEmitterRef<number>;
+    totalPages: _angular_core.Signal<number>;
+    pages: _angular_core.Signal<number[]>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DataGridPaginator, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DataGridPaginator, "re-data-grid-paginator", never, { "current": { "alias": "current"; "required": false; "isSignal": true; }; "totalElements": { "alias": "totalElements"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "maxShowPages": { "alias": "maxShowPages"; "required": false; "isSignal": true; }; }, { "pageChange": "pageChange"; }, never, never, true, never>;
 }
 
+/**
+ * Represents a key of an object that is also a string, or any string.
+ * Used for identifying data properties in rows.
+ */
 type DataKey<Data> = (keyof Data & string) | string;
+/**
+ * Function type that resolves a value of type `Return` from an argument of type `Arg`.
+ * Often used to transform row data or extract specific properties.
+ */
 type KeyResolver<Arg = AnyType, Return = string> = (arg: Arg) => Return;
+/**
+ * Union type for row identification.
+ * Can be either a property key (string) or a resolver function.
+ */
 type RowKeyFn<Data> = DataKey<Data> | KeyResolver<Data, string | number>;
+/**
+ * Type alias for `any`.
+ */
 type AnyType = any;
+/**
+ * Represents an object with string keys and values of any type.
+ * Common base type for row data.
+ */
 type AnyDict = Record<string, AnyType>;
 
+/**
+ * Defines how pagination is displayed and handled in the data grid.
+ *
+ * - `'none'` - No pagination, all rows are displayed
+ * - `'pagination'` - Classic page-based pagination with page numbers
+ * - `'infinity'` - Infinite scroll pagination (load more on scroll)
+ */
 type GridPaginationMode = 'none' | 'pagination' | 'infinity';
+/**
+ * Position where a row can be pinned in the data grid.
+ *
+ * - `'top'` - Pin row at the top of the grid
+ * - `'bottom'` - Pin row at the bottom of the grid
+ */
 type GridPinnedPosition = 'top' | 'bottom';
+/**
+ * Row selection mode for the data grid.
+ *
+ * - `'single'` - Allow selecting only one row at a time
+ * - `'multi'` - Allow selecting multiple rows
+ * - `'none'` - Disable row selection
+ */
 type GridSelectMode = 'single' | 'multi' | 'none';
+/**
+ * Sort direction for grid columns.
+ *
+ * - `'asc'` - Ascending order (A to Z, 0 to 9)
+ * - `'desc'` - Descending order (Z to A, 9 to 0)
+ */
 type GridSortOrder = 'asc' | 'desc';
+/**
+ * Horizontal alignment options for grid cell content.
+ *
+ * - `'left'` - Align content to the left
+ * - `'center'` - Center align content
+ * - `'right'` - Align content to the right
+ */
 type GridCellAlign = 'left' | 'center' | 'right';
+/**
+ * Built-in cell renderer types for common data display formats.
+ *
+ * - `'plain'` - Display raw text value (default)
+ * - `'date'` - Format and display date values
+ * - `'number'` - Format and display numeric values
+ * - `'index'` - Display row index number
+ * - `'checkbox'` - Display checkbox for selection
+ */
 type GridCellRendererType = 'plain' | 'date' | 'number' | 'index' | 'checkbox';
+/**
+ * Array of column definitions for the data grid.
+ *
+ * @template Data - Type of data objects displayed in the grid rows
+ */
 type GridColumns<Data extends AnyDict = AnyDict> = GridColumn<Data>[];
+/**
+ * Array of pinned row definitions for the data grid.
+ *
+ * Pinned rows remain fixed at the top or bottom of the grid regardless of scrolling.
+ *
+ * @template Data - Type of data objects displayed in the grid rows
+ */
 type GridPinnedRows<Data extends AnyDict = AnyDict> = GridPinnedRow<Data>[];
+/**
+ * Union type representing grid selection configuration.
+ *
+ * Can be either a configuration with no selection enabled,
+ * or a configuration with single/multi selection enabled.
+ *
+ * @template Data - Type of data objects displayed in the grid rows
+ */
 type GridSelection<Data extends AnyDict = AnyDict> = _Selectless | _Selectfull<Data>;
+/**
+ * Selection configuration when row selection is disabled.
+ *
+ * When the mode is set to `'none'`, no additional configuration is required.
+ */
 type _Selectless = {
     mode: 'none';
 };
+/**
+ * Selection configuration when row selection is enabled (single or multi).
+ *
+ * Requires specifying which data property to use as the unique identifier
+ * for tracking selected rows. Optionally allows setting default selection.
+ *
+ * @template Data - Type of data objects displayed in the grid rows
+ */
 type _Selectfull<Data extends AnyDict> = {
+    /**
+     * Selection mode: `'single'` or `'multi'`.
+     */
     mode: Omit<GridSelectMode, 'none'>;
+    /**
+     * Data property to use as a unique identifier for selection.
+     */
     key: DataKey<Data>;
+    /**
+     * Optional array of initially selected row identifiers.
+     */
     defaultSelected?: DataKey<Data>[];
 };
+/**
+ * Configuration for a single pinned row in the data grid.
+ *
+ * Pinned rows remain fixed at the specified position (top or bottom)
+ * and can display static data or use a custom template for rendering.
+ *
+ * @template Data - Type of data objects displayed in the grid rows
+ */
 type GridPinnedRow<Data extends AnyDict = AnyDict> = {
+    /**
+     * Where to pin the row (`'top'` or `'bottom'`).
+     */
     position: GridPinnedPosition;
+    /**
+     * Relative display order when multiple rows are pinned at the same position.
+     */
     order?: number;
+    /**
+     * Static data or function returning data for the row.
+     */
     data: Partial<Data> | (() => Partial<Data>);
+    /**
+     * Optional Angular template for custom row rendering.
+     */
     rowTemplate?: TemplateRef<{
         $implicit: Partial<Data>;
     }>;
 };
+/**
+ * Union type representing different column definition variants.
+ *
+ * A column can use built-in renderers, custom value functions, or Angular templates
+ * for rendering cell content.
+ *
+ * @template Data - Type of data objects displayed in the grid rows
+ */
 type GridColumn<Data extends AnyDict = AnyDict> = _DefaultGridColumn<Data> | _ValuedGridColumn<Data> | _TemplatedGridColumn<Data>;
+/**
+ * Base properties shared by all column definition types.
+ *
+ * Contains configuration for column identification, header display,
+ * sizing, alignment, visibility, and behavior.
+ *
+ * @template Data - Type of data objects displayed in the grid rows
+ */
 type _BaseGridColumn<Data extends AnyDict = AnyDict> = {
+    /**
+     * Data property key this column displays.
+     */
     key: DataKey<Data>;
+    /**
+     * Optional alternative key for sorting (if different from a display key).
+     */
     sortKey?: string;
+    /**
+     * Column header text string.
+     */
     header: string;
+    /**
+     * Optional Angular template for custom header rendering.
+     * If provided, overrides the default text header.
+     */
     headerTemplate?: TemplateRef<HeaderTemplateData>;
+    /**
+     * Horizontal alignment of cell content.
+     */
     align?: GridCellAlign;
+    /**
+     * CSS class(es) to apply to cells.
+     * Can be a static string or a resolver function that returns a class string based on row data.
+     */
     cellClass?: KeyResolver<Data> | string;
+    /**
+     * Fixed column width in pixels.
+     */
     width?: number;
+    /**
+     * Minimum column width in pixels.
+     */
     minWidth?: number;
+    /**
+     * Maximum column width in pixels.
+     */
     maxWidth?: number;
+    /**
+     * Flex grow factor for flexible width columns.
+     */
     flex?: number;
+    /**
+     * Whether the column is disabled.
+     */
     disabled?: boolean;
+    /**
+     * Whether the column is visible.
+     */
     visible?: boolean;
+    /**
+     * Whether the column remains fixed during the horizontal scroll.
+     */
     sticky?: boolean;
+    /**
+     * Data key to use for expanding/collapsing row details.
+     */
     expandBy?: DataKey<Data>;
 };
+/**
+ * Column definition using built-in cell renderer types.
+ *
+ * Extends the base column with an optional renderer type specification.
+ * If no type is specified, defaults to `'plain'` renderer.
+ *
+ * @template Data - Type of data objects displayed in the grid rows
+ */
 type _DefaultGridColumn<Data extends AnyDict = AnyDict> = _BaseGridColumn<Data> & {
+    /**
+     * Built-in renderer type for formatting cell values.
+     */
     type?: GridCellRendererType;
+    /**
+     * Optional configuration or formatting options passed to the renderer (e.g., date/number format). *[NEW in 1.1.0]*
+     */
+    typeParams?: AnyType;
 };
+/**
+ * Column definition using a custom value renderer function.
+ *
+ * Allows custom logic for transforming row data into display values.
+ * Requires a tracking function for change detection optimization.
+ *
+ * @template Data - Type of data objects displayed in the grid rows
+ */
 type _ValuedGridColumn<Data extends AnyDict = AnyDict> = _BaseGridColumn<Data> & {
+    /**
+     * Function returning unique identifier for the row (for change detection).
+     */
     track: (row: Data) => string;
+    /**
+     * Function that resolves cell display value from row data.
+     */
     value: GridCellRenderer<Data>;
 };
+/**
+ * Column definition using an Angular template for cell rendering.
+ *
+ * Provides maximum flexibility by allowing custom HTML templates
+ * with full access to row data, column config, and cell context.
+ * Requires a tracking function for change detection optimization.
+ *
+ * @template Data - Type of data objects displayed in the grid rows
+ */
 type _TemplatedGridColumn<Data extends AnyDict = AnyDict> = _BaseGridColumn<Data> & {
+    /**
+     * Function returning unique identifier for the row (for change detection).
+     */
     track: (row: Data) => string;
+    /**
+     * Angular TemplateRef for rendering cell content.
+     */
     renderTemplate: TemplateRef<RenderTemplateData<Data>>;
 };
+/**
+ * Type for custom cell value resolver functions.
+ *
+ * Function that takes row data and returns a string or number for display.
+ * Used in `_ValuedGridColumn` to customize how cell values are extracted and formatted.
+ *
+ * @template Data - Type of data objects displayed in the grid rows
+ */
 type GridCellRenderer<Data> = KeyResolver<Data, string | number>;
+/**
+ * Context data provided to the header template.
+ *
+ * Implicit value is the header text string.
+ */
 type HeaderTemplateData = {
+    /**
+     * The column header text string.
+     */
     $implicit: string;
 };
+/**
+ * Context data provided to cell render template.
+ *
+ * Provides comprehensive access to cell, row, and column information
+ * for use within custom Angular templates.
+ *
+ * @template Data - Type of data objects displayed in the grid rows
+ */
 type RenderTemplateData<Data extends AnyDict = AnyDict> = {
+    /**
+     * The cell's display value as string (implicit context).
+     */
     $implicit: string;
+    /**
+     * The cell's display value as string (same as $implicit).
+     */
     value: string;
+    /**
+     * Complete data object for the current row.
+     */
     row: Data;
+    /**
+     * Column definition configuration object.
+     */
     col: GridColumn<Data>;
+    /**
+     * Zero-based row index in the current data set.
+     */
     index: number;
 };
 
+/**
+ * Event emitted when pagination changes in the data grid.
+ *
+ * Contains information about the current page, page size, and optional sorting parameters.
+ * Property names are compatible with PrimeNG table component conventions.
+ */
 type GridPageChangeEvent = {
     page: number;
-    /** `pageSize`, для совместимости с primeNg назван `rows` */
+    /** `pageSize`, named `rows` for compatibility with PrimeNG */
     rows: number;
-    /** для совместимости с primeNg */
+    /** for compatibility with PrimeNG */
     sortField?: string;
-    /** для совместимости с primeNg */
+    /** for compatibility with PrimeNG */
     sortOrder?: GridSortOrder;
 };
+/**
+ * Event emitted when column sorting changes in the data grid.
+ *
+ * Contains information about the sorted column key and the sort direction.
+ * The `key` property is type-safe and corresponds to actual data object keys.
+ *
+ * @template Data - Type of data objects in the grid
+ */
 type GridSortEvent<Data = AnyDict> = {
     key: DataKey<Data>;
     order?: GridSortOrder;
 };
+/**
+ * Event emitted when row selection changes in the data grid.
+ *
+ * Contains an array of selected values, which can be either string identifiers
+ * or actual data values from the specified key column.
+ *
+ * @template Data - Type of data objects in the grid
+ */
 type GridSelectEvent<Data extends AnyDict = AnyDict> = {
     selected: (string | Data[DataKey<Data>])[];
 };
+/**
+ * Event emitted when a row is clicked in the data grid.
+ *
+ * Provides access to the clicked row's data object and its numeric index position
+ * within the current grid data set.
+ *
+ * @template Data - Type of data objects in the grid
+ */
 type GridRowClickEvent<Data extends AnyDict = AnyDict> = {
     row: Data;
     index: number;
 };
+/**
+ * Event emitted when a specific cell is clicked in the data grid.
+ *
+ * Provides detailed information about the clicked cell, including the row data,
+ * column configuration, and the row's numeric index position.
+ *
+ * @template Data - Type of data objects in the grid
+ */
 type GridCellClickEvent<Data extends AnyDict = AnyDict> = {
     row: Data;
     col: GridColumn<Data>;
     index: number;
 };
 
+/**
+ * View model for the data grid component.
+ *
+ * Manages grid state including column layout, sticky positioning, scrollbar calculations,
+ * and pinned rows. Automatically recomputes column widths based on container size and
+ * handles sticky column offsets for left and right pinned columns.
+ *
+ * @template Data - Type of data objects in the grid, must extend AnyDict
+ *
+ * @example
+ * ```typescript
+ * const gridVm = inject(DataGridVm<MyDataType>);
+ * gridVm.columns.set([{ key: 'name', title: 'Name' }]);
+ * gridVm.containerWidth.set(800);
+ * ```
+ */
 declare class DataGridVm<Data extends AnyDict> {
     #private;
+    /**
+     * Reference to the scrollable container element.
+     *
+     * Used for scrollbar calculations and scroll position management.
+     */
     scrollEl: _angular_core.WritableSignal<ElementRef<HTMLDivElement> | undefined>;
+    /**
+     * Array of column configurations for the grid.
+     *
+     * Defines all columns including their keys, titles, sticky positioning, and widths.
+     * Value is reactive and triggers column layout recalculation when changed.
+     */
     columns: _angular_core.WritableSignal<GridColumn<Data>[]>;
+    /**
+     * Array of pinned row configurations.
+     *
+     * Defines rows that remain fixed at the top or bottom of the grid during scrolling.
+     * Each row includes data, position ('top' or 'bottom'), and optional ordering.
+     */
     pinnedRows: _angular_core.WritableSignal<GridPinnedRow<Data>[]>;
+    /**
+     * Current width of the grid container in pixels.
+     *
+     * Used for column width calculations and layout adjustments.
+     * Value is reactive and triggers column layout recalculation when changed.
+     */
     containerWidth: _angular_core.WritableSignal<number>;
+    /**
+     * Flag indicating whether the custom scrollbar should be visible.
+     *
+     * Automatically computed based on content height vs. container height.
+     */
     scrollbarVisible: _angular_core.WritableSignal<boolean>;
+    /**
+     * Height of the scrollbar thumb in pixels.
+     *
+     * Proportional to the ratio of visible content to total content height.
+     */
     thumbHeightPx: _angular_core.WritableSignal<number>;
+    /**
+     * Top position of the scrollbar thumb in pixels.
+     *
+     * Corresponds to the current scroll position within the scrollable area.
+     */
     thumbTopPx: _angular_core.WritableSignal<number>;
+    /**
+     * Flag indicating whether the user is currently dragging the scrollbar thumb.
+     *
+     * Used to track active scroll drag interactions.
+     */
     dragging: boolean;
+    /**
+     * Map of global cell renderer templates by type.
+     *
+     * Stores reusable template references for different cell renderer types
+     * that can be shared across multiple columns.
+     */
     globalTypeCellTpls: Map<GridCellRendererType, TemplateRef<Data>>;
+    globalDataCellTpls: Map<string | keyof Data, TemplateRef<Data>>;
+    /**
+     * Computed an array of non-sticky columns to display in the scrollable area.
+     *
+     * Automatically splits columns into left-sticky, visible, and right-sticky groups,
+     * recomputes sticky offsets, and returns only the scrollable middle section.
+     * Recalculates whenever columns or container width changes.
+     */
     columnsToShow: _angular_core.Signal<GridColumn<Data>[]>;
+    /**
+     * Computed array of rows pinned to the top of the grid.
+     *
+     * Filters pinned rows by 'top' position and sorts them by order property.
+     * Rows with lower order values appear first.
+     */
     pinnedTop: _angular_core.Signal<GridPinnedRow<Data>[]>;
+    /**
+     * Computed array of rows pinned to the bottom of the grid.
+     *
+     * Filters pinned rows by 'bottom' position and sorts them by order property.
+     * Rows with lower order values appear first.
+     */
     pinnedBottom: _angular_core.Signal<GridPinnedRow<Data>[]>;
     constructor();
+    /**
+     * Returns the computed width for a column by its key.
+     *
+     * If the column width has not been calculated, returns the default column width.
+     *
+     * @param key - The unique identifier for the column
+     * @returns Width in pixels
+     */
     widthByKey: (key: string) => number;
+    /**
+     * Checks if a column is pinned to the left side of the grid.
+     *
+     * @param key - The unique identifier for the column
+     * @returns `true` if the column is sticky on the left, `false` otherwise
+     */
     isStickyLeft: (key: string) => boolean;
+    /**
+     * Checks if a column is pinned to the right side of the grid.
+     *
+     * @param key - The unique identifier for the column
+     * @returns `true` if the column is sticky on the right, `false` otherwise
+     */
     isStickyRight: (key: string) => boolean;
+    /**
+     * Returns the horizontal offset for a sticky column.
+     *
+     * Calculates the distance from the specified edge (left or right) where the column
+     * should be positioned. Returns `null` if the column is not sticky in the given direction.
+     *
+     * @param key - The unique identifier for the column
+     * @param dir - The direction to check ('left' or 'right')
+     * @returns Offset in pixels, or `null` if not sticky in the specified direction
+     */
     stickyOffset: (key: string, dir: "left" | "right") => number | null;
+    /**
+     * Calculates and updates scrollbar state based on the current scroll position.
+     *
+     * Computes whether the scrollbar should be visible, and if so, determines
+     * the thumb height and position based on scroll height, client height, and scroll position.
+     * Updates the corresponding signal properties with the calculated values.
+     */
     calcScrollbar(): void;
     private recomputeStickyOffsets;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DataGridVm<any>, never>;
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<DataGridVm<any>>;
 }
 
+/**
+ * Service class for managing row selection in a data grid.
+ *
+ * Handles selection state and operations for grid rows, supporting multiple selection modes
+ * (none, single, multi). Provides reactive signals for tracking selected items and
+ * computed values for selection state.
+ *
+ * @template Data - The type of data objects in the grid, must extend `AnyDict`.
+ *
+ * @example
+ * ```typescript
+ * const selector = new Selector<User>();
+ * selector.data.set(users);
+ * selector.selection.set({ mode: 'multi', key: 'id' });
+ * selector.select(users[0]);
+ * console.log(selector.selectedKeys()); // ['user-id']
+ * ```
+ */
 declare class Selector<Data extends AnyDict> {
+    /**
+     * Signal containing the full dataset of grid rows.
+     *
+     * This signal holds all data items that can be selected.
+     * Defaults to an empty array.
+     */
     data: _angular_core.WritableSignal<Data[]>;
+    /**
+     * Signal containing the current selection configuration.
+     *
+     * Defines the selection mode and the key property used for identifying rows.
+     * Defaults to `{ mode: 'none' }` which disables selection.
+     */
     selection: _angular_core.WritableSignal<GridSelection>;
+    /**
+     * Signal containing the array of currently selected row keys.
+     *
+     * Stores the keys of all selected rows based on the key property
+     * defined in the selection configuration.
+     * Defaults to an empty array.
+     */
     selectedKeys: _angular_core.WritableSignal<DataKey<Data>[]>;
+    /**
+     * Computed signal indicating the overall selection state of all rows.
+     *
+     * Returns:
+     * - `true` if all rows are selected
+     * - `false` if no rows are selected
+     * - `'mixed'` if some but not all rows are selected
+     *
+     * Useful for implementing "select all" checkbox with indeterminate state.
+     */
     isAllSelected: _angular_core.Signal<boolean | "mixed">;
+    /**
+     * Checks whether a specific row is currently selected.
+     *
+     * Compares the row's key value against the list of selected keys.
+     * Returns `false` if selection mode is 'none' or key is not configured.
+     *
+     * @param row - The data row to check selection status for.
+     * @returns `true` if the row is selected, `false` otherwise.
+     */
     isSelected(row: Data): boolean;
+    /**
+     * Toggles selection of all rows.
+     *
+     * If all rows are selected, deselects all.
+     * If no rows or some rows are selected, selects all.
+     *
+     * This method only works in `'multi'` selection mode and throws an error
+     * if called in any other mode.
+     *
+     * @returns The updated array of selected keys.
+     * @throws {Error} If selection mode is not `'multi'`.
+     */
     selectAll(): DataKey<Data>[];
+    /**
+     * Selects or deselects a specific row.
+     *
+     * Behavior depends on the selection mode:
+     * - In `'single'` mode: replaces current selection with the specified row.
+     * - In `'multi'` mode: toggles the row's selection state (adds if not selected, removes if selected).
+     * - In `'none'` mode: throws an error.
+     *
+     * @param row - The data row to select or deselect.
+     * @returns The updated array of selected keys after the operation.
+     * @throws {Error} If selection mode is `'none'`.
+     */
     select(row: Data): (string | Data[DataKey<Data>])[];
 }
 
+/**
+ * Data grid component with virtual scrolling, sorting, selection, and pagination support.
+ *
+ * Provides high-performance rendering of large datasets with features like:
+ * - Virtual scrolling for efficient DOM management
+ * - Column sorting and expandable columns
+ * - Row selection (single/multiple)
+ * - Pagination modes: none, pagination, or infinite scroll
+ * - Pinned rows
+ * - Custom cell and header templates
+ *
+ * @example
+ * ```html
+ * <re-data-grid
+ *   [data]="users"
+ *   [columns]="columns"
+ *   [selection]="{ mode: 'multiple' }"
+ *   (sortChange)="onSort($event)"
+ * />
+ * ```
+ */
 declare class DataGrid<Data extends AnyDict> {
-    /** Массив данных для отображения в таблице */
+    /**
+     * Array of data to display in the table.
+     *
+     * Each item represents a single row. The component will efficiently render
+     * only visible rows using virtual scrolling.
+     */
     data: _angular_core.InputSignal<Data[]>;
-    /** Конфигурация колонок таблицы */
+    /**
+     * Column configuration for the table.
+     *
+     * Defines how each column should be rendered, sorted, and styled.
+     * Supports custom templates, sorting keys, and expandable columns.
+     */
     columns: _angular_core.InputSignal<GridColumn<Data>[]>;
-    /** Режим пагинации: 'none', 'pagination' или 'infinity' */
+    /**
+     * Pagination mode: 'none', 'pagination', or 'infinity'.
+     *
+     * - `none` - No pagination, all data is rendered
+     * - `pagination` - Classic page-based pagination with fixed page size
+     * - `infinity` - Infinite scroll mode, loads more data as user scrolls
+     */
     mode: _angular_core.InputSignal<GridPaginationMode>;
-    /** Массив закрепленных строк */
+    /**
+     * Array of pinned rows that remain visible at the top or bottom.
+     *
+     * Pinned rows stay fixed while the rest of the content scrolls.
+     * Useful for totals, summaries, or always-visible items.
+     */
     pinnedRows: _angular_core.InputSignal<GridPinnedRow<Data>[]>;
-    /** Добавить ли номерную колонку */
+    /**
+     * Whether to add an index column showing row numbers.
+     *
+     * When enabled, it automatically adds a column displaying sequential row numbers.
+     */
     hasIndexColumn: _angular_core.InputSignalWithTransform<boolean, string | number | undefined>;
-    /** Поддержка выбора строк */
+    /**
+     * Row selection configuration.
+     *
+     * Controls whether users can select rows and in what mode:
+     * - `{ mode: 'none' }` - No selection
+     * - `{ mode: 'single' }` - Single row selection
+     * - `{ mode: 'multi' }` - Multiple row selection with checkboxes
+     *
+     * When selection is enabled, a `key` must be provided to identify rows.
+     */
     selection: _angular_core.InputSignal<GridSelection>;
-    /** Количество элементов на странице */
+    /**
+     * Number of items per page.
+     *
+     * Used in pagination and infinity scroll modes to control
+     * how many rows are loaded at once. Default is 20.
+     */
     pageSize: _angular_core.InputSignalWithTransform<number, string | number | undefined>;
-    /** Высота строки в пикселях */
+    /**
+     * Height of each row in pixels.
+     *
+     * Used for virtual scrolling calculations. Must be consistent
+     * across all rows for accurate scrolling. Default is 40.
+     */
     rowHeight: _angular_core.InputSignalWithTransform<number, string | number | undefined>;
-    /** Заполнять ли доступную высоту */
-    fillHeight: _angular_core.InputSignalWithTransform<boolean, string | boolean | undefined>;
-    /** Размер буфера виртуального скролла */
+    /**
+     * Grid height configuration.
+     *
+     * - `number` - Fixed height in pixels
+     * - `'full'` - Fill container height (100%), can be managed by host component style
+     * - `'default'` - Height by CSS var (--re-data-grid-height)
+     */
+    height: _angular_core.InputSignal<number | "full" | "default">;
+    /**
+     * Size of the virtual scroll buffer.
+     *
+     * Number of extra rows to render above and below the viewport
+     * to reduce flickering during fast scrolling. Default is 6.
+     */
     virtualBuffer: _angular_core.InputSignal<number>;
-    /** Состояние загрузки данных */
+    /**
+     * Loading state indicator.
+     *
+     * When true, displays loading template instead of data.
+     * Useful during async data fetching operations.
+     */
     loading: _angular_core.InputSignalWithTransform<boolean, string | boolean | undefined>;
-    /** Функция или имя свойства для получения уникального ключа строки */
+    /**
+     * Function or property name for obtaining a unique row key.
+     *
+     * Used for efficient change detection and row tracking.
+     * Can be a property name (string) or a function that returns a unique identifier.
+     */
     rowKey: _angular_core.InputSignal<RowKeyFn<Data> | undefined>;
-    /** Начинать отсчёт пагинации с 1 (false) или 0 (true) */
+    /**
+     * Whether to start a page count from 0 (true) or 1 (false).
+     *
+     * Controls the numbering scheme for pagination events.
+     * Default is true (0-based indexing).
+     */
     pageStartFromZero: _angular_core.InputSignalWithTransform<boolean, string | boolean | undefined>;
-    /** Событие запроса данных */
+    /**
+     * Event emitted when requesting data for a new page.
+     *
+     * Fired in pagination and infinity scroll modes when the user navigates
+     * to a different page or scrolls near the end of current data.
+     *
+     * @example
+     * ```typescript
+     * onPageChange(event: GridPageChangeEvent) {
+     *   this.loadData(event.page, event.rows);
+     * }
+     * ```
+     */
     pageChange: _angular_core.OutputEmitterRef<GridPageChangeEvent>;
-    /** Событие изменения сортировки */
+    /**
+     * Event emitted when sort order changes.
+     *
+     * Fired when a user clicks on a sortable column header.
+     * Contains the sort key and direction (asc/desc).
+     *
+     * @example
+     * ```typescript
+     * onSortChange(event: GridSortEvent<User>) {
+     *   this.data = sortBy(this.data, event.key, event.order);
+     * }
+     * ```
+     */
     sortChange: _angular_core.OutputEmitterRef<GridSortEvent<Data>>;
-    /** Событие изменения выбранных строк */
+    /**
+     * Event emitted when selected rows change.
+     *
+     * Fired when a user selects or deselects rows.
+     * Contains an array of currently selected row keys.
+     */
     selectChange: _angular_core.OutputEmitterRef<GridSelectEvent<Data>>;
-    /** Событие клика по строке */
+    /**
+     * Event emitted when a row is clicked.
+     *
+     * Contains the clicked row data and its index.
+     */
     rowClick: _angular_core.OutputEmitterRef<GridRowClickEvent<Data>>;
-    /** Событие клика по ячейке */
+    /**
+     * Event emitted when a cell is clicked.
+     *
+     * Contains the clicked row, column configuration, and row index.
+     */
     cellClick: _angular_core.OutputEmitterRef<GridCellClickEvent<Data>>;
     vm: DataGridVm<Data>;
     selector: Selector<Data>;
     private rootEl;
     private scrollEl;
     private headerEl;
-    private cellSlotRefs;
+    private cellTypedSlotRefs;
+    private cellDataSlotRefs;
     private headerSlotRefs;
     private emptySlotRefs;
     private loadingSlotRefs;
-    protected emptyTpl: _angular_core.Signal<DataGridCellEmptyDirective | null>;
-    protected loadingTpl: _angular_core.Signal<DataGridCellLoadingDirective | null>;
+    private sortIcSlotRefs;
+    private expanderIcSlotRefs;
+    protected emptyTpl: _angular_core.Signal<DataGridCellEmptyDirective>;
+    protected loadingTpl: _angular_core.Signal<DataGridCellLoadingDirective>;
+    protected sortTpl: _angular_core.Signal<DataGridSortIconDirective | undefined>;
+    protected expanderTpl: _angular_core.Signal<DataGridExpanderIconDirective | undefined>;
     protected visibleRows: _angular_core.WritableSignal<Data[]>;
     protected startIndex: number;
     protected headerHeight: _angular_core.WritableSignal<number>;
     protected expanderMap: _angular_core.WritableSignal<Map<DataKey<Data>, boolean>>;
     protected extendedColumns: _angular_core.Signal<GridColumn<Data>[]>;
+    /**
+     * Computed CSS height value based on height setting.
+     */
+    styleHeight: _angular_core.Signal<string>;
     private hideSbTimeout?;
     currentSortField?: string;
     currentSortOrder: GridSortOrder;
     private subscription;
     private observer;
     constructor();
-    protected get styleHeight(): string | null;
     protected resolvePinnedData(pr: GridPinnedRow): Partial<Data>;
+    /**
+     * Handles column header click for sorting.
+     *
+     * Toggles sort order between ascending and descending for the clicked column.
+     * If a different column is clicked, it resets to ascending order.
+     * Emits sortChange event with the current sort state.
+     *
+     * @param col - Column configuration that was clicked
+     */
     protected onSort(col: GridColumn<Data>): void;
+    /**
+     * Handles cell click events.
+     *
+     * Emits cellClick event and handles row selection if selection mode is enabled.
+     * Updates the selection state and emits selectChange event accordingly.
+     *
+     * @param row - Data row that was clicked
+     * @param col - Column configuration of the clicked cell
+     * @param index - Row index in the dataset
+     */
     protected onCellClick(row: Data, col: GridColumn<Data>, index: number): void;
     protected isExpandable(column: GridColumn<Data>): boolean;
+    /**
+     * Handles column expand/collapse toggle.
+     *
+     * Toggles the expanded state of a column and updates the visibility
+     * of all dependent columns that reference this column via expandBy property.
+     *
+     * @param column - Column configuration to expand or collapse
+     */
     protected onExpand(column: GridColumn<Data>): void;
+    /**
+     * Handles vertical scroll events and updates visible rows.
+     *
+     * Implements virtual scrolling by calculating which rows should be rendered
+     * based on the current scroll position. Also handles infinite scroll data loading
+     * when the user scrolls near the end of available data.
+     *
+     * @param initial - Whether this is the initial scroll calculation
+     */
     protected onVerticalScroll(initial?: boolean): void;
     protected onHorizontalScroll(): void;
+    /**
+     * Handles mouse down event on scrollbar thumb for drag scrolling.
+     *
+     * Initiates dragging mode and sets up mouse move/up event listeners
+     * to track thumb position and update scroll position accordingly.
+     * Automatically cleans up listeners when dragging ends.
+     *
+     * @param e - Mouse down event from a scrollbar thumb element
+     */
     protected onThumbDown(e: MouseEvent): void;
     protected showScrollbar(): void;
     protected hideScrollbarSoon(delay?: number): void;
@@ -241,9 +1049,9 @@ declare class DataGrid<Data extends AnyDict> {
     private initObserver;
     private initExpander;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DataGrid<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DataGrid<any>, "re-data-grid", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "pinnedRows": { "alias": "pinnedRows"; "required": false; "isSignal": true; }; "hasIndexColumn": { "alias": "hasIndexColumn"; "required": false; "isSignal": true; }; "selection": { "alias": "selection"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "rowHeight": { "alias": "rowHeight"; "required": false; "isSignal": true; }; "fillHeight": { "alias": "fillHeight"; "required": false; "isSignal": true; }; "virtualBuffer": { "alias": "virtualBuffer"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "rowKey": { "alias": "rowKey"; "required": false; "isSignal": true; }; "pageStartFromZero": { "alias": "pageStartFromZero"; "required": false; "isSignal": true; }; }, { "pageChange": "pageChange"; "sortChange": "sortChange"; "selectChange": "selectChange"; "rowClick": "rowClick"; "cellClick": "cellClick"; }, ["cellSlotRefs", "headerSlotRefs", "emptySlotRefs", "loadingSlotRefs"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DataGrid<any>, "re-data-grid", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "pinnedRows": { "alias": "pinnedRows"; "required": false; "isSignal": true; }; "hasIndexColumn": { "alias": "hasIndexColumn"; "required": false; "isSignal": true; }; "selection": { "alias": "selection"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "rowHeight": { "alias": "rowHeight"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "virtualBuffer": { "alias": "virtualBuffer"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "rowKey": { "alias": "rowKey"; "required": false; "isSignal": true; }; "pageStartFromZero": { "alias": "pageStartFromZero"; "required": false; "isSignal": true; }; }, { "pageChange": "pageChange"; "sortChange": "sortChange"; "selectChange": "selectChange"; "rowClick": "rowClick"; "cellClick": "cellClick"; }, ["cellTypedSlotRefs", "cellDataSlotRefs", "headerSlotRefs", "emptySlotRefs", "loadingSlotRefs", "sortIcSlotRefs", "expanderIcSlotRefs"], never, true, never>;
 }
 
-export { DataGrid, DataGridCellEmptyDirective, DataGridCellLoadingDirective, DataGridHeaderTemplateDirective, DataGridTypeCellTemplateDirective };
+export { DataGrid, DataGridCellEmptyDirective, DataGridCellLoadingDirective, DataGridCellTemplateDirective, DataGridExpanderIconDirective, DataGridHeaderTemplateDirective, DataGridPaginator, DataGridSortIconDirective, DataGridTypeCellTemplateDirective };
 export type { GridCellClickEvent, GridCellRenderer, GridColumn, GridColumns, GridPageChangeEvent, GridPinnedRow, GridPinnedRows, GridRowClickEvent, GridSelectEvent, GridSelection, GridSortEvent };
 //# sourceMappingURL=reforgium-data-grid.d.ts.map