Creates and runs one table in a host element – the core that every framework wrapper uses.

It connects the four building blocks: host element, table model, options and an event listener, renders only the visible cells (virtual scrolling in both directions) and handles mouse, keyboard, selection, sorting and editing. Talk to the table through getApi – the TableApi.

The host element needs a height: the table fills it.

Example

import "@guiexpert/table/css/main.css";
import { EventAdapter, SimpleDomService, TableFactory, TableOptions, TableScope } from "@guiexpert/table";

const host = document.querySelector<HTMLDivElement>(".table-div")!; // CSS: .table-div { height: 500px }
const tableModel = TableFactory.createTableModel({ rows: orders });
const tableScope = new TableScope(host, tableModel, new SimpleDomService(), new TableOptions(), new EventAdapter());
tableScope.firstInit();
const tableApi = tableScope.getApi();

// later: remove the table (route change, new model)
tableScope.destroy();

See

Training: Your first table in plain TypeScript

Hierarchy

Implements

Constructors

Properties

Methods

addAndRenderCellDiv adjustAfterScrolling adjustArea adjustBody adjustColumnsToRowParent adjustContainersAndRows adjustDetailLayerBounds adjustDraggingColumn adjustHoverColumns adjustHoverRows adjustRowNumberColumnWidth afterRenderPass afterRowsMoved announce announceCopied applyCellAria applyCellChanges applyCssClasses applyRowAria applySortItems autoResizeColumns calcAutoColumnWidths canStartEditing cancelEditing cancelPendingRepaint checkForScrollPosSaving checkPastedValue clearCells clearSelection clientXToHostX commitCellEditor contextmenu createGeMouseEvent debounce debounceRepaint destroy disposeRendering drawBigCell ensureColumnIsVisible ensureRowIsVisible externalFilterChanged fillRange findRowOfImportantRowspanCell firstInit focusDetailMaster focusModel getActiveBodyCell getApi getArea getAreaAndSideIdentByAttr getAreaChild getAriaGridInfo getAvailableColumnWidth getBodyCellAtHostPoint getBodyCellRectInHost getBodyContentHeight getBodyRowIndexAtY getBodyRowLayout getBodyRowTop getBodyViewport getCellInput getCheckboxAriaLabel getClipboardService getColumnAriaLabel getColumnLeftInHost getColumnWidths getContentScrollLeft getContentScrollRangeY getCopyValue getDisplayedRowCount getDomService getEditTexts getEditingOptions getEventListener getFillHandleOptions getFillSourceRange getFirstDataColumnIndex getFirstFullVisibleRowIndex getFirstVisibleRowIndex getFormulaErrorText getHeaderFocus getInCellEditorCell getLastFullVisibleRowIndex getLastVisibleRowIndex getMouseEventTarget getNumberByAttr getOverlayState getRowHeights getScrollLeftForColumnIndex getScrollerRangeY getScrollerToContentRatioY getSelectedBodyCells getSheetTexts getShortcutLayers getShownCellValue getStringByAttr getTreeArrowColumnIndex getTypedCellValue getUndoOptions getUndoTexts getViewportScrollLeft hasBodyRowExtras hasShownColumnBeside headerGroupsChanged hideDraggingColumn hideHover hideHoverColumn hideHoverRow hideOverlay holdSelectionEvents initHostAria initRenderEditor invalidateAggregates invalidateRowLayout isBatchEditActive isColumnResizable isDestroyed isEditing isEventInDetail isOverlayBlocking isRowGroupingOrTree isRtl isScrollHeightCapped measureRowNumberText mouseDraggingEndOnFrame mouseDraggingOnFrame mouseMove moveActiveCell nextShownColumn onActionTriggered onDetailHeightChanged onDetailToggled onFocusChanged onHeaderDblClicked onMouseClicked onMouseDown onOverlayChanged onSelectionChanged onWheel publishGeMouseEvent reSort reapplySorting recalcColumnWidths recalcWrappers refreshAfterStructureChange removeHostAria renderContentOfDraggingColumn renderContentOfDraggingColumnForArea repaint repaintHard rerenderCalculatedCells rerenderCellContent rerenderDerivedFooterCells rerenderGroupRowCells resetEditorRenderer resetSizeOfWrapperDiv resolvePastedValue restoreHostAriaAttribute rowsAppended scrollToIndex scrollToPixel selectBodyRange selectionModel setBodyRowExtra setColumnVisible setColumnWidth setDetailExpanded setDragging setEditorDraft setFooterVisible setHeaderGroupCollapsed setHeaderVisible setHostAriaAttribute setHostKeyShortcuts setPivotConfig setRawValue setRowGroupBy setSelectionModel setTreeRowExpanded setViewportScrollLeft showLoadingOverlay showNoRowsOverlay snapToDevicePixel sort sortByColumn startEditing stateChanged storeColumnWidths subscribe takeFocusFromDetail toggleBooleanCell toggleDetail toggleExpandCollapseAll toggleHeaderGroup toggleRowCheckbox updateCells updateModelValueAfterEdit updateOverlay writeCells writePastedCells writeUndoCells create

Constructors

Properties

allExpanded: boolean = true

The last "expand / collapse all" state – the header icon toggles it.

areaBodyCenter: DivScope
areaBodyCenterGeo: GeoData = ...
areaBodyEast: DivScope
areaBodyEastGeo: GeoData = ...
areaBodyWest: DivScope
areaBodyWestGeo: GeoData = ...
areaFooterCenter: DivScope
areaFooterEast: DivScope
areaFooterWest: DivScope
areaHeaderCenter: DivScope
areaHeaderEast: DivScope
areaHeaderWest: DivScope
areaHeightsOfRenderPass?: {
    body: undefined | number;
    footer: undefined | number;
    header: undefined | number;
}

Area heights read once at the start of adjustAfterScrolling() (before the DOM is modified).

Type declaration

  • body: undefined | number
  • footer: undefined | number
  • header: undefined | number
ariaIds: AriaIds

