@guiexpert/demo-table-models 1.1.79 → 1.1.81

package/index.js

@@ -152,28 +152,128 @@ class fe {
   }
 }
 class De extends ee {
+  /**
+   * Creates an instance of AreaModelObjectArray.
+   * 
+   * @param {AreaIdent} areaIdent - Identifies which area of the table this model represents ('header', 'body', or 'footer')
+   * @param {T[]} rows - The array of objects that represent the rows in this area
+   * @param {number} defaultRowHeight - The default height for rows in this area (in pixels)
+   * @param {ColumnDefIf[]} [columnDefs=[]] - Definitions for the columns in this area
+   * @param {string} [selectedRowClass='ge-selected-row'] - CSS class to apply to selected rows
+   * @param {string} [focusedRowClass='ge-focused-row'] - CSS class to apply to the focused row
+   * 
+   * @example
+   * const rows = [
+   *   { id: 1, name: 'John', age: 30 },
+   *   { id: 2, name: 'Jane', age: 25 }
+   * ];
+   * 
+   * const columnDefs = [
+   *   { property: 'id', headerLabel: 'ID', width: 50 },
+   *   { property: 'name', headerLabel: 'Name', width: 150 },
+   *   { property: 'age', headerLabel: 'Age', width: 100 }
+   * ];
+   * 
+   * const bodyAreaModel = new AreaModelObjectArray(
+   *   'body',
+   *   rows,
+   *   30,
+   *   columnDefs
+   * );
+   */
   constructor(e, r, a, t = [], n = "ge-selected-row", m = "ge-focused-row") {
     super(e, t, a), this.areaIdent = e, this.rows = r, this.defaultRowHeight = a, this.columnDefs = t, this.selectedRowClass = n, this.focusedRowClass = m, this.sorterService = new fe(), this._focusedRowIndex = 0, this.filteredRows = [...r], this.properties = t.map((d) => d.property);
   }
+  /**
+   * Gets the index of the currently focused row.
+   * 
+   * @returns {number} The index of the focused row
+   * 
+   * @example
+   * const focusedRowIndex = bodyAreaModel.getFocusedRowIndex();
+   * console.log(`The focused row is at index ${focusedRowIndex}`);
+   */
   getFocusedRowIndex() {
     return this._focusedRowIndex;
   }
+  /**
+   * Sets the index of the focused row.
+   * This will apply the focused row styling to the specified row.
+   * 
+   * @param {number} value - The index of the row to focus
+   * 
+   * @example
+   * // Focus the second row (index 1)
+   * bodyAreaModel.setFocusedRowIndex(1);
+   */
   setFocusedRowIndex(e) {
     this._focusedRowIndex = e;
   }
+  /**
+   * Replaces the current rows array with a new one.
+   * This also resets the filtered rows to match the new rows array.
+   * 
+   * @param {T[]} rows - The new array of row objects
+   * 
+   * @example
+   * // Replace the current rows with new data
+   * const newRows = [
+   *   { id: 4, name: 'Alice', age: 35 },
+   *   { id: 5, name: 'Charlie', age: 45 }
+   * ];
+   * bodyAreaModel.setRows(newRows);
+   */
   setRows(e) {
     this.rows = e, this.filteredRows = [...e];
   }
+  /**
+   * Filters both the original rows and filtered rows arrays using the provided predicate function.
+   * Unlike `externalFilterChanged`, this method permanently modifies the original rows array.
+   * 
+   * @param {(row: T) => boolean} predict - A function that returns true for rows to keep and false for rows to filter out
+   * 
+   * @example
+   * // Remove all rows where age is less than 30
+   * bodyAreaModel.filterRowsByPredict(row => row.age >= 30);
+   */
   filterRowsByPredict(e) {
     this.rows = this.rows.filter(e), this.filteredRows = this.filteredRows.filter(e);
   }
   /**
-   * return row count of filtered rows
+   * Returns the number of rows in the filtered rows array.
+   * This is used to determine how many rows should be rendered in the table.
+   * 
+   * @returns {number} The number of rows in the filtered rows array
+   * 
+   * @example
+   * const rowCount = bodyAreaModel.getRowCount();
+   * console.log(`The table has ${rowCount} rows`);
    */
   getRowCount() {
     var e;
     return ((e = this.filteredRows) == null ? void 0 : e.length) ?? 0;
   }
+  /**
+   * Gets the value at the specified row and column indices.
+   * This method handles tree rows and nested properties.
+   * 
+   * @param {number} rowIndex - The index of the row
+   * @param {number} columnIndex - The index of the column
+   * @returns {any} The value at the specified cell, or an empty string if not found
+   * 
+   * @example
+   * // Get the value in the first row, second column
+   * const value = bodyAreaModel.getValueAt(0, 1);
+   * console.log(`The value is: ${value}`);
+   * 
+   * @example
+   * // Iterate through all cells in a row
+   * const rowIndex = 0;
+   * for (let colIndex = 0; colIndex < columnDefs.length; colIndex++) {
+   *   const value = bodyAreaModel.getValueAt(rowIndex, colIndex);
+   *   console.log(`Cell (${rowIndex}, ${colIndex}): ${value}`);
+   * }
+   */
   getValueAt(e, r) {
     const a = this.properties[r];
     let t = this.filteredRows[e];
@@ -182,46 +282,176 @@ class De extends ee {
   /**
    * Retrieves the filtered and sorted rows from the dataset.
    * These rows are used for rendering the table.
+   * Unlike `getAllRows()`, this method returns only the rows that match any applied filters.
    *
-   * @return {T[]} An array containing the filtered (and sorted) rows.
+   * @returns {T[]} An array containing the filtered (and sorted) rows
+   * 
+   * @example
+   * // Get all filtered rows
+   * const filteredRows = bodyAreaModel.getFilteredRows();
+   * 
+   * // Count rows that match a certain condition
+   * const adultsCount = filteredRows.filter(row => row.age >= 18).length;
    */
   getFilteredRows() {
     return this.filteredRows;
   }
+  /**
+   * Returns the original, unfiltered array of rows.
+   * This can be useful when you need to access all data regardless of any applied filters.
+   * 
+   * @returns {T[]} The original array of row objects
+   * 
+   * @example
+   * // Get all rows, including those filtered out
+   * const allRows = bodyAreaModel.getAllRows();
+   * 
+   * // Calculate average age across all rows
+   * const totalAge = allRows.reduce((sum, row) => sum + row.age, 0);
+   * const averageAge = totalAge / allRows.length;
+   */
   getAllRows() {
     return this.rows;
   }
   /**
    * Returns the first row from the filtered rows that matches the given criteria based on the provided predicate function.
+   * This method only searches within the filtered rows, not the original rows array.
    *
    * @param {Partial<T>} criteria - A partial object containing the search criteria
    * @param {(criteria: Partial<T>, row: T) => boolean} predicate - A function that takes the search criteria and a row,
    *        and returns true if the row matches the criteria
    * @returns {T | undefined} The first matching row, or undefined if no match is found
+   * 
+   * @example
+   * // Find a user by name in the filtered rows
+   * const criteria = { name: 'John' };
+   * const user = bodyAreaModel.findRowFromFilteredRowsByAllCriteria(
+   *   criteria,
+   *   (criteria, row) => row.name === criteria.name
+   * );
+   * 
+   * @example
+   * // Find a user by age range in the filtered rows
+   * const criteria = { minAge: 25, maxAge: 35 };
+   * const user = bodyAreaModel.findRowFromFilteredRowsByAllCriteria(
+   *   criteria,
+   *   (criteria, row) => row.age >= criteria.minAge && row.age <= criteria.maxAge
+   * );
    */
   findRowFromFilteredRowsByAllCriteria(e, r) {
     return this.getFilteredRows().find((a) => r(e, a));
   }
   /**
    * Searches through all rows to find a row that matches the given criteria based on the predicate function.
+   * This method searches within the original rows array, including rows that may have been filtered out.
    *
    * @param {Partial<T>} criteria - A partial object containing the search criteria
    * @param {(criteria: Partial<T>, row: T) => boolean} predicate - A function that takes the search criteria and a row,
    *        and returns true if the row matches the criteria
    * @returns {T | undefined} The first matching row from all rows, or undefined if no match is found
+   * 
+   * @example
+   * // Find a user by ID in all rows
+   * const criteria = { id: 42 };
+   * const user = bodyAreaModel.findRowFromAllRowsByAllCriteria(
+   *   criteria,
+   *   (criteria, row) => row.id === criteria.id
+   * );
+   * 
+   * @example
+   * // Find a user with a specific property value in all rows
+   * const criteria = { department: 'Engineering', role: 'Manager' };
+   * const user = bodyAreaModel.findRowFromAllRowsByAllCriteria(
+   *   criteria,
+   *   (criteria, row) => row.department === criteria.department && row.role === criteria.role
+   * );
    */
   findRowFromAllRowsByAllCriteria(e, r) {
     return this.getAllRows().find((a) => r(e, a));
   }
+  /**
+   * Returns the height of the row at the specified index.
+   * This implementation always returns the default row height.
+   * Override this method in subclasses to support variable row heights.
+   * 
+   * @param {number} _rowIndex - The index of the row (unused in this implementation)
+   * @returns {number} The height of the row in pixels
+   * 
+   * @example
+   * const rowHeight = bodyAreaModel.getRowHeight(0);
+   * console.log(`The first row has a height of ${rowHeight}px`);
+   */
   getRowHeight(e) {
     return this.defaultRowHeight;
   }
+  /**
+   * Returns the row object at the specified index from the filtered rows array.
+   * This method overrides the parent class implementation.
+   * 
+   * @param {number} rowIndex - The index of the row to retrieve
+   * @returns {any} The row object at the specified index, or undefined if the index is out of bounds
+   * 
+   * @example
+   * // Get the first row object
+   * const row = bodyAreaModel.getRowByIndex(0);
+   * console.log('First row:', row);
+   * 
+   * @example
+   * // Iterate through all rows
+   * for (let i = 0; i < bodyAreaModel.getRowCount(); i++) {
+   *   const row = bodyAreaModel.getRowByIndex(i);
+   *   console.log(`Row ${i}:`, row);
+   * }
+   */
   getRowByIndex(e) {
     return this.filteredRows[e];
   }
+  /**
+   * Applies an external filter function to the rows array.
+   * This method updates the filtered rows array without modifying the original rows array.
+   * 
+   * @param {FilterFunction<any>} predictFn - A function that returns true for rows to keep and false for rows to filter out
+   * 
+   * @example
+   * // Filter rows where age is greater than 30
+   * bodyAreaModel.externalFilterChanged(row => row.age > 30);
+   * 
+   * @example
+   * // Filter rows based on a search term
+   * const searchTerm = 'john';
+   * bodyAreaModel.externalFilterChanged(row => 
+   *   row.name.toLowerCase().includes(searchTerm.toLowerCase())
+   * );
+   * 
+   * @example
+   * // Clear all filters
+   * bodyAreaModel.externalFilterChanged(() => true);
+   */
   externalFilterChanged(e) {
     this.filteredRows = this.rows ? this.rows.filter(e) : [];
   }
+  /**
+   * Sorts the filtered rows based on the provided sort items.
+   * This method supports sorting by multiple columns with different sort directions.
+   * 
+   * @param {SortItem[]} sortItems - An array of sort items, each containing a column index and sort state
+   * @returns {boolean} Always returns true to indicate sorting was performed
+   * 
+   * @example
+   * // Sort by age in ascending order
+   * bodyAreaModel.doSort([{ columnIndex: 2, sortState: 'asc' }]);
+   * 
+   * @example
+   * // Sort by name in descending order, then by age in ascending order
+   * bodyAreaModel.doSort([
+   *   { columnIndex: 1, sortState: 'desc' },
+   *   { columnIndex: 2, sortState: 'asc' }
+   * ]);
+   * 
+   * @example
+   * // Clear sorting
+   * bodyAreaModel.doSort([{ columnIndex: 0, sortState: 'none' }]);
+   */
   doSort(e) {
     for (const r of e) {
       const { columnIndex: a, sortState: t } = r, n = t === "asc" ? 1 : t === "desc" ? -1 : 0, m = this.properties[a];
@@ -229,20 +459,110 @@ class De extends ee {
     }
     return !0;
   }
+  /**
+   * Sorts the filtered rows using a custom comparator function.
+   * This method provides more flexibility than `doSort()` for complex sorting logic.
+   * 
+   * @param {(a: T, b: T) => number} compareFn - A function that compares two rows and returns a number:
+   *   - Negative if a should come before b
+   *   - Positive if a should come after b
+   *   - Zero if they are equivalent for sorting purposes
+   * 
+   * @example
+   * // Sort by name length
+   * bodyAreaModel.sort((a, b) => a.name.length - b.name.length);
+   * 
+   * @example
+   * // Sort by a computed value
+   * bodyAreaModel.sort((a, b) => {
+   *   const scoreA = a.wins * 3 + a.draws;
+   *   const scoreB = b.wins * 3 + b.draws;
+   *   return scoreB - scoreA; // Descending order
+   * });
+   */
   sort(e) {
     this.filteredRows = this.filteredRows.sort(e);
   }
+  /**
+   * Gets a value from an object using a property path.
+   * This method supports accessing nested properties using dot notation (e.g., 'person.name').
+   * 
+   * @param {T} t - The object to get the value from
+   * @param {string} property - The property path to access (e.g., 'name' or 'person.contact.email')
+   * @returns {any} The value at the specified property path, or undefined if not found
+   * 
+   * @example
+   * const user = { id: 1, name: 'John', contact: { email: 'john@example.com' } };
+   * 
+   * // Access simple property
+   * const name = bodyAreaModel.getValueByT(user, 'name');
+   * console.log(name); // 'John'
+   * 
+   * // Access nested property
+   * const email = bodyAreaModel.getValueByT(user, 'contact.email');
+   * console.log(email); // 'john@example.com'
+   */
   getValueByT(e, r) {
     if (e && r)
       return r.includes(".") ? this.getPropertyValue(e, r.split(".")) : e[r];
   }
+  /**
+   * Changes the order of columns by moving a column from one position to another.
+   * This method updates both the properties array and calls the parent class implementation.
+   * 
+   * @param {number} sourceColumnIndex - The index of the column to move
+   * @param {number} targetColumnIndex - The index where the column should be moved to
+   * 
+   * @example
+   * // Move the second column (index 1) to the fourth position (index 3)
+   * bodyAreaModel.changeColumnOrder(1, 3);
+   * 
+   * @example
+   * // Move the last column to the first position
+   * const lastIndex = bodyAreaModel.columnDefs.length - 1;
+   * bodyAreaModel.changeColumnOrder(lastIndex, 0);
+   */
   changeColumnOrder(e, r) {
     this.arrayMove(this.properties, e, r), super.changeColumnOrder(e, r);
   }
+  /**
+   * Gets the custom CSS classes that should be applied to a cell.
+   * This method extends the parent class implementation to add selection and focus classes.
+   * 
+   * @param {number} rowIndex - The index of the row
+   * @param {number} _columnIndex - The index of the column (unused in this implementation)
+   * @returns {string[]} An array of CSS class names to apply to the cell
+   * 
+   * @example
+   * // Get the CSS classes for a cell
+   * const classes = bodyAreaModel.getCustomClassesAt(1, 2);
+   * console.log('CSS classes:', classes);
+   * 
+   * @example
+   * // Apply the classes to a cell element
+   * const cellElement = document.createElement('div');
+   * const classes = bodyAreaModel.getCustomClassesAt(rowIndex, columnIndex);
+   * cellElement.classList.add(...classes);
+   */
   getCustomClassesAt(e, r) {
     const a = super.getCustomClassesAt(e, r);
     return this.getRowByIndex(e).selected && a.push(this.selectedRowClass), this._focusedRowIndex === e && a.push(this.focusedRowClass), a;
   }
+  /**
+   * Creates a comparator function for sorting rows based on a property and sort direction.
+   * This method supports custom sort comparators defined in column definitions.
+   * 
+   * @param {string} property - The property to sort by
+   * @param {number} f - The sort direction factor: 1 for ascending, -1 for descending, 0 for no sorting
+   * @returns {(a: T, b: T) => number} A comparator function that compares two rows
+   * 
+   * @example
+   * // Create a comparator for sorting by name in ascending order
+   * const comparator = bodyAreaModel.genericFlatTableSortComparator('name', 1);
+   * 
+   * // Sort the rows using the comparator
+   * const sortedRows = [...bodyAreaModel.getFilteredRows()].sort(comparator);
+   */
   genericFlatTableSortComparator(e, r) {
     const a = this.columnDefs.find((t) => t.property === e);
     return (t, n) => {
@@ -250,6 +570,16 @@ class De extends ee {
       return a != null && a.sortComparator ? r * a.sortComparator(m, d, t, n, r) : this.sorterService.genericSortComparator(m, d, r);
     };
   }
+  /**
+   * Recursively gets a value from an object using an array of property names.
+   * This is a helper method used by `getValueByT` to access nested properties.
+   * 
+   * @param {any} o - The object to get the value from
+   * @param {string[]} props - An array of property names representing the path to the value
+   * @returns {any} The value at the specified property path, or undefined if not found
+   * 
+   * @private
+   */
   getPropertyValue(e, r) {
     const a = r.shift(), t = e[a];
     return t && r.length ? this.getPropertyValue(t, r) : t;
@@ -1574,6 +1904,35 @@ class W {
   }
 }
 class B extends De {
+  /**
+   * Creates an instance of AreaModelObjectArrayWithColumndefs.
+   *
+   * @param {AreaIdent} areaIdent - Identifies which area of the table this model represents ('header', 'body', or 'footer')
+   * @param {T[]} rows - The array of objects that represent the rows in this area
+   * @param {ColumnDefIf[]} columnDefs - Definitions for the columns in this area (required parameter)
+   * @param {number} defaultRowHeight - The default height for rows in this area (in pixels)
+   * @param {string} [selectedRowClass='ge-selected-row'] - CSS class to apply to selected rows
+   * @param {string} [focusedRowClass='ge-focused-row'] - CSS class to apply to the focused row
+   *
+   * @example
+   * const rows = [
+   *   { id: 1, name: 'John', age: 30 },
+   *   { 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 bodyAreaModel = new AreaModelObjectArrayWithColumndefs(
+   *   'body',
+   *   rows,
+   *   columnDefs,
+   *   30
+   * );
+   */
   constructor(e, r, a, t, n = "ge-selected-row", m = "ge-focused-row") {
     super(
       e,
@@ -2228,70 +2587,620 @@ class te {
   constructor() {
     this.areaIdent = "body", this.rowSelectionModel = void 0;
   }
+  /**
+   * Changes the order of columns by moving a column from one position to another.
+   * This method is called when the user drags a column to a new position.
+   * The base implementation does nothing and should be overridden by subclasses
+   * that support column reordering.
+   * 
+   * @param {number} _sourceColumnIndex - The index of the column to move
+   * @param {number} _targetColumnIndex - The index where the column should be moved to
+   * @returns {void}
+   * 
+   * @example
+   * // Override in a subclass to implement column reordering
+   * changeColumnOrder(sourceColumnIndex: number, targetColumnIndex: number): void {
+   *   // Move the column in the internal data structure
+   *   this.arrayMove(this.columns, sourceColumnIndex, targetColumnIndex);
+   * }
+   */
   changeColumnOrder(e, r) {
   }
+  /**
+   * Sorts the rows in this area based on the provided sort items.
+   * This method is called when the user clicks on a sortable column header.
+   * The base implementation returns false (no sorting performed) and should be
+   * overridden by subclasses that support sorting.
+   * 
+   * @param {SortItem[]} _sortItems - An array of sort items, each containing a column index and sort direction
+   * @returns {boolean} True if sorting was performed, false otherwise
+   * 
+   * @example
+   * // Override in a subclass to implement sorting
+   * doSort(sortItems: SortItem[]): boolean {
+   *   if (!sortItems.length) return false;
+   *   
+   *   // Apply sorting to the rows
+   *   this.rows.sort((a, b) => {
+   *     const { columnIndex, sortState } = sortItems[0];
+   *     const valueA = this.getValueAt(this.rows.indexOf(a), columnIndex);
+   *     const valueB = this.getValueAt(this.rows.indexOf(b), columnIndex);
+   *     
+   *     const direction = sortState === 'asc' ? 1 : -1;
+   *     if (valueA < valueB) return -1 * direction;
+   *     if (valueA > valueB) return 1 * direction;
+   *     return 0;
+   *   });
+   *   
+   *   return true;
+   * }
+   */
   doSort(e) {
     return !1;
   }
+  /**
+   * Sorts the rows in this area using a custom comparator function.
+   * This method provides more flexibility than doSort for complex sorting logic.
+   * The base implementation does nothing and should be overridden by subclasses
+   * that support custom sorting.
+   * 
+   * @param {(a: any, b: any) => number} [_compareFn] - A function that compares two rows and returns a number:
+   *   - Negative if a should come before b
+   *   - Positive if a should come after b
+   *   - Zero if they are equivalent for sorting purposes
+   * @returns {void}
+   * 
+   * @example
+   * // Override in a subclass to implement custom sorting
+   * sort(compareFn?: (a: any, b: any) => number): void {
+   *   if (!compareFn) return;
+   *   
+   *   // Apply the custom sort function
+   *   this.rows.sort(compareFn);
+   * }
+   */
   sort(e) {
   }
+  /**
+   * Applies a filter function to the rows in this area.
+   * This method is called when a filter is applied to the table.
+   * The base implementation does nothing and should be overridden by subclasses
+   * that support filtering.
+   * 
+   * @param {FilterFunction<T>} _predictFn - A function that takes a row and returns true if the row should be visible
+   * @returns {void}
+   * 
+   * @example
+   * // Override in a subclass to implement filtering
+   * externalFilterChanged<T>(predictFn: FilterFunction<T>): void {
+   *   // Apply the filter to the rows
+   *   this.filteredRows = this.rows.filter(predictFn);
+   * }
+   */
   externalFilterChanged(e) {
   }
+  /**
+   * Returns a cell renderer for the cell at the specified row and column indices.
+   * A cell renderer is responsible for rendering the cell content in a custom way.
+   * The base implementation returns undefined (default rendering) and should be
+   * overridden by subclasses that support custom cell rendering.
+   * 
+   * @param {number} _rowIndex - The index of the row
+   * @param {number} _columnIndex - The index of the column
+   * @returns {CellRendererIf | undefined} A cell renderer instance, or undefined for default rendering
+   * 
+   * @example
+   * // Override in a subclass to provide custom cell renderers
+   * getCellRenderer(rowIndex: number, columnIndex: number): CellRendererIf | undefined {
+   *   // Get renderer from column definition
+   *   const columnDef = this.columnDefs[columnIndex];
+   *   return columnDef?.rendererMap?.[this.areaIdent];
+   * }
+   */
   getCellRenderer(e, r) {
   }
+  /**
+   * Returns the column span value for the cell at the specified row and column indices.
+   * A colspan value of N means the cell spans N columns horizontally.
+   * The base implementation returns 0 (no spanning) and should be overridden by
+   * subclasses that support column spanning.
+   * 
+   * @param {number} _rowIndex - The index of the row
+   * @param {number} _columnIndex - The index of the column
+   * @returns {number} The colspan value (number of columns the cell spans)
+   * 
+   * @example
+   * // Override in a subclass to implement column spanning
+   * getColspanAt(rowIndex: number, columnIndex: number): number {
+   *   // Special case: first row, first column spans 3 columns
+   *   if (rowIndex === 0 && columnIndex === 0) return 3;
+   *   
+   *   // No spanning for other cells
+   *   return 1;
+   * }
+   */
   getColspanAt(e, r) {
     return 0;
   }
+  /**
+   * Returns an array of CSS class names to apply to the cell at the specified row and column indices.
+   * This method allows for custom styling of individual cells.
+   * The base implementation returns an empty array (no custom classes) and should be
+   * overridden by subclasses that support custom cell styling.
+   * 
+   * @param {number} _rowIndex - The index of the row
+   * @param {number} _columnIndex - The index of the column
+   * @returns {string[]} An array of CSS class names
+   * 
+   * @example
+   * // Override in a subclass to implement custom cell classes
+   * getCustomClassesAt(rowIndex: number, columnIndex: number): string[] {
+   *   const classes: string[] = [];
+   *   
+   *   // Add classes based on row index
+   *   if (rowIndex % 2 === 0) {
+   *     classes.push('even-row');
+   *   } else {
+   *     classes.push('odd-row');
+   *   }
+   *   
+   *   // Add classes based on cell value
+   *   const value = this.getValueAt(rowIndex, columnIndex);
+   *   if (typeof value === 'number' && value < 0) {
+   *     classes.push('negative-value');
+   *   }
+   *   
+   *   return classes;
+   * }
+   */
   getCustomClassesAt(e, r) {
     return [];
   }
+  /**
+   * Returns an object containing CSS style properties to apply to the cell at the specified row and column indices.
+   * This method allows for inline styling of individual cells.
+   * The base implementation returns undefined (no custom styles) and should be
+   * overridden by subclasses that support custom cell styling.
+   * 
+   * @param {number} _rowIndex - The index of the row
+   * @param {number} _columnIndex - The index of the column
+   * @returns {{ [key: string]: string } | undefined} An object with CSS style properties, or undefined if no custom styles
+   * 
+   * @example
+   * // Override in a subclass to implement custom cell styles
+   * getCustomStyleAt(rowIndex: number, columnIndex: number): { [key: string]: string } | undefined {
+   *   // Apply background color based on value
+   *   const value = this.getValueAt(rowIndex, columnIndex);
+   *   
+   *   if (typeof value === 'number') {
+   *     // Color gradient based on value
+   *     if (value < 0) {
+   *       return { 'background-color': `rgba(255, 0, 0, ${Math.min(Math.abs(value) / 100, 0.5)})` };
+   *     } else if (value > 0) {
+   *       return { 'background-color': `rgba(0, 255, 0, ${Math.min(value / 100, 0.5)})` };
+   *     }
+   *   }
+   *   
+   *   return undefined; // No custom styles
+   * }
+   */
   getCustomStyleAt(e, r) {
   }
+  /**
+   * Returns the maximum colspan value that can occur in this area model.
+   * This value is used to optimize rendering performance.
+   * The base implementation returns 0 (no colspans) and should be overridden by
+   * subclasses that support column spanning.
+   * 
+   * @returns {number} The maximum possible colspan value in this area
+   * 
+   * @example
+   * // Override in a subclass to specify maximum colspan
+   * getMaxColspan(): number {
+   *   // If the model has colspans, return the maximum possible value
+   *   return 3; // If some cells span up to 3 columns
+   * }
+   */
   getMaxColspan() {
     return 0;
   }
+  /**
+   * Returns the maximum rowspan value that can occur in this area model.
+   * This value is used to optimize rendering performance.
+   * The base implementation returns 0 (no rowspans) and should be overridden by
+   * subclasses that support row spanning.
+   * 
+   * @returns {number} The maximum possible rowspan value in this area
+   * 
+   * @example
+   * // Override in a subclass to specify maximum rowspan
+   * getMaxRowspan(): number {
+   *   // If the model has rowspans, return the maximum possible value
+   *   return 2; // If some cells span up to 2 rows
+   * }
+   */
   getMaxRowspan() {
     return 0;
   }
+  /**
+   * Returns the row object at the specified index.
+   * This method provides access to the underlying data structure.
+   * The base implementation returns undefined and should be overridden by
+   * subclasses that have a row-based data structure.
+   * 
+   * @param {number} _rowIndex - The index of the row
+   * @returns {any} The row object, or undefined if the row doesn't exist
+   * 
+   * @example
+   * // Override in a subclass to provide access to row data
+   * getRowByIndex(rowIndex: number): any {
+   *   if (rowIndex < 0 || rowIndex >= this.data.length) return undefined;
+   *   return this.data[rowIndex];
+   * }
+   */
   getRowByIndex(e) {
   }
+  /**
+   * Returns the number of rows in this area.
+   * This is a fundamental method that determines the vertical size of the area.
+   * The base implementation returns 0 (no rows) and should be overridden by
+   * all subclasses.
+   * 
+   * @returns {number} The number of rows in the area
+   * 
+   * @example
+   * // Override in a subclass to provide the row count
+   * getRowCount(): number {
+   *   return this.data.length;
+   * }
+   */
   getRowCount() {
     return 0;
   }
+  /**
+   * Returns the height of the row at the specified index, in pixels.
+   * This method allows for variable row heights in the table.
+   * The base implementation returns 0 and should be overridden by
+   * all subclasses.
+   * 
+   * @param {number} _rowIndex - The index of the row
+   * @returns {number} The height of the row in pixels
+   * 
+   * @example
+   * // Override in a subclass to provide fixed row heights
+   * getRowHeight(rowIndex: number): number {
+   *   return 30; // 30px for all rows
+   * }
+   * 
+   * @example
+   * // Override in a subclass to provide variable row heights
+   * getRowHeight(rowIndex: number): number {
+   *   // First row is taller
+   *   if (rowIndex === 0) return 50;
+   *   
+   *   // Default height for other rows
+   *   return 30;
+   * }
+   */
   getRowHeight(e) {
     return 0;
   }
+  /**
+   * Returns the row span value for the cell at the specified row and column indices.
+   * A rowspan value of N means the cell spans N rows vertically.
+   * The base implementation returns 0 (no spanning) and should be overridden by
+   * subclasses that support row spanning.
+   * 
+   * @param {number} _rowIndex - The index of the row
+   * @param {number} _columnIndex - The index of the column
+   * @returns {number} The rowspan value (number of rows the cell spans)
+   * 
+   * @example
+   * // Override in a subclass to implement row spanning
+   * getRowspanAt(rowIndex: number, columnIndex: number): number {
+   *   // Special case: first column spans 2 rows at the beginning
+   *   if (columnIndex === 0 && rowIndex % 2 === 0) return 2;
+   *   
+   *   // No spanning for other cells
+   *   return 1;
+   * }
+   */
   getRowspanAt(e, r) {
     return 0;
   }
+  /**
+   * Returns the tooltip text for the cell at the specified row and column indices.
+   * This tooltip will be displayed when the user hovers over the cell.
+   * The base implementation returns undefined (no tooltip) and should be overridden by
+   * subclasses that support tooltips.
+   * 
+   * @param {number} _rowIndex - The index of the row
+   * @param {number} _columnIndex - The index of the column
+   * @returns {any} The tooltip content (usually a string)
+   * 
+   * @example
+   * // Override in a subclass to provide tooltips
+   * getTooltipAt(rowIndex: number, columnIndex: number): any {
+   *   // Use the cell value as the tooltip
+   *   return this.getValueAt(rowIndex, columnIndex);
+   *   
+   *   // Or provide a more detailed tooltip
+   *   // const value = this.getValueAt(rowIndex, columnIndex);
+   *   // return `Value: ${value}\nRow: ${rowIndex}\nColumn: ${columnIndex}`;
+   * }
+   */
   getTooltipAt(e, r) {
   }
+  /**
+   * Returns the value of the cell at the specified row and column indices.
+   * This is one of the most important methods in the area model, as it provides
+   * the actual data to be displayed in each cell.
+   * The base implementation returns undefined and should be overridden by
+   * all subclasses.
+   * 
+   * @param {number} _rowIndex - The index of the row
+   * @param {number} _columnIndex - The index of the column
+   * @returns {any} The value at the specified cell
+   * 
+   * @example
+   * // Override in a subclass for a 2D array model
+   * getValueAt(rowIndex: number, columnIndex: number): any {
+   *   if (rowIndex < 0 || rowIndex >= this.data.length) return undefined;
+   *   const row = this.data[rowIndex];
+   *   if (columnIndex < 0 || columnIndex >= row.length) return undefined;
+   *   return row[columnIndex];
+   * }
+   * 
+   * @example
+   * // Override in a subclass for an object array model
+   * getValueAt(rowIndex: number, columnIndex: number): any {
+   *   const row = this.getRowByIndex(rowIndex);
+   *   if (!row) return undefined;
+   *   
+   *   const property = this.columnDefs[columnIndex].property;
+   *   return row[property];
+   * }
+   */
   getValueAt(e, r) {
   }
+  /**
+   * Returns a string representation of the cell value at the specified row and column indices.
+   * This method is used when exporting the table data or copying to clipboard.
+   * The base implementation returns an empty string and should be overridden by
+   * subclasses that need custom text conversion.
+   * 
+   * @param {number} _rowIndex - The index of the row
+   * @param {number} _columnIndex - The index of the column
+   * @returns {string} The text value of the specified cell
+   * 
+   * @example
+   * // Override in a subclass to provide text representation
+   * getTextValueAt(rowIndex: number, columnIndex: number): string {
+   *   const value = this.getValueAt(rowIndex, columnIndex);
+   *   
+   *   // Handle different data types appropriately
+   *   if (value === null || value === undefined) return '';
+   *   if (value instanceof Date) return value.toISOString();
+   *   return String(value);
+   * }
+   */
   getTextValueAt(e, r) {
     return "";
   }
+  /**
+   * Returns the Y-coordinate (in pixels) of the top of the row at the specified index.
+   * This method is used for scrolling and positioning rows in the viewport.
+   * The base implementation returns 0 and should be overridden by
+   * subclasses that support scrolling.
+   * 
+   * @param {number} _rowIndex - The index of the row
+   * @returns {number} The Y-coordinate of the top of the row, in pixels
+   * 
+   * @example
+   * // Override in a subclass with fixed row heights
+   * getYPosByRowIndex(rowIndex: number): number {
+   *   return rowIndex * this.defaultRowHeight;
+   * }
+   * 
+   * @example
+   * // Override in a subclass with variable row heights
+   * getYPosByRowIndex(rowIndex: number): number {
+   *   // Use a pre-calculated array of Y-positions
+   *   return this.yPositions[rowIndex];
+   *   
+   *   // Or calculate on-the-fly
+   *   // let yPos = 0;
+   *   // for (let i = 0; i < rowIndex; i++) {
+   *   //   yPos += this.getRowHeight(i);
+   *   // }
+   *   // return yPos;
+   * }
+   */
   getYPosByRowIndex(e) {
     return 0;
   }
+  /**
+   * Initializes the area model.
+   * This method is called internally by the TableModel during initialization.
+   * It can be used to perform any necessary setup, such as calculating row positions.
+   * The base implementation does nothing and can be overridden by
+   * subclasses that need initialization.
+   * 
+   * @returns {void}
+   * 
+   * @example
+   * // Override in a subclass to perform initialization
+   * init(): void {
+   *   // Calculate y-positions for all rows
+   *   this.yPositions = [];
+   *   let currentY = 0;
+   *   
+   *   for (let i = 0; i < this.getRowCount(); i++) {
+   *     this.yPositions[i] = currentY;
+   *     currentY += this.getRowHeight(i);
+   *   }
+   * }
+   */
   init() {
   }
+  /**
+   * Determines whether the cell at the specified row and column indices is editable.
+   * If true, the user can edit the cell content.
+   * The base implementation returns false (not editable) and should be overridden by
+   * subclasses that support cell editing.
+   * 
+   * @param {number} _rowIndex - The index of the row
+   * @param {number} _columnIndex - The index of the column
+   * @returns {boolean} True if the cell is editable, false otherwise
+   * 
+   * @example
+   * // Override in a subclass to implement cell editability
+   * isEditable(rowIndex: number, columnIndex: number): boolean {
+   *   // Header cells are not editable
+   *   if (this.areaIdent === 'header') return false;
+   *   
+   *   // First column is not editable (e.g., ID column)
+   *   if (columnIndex === 0) return false;
+   *   
+   *   // Other cells in the body are editable
+   *   return this.areaIdent === 'body';
+   * }
+   */
   isEditable(e, r) {
     return !1;
   }
+  /**
+   * Determines whether this area supports filtering.
+   * If true, the area can be filtered using the externalFilterChanged method.
+   * The base implementation returns false (not filterable) and should be overridden by
+   * subclasses that support filtering.
+   * 
+   * @returns {boolean} True if the area is filterable, false otherwise
+   * 
+   * @example
+   * // Override in a subclass to enable filtering
+   * isFilterable(): boolean {
+   *   // Only the body area is filterable
+   *   return this.areaIdent === 'body';
+   * }
+   */
   isFilterable() {
     return !1;
   }
+  /**
+   * Determines whether the row at the specified index is checkable.
+   * If true, a checkbox will be rendered at the beginning of the row.
+   * The base implementation returns false (not checkable) and should be overridden by
+   * subclasses that support row selection.
+   * 
+   * @param {number} _rowIndex - The index of the row
+   * @returns {boolean} True if the row is checkable, false otherwise
+   * 
+   * @example
+   * // Override in a subclass to implement row checkability
+   * isRowCheckable(rowIndex: number): boolean {
+   *   // All rows in the body are checkable
+   *   if (this.areaIdent !== 'body') return false;
+   *   
+   *   // Except for special rows
+   *   const row = this.getRowByIndex(rowIndex);
+   *   return row && !row.locked;
+   * }
+   */
   isRowCheckable(e) {
     return !1;
   }
+  /**
+   * Returns the checked state of the row at the specified index.
+   * The base implementation returns undefined (not checked) and should be overridden by
+   * subclasses that support row selection.
+   * 
+   * @param {number} _rowIndex - The index of the row
+   * @returns {CheckedType | undefined} The checked state of the row (true, false, or 'indeterminate'),
+   *                                   or undefined if the row is not checkable
+   * 
+   * @example
+   * // Override in a subclass to implement row checked state
+   * isRowChecked(rowIndex: number): CheckedType | undefined {
+   *   if (!this.rowSelectionModel) return undefined;
+   *   
+   *   const row = this.getRowByIndex(rowIndex);
+   *   return this.rowSelectionModel.isRowChecked(row);
+   * }
+   */
   isRowChecked(e) {
   }
+  /**
+   * Determines whether the cell at the specified row and column indices is selectable.
+   * If true, the user can select the cell.
+   * The base implementation returns false (not selectable) and should be overridden by
+   * subclasses that support cell selection.
+   * 
+   * @param {number} _rowIndex - The index of the row
+   * @param {number} _columnIndex - The index of the column
+   * @returns {boolean} True if the cell is selectable, false otherwise
+   * 
+   * @example
+   * // Override in a subclass to implement cell selectability
+   * isSelectable(rowIndex: number, columnIndex: number): boolean {
+   *   // All cells in the body are selectable
+   *   return this.areaIdent === 'body';
+   * }
+   */
   isSelectable(e, r) {
     return !1;
   }
+  /**
+   * Sets the checked state of the row at the specified index.
+   * The base implementation does nothing and should be overridden by
+   * subclasses that support row selection.
+   * 
+   * @param {number} _rowIndex - The index of the row
+   * @param {boolean} _checked - The new checked state
+   * @returns {void}
+   * 
+   * @example
+   * // Override in a subclass to implement row checking
+   * setRowChecked(rowIndex: number, checked: boolean): void {
+   *   if (!this.rowSelectionModel) return;
+   *   
+   *   const row = this.getRowByIndex(rowIndex);
+   *   if (row) {
+   *     this.rowSelectionModel.checkRow(row, checked);
+   *   }
+   * }
+   */
   setRowChecked(e, r) {
   }
+  /**
+   * Sets the value of a cell at the specified row and column indices.
+   * This method is called when a cell is edited by the user or programmatically.
+   * The base implementation returns false (value not set) and should be overridden by
+   * subclasses that support cell editing.
+   * 
+   * @param {number} _rowIndex - The index of the row containing the cell
+   * @param {number} _columnIndex - The index of the column containing the cell
+   * @param {any} _value - The new value to set
+   * @returns {boolean} - True if the value was successfully set, false otherwise
+   * 
+   * @example
+   * // Override in a subclass to implement cell value setting
+   * setValue(rowIndex: number, columnIndex: number, value: any): boolean {
+   *   // Check if the cell is editable
+   *   if (!this.isEditable(rowIndex, columnIndex)) return false;
+   *   
+   *   // For a 2D array model
+   *   if (rowIndex >= 0 && rowIndex < this.data.length) {
+   *     const row = this.data[rowIndex];
+   *     if (columnIndex >= 0 && columnIndex < row.length) {
+   *       row[columnIndex] = value;
+   *       return true;
+   *     }
+   *   }
+   *   
+   *   return false;
+   * }
+   */
   setValue(e, r, a) {
     return !1;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guiexpert/demo-table-models",
-  "version": "1.1.79",
+  "version": "1.1.81",
   "type": "module",
   "main": "./index.js",
   "types": "./index.d.ts",
@@ -8,7 +8,9 @@
     "entryFile": "src/index.ts"
   },
   "publishConfig": {
-    "directory": "dist"
+    "directory": "dist",
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
   },
   "exports": {
     ".": {
@@ -18,7 +20,7 @@
   },
   "dependencies": {
     "tslib": "^2.3.0",
-    "@guiexpert/table": "^1.1.79"
+    "@guiexpert/table": "^1.1.81"
   },
   "devDependencies": {
     "@types/node": "^20.11.17",