@guiexpert/table 1.1.90 → 1.1.92

package/lib/table/data/options/table-options.if.d.ts

@@ -1,15 +1,18 @@
-import { DefaultRowHeightsIf } from './default-row-heights.if';
-import { TreeOptionsIf } from './tree-options.if';
-import { FilterFunction } from '../common/filter-function';
-import { SortState } from '../common/sort-state.type';
-import { SortedOptionsIf } from './sorted-options.if';
-import { AutoRestoreOptionsIf } from './auto-restore-options.if';
-import { GetEditRenderer } from '../../renderer/edit/edit-cell-renderer.type';
-import { SelectionModelIf } from '../../selection/selection-model.if';
-import { GetT } from '../common/get-t';
-import { FocusModelIf } from '../../focus/focus-model.if';
-import { ShortcutActionIdMapping } from '../../action/shortcut-actionid-mapping.type';
-import { HeaderGroupOptionsIf } from './header-group-options.if';
+import { DefaultRowHeightsIf } from './default-row-heights.if.js';
+import { TreeOptionsIf } from './tree-options.if.js';
+import { FilterFunction } from '../common/filter-function.js';
+import { SortState } from '../common/sort-state.type.js';
+import { SortedOptionsIf } from './sorted-options.if.js';
+import { AutoRestoreOptionsIf } from './auto-restore-options.if.js';
+import { GetEditRenderer } from '../../renderer/edit/edit-cell-renderer.type.js';
+import { SelectionModelIf } from '../../selection/selection-model.if.js';
+import { GetT } from '../common/get-t.js';
+import { FocusModelIf } from '../../focus/focus-model.if.js';
+import { ShortcutActionIdMapping } from '../../action/shortcut-actionid-mapping.type.js';
+import { HeaderGroupOptionsIf } from './header-group-options.if.js';
+import { AriaTextsIf } from '../../aria/aria-texts.if.js';
+import { TableStateIf } from '../../state/table-state.if.js';
+import { OverlayOptionsIf } from './overlay-options.if.js';
 
 /**
  * Represents the options for configuring a table.
@@ -46,6 +49,20 @@ import { HeaderGroupOptionsIf } from './header-group-options.if';
  * | getSelectionModel                | Retrieves the selection model for a specific object.                                              |
  * | getFocusModel                    | Retrieves the focus model of the component.                                                       |
  * | shortcutActionIdMapping          | Represents a mapping of shortcut action IDs.                                                     |
+ *
+ * Start from the defaults in {@link TableOptions} and change only what you need.
+ *
+ * @example
+ * const tableOptions: TableOptionsIf = {
+ *   ...new TableOptions(),
+ *   hoverColumnVisible: false,
+ *   columnsDraggable: false,
+ *   defaultRowHeights: { header: 40, body: 30, footer: 36 }
+ * };
+ *
+ * @see Training: [TableOptions: behaviour and look](https://gui.expert/training/table-options/)
+ *
+ * @category Options
  */
 export interface TableOptionsIf {
     /**
@@ -160,72 +177,163 @@ export interface TableOptionsIf {
      */
     footerVerticalSeparator: boolean;
     /**
-     * Represents the default row heights (for header, body and footer) for a given table.
-     *
-     * @typedef {number[]} DefaultRowHeightsIf
-     * @description An array of numbers representing the default height for each row in a table.
+     * Row heights of header, body and footer in px (default 34 / 34 / 34). Read by {@link TableFactory.createTableModel}
+     * when it creates the area models – pass the options there as `tableOptions`, too.
      */
     defaultRowHeights: DefaultRowHeightsIf;
+    /** Reserved – currently not evaluated (tree tables always show the expand-all / collapse-all icon in the top left header cell). */
     headerToggleExpandCollapseIcons: boolean;
+    /** Icons and behaviour of tree tables (arrows, indentation). See {@link TreeOptionsIf}. */
     treeOptions: TreeOptionsIf;
+    /** Icons of collapsible header groups ({@link AreaModelCellGroups}). */
     headerGroupOptions: HeaderGroupOptionsIf;
     /**
      * Indicates whether to show checkbox without an extra column.
      * If true and the row is checkable, a checkbox is rendered in the first column.
      * If false and the row is checkable, a checkbox is rendered in an extra column left to the first column.
      *
-     * @type {boolean}
+     * @see Training: [Tree table with checkboxes](https://gui.expert/training/tree-table/)
      */
     showCheckboxWihoutExtraColumn: boolean;
     /**
-     * Represents the external filter function that will be used to filter the table rows.
+     * Your filter: called for every row, return `true` to show it. After changing the filter criteria call
+     * {@link TableApi.externalFilterChanged} – the table filters again and keeps the sort order.
      *
-     * @typedef {FilterFunction<any> | undefined} externalFilterFunction
+     * @example
+     * const filter = { text: "" };
+     * const tableOptions: TableOptionsIf = {
+     *   ...new TableOptions(),
+     *   externalFilterFunction: (order: Order) => order.customer.toLowerCase().includes(filter.text)
+     * };
+     * searchInput.addEventListener("input", () => {
+     *   filter.text = searchInput.value.toLowerCase();
+     *   tableApi.externalFilterChanged();
+     * });
+     *
+     * @see Training: [Filtering with a live search](https://gui.expert/training/filtering/)
      */
     externalFilterFunction: FilterFunction<any> | undefined;
+    /** The sort icons shown in sortable header cells. */
+    sortedOptions: SortedOptionsIf;
     /**
-     * Represents a sorted options object.
-     *
-     * @class
-     * @classdesc The SortedOptions represents a class that defines sorted icons, which will displayed in the header (if column is sortable).
+     * The order of the sort states on repeated double-clicks on a header, default `["asc", "desc"]`.
+     * Add `""` to get "unsorted" as third state. Per column: {@link ColumnDefIf.sortStatesOrder}.
      */
-    sortedOptions: SortedOptionsIf;
+    sortOrder: SortState[];
     /**
-     * Represents the sort order of the columns.
+     * Remember sorting, scroll position and expanded tree nodes in `localStorage`. Off by default.
      *
-     * @typedef {SortState[]} sortOrder
+     * @see {@link AutoRestoreOptions}
+     * @see Training: [Remember the state](https://gui.expert/training/persist-state/)
      */
-    sortOrder: SortState[];
     autoRestoreOptions?: AutoRestoreOptionsIf<any>;
     /**
-     * Retrieves the edit renderer for a specific action.
+     * The editor for a cell, if the column has no own {@link ColumnDefIf.getEditRenderer}.
+     * Default: a text input ({@link InputCellRenderer}).
      *
-     * @function
-     * @name getEditRenderer
-     * @param {string} action - The action for which to retrieve the edit renderer.
-     * @returns {GetEditRenderer} - The edit renderer for the specified action.
+     * @see Training: [Inline editing](https://gui.expert/training/inline-editing/)
      */
     getEditRenderer?: GetEditRenderer;
     /**
-     * Retrieves the selection model for a specific object.
+     * Returns the selection model of the table. Without it every table creates its own `new SelectionModel()`
+     * of type `"none"` – nothing can be selected.
+     *
+     * @example
+     * const selectionModel = new SelectionModel("row", "single");
+     * const tableOptions: TableOptionsIf = { ...new TableOptions(), getSelectionModel: () => selectionModel };
      *
-     * @param {SelectionModelIf} targetObj - The target object to retrieve the selection model from.
-     * @return {GetT<SelectionModelIf>} - The selection model for the given object.
+     * @see Training: [Select cells, rows and ranges](https://gui.expert/training/selection-and-copy/)
      */
     getSelectionModel?: GetT<SelectionModelIf>;
+    /** Returns the focus model of the table. Default: every table creates its own {@link FocusModel}. */
+    getFocusModel?: GetT<FocusModelIf>;
+    /**
+     * Own keyboard shortcuts: maps a shortcut (e.g. `"ctrl+c"`, `"f2"`) to an {@link ActionId}.
+     * Default: {@link WindowsShortcutActionIdMapping} resp. {@link OsxShortcutActionIdMapping}.
+     */
+    shortcutActionIdMapping?: ShortcutActionIdMapping;
+    /** Switch off all keyboard shortcuts of the table (copy, select all, navigation, F2 …). */
+    shortcutActionsDisabled: boolean;
     /**
-     * Retrieves the focus model of the component.
+     * The accessible name of the table for screen readers (`aria-label` of the grid), e.g. `"Orders"`.
+     * Prefer {@link ariaLabelledBy} if the page shows a title.
+     *
+     * @example
+     * const tableOptions: TableOptionsIf = { ...new TableOptions(), ariaLabel: "Orders" };
      *
-     * @returns {GetT<FocusModelIf>} The focus model of the component.
+     * @since 1.1.91
+     * @see Training: [Accessible tables: keyboard and screen readers](https://gui.expert/training/accessibility/)
      */
-    getFocusModel?: GetT<FocusModelIf>;
+    ariaLabel?: string;
+    /**
+     * The id of the element that names the table, e.g. a heading above it (`aria-labelledby` of the grid).
+     * Takes precedence over {@link ariaLabel}.
+     *
+     * @example
+     * // <h2 id="orders-title">Orders 2026</h2> <div class="table-div"></div>
+     * const tableOptions: TableOptionsIf = { ...new TableOptions(), ariaLabelledBy: "orders-title" };
+     *
+     * @since 1.1.91
+     */
+    ariaLabelledBy?: string;
     /**
-     * Represents a mapping of shortcut action IDs.
+     * The id of an element that describes the table, e.g. a hint below it (`aria-describedby` of the grid).
      *
-     * @typedef {Object} ShortcutActionIdMapping
-     * @property {string} [shortcutId] - The ID of the shortcut.
-     * @property {string} [actionId] - The ID of the action associated with the shortcut.
+     * @example
+     * // <p id="orders-hint">Double click a header to sort.</p>
+     * const tableOptions: TableOptionsIf = { ...new TableOptions(), ariaDescribedBy: "orders-hint" };
+     *
+     * @since 1.1.91
      */
-    shortcutActionIdMapping?: ShortcutActionIdMapping;
-    shortcutActionsDisabled: boolean;
+    ariaDescribedBy?: string;
+    /**
+     * Own texts for screen readers – announcements (sorting, filter, copy, select all) and the names of the row
+     * checkboxes and header group toggles. Functions you leave out keep their English default ({@link AriaTexts}).
+     *
+     * @example
+     * const tableOptions: TableOptionsIf = {
+     *   ...new TableOptions(),
+     *   ariaTexts: {
+     *     filtered: (rowCount: number) => `${rowCount} Zeilen`,
+     *     copied: (cellCount: number) => `${cellCount} Zellen kopiert`,
+     *     selectRow: (rowNumber: number) => `Zeile ${rowNumber} auswählen`,
+     *   },
+     * };
+     *
+     * @since 1.1.91
+     */
+    ariaTexts?: Partial<AriaTextsIf>;
+    /**
+     * Texts and behaviour of the overlays over the body: "Loading…" ({@link TableApi.showLoadingOverlay}),
+     * "No rows to show" (empty body, automatic) and "No matching rows" (the filter hides all rows).
+     * Fields you leave out keep their default ({@link OverlayOptions}).
+     *
+     * @example
+     * const tableOptions: TableOptionsIf = {
+     *   ...new TableOptions(),
+     *   overlayOptions: { noRowsText: "No orders yet", blockInteractionWhileLoading: false },
+     * };
+     *
+     * @since 1.1.92
+     */
+    overlayOptions?: Partial<OverlayOptionsIf>;
+    /**
+     * The state the table starts with: column layout, sorting, tree, checked and selected rows … – e.g. loaded from
+     * your server ({@link TableApi.getState}, {@link EventListenerIf.onStateChanged}). A state stored by
+     * {@link autoRestoreOptions} wins over it, part by part.
+     *
+     * @example
+     * const saved = (await (await fetch("/api/prefs/orders")).json()) as TableStateIf | null;
+     * const tableOptions: TableOptionsIf = { ...new TableOptions(), initialState: saved ?? undefined };
+     *
+     * @since 1.1.92
+     */
+    initialState?: Partial<TableStateIf>;
+    /**
+     * Delay in ms between the last change of the state (resize, sort, scroll …) and
+     * {@link EventListenerIf.onStateChanged} / the save of {@link autoRestoreOptions}. Default 300.
+     *
+     * @since 1.1.92
+     */
+    stateChangedDebounceDelay?: number;
 }