The IDs this table uses for ARIA references (prefix from the host id).

Since

1.1.91

ariaTexts: AriaTextsIf

Texts for screen readers (English defaults + tableOptions.ariaTexts).

Since

1.1.91

batchEditService?: BatchEditService

Batch edit of this table (pending values, shown in the cells) – created by TableScope.

Since

1.1.96

borderFixedEast: HTMLDivElement
borderFixedWest: HTMLDivElement
borderFooterTop: HTMLDivElement
borderHeaderBottom: HTMLDivElement
cellEditorService?: CellEditorService

Excel-style editing of this table (the editor above the cell) – created by TableScope with tableOptions.editing.

Since

1.1.99

cleanupFunctions: {
    body: Function[];
    footer: Function[];
    header: Function[];
} = ...

Type declaration

  • body: Function[]
  • footer: Function[]
  • header: Function[]
clipboardService?: ClipboardService

Copy, cut and paste: with the option keys and events, otherwise created for the API.

Since

1.1.99

colAndRowspanModels: AreaObjectMapType<ColAndRowspanModel> = ...
contentDiv: HTMLDivElement
contentScrollTop: number = 0

Content pixels scrolled out at the top, i.e. the offset that is actually rendered (see adjustBody).

contentWrapperDiv: HTMLDivElement
copyService: CopyServiceIf = ...
debounceTimeout?: null | Timeout

The resolved writing direction of the table (TableOptionsIf.direction; "auto" is decided when the table is built).

Since

1.1.98

displayedRowCount: number = 0
dragging: boolean = false
draggingColumn: HTMLDivElement
draggingTargetColumnIndex: number = -1
editing: boolean = false
eventListener: EventListenerIf
excelService: ExcelServiceIf = ...
fillHandleService?: FillHandleService

Fill handle of this table – created by TableScope.

Since

1.1.96

firstFullVisibleRowIndex: number = -1
firstVisibleRowIndex: number = -1
getFocusModel?: GetT<FocusModelIf>
getSelectionModel?: GetT<SelectionModelIf>
headerFocus?: [number, number]

