@dhtmlx/grid 9.3.12 → 9.4.1

package/codebase/types/ts-grid/sources/types.d.ts

@@ -18,7 +18,7 @@ import { PrefixSums } from "./helpers/PrefixSums";
 import { IBlockSelection, IBlockSelectionConfig } from "./modules/BlockSelection";
 import { IClipboard, IClipboardConfig } from "./modules/Clipboard";
 import { IHistory, IHistoryConfig } from "./modules/History";
-import { IComboFilterConfig, IContentList, IHeaderFilter, IInputFilterConfig } from "./ui/content";
+import { IComboFilterConfig, IContentList, IHeaderFilter, IInputFilterConfig, ISelectFilterConfig } from "./ui/content";
 import { ExportType, ICsvExportConfig, IXlsxExportConfig } from "./modules/Exporter";
 import { IDateFilterConfig, IProContentList, IProHeaderFilter } from "./ui/proContent";
 /**
@@ -110,8 +110,8 @@ export interface IGridConfig extends IDragConfig {
     height?: number | "auto";
     autoWidth?: boolean;
     rowHeight?: number;
-    headerRowHeight?: number;
-    footerRowHeight?: number;
+    headerRowHeight?: TFixedRowHeight;
+    footerRowHeight?: TFixedRowHeight;
     footerPosition?: IFooterPosition;
     leftSplit?: number;
     topSplit?: number;
@@ -126,6 +126,7 @@ export interface IGridConfig extends IDragConfig {
     css?: string;
     rowCss?: (row: IRow) => string;
     exportStyles?: boolean | string[];
+    ariaLabel?: string;
     selection?: ISelectionType;
     multiselection?: boolean;
     rangeSelection?: boolean | IRangeConfig;
@@ -167,6 +168,8 @@ export interface IGridConfig extends IDragConfig {
     $footerHeight?: number;
     $headerHeightMap?: number[];
     $footerHeightMap?: number[];
+    $headerAutoHeightMap?: boolean[];
+    $footerAutoHeightMap?: boolean[];
     $totalWidth?: number;
     $totalHeight?: number;
     $rowHeights?: PrefixSums;
@@ -243,6 +246,8 @@ export interface IRendererConfig extends Required<IProGridConfig> {
     $renderFrom?: RenderFrom;
     $isDragging?: boolean;
     $rowIndexShift?: number;
+    /** @internal only for {@link ICellState.hideSpans} in a grid with rendered spans */
+    $spanAreas?: ISpanArea[];
     _events?: IEventSystem<GridSystemEvents>;
 }
 export declare enum GridEvents {
@@ -447,6 +452,7 @@ export interface ICol {
     };
     $uniqueData?: any[];
     $activeFilterData?: any[];
+    $filterOptions?: IOption[];
     $index?: number;
     $width?: number;
     $fixedWidth?: boolean;
@@ -463,6 +469,8 @@ export interface IRow {
     $opened?: boolean;
     $subRowHeight?: number;
     $draggable?: boolean;
+    $count?: number;
+    $totalCount?: number;
 }
 export interface ISpan {
     row: Id;
@@ -500,7 +508,7 @@ export interface IContent {
 export type TContentFilter = "inputFilter" | "selectFilter" | "comboFilter" | "dateFilter";
 export interface IHeader extends IContent {
     content?: TContentFilter;
-    filterConfig?: IComboFilterConfig | IInputFilterConfig | IDateFilterConfig;
+    filterConfig?: IComboFilterConfig | IInputFilterConfig | IDateFilterConfig | ISelectFilterConfig;
     customFilter?: (item: string | number | Date | Date[], match: string | string[] | Date | Date[]) => boolean;
     headerSort?: boolean;
     sortAs?: SortFunction;
@@ -545,6 +553,8 @@ export interface IGroup {
     panelHeight: number;
     hideableColumns?: boolean;
     showMissed?: boolean | string;
+    showEmptyGroups?: boolean;
+    counter?: boolean | ((row: IRow) => string);
     fields?: {
         [colId: string]: Omit<IGroupOrder, "by">;
     };
@@ -625,6 +635,7 @@ export interface IOption {
     value: string;
 }
 export type TOption = IOption | string;
+export type TFilterOptions = TOption[] | ((uniqueData: IOption[], col: ICol) => TOption[]);
 export type SortFunction = (cellValue: any) => string | number;
 type MarkFunction = (cell: any, columnCells: any[], row: IRow, column: ICol) => string;
 export interface IMark {
@@ -651,7 +662,7 @@ export interface ILayoutState {
     footerAtBottom: boolean;
 }
 export interface IFixedRowsConfig extends ILayoutState {
-    name: "header" | "footer";
+    name: TFixedRowsName;
     position: "top" | "bottom";
 }
 export interface ICoords {
@@ -676,6 +687,12 @@ export type IDragType = "row" | "column" | "both";
 export type AdjustTargetType = "data" | "header" | "footer";
 export type IAdjustBy = AdjustTargetType | boolean;
 export type IFooterPosition = "bottom" | "relative";
+export type TFixedRowsName = "header" | "footer";
+export type TFixedRowHeight = number | (number | "auto")[];
+export interface IFixedRowLevel {
+    height: number;
+    auto: boolean;
+}
 export interface IAdjustColumns {
     rows: IRow[];
     cols: ICol[];
@@ -721,5 +738,19 @@ export interface ICellState {
     }>;
     editable?: boolean;
     multiselectable?: boolean;
+    /** Read-only cells in an editable grid: a row id and a set of column ids. */
+    readonlyCells?: Map<Id, Set<Id>>;
+    /** The first cell of a span shows its content, so the span element and the cells under it are hidden. */
+    hideSpans?: boolean;
+}
+/** @internal the cells of a rendered span */
+export interface ISpanArea {
+    /** the column id of the first cell */
+    column: Id;
+    /** the data index range of the rows */
+    rowStart: number;
+    rowEnd: number;
+    /** the column ids */
+    columns: Set<string>;
 }
 export {};

package/codebase/types/ts-grid/sources/ui/cells.d.ts

@@ -1,4 +1,4 @@
-import { GridEvents, GridSystemEvents, ICoords, IGridConfig, IRendererConfig, ISpan, Split } from "../types";
+import { GridEvents, GridSystemEvents, ICellState, ICoords, IGridConfig, IRendererConfig, ISpan, Split } from "../types";
 import { IDataCollection } from "../../../ts-data";
 import { Id } from "../../../ts-common/types";
 type mouseEvents = GridEvents.cellClick | GridEvents.cellMouseOver | GridEvents.cellMouseDown | GridEvents.cellDblClick | GridEvents.cellRightClick;
@@ -25,6 +25,8 @@ export interface IResolvedCellState {
     tabRow: Id;
     tabCol: Id;
     readonly: "true" | "false";
+    /** the cells a host reports as read-only in an editable grid */
+    readonlyCells: ICellState["readonlyCells"];
     /** whether `aria-selected` belongs on a cell at all — it does not in row selection mode */
     exposeSelected: boolean;
     isSelected: (rowId: Id, colId: Id) => boolean;

package/codebase/types/ts-grid/sources/ui/content/ComboFilter.d.ts

@@ -31,5 +31,6 @@ export declare class ComboFilter implements IHeaderFilter {
     blur(): void;
     destructor(): void;
     private _setData;
+    private _getFilterValue;
     private _checkValue;
 }

package/codebase/types/ts-grid/sources/ui/content/SelectFilter.d.ts

@@ -24,5 +24,6 @@ export declare class SelectFilter implements IHeaderFilter {
     clear(silent?: boolean): void;
     focus(): void;
     blur(): void;
+    private _getOptions;
     private initHandlers;
 }

package/codebase/types/ts-grid/sources/ui/content.d.ts

@@ -1,5 +1,5 @@
 import { VNode } from "../../../ts-common/dom";
-import { ICol, IExtendedGrid, IGrid, IProGrid, IRendererConfig } from "../types";
+import { ICol, IExtendedGrid, IGrid, IProGrid, IRendererConfig, TFilterOptions } from "../types";
 import { DataCollection, IDataItem } from "../../../ts-data";
 import { Combobox } from "../../../ts-combobox";
 import { IEventSystem } from "../../../ts-common/events";
@@ -12,11 +12,15 @@ export interface IComboFilterConfig {
     readonly?: boolean;
     virtual?: boolean;
     multiselection?: boolean;
+    options?: TFilterOptions;
 }
 export interface IInputFilterConfig {
     placeholder?: string;
     icon?: string;
 }
+export interface ISelectFilterConfig {
+    options?: TFilterOptions;
+}
 export declare enum HeaderFilterEvent {
     change = "change"
 }
@@ -27,7 +31,7 @@ export interface IHeaderFilter {
     events: IEventSystem<HeaderFilterEvent>;
     data?: string[] | IDataItem[];
     id?: Id;
-    filterConfig?: IComboFilterConfig | IInputFilterConfig;
+    filterConfig?: IComboFilterConfig | IInputFilterConfig | ISelectFilterConfig;
     getFilter(): VNode | Combobox;
     setValue(value: string | string[], silent?: boolean): void;
     clear(silent?: boolean): void;

package/codebase/types/ts-grid/sources/ui/editors/DateEditor.d.ts

@@ -29,6 +29,7 @@ export declare class DateEditor implements IEditor {
         thisMonthOnly?: boolean;
         width?: string | number;
         $rangeMark?: (a: Date) => string;
+        controls?: boolean | import("../../../../ts-calendar").TCalendarControlsInput[];
         block?: (a: Date) => boolean;
         view?: import("../../../../ts-calendar").ViewMode;
     };

package/codebase/types/ts-grid/sources/ui/proContent.d.ts

@@ -1,22 +1,9 @@
 import { IExtendedGrid, IProGrid } from "../types";
-import { ICellContent, IHeaderFilter } from "./content";
+import { ICellContent, IComboFilterConfig, IHeaderFilter, IInputFilterConfig, ISelectFilterConfig } from "./content";
 import { VNode } from "../../../ts-common/dom";
-import { DataCollection, IDataItem } from "../../../ts-data";
 import { Calendar, ICalendarConfig } from "../../../ts-calendar";
 import { Combobox } from "../../../ts-combobox";
-export interface IComboFilterConfig {
-    template?: (item: IDataItem) => string;
-    filter?: (item: IDataItem, input: string) => boolean;
-    data?: DataCollection<IDataItem> | IDataItem[];
-    placeholder?: string;
-    readonly?: boolean;
-    virtual?: boolean;
-    multiselection?: boolean;
-}
-export interface IInputFilterConfig {
-    placeholder?: string;
-    icon?: string;
-}
+export { IComboFilterConfig, IInputFilterConfig, ISelectFilterConfig } from "./content";
 export interface IDateFilterConfig extends Omit<ICalendarConfig, "value" | "css" | "$rangeMark"> {
     icon?: string;
     placeholder?: string;
@@ -24,7 +11,7 @@ export interface IDateFilterConfig extends Omit<ICalendarConfig, "value" | "css"
 }
 export interface IProHeaderFilter extends Omit<IHeaderFilter, "value" | "filterConfig"> {
     value: string | string[] | Date | Date[];
-    filterConfig?: IComboFilterConfig | IDateFilterConfig | IInputFilterConfig;
+    filterConfig?: IComboFilterConfig | IDateFilterConfig | IInputFilterConfig | ISelectFilterConfig;
     getFilter(): VNode | Combobox | Calendar;
     setValue(value: string | string[] | Date | Date[], silent?: boolean): void;
 }

package/codebase/types/ts-layout/sources/Cell.d.ts

@@ -19,6 +19,7 @@ export declare class Cell extends View implements ICell {
     protected _theme: string;
     private _isLastFlexCell;
     private _afterWindowResized;
+    private _headerSize;
     constructor(parent: string | HTMLElement | ILayout, config: ICellConfig);
     paint(): void;
     isVisible(): boolean;
@@ -39,11 +40,20 @@ export declare class Cell extends View implements ICell {
     progressHide(): void;
     isVisibleProgress(): boolean;
     toVDOM(nodes?: any[]): any;
+    protected _renderHeader(): any;
+    protected _isRotatedHeader(): boolean;
+    protected _getHeaderStyle(): {
+        height?: number;
+        minWidth?: number;
+    };
+    protected _saveHeaderSize(): void;
+    protected _renderCellHeaderContent(): any;
     protected _saveTheme(): void;
     protected _getProgressBar(): any;
     protected _getCss(_content?: boolean): string;
     protected _initHandlers(): void;
     protected _getCollapsedSize(cell: ICell, nextCell: ICell): number;
+    protected _getCellSize(cell: any): number;
     protected _getCollapseIcon(): "dxi dxi-chevron-down" | "dxi dxi-chevron-right" | "dxi dxi-chevron-left" | "dxi dxi-chevron-up";
     protected _isLastCell(): boolean;
     protected _getNextCell(): any;

package/codebase/types/ts-layout/sources/helpers/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const DEFAULT_CELL_HEADER_HEIGHT = 37;
+export declare const DEFAULT_CELL_HEADER_WIDTH = 45;

package/codebase/types/ts-layout/sources/{helpers.d.ts → helpers/helpers.d.ts}

@@ -1,4 +1,4 @@
-import { ICellConfig } from "./types";
+import { ICellConfig } from "../types";
 export declare function getBlockRange(block1: ClientRect, block2: ClientRect, isXLayout?: boolean): {
     min: number;
     max: number;

package/codebase/types/ts-layout/sources/types.d.ts

@@ -4,11 +4,12 @@ import { IEventSystem } from "../../ts-common/events";
 import { FlexDirection } from "../../ts-common/html";
 import { ScrollView } from "../../ts-common/ScrollView";
 import { TLabelAlignment } from "../../ts-common/types";
+export type TCellHeaderTemplate = (cell: ICellConfig) => string | IView;
 export interface ICellConfig {
     id?: string;
     html?: string;
     hidden?: boolean;
-    header?: string;
+    header?: string | TCellHeaderTemplate;
     headerIcon?: string;
     headerImage?: string;
     headerHeight?: number;

package/codebase/types/ts-message/sources/locales/en.d.ts

@@ -1,6 +1,7 @@
 declare const locale: {
     apply: string;
     reject: string;
+    aria_alert: string;
     aria_confirm: string;
     aria_reject: string;
     aria_apply: string;

package/codebase/types/ts-treegrid/sources/TreeGrid.d.ts

@@ -19,8 +19,6 @@ export declare class TreeGrid extends ExtendedGrid implements ITreeGrid {
     getSpan(rowId: Id, colId: Id): ISpan;
     protected _adjustColumnsWidth({ rows, cols, totalCols, adjust, }: IAdjustColumns): IColumnsWidth;
     protected _createCollection(): void;
-    protected _getRowIndex(rowId: Id): number;
     protected _applyLocalFilter(beforePrepareData?: boolean): void;
     protected _setEventHandlers(): void;
-    private _serialize;
 }

package/codebase/types/ts-treegrid/sources/TreeGridCollection.d.ts

@@ -16,6 +16,7 @@ export declare class TreeGridCollection extends TreeCollection {
     protected _addToOrder(_order: any, obj: any, index: number): void;
     protected _removeCore(id: Id): void;
     protected _setParent(item: IDataItem, parent: Id): void;
-    private _checkItems;
+    protected _recalculateGroups(): void;
+    protected _checkItems(): void;
     protected _moveItem(id: any, targetId: any, index: any): void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dhtmlx/grid",
-  "version": "9.3.12",
+  "version": "9.4.1",
   "description": "DHTMLX Grid - JavaScript data grid library. GPL v2 edition for GPL-compatible open-source projects; commercial licenses are available for proprietary and production use.",
   "keywords": ["dhtmlx","grid","datagrid","table","treegrid","data-table","javascript","typescript"],
   "homepage":"https://docs.dhtmlx.com/suite/grid/",

package/whatsnew.txt

@@ -1,3 +1,77 @@
+Version 9.4.1 (October 26, 2026)
+----------------------------
+
+## Version 9.4 (October 22, 2026)
+
+### New functionality
+
+#### DataCollection/TreeCollection
+
+- The ability to get the position of an item among the visible ones
+    - new DataCollection method: `getVisibleIndex()`
+    - new TreeCollection method: `getVisibleIndex()`
+
+#### Grid
+
+- The ability to set an individual height for each row of the header/footer, including the *"auto"* value that adjusts a row to its content (PRO version)
+    - updated Grid configuration properties: `headerRowHeight` and `footerRowHeight`
+- Group counters with the possibility to define the text rendered next to the group name and to keep the groups that are left with no rows after filtering (PRO version)
+    - new properties of the Grid `group` configuration object: `counter` and `showEmptyGroups`
+    - new property of the configuration object of the DataCollection `group()` method: `showEmptyGroups`
+    - service properties of a group header row: `$count`, `$totalCount`, `$by`
+- The ability to define the options of a header/footer filter manually instead of building them from the column data
+    - new property of the `filterConfig` object of **selectFilter** and **comboFilter**: `options`
+
+#### Accessibility
+
+- The ability to set the accessible name of a widget, which a screen reader announces to the user, with the new `ariaLabel` configuration property of the following widgets:
+    - Grid - names a grid, so that several grids on one page can be told apart
+
+### Updates
+
+- DataCollection. The `changeId()` method returns the new id of the item
+- DataCollection. The `changeId()` method doesn't change the id of an item while the data is grouped. It returns the original id and shows a warning in the browser console
+- Grid. The `headerAutoHeight` and `footerAutoHeight` properties, and the header/footer part of `autoHeight`, are ignored for a zone whose `headerRowHeight`/`footerRowHeight` is set as an array
+
+#### Accessibility updates
+
+- Grid. Keyboard navigation:
+    - `Tab` and `Shift` + `Tab` move cell by cell through the header, the body and the footer and leave the grid at its ends, and the arrow keys move within and between these zones whether or not a selection module is enabled.
+    - In a grid without a footer, `Tab` from the last body cell leaves the grid.
+    - `Tab` in the header and the footer reaches the columns scrolled out of view instead of skipping them.
+    - `Enter`, `Space` and `Shift` + `Enter` on a footer cell don't sort the column.
+    - In the selection and block selection modes, the keyboard focus moves to the cells of the frozen columns.
+
+- Grid. Screen-reader announcements:
+    - The new `announce()` method sends a message to the live region of the grid, so a screen reader announces a status change without moving focus.
+    - Sorting, filtering, data loading and the range corrections of a numeric editor are announced through the same live region, and the announced texts are translated through the locale.
+
+### Fixes
+
+- DataCollection. Fixed removing a group row leaving its items behind and the counters of the groups above it short
+- DataCollection. Fixed changing the id of an item between adding the item and saving the changes, which produced a second save request for the item
+- DataCollection/TreeCollection. Fixed the `avg`, `min` and `max` methods of the `dhx.methods` helper returning `NaN`, `Infinity` and `-Infinity` for an empty set of items instead of `null`
+- DataCollection/TreeCollection. Fixed the counter and the aggregated values of a group staying at the values they had when the grouping was applied. They now follow filtering, adding, removing and updating of items, on every level of a nested grouping
+- DataCollection/TreeCollection. Fixed the group summary rows (`summary: "top"` / `summary: "bottom"`) keeping the aggregates they had before filtering
+- DataCollection/TreeCollection. Fixed filtering breaking the group structure: a rule that did not match a group row dropped that row and its summary row, leaving the items of the group without a header
+- DataCollection/TreeCollection. Fixed a group staying in the collection with a non-zero counter after all its items were filtered out
+- DataCollection/TreeCollection. Fixed the group counters not returning to their original values after `resetFilter()`
+- DataCollection/TreeCollection. Fixed a group staying in the collection after all its items were removed
+- Grid. Fixed the summaries counting the group rows and the group summary rows as data, which doubled the column and common totals in a grouped grid
+- Grid. Fixed the group counters not being recalculated together with the tree structure of the grid
+- Grid. Fixed the spans, the CSS classes added with `addCellCss()` and the selection of a row being lost after the id of the row was changed via `changeId()`
+- Grid. Fixed the undo/redo actions of the History module referring to the old id of a row after the id was changed via `changeId()`
+- Grid. Fixed the keyboard focus being moved back to the active cell after editing ended, when the focus had already gone to the header, the footer or outside the grid
+- Grid. Fixed the `avg`, `min` and `max` summaries of a grid without rows being calculated as `NaN`, `Infinity` and `-Infinity` instead of `null`
+- TreeCollection. Fixed filtering in an ungrouped tree: it skipped the items which carried a `$group` field
+- TreeCollection. Fixed `changeId()` detaching the child items of an item from it, also when a filter was applied
+
+### New samples
+
+- [Grid. Flexible header and footer row height](https://snippet.dhtmlx.com/bq7koy9z)
+- [Grid. Custom options for header filters](https://snippet.dhtmlx.com/pcrjqux0)
+- [Grid. Group counter after filtering](https://snippet.dhtmlx.com/sbynrizv)
+
 # Version 9.3.12 (September 23, 2026)
 
 ### Updates