package/lib/table/data/options/tree-options.d.ts

@@ -1,6 +1,7 @@
-import { IconIf } from './icon.if';
-import { TreeOptionsIf } from './tree-options.if';
+import { IconIf } from './icon.if.js';
+import { TreeOptionsIf } from './tree-options.if.js';
 
+/** @category Options */
 export declare class TreeOptions implements TreeOptionsIf {
     arrowExpanded: IconIf;
     arrowCollapsed: IconIf;

package/lib/table/data/options/tree-options.if.d.ts

@@ -1,4 +1,4 @@
-import { IconIf } from './icon.if';
+import { IconIf } from './icon.if.js';
 
 /**
  * This interface `TreeOptionsIf` represents the specific configuration and properties of a tree component, usually displayed in a User Interface (UI).
@@ -40,6 +40,8 @@ import { IconIf } from './icon.if';
  *     classes: ['placeholder-icon-class'],
  *   },
  * };
+ *
+ * @category Options
  */
 export interface TreeOptionsIf {
     arrowExpandCollapseAll: IconIf;

package/lib/table/data/side-ident.type.d.ts

@@ -24,5 +24,7 @@
  * @see TableModel
  * @see AreaModelIf
  * @type {("west"|"center"|"east")}
+ *
+ * @category Area models
  */
 export type SideIdent = "west" | "center" | "east";

package/lib/table/data/table-model-and-options.d.ts

@@ -1,9 +1,11 @@
-import { TableModelAndOptionsIf } from './table-model-and-options.if';
-import { TableModelIf } from './tablemodel/table-model.if';
-import { TableOptions } from './options/table-options';
+import { TableModelAndOptionsIf } from './table-model-and-options.if.js';
+import { TableModelIf } from './tablemodel/table-model.if.js';
+import { TableOptions } from './options/table-options.js';
 
 /**
  * Container object for one table model and one table options object.
+ *
+ * @category Table model
  */
 export declare class TableModelAndOptions implements TableModelAndOptionsIf {
     tableModel: TableModelIf;

package/lib/table/data/table-model-and-options.if.d.ts

@@ -1,8 +1,10 @@
-import { TableModelIf } from './tablemodel/table-model.if';
-import { TableOptions } from './options/table-options';
+import { TableModelIf } from './tablemodel/table-model.if.js';
+import { TableOptions } from './options/table-options.js';
 
 /**
  * Interface for a container object for one table model and one table options object.
+ *
+ * @category Table model
  */
 export interface TableModelAndOptionsIf {
     tableModel: TableModelIf;

package/lib/table/data/tablemodel/area-ident.type.d.ts

@@ -1,9 +1,13 @@
 /**
  * The AreaIdent is an identifier for the three areas : header, body, and footer.
+ *
+ * @category Area models
  */
 export type AreaIdent = "header" | "body" | "footer";
 /**
  * Converts a string to the identifier of type AreaIdent.
  * @param s should be "header"|"body"|"footer". The fallback return value is 'body'
+ *
+ * @category Area models
  */
 export declare const getAreaIdentByString: (s: string | null) => AreaIdent;

package/lib/table/data/tablemodel/areamodel/abstract-area-model.d.ts

@@ -1,13 +1,14 @@
-import { CellRendererIf } from '../../../renderer/cell-render.if';
-import { AreaModelIf } from './area-model.if';
-import { CheckedType } from '../../common/checked-type';
-import { ColumnDefIf } from '../column/column-def.if';
-import { AreaIdent } from '../area-ident.type';
-import { CheckboxModelIf } from '../../../checkbox/checkbox-model.if';
-import { FilterFunction } from '../../common/filter-function';
-import { SortItem } from '../../common/sort-item';
-import { HasDefaultRowHeightIf } from './has-default-row-height-if';
+import { CellRendererIf } from '../../../renderer/cell-render.if.js';
+import { AreaModelIf } from './area-model.if.js';
+import { CheckedType } from '../../common/checked-type.js';
+import { ColumnDefIf } from '../column/column-def.if.js';
+import { AreaIdent } from '../area-ident.type.js';
+import { CheckboxModelIf } from '../../../checkbox/checkbox-model.if.js';
+import { FilterFunction } from '../../common/filter-function.js';
+import { SortItem } from '../../common/sort-item.js';
+import { HasDefaultRowHeightIf } from './has-default-row-height-if.js';
 
+/** @category Area models */
 export declare abstract class AbstractAreaModel<T> implements AreaModelIf, HasDefaultRowHeightIf {
     areaIdent: AreaIdent;
     protected columnDefs: ColumnDefIf[];

package/lib/table/data/tablemodel/areamodel/area-model-array-of-arrays.d.ts

@@ -1,11 +1,13 @@
-import { AbstractAreaModel } from './abstract-area-model';
-import { AreaIdent } from '../area-ident.type';
-import { ColumnDefIf } from '../column/column-def.if';
-import { FilterFunction } from '../../common/filter-function';
+import { AbstractAreaModel } from './abstract-area-model.js';
+import { AreaIdent } from '../area-ident.type.js';
+import { ColumnDefIf } from '../column/column-def.if.js';
+import { FilterFunction } from '../../common/filter-function.js';
 
 /**
  * Represents a model for an area containing a two-dimensional array of data.
  * @template T - The type of data in the array.
+ *
+ * @category Area models
  */
 export declare class AreaModelArrayOfArrays<T> extends AbstractAreaModel<T[][]> {
     areaIdent: AreaIdent;
@@ -16,6 +18,13 @@ export declare class AreaModelArrayOfArrays<T> extends AbstractAreaModel<T[][]>
     constructor(areaIdent: AreaIdent, arr: T[][], defaultRowHeight: number, columnDefs?: ColumnDefIf[]);
     externalFilterChanged(predictFn: FilterFunction<any>): void;
     getRowCount(): number;
+    /**
+     * The number of all rows, without the external filter.
+     *
+     * @returns {number} the length of the array
+     * @since 1.1.92
+     */
+    getUnfilteredRowCount(): number;
     getValueAt(rowIndex: number, columnIndex: number): any;
     setValue(rowIndex: number, columnIndex: number, value: any): boolean;
     getRowByIndex(rowIndex: number): any;

package/lib/table/data/tablemodel/areamodel/area-model-cell-groups.d.ts

@@ -1,16 +1,18 @@
-import { AreaIdent } from '../area-ident.type';
-import { ColumnDefIf } from '../column/column-def.if';
-import { AreaModelIf } from './area-model.if';
-import { CellGroupIf } from '../cellgroup/cell-group.if';
-import { CheckboxModelIf } from '../../../checkbox/checkbox-model.if';
-import { SortItem } from '../../common/sort-item';
-import { FilterFunction } from '../../common/filter-function';
-import { CellRendererIf } from '../../../renderer/cell-render.if';
-import { CheckedType } from '../../common/checked-type';
-import { CellGroupExt } from '../cellgroup/cell-group-ext';
-import { MouseTargetData } from '../../event/mouse-target-data';
-import { HeaderGroupOptionsIf } from '../../options/header-group-options.if';
+import { AreaIdent } from '../area-ident.type.js';
+import { ColumnDefIf } from '../column/column-def.if.js';
+import { AreaModelIf } from './area-model.if.js';
+import { CellGroupIf } from '../cellgroup/cell-group.if.js';
+import { CheckboxModelIf } from '../../../checkbox/checkbox-model.if.js';
+import { SortItem } from '../../common/sort-item.js';
+import { FilterFunction } from '../../common/filter-function.js';
+import { CellRendererIf } from '../../../renderer/cell-render.if.js';
+import { CheckedType } from '../../common/checked-type.js';
+import { CellGroupExt } from '../cellgroup/cell-group-ext.js';
+import { MouseTargetData } from '../../event/mouse-target-data.js';
+import { HeaderGroupOptionsIf } from '../../options/header-group-options.if.js';
+import { TableHeaderGroupStateIf } from '../../../state/table-state.if.js';
 
+/** @category Header groups */
 export declare class AreaModelCellGroups implements AreaModelIf {
     readonly areaIdent: AreaIdent;
     readonly groups: CellGroupIf[];
@@ -55,4 +57,34 @@ export declare class AreaModelCellGroups implements AreaModelIf {
     setRowChecked(_rowIndex: number, _checked: boolean): void;
     setValue(_rowIndex: number, _columnIndex: number, _value: any): boolean;
     toggleHeaderGroup(mouseTargetData: MouseTargetData): ColumnDefIf[];
+    /**
+     * The header groups the user can collapse (`toggle: true`, not `visibility: "always"`) with their id
+     * ({@link CellGroupIf.id}, otherwise the path of the labels, e.g. `"Customer"` or `"2026/Q1"`; a second group with
+     * the same path gets `#2`) and their state.
+     *
+     * @returns {TableHeaderGroupStateIf[]} id and `closed` per group, in header order
+     * @example
+     * const header = tableApi.getTableModel().getAreaModel("header") as AreaModelCellGroups;
+     * console.log(header.getToggleGroupStates());   // [{ id: "Customer", closed: false }]
+     * @since 1.1.92
+     */
+    getToggleGroupStates(): TableHeaderGroupStateIf[];
+    /**
+     * Collapses or expands a header group by its id (see {@link getToggleGroupStates}) and returns the column
+     * definitions to use from now on – like a click on its toggle. {@link TableApi.setHeaderGroupCollapsed} does this
+     * and repaints.
+     *
+     * @param {string} id - the id of the group
+     * @param {boolean} closed - true = collapse
+     * @returns {ColumnDefIf[] | undefined} the merged column definitions, `undefined` if there is no such group
+     * @since 1.1.92
+     */
+    setGroupClosed(id: string, closed: boolean): ColumnDefIf[] | undefined;
+    /** The toggleable groups by id (header order). */
+    private getToggleGroups;
+    /**
+     * Keep the existing ColumnDef objects (width, classes, renderers, sorting …) – only their visibility
+     * comes from the rebuilt groups. Fresh defs would reset every width to the default (100 px).
+     */
+    private mergeColumnDefs;
 }

package/lib/table/data/tablemodel/areamodel/area-model-hidden.d.ts

@@ -1,13 +1,15 @@
-import { AreaModelIf } from './area-model.if';
-import { CellRendererIf } from '../../../renderer/cell-render.if';
-import { CheckedType } from '../../common/checked-type';
-import { CheckboxModelIf } from '../../../checkbox/checkbox-model.if';
-import { FilterFunction } from '../../common/filter-function';
-import { SortItem } from '../../common/sort-item';
-import { AreaIdent } from '../area-ident.type';
+import { AreaModelIf } from './area-model.if.js';
+import { CellRendererIf } from '../../../renderer/cell-render.if.js';
+import { CheckedType } from '../../common/checked-type.js';
+import { CheckboxModelIf } from '../../../checkbox/checkbox-model.if.js';
+import { FilterFunction } from '../../common/filter-function.js';
+import { SortItem } from '../../common/sort-item.js';
+import { AreaIdent } from '../area-ident.type.js';
 
 /**
  * An invisible model, which is used internally for hiding a header.
+ *
+ * @category Area models
  */
 export declare class AreaModelHidden implements AreaModelIf {
     areaIdent: AreaIdent;

package/lib/table/data/tablemodel/areamodel/area-model-object-array-with-columndefs.d.ts

@@ -1,6 +1,6 @@
-import { AreaModelObjectArray } from './area-model-object-array';
-import { ColumnDefIf } from '../column/column-def.if';
-import { AreaIdent } from '../area-ident.type';
+import { AreaModelObjectArray } from './area-model-object-array.js';
+import { ColumnDefIf } from '../column/column-def.if.js';
+import { AreaIdent } from '../area-ident.type.js';
 
 /**
  * Represents an area model defined by an object array with column definitions.
@@ -29,10 +29,10 @@ import { AreaIdent } from '../area-ident.type';
  *   { id: 3, name: 'Bob', age: 40 }
  * ];
  *
- * const columnDefs = [
- *   { property: 'id', headerLabel: 'ID', width: new Size(50, 'px') },
- *   { property: 'name', headerLabel: 'Name', width: new Size(150, 'px') },
- *   { property: 'age', headerLabel: 'Age', width: new Size(100, 'px') }
+ * const columnDefs: ColumnDefIf[] = [
+ *   new ColumnDef('id', 'ID', new Size(50, 'px')),
+ *   new ColumnDef('name', 'Name', new Size(150, 'px')),
+ *   new ColumnDef('age', 'Age', new Size(100, 'px'))
  * ];
  *
  * const bodyAreaModel = new AreaModelObjectArrayWithColumndefs<any>(
@@ -47,9 +47,9 @@ import { AreaIdent } from '../area-ident.type';
  * function createTableModel() {
  *   const rows = fetchDataFromServer();
  *   const columnDefs = [
- *     { property: 'id', headerLabel: 'ID', width: new Size(50, 'px') },
- *     { property: 'name', headerLabel: 'Name', width: new Size(150, 'px') },
- *     { property: 'age', headerLabel: 'Age', width: new Size(100, 'px') }
+ *     new ColumnDef('id', 'ID', new Size(50, 'px')),
+ *     new ColumnDef('name', 'Name', new Size(150, 'px')),
+ *     new ColumnDef('age', 'Age', new Size(100, 'px'))
  *   ];
  *
  *   const tableModel = TableFactory.buildByTypedRowsParam({
@@ -81,6 +81,8 @@ import { AreaIdent } from '../area-ident.type';
  * @see {@link AreaModelObjectArray} - The parent class that provides the core functionality
  * @see {@link ColumnDefIf} - The interface that defines the structure of column definitions
  * @see {@link CrudTableModelFactory} - A factory class that uses this class for CRUD operations
+ *
+ * @category Area models
  */
 export declare class AreaModelObjectArrayWithColumndefs<T> extends AreaModelObjectArray<T> {
     areaIdent: AreaIdent;
@@ -103,10 +105,10 @@ export declare class AreaModelObjectArrayWithColumndefs<T> extends AreaModelObje
      *   { id: 2, name: 'Jane', age: 25 }
      * ];
      *
-     * const columnDefs = [
-     *   { property: 'id', headerLabel: 'ID', width: new Size(50, 'px') },
-     *   { property: 'name', headerLabel: 'Name', width: new Size(150, 'px') },
-     *   { property: 'age', headerLabel: 'Age', width: new Size(100, 'px') }
+     * const columnDefs: ColumnDefIf[] = [
+     *   new ColumnDef('id', 'ID', new Size(50, 'px')),
+     *   new ColumnDef('name', 'Name', new Size(150, 'px')),
+     *   new ColumnDef('age', 'Age', new Size(100, 'px'))
      * ];
      *
      * const bodyAreaModel = new AreaModelObjectArrayWithColumndefs(