The header cell with the keyboard focus (row, column of the cell's origin) – set by the arrow-up key in the first body row, see TableScope. undefined: the focus is in the body (FocusModelIf).

hostElement: HTMLDivElement
hoverColumn: HTMLDivElement
hoverRow: HTMLDivElement
inputHandler: InputHandler
keyEvent?: GeKeyEvent
lastFullVisibleRowIndex: number = -1
lastVisibleRowIndex: number = -1
licenseManager: LicenseManager = ...
listenerAbortController: AbortController = ...

Signal for all DOM listeners of this table (host element, scroll viewport, window). destroy aborts it, which removes every listener at once.

liveAnnouncer: LiveAnnouncer

The live region of this table: screen readers speak its messages (sorting, filter, copy …). Use TableApi.announce for own messages.

Since

1.1.91

loggingActive: boolean = false
masterDetailService?: MasterDetailService

Master/detail of this table (detail rows below master rows) – created by TableScope with tableOptions.masterDetail.

Since

1.1.97

mouseEvent?: GeMouseEvent
mouseHandler: MouseHandler
pendingContentScroll?: {
    contentTop: number;
    scrollTop: number;
}

Exact content position requested by scrollToPixel() for a capped scroll height (see TableScope).

Type declaration

  • contentTop: number
  • scrollTop: number
pixelLimitForFullVisible: number = 5
resizeHandler: ResizeHandler
rowDragService?: RowDragService

Row drag of this table (drag handles, pointer and keyboard drag) – created by TableScope.

Since

1.1.95

scrollFactorX: number = 0
scrollFactorY: number = 0
scrollLeft: number = 0
scrollTop: number = 0
scrollViewport: HTMLDivElement
scrollViewportLeft: number = 0
selectionService: SelectionService = ...
shortcutKeyEvent?: KeyboardEvent

The key event the ShortcutService is handling right now (undefined for triggerAction).

Since

1.1.99

shortcutService: ShortcutService
stateService: TableStateService

Collects, applies, stores and reports the state of this table (column layout, sorting, scroll, tree, checked and selected rows …). Use TableApi.getState / TableApi.applyState.

Since

1.1.92

storeScrollPosStateService?: StoreStateScrollPosService

Deprecated

since 1.1.92 – no longer used, see TableStateService.

storeSortingService?: StoreStateSortingService

Deprecated

since 1.1.92 – always undefined; the state is kept by stateService.

storeStateCollapsedExpandService?: StoreStateCollapsedExpandService

Deprecated

since 1.1.92 – always undefined; the state is kept by stateService.

storedColumnWidths: number[] = []
tableModel: TableModelIf
tableOptions: TableOptionsIf
tableOverlay: TableOverlay

The overlay layer over the body ("Loading…", "No rows to show").

Since

1.1.92

tableSheet?: TableSheet

Cell formulas of this table – created by TableScope with tableOptions.cellFormulas (flat bodies).

Since

1.1.99

tree: boolean = false
undoService?: UndoService

Undo and redo: records the changes of the write path (only with the option).

Since

1.1.99

actionsBlockedWhileLoading: ("COPY_2_CLIPBOARD" | "START_EDITING" | "TOGGLE_SELECTION" | "SELECT_ALL" | "DESELECT_ALL" | "NAVIGATE_LEFT" | "NAVIGATE_RIGHT" | "NAVIGATE_UP" | "NAVIGATE_DOWN" | "NAVIGATE_ROW_START" | "NAVIGATE_ROW_END" | "NAVIGATE_FIRST_CELL" | "NAVIGATE_LAST_CELL" | "NAVIGATE_PAGE_UP" | "NAVIGATE_PAGE_DOWN" | "ACTIVATE_CELL" | "MOVE_ROW_UP" | "MOVE_ROW_DOWN" | "FILL_DOWN" | "FILL_RIGHT" | "NAVIGATE_NEXT_CELL" | "NAVIGATE_PREVIOUS_CELL" | "EXTEND_SELECTION_UP" | "EXTEND_SELECTION_DOWN" | "EXTEND_SELECTION_LEFT" | "EXTEND_SELECTION_RIGHT" | "EXTEND_SELECTION_ROW_START" | "EXTEND_SELECTION_ROW_END" | "EXTEND_SELECTION_PAGE_UP" | "EXTEND_SELECTION_PAGE_DOWN" | "NAVIGATE_DATA_EDGE_UP" | "NAVIGATE_DATA_EDGE_DOWN" | "NAVIGATE_DATA_EDGE_LEFT" | "NAVIGATE_DATA_EDGE_RIGHT" | "EXTEND_TO_DATA_EDGE_UP" | "EXTEND_TO_DATA_EDGE_DOWN" | "EXTEND_TO_DATA_EDGE_LEFT" | "EXTEND_TO_DATA_EDGE_RIGHT" | "SELECT_ROW" | "SELECT_COLUMN" | "CLEAR_CELLS" | "CLEAR_AND_EDIT" | "CUT_2_CLIPBOARD" | "PASTE_FROM_CLIPBOARD" | "UNDO" | "REDO")[] = ...

Keyboard actions ignored while a blocking loading overlay is shown (OverlayOptionsIf.blockInteractionWhileLoading).

filterAnnouncementDelayInMs: number = 400

Delay of the "42 rows" announcement after a filter change (typing in a filter field: one announcement).

maxScrollHeightInPx: number = 8_000_000

Maximum height (px) of the scrollable content wrapper. Taller tables are scrolled proportionally (rendering is based on the scroll factor anyway): browsers clamp element heights (Chrome ~33.5 million px) and GPU rasterization loses precision long before (1px borders disappear and text jitters beyond ~16.7 million px). 8 million px keep sub-pixel precision.

Methods

  • Protected

    Adjusts the layout and positioning of the specified area in the table. This method is used internally and should not be called directly.

    Parameters

    • areaIdent: AreaIdent

      The identifier of the area to adjust (e.g. header, body, footer).

    • Optional yStart: number = 0

      The starting y-position for the layout adjustments.

    Returns void

  • Adjusts the dragging column during a mouse move event.

    Parameters

    • mouseMoveEvent: GeMouseEvent

      The mouse move event.

    • sourceColumnIndex: number

      The index of the source column.

    • firstDraggingRendering: boolean

      Indicates if it's the first rendering of the dragging column.

    Returns void

  • Called after rows were moved in the body model (row drag, TableApi.moveRows): drops derived values (totals, „Show values as“) and forgets a sort function of tableApi.sort(fn) – the moved order wins. The caller repaints.

    Returns void

    Since

    1.1.95

  • "12 cells copied" – the selected cells of the shown columns (without a selection: the focused cell).

    Parameters

    • Optional _text: string

    Returns void

  • role, aria-colindex, spans and aria-sort of a cell.

    Parameters

    Returns [number, number]

    rowspan and colspan of the cell (≥ 1)

  • The one place that changes body cells (editor, fill handle, batch commit, TableApi.applyCellChanges): skips cells that are not editable (editable, calculated columns without valueSetter, group/pivot rows), applies editInputPipe and ColumnDefIf.validate, then writes – or, in a batch edit, marks the values as pending. Writing reports one onModelChanged with all cells; derived values (totals, calculated columns) are recomputed and the table repaints.

    Parameters

    • changes: CellValueChangeIf[]

      cells and values (column as index or property)

    • Optional source: CellChangeSource = 'api'

      reported in the event

    • opts: {
          undoable?: boolean;
      } = {}
      • Optional undoable?: boolean

    Returns CellChangeIf<any>[]

    the written (or, in a batch edit, newly pending) cells

    Since

    1.1.96

  • Protected

    Applies CSS classes to an HTML element.

    Parameters

    • ele: HTMLDivElement

      The HTML element to which CSS classes will be applied.

    • cssClasses: {
          [key: string]: boolean;
      } = {}

      An object containing CSS class names as keys and boolean values indicating whether to apply or remove the class.

      • [key: string]: boolean

    Returns void

  • Sorts the body by the given items (first = primary key) and sets the header icons – used to apply a stored state. Does not repaint.

    Parameters

    • sortItems: SortItem[]

      column index and sort state per sorted column; [] only clears the icons

    Returns void

    Since

    1.1.92

  • Calculates a width per column that fits the widest text of header, body and footer.

    The text is measured with the font and padding of a rendered cell label (canvas measureText), so dates, numbers and long names are no longer cut off. To stay fast with millions of rows, the body is scanned once by character length and only the longest candidates per column are measured. Without a canvas (e.g. in tests) it falls back to 8 px per character.

    Returns number[]

    one width in px per column (at least 50 px)

  • True if a new editor may open now: no header focus, no blocking overlay, no running drag or fill.

    Returns boolean

    Since

    1.1.99

  • Closes the cell editor without changing the model (Escape in the editor).

    Parameters

    • Optional editor: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement

      the editor element: its value is reset first, so the blur caused by closing does not commit the typed text ("change" event)

    Returns void

  • The message of the column's validate for a value that would be pasted, undefined if it is valid.

    Parameters

    • rowIndex: number

      display row

    • columnIndex: number

      model column

    • value: unknown

      the value

    • raw: boolean

      true: without editInputPipe

    Returns undefined | string

    the message

    Since

    1.1.99

  • Clears body cells (Delete in Excel-style editing): editable cells get ColumnDef.emptyValue (default EditingOptionsIf.emptyValue, ""), cells that are already empty are left alone; one onModelChanged with the source "clear". Without ranges: the selected cells, or the focused cell.

    Parameters

    • Optional ranges: CellRange[]

      body ranges (display indices)

    Returns number

    the number of cleared cells; -1 if more than maxClearCells

    Since

    1.1.99

  • Clears the selection in the component.

    Parameters

    • rerender: boolean = false

      Indicates whether to rerender the component after clearing the selection. Default value is false.

    Returns void

  • A client x coordinate (e.g. PointerEvent.clientX) as x in the host from the start of its padding box – the coordinates in which the table positions everything (right-to-left: from the right edge).

    Parameters

    • clientX: number

      x in client (viewport) coordinates

    Returns number

    px from the start

    Since

    1.1.98

  • Writes the value of the editor above the cell (Excel-style editing): into one cell, or – Ctrl/⌘+Enter – into several; batch edit: marks it. Used by CellEditorService.

    Parameters

    • cells: [number, number][]

      display row and model column per cell

    • value: unknown

      the editor value (it runs through editInputPipe and validate)

    • deferRepaint: boolean

      repaint after the current mouse click

    Returns {
        invalid: number;
        message?: string;
        written: number;
    }

    what happened

    • invalid: number
    • Optional message?: string
    • written: number

    Since

    1.1.99

  • Releases the table: removes all DOM listeners (host element, scroll viewport, window resize), stops the resize observer, unregisters from the selection and focus model, calls the cleanup functions of all cell renderers and clears the host element.

    Call it before you create a new TableScope for the same host element (e.g. when a framework wrapper receives a new table model) or when the table is removed from the page. Calling it twice is harmless.

    Returns void

    Example

    const scope = new TableScope(hostDiv, tableModel, new SimpleDomService(), new TableOptions(), new EventAdapter());
    scope.firstInit();
    // later, e.g. when a new model arrives:
    scope.destroy();
    new TableScope(hostDiv, newTableModel, new SimpleDomService(), new TableOptions(), new EventAdapter()).firstInit();
  • Protected

    Draws big cells (rowspan and or colspan) in body/center

    Parameters

    • range: CellRange

      CellRange

    • xStart: number

      X position in pixel for top left corner

    • yStart: number

      Y position in pixel for top left corner

    • areaModel: AreaModelIf

      AreaModelIf

    • parentDiv: HTMLDivElement

      Parent div as HTMLDivElement

    • sideIdent: SideIdent

      SideIdent (west,center,east)

    Returns void

  • Ensures that a column of the scrollable center area is fully visible by scrolling horizontally if necessary – the counterpart of ensureRowIsVisible. A column left of the viewport becomes the first visible column, a column right of it the last one (a column wider than the viewport: the first). The vertical position is kept.

    Fixed west/east columns are always visible: nothing to do.

    Parameters

    • columnIndex: number

      model column index (west + center + east)

    Returns boolean

    true if the table was scrolled, false if the column was already visible (or is fixed / hidden / out of range)

    Example

    tableScope.ensureColumnIsVisible(12);
    
  • Ensures that a specific row is visible in the viewport by scrolling if necessary. This method checks if the target row is within the currently visible range and adjusts the scroll position if it's not visible.

    The method performs the following:

    1. Checks if the row is above the current viewport (before first visible row)
    2. Checks if the row is below the current viewport (after last visible row)
    3. Scrolls to make the row visible if needed – vertically only, the horizontal position is kept

    Parameters

    • rowIndex: number

      The index of the row to make visible

    Returns boolean

    Returns true if scrolling was needed and performed, false if the row was already visible

    Example

    // Ensure row 5 is visible in the viewport
    tableScope.ensureRowIsVisible(5);

    Throws

    Implicitly may throw if rowIndex is not a number or if required properties are undefined

    See

  • Updates the table (repaint) when an external filter is changed.

    Parameters

    • clearSelection: boolean = true

      Indicates whether to clear the selection model or not. Default value is true.

    Returns void

  • Fills cells next to a range (fill handle, Ctrl/⌘+D, TableApi.fillRange): computes the values (computeFillChanges, shown values – a batch edit's pending values count), writes them with applyCellChanges and selects source and filled cells.

    Parameters

    • source: CellRange

      the source range (body display indices)

    • direction: FillDirection

      down, up, right or left

    • count: number

      rows or columns to fill (clamped to the table)

    • Optional mode: FillMode = 'auto'

      series or copy

    • Optional selectAfter: CellRange

      the selection afterwards (default: source and filled cells)

    Returns number

    the number of filled (or, in a batch edit, marked) cells; -1 if refused (too many cells)

    Since

    1.1.96

  • Protected

    Finds the row index of an important rowspan cell in a given area model.

    Parameters

    • areaModel: AreaModelIf

      The area model to search in.

    • rowIndex: number

      The current row index.

    • colIndex: number

      The current column index.

    Returns number

    • The row index of the important rowspan cell, or -1 if not found.
  • The body cell with the keyboard focus, undefined if there is none (or the header has the focus).

    Returns undefined | [number, number]

    Since

    1.1.99

  • Protected

    Retrieves the specified area from the grid layout.

    Parameters

    • areaIdent: AreaIdent

      The identifier for the area ('header', 'body', or 'footer').

    • sideIdent: SideIdent

      The identifier for the side of the area ('west', 'center', or 'east').

    Returns DivScope

    • The requested area element.

    Throws

    • If the area identifier or side identifier is incorrect.
  • The width that % and weight columns share: host width minus the fixed west columns and a vertical scroll bar.

    Parameters

    • Optional hostWidth: number = ...

      the width of the host element (default: its current client width)

    Returns number

    the width in px (0 if the host has no width yet, e.g. while it is hidden)

  • The body cell at a point in host coordinates, clamped to the body (a point above the body = row 0, right of the columns = the last column …) – computed, not read from the DOM.

    Parameters

    • x: number

      x relative to the host's padding box

    • y: number

      y relative to the host's padding box

    Returns [number, number]

    row and column index, [-1, -1] without rows or columns

    Since

    1.1.96

  • The rectangle of a body cell in host coordinates (relative to the padding box of the host) – computed from the row and column positions, also for cells that are not rendered – and the visible part of its area (clip…: the body between header and footer, horizontally the fixed west/east area or the scrollable center).

    Parameters

    • rowIndex: number

      display index

    • columnIndex: number

      model index

    Returns {
        clipBottom: number;
        clipLeft: number;
        clipRight: number;
        clipTop: number;
        height: number;
        left: number;
        top: number;
        width: number;
    }

    the geometry

    • clipBottom: number
    • clipLeft: number
    • clipRight: number
    • clipTop: number
    • height: number
    • left: number
    • top: number
    • width: number

    Since

    1.1.96

  • The body row at a content position (a position in an open detail row belongs to its master row). Above the rows: 0, below: the last row, without rows: -1.

    Parameters

    • contentY: number

      px from the top of the first body row

    Returns number

    display index

    Since

    1.1.97

  • The visible body in client (viewport) coordinates – including fixed west/east columns, without the scroll bar – and the content pixels scrolled out at its top. Row drag computes the row under the pointer with it.

    Returns {
        contentScrollTop: number;
        height: number;
        left: number;
        top: number;
        width: number;
    }

    the geometry

    • contentScrollTop: number
    • height: number
    • left: number
    • top: number
    • width: number

    Since

    1.1.95

  • The input of a body cell – what was typed: the formula text of a cell formula ("=B2*C2"), otherwise the value (AreaModelIf.getInputValueAt). Editor, undo and the batch edit use it.

    Parameters

    • rowIndex: number

      display row

    • columnIndex: number

      model column

    Returns unknown

    the input

    Since

    1.1.99

  • The label of a column for screen readers: the header label of its column definition, otherwise the text of the lowest header row, otherwise the property.

    Parameters

    • columnIndex: number

      model column index

    Returns string

    e.g. "Total"

    Since

    1.1.91

  • The x position of a column relative to the host element: fixed west and east columns do not scroll.

    Parameters

    • columnIndex: number

      model index of the column

    • columnLeft: number

      x position of the column over all columns (getXPosByColumnIndex)

    Returns number

    the left position in px

  • Retrieves the column widths of a table within a specified range.

    Parameters

    • startIndex: number

      The index of the first column to retrieve the width of.

    • endIndex: number

      The index of the last column to retrieve the width of.

    Returns number[]

    An array containing the widths of the columns within the specified range.

  • The value of a cell for a copy inside the table: a formula cell gives a CopiedFormula.

    Parameters

    • rowIndex: number

      display row

    • columnIndex: number

      model column

    Returns unknown

    the value

    Since

    1.1.99

  • The texts of fill and batch edit with defaults (an own AriaTextsIf implementation may lack them).

    Returns Required<Pick<AriaTextsIf, "cellsFilled" | "fillTooLarge" | "pendingChanges" | "changesCommitted" | "changesDiscarded" | "commitBlocked" | "invalidValue">>

    the texts

    Since

    1.1.96

  • The announcement of a stored formula with a syntax error (AriaTextsIf.formulaError).

    Parameters

    • message: string

      the parser's message

    Returns string

    the text

    Since

    1.1.99

  • The header cell with the keyboard focus (arrow up in the first body row moves the focus into the header).

    Returns undefined | [number, number]

    header row and column index of the cell, undefined if the focus is in the body

    Since

    1.1.91

  • The cell of the open editor inside a cell (getEditRenderer, the way before Excel-style editing).

    Returns undefined | [number, number]

    display row and model column, undefined without such an editor

    Since

    1.1.99

  • The element a mouse event belongs to – usually evt.target. The scroll viewport lies above the footer areas (its horizontal scroll bar must stay usable), so a mouse event on a footer cell arrives at the viewport: then the footer element below the mouse pointer is returned (not on the scroll bar itself).

    Parameters

    • evt: MouseEvent

      a mouse event on the host element

    Returns null | EventTarget

    the target element

  • Protected

    Returns a number value extracted from the specified attribute of the source element.

    Parameters

    • srcElement: HTMLElement

      The source element from which to extract the attribute value.

    • key: string

      The attribute key to extract the value from.

    Returns number

    • The extracted number value, or -1 if the attribute was not found or not a valid number.
  • Retrieves the heights of rows within a specified range.

    Parameters

    • startIndex: number

      The index of the first row in the range.

    • endIndex: number

      The index of the last row in the range.

    • areaModel: AreaModelIf

      The area model.

    Returns number[]

    • An array containing the heights of the rows within the specified range.
  • The horizontal scroll position (scrollLeft of the scroll viewport) that shows a column as the first column of the scrollable center area, clamped to the scroll range. A fixed west column returns 0 (start); fixed east columns and indices outside the columns return the current position.

    Parameters

    • columnIndex: number

      model column index (west + center + east)

    Returns number

    scrollLeft in scroll bar pixels

  • The selected body cells (shown columns, inside the table) – undefined if there are more than maxCells.

    Parameters

    • maxCells: number

      upper limit

    Returns undefined | [number, number][]

    row and column per cell; none without selection

    Since

    1.1.99

  • The texts of Excel-style editing (own functions of tableOptions.ariaTexts, otherwise English).

    Returns Required<Pick<AriaTextsIf, "editingStarted" | "readOnlyCell" | "cellsCleared" | "clearTooLarge" | "rangeSelected" | "rowSelected" | "columnSelected" | "gridEditingHint" | "cellsPasted" | "pasteTooLarge" | "copyTooLarge" | "cutMarked" | "copiedLastRangeOnly">>

    Since

    1.1.99

  • The value a body cell shows: a pending value of a batch edit, otherwise the model value – with cell formulas the input (getCellInput: the formula text for the editor).

    Parameters

    • rowIndex: number

      display row index

    • columnIndex: number

      model column index

    Returns unknown

    the value

    Since

    1.1.99

  • Protected

    Retrieves the value of the specified attribute from the nearest ancestor element that has the attribute.

    Parameters

    • srcElement: HTMLElement

      The source element from which to start searching for the nearest ancestor element.

    • key: string

      The name of the attribute to retrieve.

    Returns string

    The value of the specified attribute, or an empty string if the attribute is not found.

  • Protected

    Retrieves the column index of the tree arrow column in the table.

    Returns number

    The column index of the tree arrow column: the first data column (0, behind a row number column 1), one more with a visible row checkbox column.

  • The value of a body cell to choose an editor or convert pasted text by: the result of a formula cell (a number stays a number when overwritten), otherwise getShownCellValue.

    Parameters

    • rowIndex: number

      display row

    • columnIndex: number

      model column

    Returns unknown

    the value

    Since

    1.1.99

  • The texts of undo and redo (own functions of tableOptions.ariaTexts, otherwise English).

    Returns Required<Pick<AriaTextsIf, "undone" | "redone" | "nothingToUndo" | "nothingToRedo" | "undoSkipped" | "undoHistoryCleared">>

    Since

    1.1.99

  • True if there is a shown column (no row number column) next to columnIndex in that direction – Tab uses it: in the last column it leaves the table.

    Parameters

    • columnIndex: number

      model column index

    • direction: number

      1 or -1

    Returns boolean

    true if Tab can move

    Since

    1.1.99

  • Rebuilds the layout after a header group was collapsed or expanded (other columns are shown) and marks the state as changed.

    Returns void

    Since

    1.1.92

  • Runs fn and reports all selection changes made in it as ONE onSelectionChanged event (a click used to fire up to three: clear(), adding the new range and the selection service itself).

    Parameters

    • fn: (() => void)

      code that changes the selection model

        • (): void
        • Returns void

    Returns void

  • Sets the static ARIA attributes of the host element: role="grid" (a tree body: "treegrid") and its name and description from the table options. Counts and the active cell follow with every render pass.

    Returns void

    Since

    1.1.91

  • Marks the positions of the body rows as outdated (rows filtered, sorted, edited, added or removed, a detail row opened or closed) – they are computed again on the next access.

    Returns void

    Since

    1.1.97

  • True if a DOM event comes from a detail row (master/detail) – e.g. from a nested table. The mouse, keyboard and pointer handlers of this table ignore such events.

    Parameters

    • evt: Event

      an event while it is dispatched

    Returns boolean

    whether it comes from the detail layer

    Since

    1.1.97

  • True for a tree, a row grouping or a pivot table in the body (rows cannot simply be appended).

    Returns boolean

    Since

    1.1.99

  • Width in px of a row number text: with the font and padding of a rendered number cell label; before the first number cell exists with the font of the host and 6 px padding on each side (then approximate is true). Digits are measured as "0" (tabular figures: all digits are as wide as the widest).

    Parameters

    • text: string

    Returns [number, boolean]

    the width and whether it is approximate

  • Moves the keyboard focus from a cell by rows/columns (Excel-style editing: Enter, Tab and arrow keys after committing); the selection follows with collapseSelectionOnNavigate.

    Parameters

    • rowIndex: number

      start row

    • columnIndex: number

      start column

    • dRow: number

      rows

    • dColumn: number

      columns (hidden columns are skipped)

    Returns boolean

    true if a focus model exists

    Since

    1.1.99

  • The next shown column in a direction (hidden columns skipped; the same column at the edge).

    Parameters

    • columnIndex: number

      model column index

    • direction: number

      1 or -1

    Returns number

    the column

    Since

    1.1.99

  • Triggers an action based on the provided actionId.

    This function can be invoked manually via the table API or by keyboard shortcuts.

    Parameters

    • actionId: "COPY_2_CLIPBOARD" | "START_EDITING" | "TOGGLE_SELECTION" | "SELECT_ALL" | "DESELECT_ALL" | "NAVIGATE_LEFT" | "NAVIGATE_RIGHT" | "NAVIGATE_UP" | "NAVIGATE_DOWN" | "NAVIGATE_ROW_START" | "NAVIGATE_ROW_END" | "NAVIGATE_FIRST_CELL" | "NAVIGATE_LAST_CELL" | "NAVIGATE_PAGE_UP" | "NAVIGATE_PAGE_DOWN" | "ACTIVATE_CELL" | "MOVE_ROW_UP" | "MOVE_ROW_DOWN" | "FILL_DOWN" | "FILL_RIGHT" | "NAVIGATE_NEXT_CELL" | "NAVIGATE_PREVIOUS_CELL" | "EXTEND_SELECTION_UP" | "EXTEND_SELECTION_DOWN" | "EXTEND_SELECTION_LEFT" | "EXTEND_SELECTION_RIGHT" | "EXTEND_SELECTION_ROW_START" | "EXTEND_SELECTION_ROW_END" | "EXTEND_SELECTION_PAGE_UP" | "EXTEND_SELECTION_PAGE_DOWN" | "NAVIGATE_DATA_EDGE_UP" | "NAVIGATE_DATA_EDGE_DOWN" | "NAVIGATE_DATA_EDGE_LEFT" | "NAVIGATE_DATA_EDGE_RIGHT" | "EXTEND_TO_DATA_EDGE_UP" | "EXTEND_TO_DATA_EDGE_DOWN" | "EXTEND_TO_DATA_EDGE_LEFT" | "EXTEND_TO_DATA_EDGE_RIGHT" | "SELECT_ROW" | "SELECT_COLUMN" | "CLEAR_CELLS" | "CLEAR_AND_EDIT" | "CUT_2_CLIPBOARD" | "PASTE_FROM_CLIPBOARD" | "UNDO" | "REDO"

      The identifier of the action to be triggered.

    Returns boolean

    • Returns true if the action was triggered successfully, false otherwise.
  • Called by MasterDetailService after detail rows were expanded or collapsed: new row positions and scroll height, repaint, event, announcement, table state.

    Parameters

    • row: unknown

      the master row (undefined for several rows)

    • rowIndex: number

      its display index (-1 for several rows or a row that is not shown)

    • expanded: boolean

      the new state

    • source: GeDetailEventSource

      what changed it

    • Optional emit: boolean = true

      false: no event (several rows at once)

    • Optional layoutUpdated: boolean = false

      true: the row layout was already updated for this one row

    Returns void

    Since

    1.1.97

  • Handle the double click event on the table header.

    Parameters

    • event: MouseEvent

      The mouse event that triggered the double click.

    • _rowIdx: number

      The row index of the header.

    • colIdx: number

      The column index of the header.

    Returns void

  • Mouse wheel on a capped scroll height: scale the wheel delta, so one wheel step still moves the content by the usual amount of pixels (otherwise it would jump many rows). No-op for normal tables.

    Parameters

    • evt: WheelEvent

      the wheel event of the scroll viewport

    Returns void

  • Sorts the (freshly filtered) body rows again, so a filter keeps the current order: the last sort(compareFn) call, otherwise the columns with a sortState (header icons).

    Returns void

  • Recalculates the column widths of the table (% and weight columns depend on the available width) and repaints.

    Parameters

    • Optional clientWidth: number

      The (new) width of the host element, e.g. from a ResizeObserver. Default: its current width.

    Returns void

  • Builds the view again after rows or columns were inserted or deleted (filter and sorting applied again, new columns measured).

    Parameters

    • columns: boolean

      true: the columns changed

    Returns void

    Since

    1.1.99

  • Renders the content of the dragging column for a specific area.

    Parameters

    • columnGeo: GeoData

      The geometry data of the dragging column.

    • areaIdent: AreaIdent

      The identifier of the area.

    • Optional y: number = 0

      The starting y-position.

    • firstRowIndex: number = 0
    • maxY: number = Number.POSITIVE_INFINITY

    Returns number

    The final y-position after rendering all the content.

  • Repaints the UI by resetting the size of the wrapper div, adjusting the containers and rows, and performing additional adjustments after scrolling.

    Returns void

    This method does not return any value.

  • After updateCells() without a repaint: draws the rendered cells of calculated and „Show values as“ columns of the body again (they depend on the changed cells, e.g. total = price * quantity or a share of the total).

    Returns void

  • After updateCells() without a repaint: draws the rendered aggregate cells of the group rows of a row grouping again (they follow the changed rows; labels and counts don't change – a moved row repaints the whole table).

    Returns void

  • Resolves a formula copied inside the table for a target cell: its relative references move (Excel); a target without formulas gets the copied value. A cut formula moves unchanged.

    Parameters

    • value: unknown

      a pasted value (maybe a CopiedFormula)

    • rowIndex: number

      display row of the target

    • columnIndex: number

      model column of the target

    • cut: boolean

      true: the formula moves (cut and paste)

    Returns unknown

    the value to write

    Since

    1.1.99

  • Gives an ARIA attribute of the host back the value it had before the table changed it (e.g. aria-busy after loading), or removes it if the host had none.

    Parameters

    • key: string

    Returns void

    Since

    1.1.92

  • Rows were added at the end of the body (pasting with pasteAddsRows): derived values are recomputed.

    Returns void

    Since

    1.1.99

  • Scrolls to a column and a row: the row becomes the first row of the viewport, the column the first column of the scrollable center area (as far as the scroll range allows).

    A fixed west column scrolls back to the start (x = 0, like before columns were supported). A fixed east column, -1 or any other index outside the column range keeps the current horizontal position.

    Parameters

    • indexX: number

      The column index (model index over west + center + east), -1 = keep the horizontal position.

    • indexY: number

      The row index of the body.

    Returns void

  • Scrolls the viewport to the specified pixel coordinates.

    Parameters

    • px: number

      The horizontal pixel coordinate to scroll to.

    • py: number

      The vertical pixel coordinate to scroll to.

    Returns void

  • Selects a body range (after pasting): its first cell becomes the active cell and the anchor.

    Parameters

    Returns void

    Since

    1.1.99

  • Sets the height of the detail row behind one body row in the current row layout without building it again (a detail row was expanded or collapsed). Does nothing if the layout is outdated anyway.

    Parameters

    • rowIndex: number

      display index of the master row

    • height: number

      the detail height, 0 = none

    Returns boolean

    true if the layout was updated, false if it is outdated (it is built again on the next access)

    Since

    1.1.97

  • Shows or hides a column and repaints (see TableApi.setColumnVisible).

    Parameters

    • column: string | number | ColumnDefIf

      column index, property or column definition

    • visible: boolean

      false hides the column

    Returns boolean

    false if the column has no column definition (or the table model can't hide columns)

  • Remembers the text of the open in-cell editor (called on every input, see InputHandler) so that a repaint keeps it.

    Parameters

    • rowIndex: number

      display row index of the edited cell

    • columnIndex: number

      model column index

    • input: HTMLInputElement | HTMLTextAreaElement

      the editor element

    Returns void

    Since

    1.1.99

  • Sets (or with undefined removes) an ARIA attribute of the host and remembers the app's own value the first time, so that removeHostAria can restore it (e.g. an aria-label the app set on an Angular host).

    Parameters

    • key: string
    • value: undefined | string

    Returns void

    Since

    1.1.91

  • Sets aria-keyshortcuts of the host (the fill handle's keyboard alternative); removed again by destroy.

    Parameters

    • value: undefined | string

      e.g. "Control+D Control+R"; undefined restores the value before

    Returns void

    Since

    1.1.96

  • Pivots a pivot table again (see TableApi.setPivotConfig): new columns, header and totals in the same model, then the layout of the table is built again. Sorting and selection are reset (the columns are different).

    Parameters

    • changes: Partial<PivotConfigIf<any>>

      the changed parts of the configuration

    • Optional rows: unknown[]

      new source rows

    Returns boolean

    false if the table model is no pivot table

    Since

    1.1.94

  • Writes a value without the column's editInputPipe (values copied inside the table are already converted – a pipe that expects text could break them). All area models apply the pipe in setValue, so it is left out for the call.

    Parameters

    • rowIndex: number
    • columnIndex: number
    • value: unknown

    Returns boolean

  • Sets the selection model for the table.

    Parameters

    • sm: SelectionModel

      The selection model to be set.

    • rerender: boolean = false

      Optional parameter indicating whether to rerender the table after setting the selection model. Default value is false.

    Returns void

    • This method does not return any value.
  • Expands or collapses one row of a tree table, repaints, and remembers the state (autoRestoreOptions).

    Parameters

    • row: TreeRowIf<any>

      a tree row of the body model

    • expanded: boolean

      the new state

    Returns boolean

    false if the body is no tree or the state was already set

  • Protected

    Rounds a pixel offset to whole device pixels. The scroll offsets are derived from a scroll factor and are fractional; rows and cells placed at fractional positions render blurry text and 1px borders.

    Parameters

    • px: number

      offset in CSS pixels

    Returns number

    offset snapped to the device pixel grid

  • Parameters

    • compareFn: ((a, b) => number)
        • (a, b): number
        • Parameters

          • a: any
          • b: any

          Returns number

    Returns void

  • Sorts the body by one column – the same as a double click on its header (header icon, filter and auto-restore included). Without sortState the next state of the column's sort order is used (asc → desc → asc …).

    Parameters

    • column: string | number

      column index or property, e.g. 10 or "total"

    • Optional sortState: SortState

      "asc", "desc" or "" (unsorted icon, rows keep their current order)

    Returns boolean

    false if the column does not exist

  • Opens the cell editor of a body cell: the editor above the cell (Excel-style editing) or – for columns with an own getEditRenderer, and without tableOptions.editing – the editor inside the cell.

    Parameters

    • rowIndex: number

      display row index

    • columnIndex: number

      model column index

    • Optional mode: CellEditMode = 'edit'

      "edit" (F2, Enter, double click) or "enter" (typing)

    • Optional textSelection: "all" | "end"

      select the text or put the caret at the end (default: the option)

    Returns boolean

    true if an editor is open

    Since

    1.1.99

  • Adds a listener next to the one given to the constructor (see TableApi.subscribe).

    Parameters

    Returns (() => void)

    removes the listener again

      • (): void
      • Adds a listener next to the one given to the constructor (see TableApi.subscribe).

        Returns void

        removes the listener again

        Since

        1.1.99

    Since

    1.1.99

  • A detail row that holds the keyboard focus goes away (collapsed, destroyed, scrolled out of view): the host takes the focus and the master row becomes the focused row – without a repaint (the caller repaints).

    Parameters

    • rowIndex: number

      display index of the master row (-1: only the host)

    Returns void

    Since

    1.1.97

  • Space on a cell with a true/false value (Excel-style editing): writes the opposite value.

    Parameters

    • rowIndex: number

      display row index

    • columnIndex: number

      model column index

    Returns void

    Since

    1.1.99

  • Toggles the expand or collapse state of all items in the body area model.

    Parameters

    • Optional expand: boolean = true

      Whether to expand or collapse all items. Default is true.

    Returns void

  • Toggles the checkbox state of a specific row in a table.

    Parameters

    • rowIdx: number

      The index of the row to toggle the checkbox state.

    • _colIdx: number

      The index of the column. This parameter is unused.

    • areaIdent: AreaIdent

      The identifier of the table area.

    Returns void

    • This method does not return anything.
  • Updates the cells in the table with the provided values and optionally repaints all cells.

    Parameters

    • events: TableCellUpdateEventIf[]

      The array of events containing information about the cells to update.

    • repaintAll: boolean = false

      Optional. If true, repaints all cells after updating. Defaults to false.

    Returns void

  • Writes the text of a cell editor (called by the input handler on "change"). Batch edit: the value is marked as pending instead. Uses applyCellChanges – one onModelChanged per edit, as before.

    Parameters

    • areaIdent: AreaIdent

      only "body" is edited

    • rowIndex: number

      display index

    • columnIndex: number

      model index

    • value: string

      the text of the editor

    Returns void

  • Writes cell values directly (no batch edit) – used by applyCellChanges and the batch commit.

    Parameters

    • cells: {
          columnIndex: number;
          rowIndex: number;
          value: unknown;
      }[]

      resolved cells (display/model indices)

    • source: CellChangeSource

      reported in the event

    • Optional opts: {
          extraChanges?: CellChangeIf<any>[];
          skipValidation?: boolean;
      } = {}

      changes written elsewhere (reported in the same event), no validation (commit: already checked)

      • Optional extraChanges?: CellChangeIf<any>[]
      • Optional skipValidation?: boolean

    Returns CellChangeIf<any>[]

    the written cells (including extraChanges)

    Since

    1.1.96

  • Writes pasted cells (copy, cut and paste): like applyCellChanges – not editable cells skipped, validate, batch edit marks – with one onModelChanged; raw = values copied inside the table (no editInputPipe).

    Parameters

    Returns CellChangeIf<any>[]

    the written (batch edit: newly pending) cells

    Since

    1.1.99

  • Writes the values of an undo or redo: without editInputPipe (the values were piped already) and validation, only editable cells; cells of hidden rows (hidden, written into their objects already) in the same event; no new step.

    Parameters

    • cells: {
          columnIndex: number;
          rowIndex: number;
          value: unknown;
      }[]

      shown cells

    • hidden: CellChangeIf<any>[]

      cells of rows a filter hides

    • source: "undo" | "redo"

      reported in the event

    Returns CellChangeIf<any>[]

    the written cells (including hidden)

    Since

    1.1.99

  • Creates a TableScope instance.

    Parameters

    • hostElement: HTMLDivElement

      The HTML div element that will contain the table.

    • tableModel: TableModelIf

      The table model object.

    • Optional tableOptions: TableOptionsIf = ...

      The optional table options object.

    • Optional eventListener: EventListenerIf = ...

      The optional event listener object.

    • Optional domService: DomServiceIf = ...

      The optional DOM service object.

    • Optional copyService: CopyServiceIf = ...

      The optional copy service object.

    Returns TableScope

    • The newly created TableScope instance.