@omegagrid/grid 0.10.2 → 0.10.4

package/dist/ui/table.js

@@ -0,0 +1,1063 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import constants from '../constants';
+import { dom, Expander, LevelExpander } from "@omegagrid/core";
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { encodeRow, styleToCSStyle, CellRange, MergeCellState } from "@omegagrid/grid-core";
+import { ElementCache } from "./elementCache";
+import { tableStyles } from "./table.styles";
+import { SortingArrow } from "./sortingArrow";
+import { applyStyle, getCellRenderer } from '../renderers';
+export class TableEvent extends Event {
+}
+let Table = class Table extends LitElement {
+    constructor() {
+        super(...arguments);
+        // map of model indexes on element indexes
+        this._rowMap = new Map();
+        this._colMap = new Map();
+        this.hideOuterBorder = false;
+        this.rowOffset = 0;
+        this.colOffset = 0;
+        this.zoom = 1;
+        this.nogrid = false;
+        this.renderAll = false;
+        this.getColumnByModelIndex = (c) => this.getColumnByGridIndex(this.colMap.get(c));
+        this.getColumnByGridIndex = (c) => this.colgroup.children[c + this.rowHeaderCount];
+        this.getRowByModelIndex = (r) => this.bRows[this.rowMap.get(r)];
+        this.getRowByGridIndex = (r) => this.bRows[r];
+        this.getCellByGridIndex = (c, r) => this.bRows[r].children[c + this.rowHeaderCount];
+        this.getCellByModelIndex = (c, r) => this.getRowByModelIndex(r)?.children[this.colMap.get(c) + this.rowHeaderCount];
+        this.getCellByCellModel = (m) => this.getCellByModelIndex(m.c, m.r);
+        this.resetFreezeLeft = () => this._freezeLeft = null;
+        this._highlightedColHeaderCells = [];
+        this._highlightedRowHeaderCells = [];
+        this.render = () => html `
+		<style>
+			table {
+				font-size: ${this.model?.options.fontSize || constants.FONT_SIZE}px;
+			}
+
+			table tr {
+				line-height: ${(this.model?.options.rowHeight || 22) - 1}px;
+			}
+		</style>
+
+		${this.table}
+	`;
+        this.clearHeaderCache = () => {
+            this.resetFreezeLeft();
+            this.hCache = new ElementCache(this.model.columns.length, this.columnHeaderCount);
+            this.hCache.disabled = !this.model.options.cellCache;
+        };
+        this.clearBodyCache = () => {
+            this.bCache = new ElementCache(this.model.columns.length, this.model.rows.length);
+            this.bCache.disabled = !this.model.options.cellCache;
+        };
+        //#endregion
+        this.cellRenderSchedules = new WeakMap();
+        //#endregion
+    }
+    get thead() {
+        if (this._thead)
+            return this._thead;
+        return (this._thead = dom.createElement('thead'));
+    }
+    get tbody() {
+        if (this._tbody)
+            return this._tbody;
+        return (this._tbody = dom.createElement('tbody'));
+    }
+    get colgroup() {
+        if (this._colgroup)
+            return this._colgroup;
+        return (this._colgroup = dom.createElement('colgroup'));
+    }
+    get table() {
+        if (this._table)
+            return this._table;
+        this._table = dom.createElement('table');
+        this._table.appendChild(this.colgroup);
+        this._table.appendChild(this.thead);
+        this._table.appendChild(this.tbody);
+        return this._table;
+    }
+    //#endregion
+    //#region calculated props
+    get colMap() { return this._colMap; }
+    get rowMap() { return this._rowMap; }
+    get freezeLeft() {
+        if (this._freezeLeft == null) {
+            const freezeLeft = this.model.options.freezeLeft;
+            if (freezeLeft >= this.model.columns.length) {
+                this._freezeLeft = 0;
+            }
+            else if (this.offsetWidth > 0) {
+                let w = 0;
+                for (let c = 0; c < freezeLeft; c++) {
+                    w += this.model.columns[c].width;
+                }
+                this._freezeLeft = w < this.offsetWidth / 2 ? freezeLeft : 0;
+            }
+            else {
+                this._freezeLeft = freezeLeft;
+            }
+        }
+        return this._freezeLeft;
+    }
+    get freezeTop() {
+        if (this._freezeTop == null) {
+            this._freezeTop = this.model.options.freezeTop;
+        }
+        return this._freezeTop;
+    }
+    previewZoom(zoom) {
+        dom.zoomElement(this.table, zoom);
+    }
+    highlightColHeaderCells(columns) {
+        if (!this.model.options.colLetters)
+            return;
+        this._highlightedColHeaderCells.forEach(cell => cell.className = 'hlabel');
+        this._highlightedColHeaderCells = [];
+        const offset = this.rowHeaderCount;
+        columns.forEach(c => {
+            const cell = this.hRows[this.model.hasColumnTreeEnabled ? 1 : 0].children[this.colMap.get(c) + offset];
+            if (cell) {
+                this._highlightedColHeaderCells.push(cell);
+                cell.className = 'hlabel selected';
+            }
+        });
+    }
+    highlightRowHeaderCells(rows) {
+        if (!this.model.options.rowNumbers)
+            return;
+        if (this.model.rows.length == 0)
+            return;
+        this._highlightedRowHeaderCells.forEach(cell => cell.className = 'vlabel');
+        this._highlightedRowHeaderCells = [];
+        rows.forEach(r => {
+            const cell = this.getRowByModelIndex(r)?.children[this.model.hasRowTreeEnabled ? 1 : 0];
+            if (cell) {
+                this._highlightedRowHeaderCells.push(cell);
+                cell.className = 'vlabel selected';
+            }
+        });
+    }
+    get columnHeaderCount() {
+        return this.model.headerCount
+            + (this.model.hasColumnTreeEnabled ? 1 : 0)
+            + (this.model.hasFilter ? 1 : 0)
+            + (this.model.options.colLetters ? 1 : 0);
+    }
+    get rowHeaderCount() { return (this.model.hasRowTreeEnabled ? 1 : 0) + (this.model.options.rowNumbers ? 1 : 0); }
+    get renderRowCount() {
+        return this.renderAll
+            ? this.model.visibleRows.length
+            : Math.round(Math.min(this.clientHeight / constants.MIN_ROW_HEIGHT, this.model.rows.length));
+    }
+    get renderColCount() {
+        return this.renderAll
+            ? this.model.visibleColumns.length + this.rowHeaderCount
+            : Math.round(Math.min((this.clientWidth / constants.MIN_COL_WIDTH) || 5, this.model.columns.length + this.rowHeaderCount));
+    }
+    get totalHeaderHeight() {
+        let h = 0, r = 0;
+        if (this.model.hasColumnTreeEnabled) {
+            h += this.treeHeaderHeight;
+            ++r;
+        }
+        if (this.model.options.colLetters) {
+            h += this.thead.children[r].offsetHeight || this.model.options.rowHeight;
+            ++r;
+        }
+        for (let i = 0; i < this.model.headerCount; i++) {
+            h += this.thead.children[r + i].offsetHeight || this.model.options.rowHeight;
+        }
+        if (this.model.hasFilter)
+            h += this.model.options.rowHeight;
+        return h;
+    }
+    get treeHeaderWidth() { return this.model.hasRowTreeEnabled ? this.model.maxRowLevel * 15 + 20 : 0; }
+    get treeHeaderHeight() {
+        return this.model.hasColumnTree ? this.model.maxColumnLevel * 15 + 20 : 0;
+    }
+    get totalHeaderWidth() {
+        let w = 0;
+        if (this.model.options.rowNumbers)
+            w += constants.ROW_HEADER_WIDTH;
+        w += this.treeHeaderWidth;
+        return w;
+    }
+    get viewportSize() {
+        if (!this._viewportSize) {
+            this._viewportSize = this.renderAll ? { w: Infinity, h: Infinity } : {
+                w: (this.clientWidth - this.totalHeaderWidth - constants.SLIDER_SIZE) / this.zoom,
+                h: (this.clientHeight - this.totalHeaderHeight - constants.SLIDER_SIZE) / this.zoom
+            };
+        }
+        return this._viewportSize;
+    }
+    get viewport() {
+        if (!this._viewport) {
+            this._viewport = this.model.getViewport({ c: this.colOffset, r: this.rowOffset }, this.viewportSize, {
+                t: this.model.options.freezeTop,
+                l: this.freezeLeft,
+                b: this.model.options.freezeBottom,
+                r: this.model.options.freezeRight
+            });
+        }
+        return this._viewport;
+    }
+    get viewportRange() {
+        if (this.viewport.columns.length == 0 || this.viewport.rows.length == 0)
+            return null;
+        return new CellRange(this.viewport.columns[0].index, this.viewport.rows[0].index, this.viewport.columns[this.viewport.columns.length - 1].index, this.viewport.rows[this.viewport.rows.length - 1].index);
+    }
+    //#endregion
+    findColumnIndexByOffset(offset) {
+        let w = 0;
+        const columns = this.colgroup.children;
+        for (let c = 0; c < columns.length; c++) {
+            const col = columns[c];
+            w += col.offsetWidth;
+            if (w >= offset)
+                return c;
+        }
+        return -1;
+    }
+    findRowByOffset(offset) {
+        const rows = (offset > this.thead.offsetHeight ? this.tbody : this.thead).children;
+        if (offset > this.thead.offsetHeight)
+            offset -= this.thead.offsetHeight;
+        let h = 0;
+        for (let r = 0; r < rows.length; r++) {
+            const row = rows[r];
+            h += row.offsetHeight;
+            if (h >= offset)
+                return row;
+        }
+        return null;
+    }
+    findTableCellByOffset(x, y) {
+        x = x / this.zoom;
+        y = y / this.zoom;
+        const row = this.findRowByOffset(y);
+        const column = this.findColumnIndexByOffset(x); // ?? this.colgroup.children.length - 1;
+        const cell = row && column > -1 ? row.children[column] : null;
+        return cell && !dom.isHidden(cell) ? cell : null;
+    }
+    /**
+     * Returns the nearest visible cell to the given offset and exact cell if availible
+     * @param x
+     * @param y
+     * @returns
+     */
+    findNearestTableCellByOffset(x, y) {
+        x = x / this.zoom;
+        y = y / this.zoom;
+        let row, c;
+        const exactRow = this.findRowByOffset(y);
+        const excactColumnIndex = this.findColumnIndexByOffset(x);
+        if (y < 0)
+            row = this.tbody.children[0];
+        else if (y > this.tbody.offsetHeight + this.thead.offsetHeight)
+            row = this.tbody.children[this.viewport.rows.length - 1];
+        else
+            row = exactRow;
+        if (x < 0)
+            c = this.rowHeaderCount;
+        else if (x >= this.tbody.offsetWidth)
+            c = this.viewport.columns.length + this.rowHeaderCount - 1;
+        else
+            c = excactColumnIndex;
+        let cell = row && c > -1 ? row.children[c] : null;
+        // find nearest visible cell
+        while (cell && dom.isHidden(cell))
+            cell = cell.previousElementSibling;
+        const exactCell = exactRow && excactColumnIndex > -1 ? exactRow.children[excactColumnIndex] : null;
+        return [cell, exactCell && !dom.isHidden(exactCell) ? exactCell : null];
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.grid = dom.findParent(this, 'og-grid');
+    }
+    willUpdate() {
+        this._viewport = null;
+        this._viewportSize = null;
+        if (this.model) {
+            this.clearHeaderCache();
+            this.clearBodyCache();
+        }
+    }
+    updated() {
+        if (this.model) {
+            this.createColumns();
+            this.createHeaderRows();
+            this.createBodyRows();
+            this.renderCells();
+        }
+    }
+    refresh() {
+        this.clearHeaderCache();
+        this.clearBodyCache();
+        this.requestUpdate();
+    }
+    createColumns() {
+        this._freezeLeft = null;
+        const colCount = this.renderColCount;
+        if (!this.cols || this.cols.length != colCount) {
+            this.cols = new Array(colCount);
+            for (let c = 0; c < colCount; c++) {
+                this.cols[c] = dom.createElement('col');
+                this.cols.forEach(() => this.colgroup.appendChild(this.cols[c]));
+            }
+        }
+    }
+    createHeaderRows() {
+        const rowCount = this.columnHeaderCount;
+        const colCount = this.renderColCount;
+        dom.empty(this.thead);
+        if (!this.hRows || this.hRows.length != rowCount || !this.hRows[0] || this.hRows[0].children.length != colCount) {
+            this.hRows = new Array(rowCount);
+            for (let r = 0; r < rowCount; r++) {
+                this.hRows[r] = dom.createElement('tr');
+                for (let c = 0; c < colCount; c++) {
+                    this.hRows[r].appendChild(dom.createElement('th'));
+                }
+            }
+        }
+        dom.empty(this.thead);
+        this.hRows.forEach(row => this.thead.appendChild(row));
+    }
+    createBodyRows() {
+        const rowCount = this.renderRowCount;
+        const colCount = this.renderColCount;
+        const offset = this.rowHeaderCount;
+        if (!this.bRows || this.bRows.length == 0 || this.bRows.length != rowCount || this.bRows[0].children.length != colCount) {
+            if (rowCount == 0 && this.grid.options.emptyPlaceholder) {
+                this.bRows = [dom.createElement('tr')];
+                this.bRows[0].appendChild(dom.createElement('td'));
+            }
+            else {
+                this.bRows = new Array(rowCount);
+                for (let r = 0; r < rowCount; r++) {
+                    this.bRows[r] = dom.createElement('tr');
+                    for (let c = 0; c < offset; c++) {
+                        this.bRows[r].appendChild(dom.createElement('th'));
+                    }
+                    for (let c = offset; c < colCount; c++) {
+                        this.bRows[r].appendChild(dom.createElement('td'));
+                    }
+                }
+            }
+        }
+        dom.empty(this.tbody);
+        this.bRows.forEach(row => this.tbody.appendChild(row));
+    }
+    renderCells(update = { vertical: true, horizontal: true }) {
+        if (this.table && (update.vertical || update.horizontal)) {
+            this._viewport = null;
+            // this.tbody.remove();
+            if (update.horizontal)
+                this.renderHeader();
+            if (this.model.rows.length > 0) {
+                this.renderBody();
+                if (update.vertical)
+                    this.renderRowTree();
+                // this.table.appendChild(this.tbody);
+            }
+            else if (this.model.options.emptyPlaceholder) {
+                this.renderEmptyBody();
+                this.table.appendChild(this.tbody);
+            }
+            this.dispatchEvent(new TableEvent('rendercells'));
+        }
+    }
+    renderEmptyBody() {
+        const cell = this.bRows[0].children[0];
+        cell.innerHTML = 'no data';
+        cell.className = 'empty-placeholder';
+        cell.colSpan = this.viewport.columns.length + this.rowHeaderCount;
+    }
+    //#region render header rows
+    renderHeader() {
+        let column;
+        this.colMap.clear();
+        const offset = this.rowHeaderCount;
+        const viewport = this.viewport;
+        if (this.model.hasRowTreeEnabled) {
+            dom.setSize(this.colgroup.children[0], { w: this.treeHeaderWidth }, true);
+        }
+        if (this.model.options.rowNumbers) {
+            dom.setSize(this.colgroup.children[offset - 1], { w: constants.ROW_HEADER_WIDTH }, true);
+        }
+        for (let c = 0; c < viewport.columns.length; c++) {
+            column = viewport.columns[c];
+            if (this.model.autofitColumns.has(column.index)) {
+                this.grid.rendering.autofitColumn(column.index, false, false);
+                this.model.autofitColumns.delete(column.index); // use autofit only once for performance reasons
+            }
+            this.colMap.set(column.index, c);
+            dom.setSize(this.colgroup.children[c + offset], { w: column.width });
+            dom.setMinSize(this.colgroup.children[c + offset], { w: column.width });
+            dom.setMaxSize(this.colgroup.children[c + offset], { w: column.width });
+        }
+        let r = 0;
+        if (this.model.hasColumnTreeEnabled) {
+            this.renderHeaderRowTree(this.hRows[r], r);
+            ++r;
+        }
+        if (this.model.options.colLetters) {
+            dom.setSize(this.hRows[r], { h: this.model.options.rowHeight });
+            this.renderHeaderRowLetters(this.hRows[r], r);
+            ++r;
+        }
+        for (let i = 0; i < this.model.headerCount; i++) {
+            this.renderHeaderRowLabels(this.hRows[r + i], r + i, i);
+        }
+        r += this.model.headerCount;
+        if (this.model.hasFilter) {
+            dom.setSize(this.hRows[r], { h: this.model.options.rowHeight });
+            this.renderHeaderRowFilters(this.hRows[r], r);
+        }
+    }
+    renderHeaderRowLetters(tr, index) {
+        let cell;
+        let c2;
+        const viewport = this.viewport;
+        const r = index - this.columnHeaderCount;
+        let offset = 0; //this.rowHeaderCount;
+        dom.setSize(tr, { h: this.model.options.rowHeight });
+        if ((this.model.hasRowTree || this.model.options.rowNumbers) && !this.model.hasColumnTreeEnabled) {
+            cell = tr.children[offset];
+            cell.colSpan = this.rowHeaderCount;
+            cell.rowSpan = this.columnHeaderCount;
+            const c = offset - this.rowHeaderCount;
+            const cornerCell = this.model.options.levelButtonCell;
+            if (!cornerCell || (r == cornerCell.r && c == cornerCell.c)) {
+                this.renderHeaderRowCornerCell(cell);
+            }
+            offset++;
+        }
+        for (let i = offset; i < this.rowHeaderCount; i++) {
+            dom.hideCell(tr.children[i]);
+            offset++;
+        }
+        for (let c = offset; c < tr.children.length; c++) {
+            c2 = c - offset;
+            cell = tr.children[c];
+            cell.className = 'hlabel';
+            if (viewport.columns.length > c2) {
+                cell.innerHTML = viewport.columns[c2].address;
+                cell.c = viewport.columns[c2].index;
+                dom.showCell(cell);
+            }
+            else {
+                dom.hideCell(cell);
+            }
+        }
+    }
+    renderHeaderRowTree(tr, index) {
+        if (!this.model.hasColumnTreeEnabled)
+            return;
+        let cell;
+        let offset = 0;
+        let c2;
+        const r = index - this.columnHeaderCount;
+        const viewport = this.viewport;
+        const rowNumbers = this.model.options.rowNumbers;
+        const rowTree = this.model.hasRowTreeEnabled;
+        dom.setSize(tr, { h: this.treeHeaderHeight });
+        cell = tr.children[offset];
+        if (!cell)
+            return;
+        cell.rowSpan = rowNumbers || rowTree ? this.columnHeaderCount : 1;
+        cell.colSpan = this.rowHeaderCount;
+        const c = offset - this.rowHeaderCount;
+        const cornerCell = this.model.options.levelButtonCell;
+        let cornerCellColumn = null;
+        if ((!cornerCell && (rowNumbers || rowTree)) || (cornerCell && r == cornerCell.r && c == cornerCell.c)) {
+            cornerCellColumn = c;
+            this.renderHeaderRowCornerCell(cell);
+        }
+        if (rowNumbers || rowTree) {
+            ++offset;
+            // if (rowTree) {
+            // 	cell = tr.children[offset] as TableCell;
+            // 	cell.innerHTML = '';
+            // 	dom.hideCell(cell);
+            // 	++offset;
+            // }
+        }
+        for (let c = offset; c < tr.children.length; c++) {
+            c2 = c - offset;
+            cell = tr.children[c];
+            if (viewport.columns.length > c2) {
+                if (cornerCellColumn != c) {
+                    cell.innerHTML = '';
+                    cell.className = 'htree';
+                    this.renderHeaderRowTreeCell(tr, index, viewport.columns[c2], cell);
+                }
+                dom.showCell(cell);
+            }
+            else {
+                dom.hideCell(cell);
+            }
+        }
+    }
+    renderHeaderRowTreeCell(tr, rIndex, column, th) {
+        let div = this.hCache.get(column.index, rIndex);
+        if (!div) {
+            div = dom.createElement('div');
+            this.hCache.set(column.index, rIndex, div);
+            const colWidth = column.width + 1;
+            const treeRowHeight = this.treeHeaderHeight / this.model.maxColumnLevel;
+            if (column.hasChildren) {
+                const expander = new Expander();
+                expander.addEventListener('toggle', () => this.grid.rendering.toggleColumn(column.index));
+                div.expander = expander;
+                div.appendChild(expander);
+                dom.setPosition(expander, {
+                    l: colWidth / 2 - constants.EXPANDER_SIZE / 2,
+                    t: column.level * treeRowHeight + treeRowHeight / 2 - constants.EXPANDER_SIZE / 2
+                });
+                div.expanderLine = this.createExpanderLine('h');
+                div.appendChild(div.expanderLine);
+                dom.setPosition(div.expanderLine, {
+                    l: this.model.options.columnTree.reversed ? 0 : (colWidth / 2),
+                    t: column.level * treeRowHeight + treeRowHeight / 2
+                });
+                dom.setSize(div.expanderLine, {
+                    h: treeRowHeight / 2,
+                    w: colWidth / 2 + 1
+                });
+            }
+            if (column.hasParent) {
+                let parent = column;
+                while (parent.hasParent) {
+                    parent = parent.parent;
+                    const line = this.createExpanderLine('h');
+                    div.appendChild(line);
+                    dom.setSize(line, {
+                        h: treeRowHeight / 2,
+                        w: colWidth - 1
+                    });
+                    dom.setPosition(line, {
+                        l: 0,
+                        t: parent.level * treeRowHeight + treeRowHeight / 2
+                    });
+                }
+            }
+        }
+        if (div.expander)
+            div.expander.state = column.collapsed ? 'closed' : 'open';
+        th.appendChild(div);
+    }
+    createExpanderLine(direction) {
+        const expanderLine = dom.createElement('div');
+        expanderLine.className = `${direction}tree-line`;
+        return expanderLine;
+    }
+    renderHeaderRowLabels(tr, rIndex, hIndex) {
+        let colModel;
+        let cell;
+        let header;
+        let offset = 0;
+        let c2;
+        const viewport = this.viewport;
+        const r = rIndex - this.columnHeaderCount;
+        const cornerCell = this.model.options.levelButtonCell;
+        let rowHeight;
+        if (this.model.hasRowTreeEnabled) {
+            cell = tr.children[offset];
+            cell.innerHTML = '';
+            if (this.model.hasColumnTreeEnabled || this.model.options.colLetters || hIndex > 0) {
+                dom.hideCell(cell);
+            }
+            else {
+                cell.rowSpan = this.columnHeaderCount;
+                cell.colSpan = this.rowHeaderCount;
+                this.renderHeaderRowCornerCell(cell);
+            }
+            ++offset;
+        }
+        if (this.model.options.rowNumbers) {
+            cell = tr.children[offset];
+            cell.innerHTML = '';
+            if (this.model.hasRowTreeEnabled || this.model.options.colLetters || this.model.hasColumnTreeEnabled || hIndex > 0) {
+                dom.hideCell(cell);
+            }
+            else {
+                cell.rowSpan = this.columnHeaderCount;
+                cell.colSpan = this.rowHeaderCount;
+                this.renderHeaderRowCornerCell(cell);
+            }
+            ++offset;
+        }
+        for (let c = offset; c < tr.children.length; c++) {
+            c2 = c - offset;
+            cell = tr.children[c];
+            cell.className = 'hlabel';
+            cell.innerHTML = '';
+            if (viewport.columns.length > c2) {
+                colModel = viewport.columns[c2];
+                header = colModel.header[hIndex];
+                if (header.height)
+                    rowHeight = Math.max(header.height, rowHeight || 0);
+                cell.colSpan = 1;
+                cell.rowSpan = 1;
+                cell.c = colModel.index;
+                cell.r = hIndex;
+                if (header?.hidden) {
+                    if (c2 == this.freezeLeft) {
+                        let prevModel = colModel.prevVisible;
+                        let c3 = 0;
+                        while (prevModel && prevModel.header[hIndex]?.hidden) {
+                            prevModel = prevModel.prevVisible;
+                            ++c3;
+                        }
+                        if (prevModel && prevModel.header[hIndex].cs) {
+                            dom.showCell(cell);
+                            cell.colSpan = prevModel.header[hIndex].cs - c3 - 1;
+                            cell.rowSpan = prevModel.header[hIndex].rs || 1;
+                            this.renderHeaderRowLabelCell(cell, prevModel, rIndex, hIndex);
+                        }
+                        else {
+                            dom.hideCell(cell);
+                        }
+                    }
+                    else {
+                        dom.hideCell(cell);
+                    }
+                }
+                else {
+                    if (colModel.header && colModel.header[hIndex]) {
+                        const cs = colModel.header[hIndex].cs || 1;
+                        cell.colSpan = cs > 1 ? colModel.calculateRealColspan(cs) : 1;
+                        cell.rowSpan = colModel.header[hIndex].rs || 1;
+                    }
+                    dom.showCell(cell);
+                    this.renderHeaderRowLabelCell(cell, colModel, rIndex, hIndex);
+                    if (cornerCell && cornerCell.r == r && cornerCell.c == colModel.index) {
+                        this.renderHeaderRowCornerCell(cell);
+                    }
+                }
+            }
+            else {
+                dom.hideCell(cell);
+            }
+        }
+        dom.setSize(tr, { h: rowHeight ?? this.model.options.rowHeight });
+    }
+    renderHeaderRowLabelCell(th, column, rIndex, hIndex) {
+        // TODO: move rendering logic to HeaderRenderer
+        let div = this.hCache.get(column.index, rIndex);
+        const h = column.header[hIndex];
+        if (!div) {
+            div = dom.createElement('div');
+            if (!h)
+                div.innerHTML = '';
+            else if (h.html)
+                div.innerHTML = h.label ?? "";
+            else
+                div.innerText = h.label ?? "";
+            if (h && h._style != null) {
+                applyStyle(div, styleToCSStyle(this.model.styles.get(h._style)));
+            }
+            this.hCache.set(column.index, rIndex, div);
+        }
+        if (this.model.options.columnHeaderTreeButtons
+            && column.hasChildren
+            && hIndex == column.level) {
+            let expander = div.expander;
+            if (!expander) {
+                expander = new Expander();
+                expander.addEventListener('toggle', () => this.grid.rendering.toggleColumn(column.index));
+                div.expander = expander;
+                div.prepend(expander);
+                dom.setPosition(expander, { l: 4, t: 4 });
+            }
+            expander.state = column.collapsed ? 'closed' : 'open';
+        }
+        if (column.sorting && hIndex == column.header.length - 1) {
+            th.className += ' sort';
+            if (!div.sortingArrow) {
+                div.sortingArrow = new SortingArrow();
+                div.appendChild(div.sortingArrow);
+                dom.setPosition(div.sortingArrow, { t: 0, r: 5 });
+            }
+            div.sortingArrow.sortSettings = this.model.sorting.get(column.index);
+        }
+        if (column.hasHeaderTooltip(hIndex)) {
+            // if (!(options && options.export)) {
+            const corner = dom.createElement('div');
+            corner.className = 'crn';
+            div.appendChild(corner);
+            div.classList.add('tt');
+            // }
+        }
+        th.appendChild(div);
+    }
+    renderHeaderRowFilters(tr, index) {
+        let cell;
+        let offset = 0;
+        let c2;
+        const viewport = this.viewport;
+        if (this.model.hasRowTreeEnabled) {
+            cell = tr.children[offset];
+            cell.innerHTML = '';
+            if (this.model.columnHeaderCount > 1) {
+                dom.hideCell(cell);
+            }
+            else {
+                cell.colSpan = this.model.columnHeaderCount;
+            }
+            ++offset;
+        }
+        if (this.model.options.rowNumbers) {
+            cell = tr.children[offset];
+            cell.innerHTML = '';
+            if (this.model.hasRowTreeEnabled || this.model.options.colLetters
+                || this.model.hasColumnTreeEnabled || this.model.headerCount > 0) {
+                dom.hideCell(cell);
+            }
+            else {
+                cell.rowSpan = this.columnHeaderCount;
+                cell.colSpan = this.rowHeaderCount;
+                this.renderHeaderRowCornerCell(cell);
+            }
+            ++offset;
+        }
+        for (let c = offset; c < tr.children.length; c++) {
+            c2 = c - offset;
+            cell = tr.children[c];
+            if (viewport.columns.length > c2) {
+                dom.showCell(cell);
+                const column = viewport.columns[c2];
+                if (column.hasFilter)
+                    this.renderHeaderRowFilterCell(tr, index, column, cell);
+                else
+                    cell.innerHTML = '';
+            }
+            else {
+                dom.hideCell(cell);
+            }
+        }
+    }
+    renderHeaderRowFilterCell(tr, rIndex, column, th) {
+        th.innerHTML = '';
+        th.className = 'filter';
+        th.c = column.index;
+        let div = this.hCache.get(column.index, rIndex);
+        if (!div) {
+            div = dom.createElement('div');
+            div.filter = dom.createElement('og-filter-label');
+            div.appendChild(div.filter);
+            this.hCache.set(column.index, rIndex, div);
+        }
+        const term = this.grid.filtering.filter.get(column.index)?.term;
+        div.filter.value = Array.isArray(term) ? term.map(item => item.value ?? item.key).join(', ') : term;
+        th.appendChild(div);
+    }
+    renderHeaderRowCornerCell(th) {
+        this.cornerDiv = dom.createElement('div');
+        const treeColWidth = Math.max((this.treeHeaderWidth || (constants.EXPANDER_SIZE + 2)) / (this.model.maxRowLevel + 1), constants.EXPANDER_SIZE + 2);
+        if (this.model.hasRowTree) {
+            for (let l = 0; l <= this.model.maxRowLevel; l++) {
+                const expander = new LevelExpander();
+                expander.level = l;
+                this.cornerDiv.appendChild(expander);
+                dom.setPosition(expander, {
+                    l: l * treeColWidth + treeColWidth / 2 - constants.EXPANDER_SIZE / 2,
+                    b: 3
+                });
+                expander.addEventListener('mousedown', e => e.stopPropagation());
+                expander.addEventListener('toggle', (e) => {
+                    this.model.columns.filter(col => col.levelButtons).forEach(col => this.bCache.deleteColumn(col.index));
+                    this.grid.rendering.setRowExpandLevel(e.level);
+                });
+            }
+        }
+        if (this.model.hasColumnTree) {
+            const treeRowHeight = (this.model.hasColumnTree ? this.treeHeaderHeight : th.clientHeight) / (this.model.maxColumnLevel + 1);
+            const vertical = (this.model.maxColumnLevel * 15 + 20) <= th.clientHeight;
+            for (let l = 0; l <= this.model.maxColumnLevel; l++) {
+                const expander = new LevelExpander();
+                expander.level = l;
+                this.cornerDiv.appendChild(expander);
+                dom.setPosition(expander, vertical ? {
+                    t: l * treeRowHeight + treeRowHeight / 2 - constants.EXPANDER_SIZE / 2,
+                    r: 3
+                } : {
+                    r: l * treeColWidth + treeColWidth / 2 - constants.EXPANDER_SIZE / 2,
+                    b: 3
+                });
+                expander.addEventListener('mousedown', e => e.stopPropagation());
+                expander.addEventListener('toggle', (e) => {
+                    this.grid.rendering.setColumnExpandLevel(e.level);
+                });
+            }
+        }
+        dom.empty(th);
+        th.appendChild(this.cornerDiv);
+    }
+    //#region render body rows
+    renderBody() {
+        let row;
+        let cell;
+        let rowModel;
+        let rIndex;
+        let cIndex;
+        let colModel;
+        let cellModel;
+        let a1;
+        let mergeState;
+        const freezeLeft = this.freezeLeft || 0;
+        // const freezeTop = this.freezeTop || 0;
+        const offset = this.rowHeaderCount;
+        const merges = this.model.merges;
+        const rowNumbers = this.model.options.rowNumbers;
+        const viewport = this.viewport;
+        const viewportRange = this.viewportRange;
+        if (!viewportRange)
+            return;
+        const mainRange = new CellRange(this.colOffset + freezeLeft, this.rowOffset, // + freezeTop, 
+        viewportRange.c2, viewportRange.r2);
+        this.rowMap.clear();
+        for (let r = 0; r < this.bRows.length; r++) {
+            row = this.bRows[r];
+            if (r < viewport.rows.length) {
+                rowModel = viewport.rows[r];
+                rIndex = rowModel.index;
+                if (this.model.autofitRows.has(rIndex)) {
+                    this.grid.rendering.autofitRow(rIndex, false, false);
+                    this.model.autofitRows.delete(rIndex); // use autofit only once for performance reasons
+                }
+                dom.setSize(row, { h: rowModel.height });
+                if (rowModel.height < this.model.options.rowHeight) {
+                    dom.setLineHeight(row, rowModel.height);
+                }
+                this.rowMap.set(rIndex, r);
+                if (rowNumbers) {
+                    cell = row.children[offset - 1];
+                    cell.className = 'vlabel';
+                    cell.r = rIndex;
+                    cell.c = -1;
+                    cell.innerHTML = `<div>${encodeRow(rIndex)}</div>`;
+                }
+                for (let c = offset; c < row.children.length; c++) {
+                    cell = row.children[c];
+                    if (c - offset < viewport.columns.length) {
+                        colModel = viewport.columns[c - offset];
+                        cIndex = colModel.index;
+                        cell.r = rIndex;
+                        cell.c = cIndex;
+                        cellModel = rowModel.cell(cIndex);
+                        a1 = cellModel.address;
+                        mergeState = merges.getMergeState(a1);
+                        if (mergeState == MergeCellState.HIDDEN) {
+                            const merge = merges.hiddenCells.get(cellModel.address);
+                            const inter = mainRange.intersect(new CellRange(merge.c, merge.r, merge.c + merge.cs - 1, merge.r + merge.rs - 1));
+                            if (inter && cellModel.c == inter.c1 && cellModel.r == inter.r1) {
+                                // top left cell of the merged range
+                                cellModel = this.model.rows[merge.r].cell(merge.c);
+                                cell.colSpan = inter.size.columns;
+                                cell.rowSpan = inter.size.rows;
+                                cell.c = cellModel.c;
+                                cell.r = cellModel.r;
+                            }
+                            else {
+                                dom.hideCell(cell);
+                                continue;
+                            }
+                        }
+                        else if (mergeState == MergeCellState.MERGED) {
+                            const merge = cellModel.merge;
+                            cell.colSpan = merge.cs;
+                            cell.rowSpan = merge.rs;
+                        }
+                        else {
+                            cell.colSpan = 1;
+                            cell.rowSpan = 1;
+                        }
+                        dom.showCell(cell);
+                        this.renderBodyCell(cellModel, cell);
+                        // this.scheduleRenderBodyCell(cellModel, cell);
+                    }
+                    else {
+                        dom.hideCell(cell);
+                    }
+                }
+                row.style.display = 'table-row';
+                row.className = rowModel.filterState > 1 ? `filtered` : '';
+            }
+            else {
+                row.style.display = 'none';
+            }
+        }
+    }
+    scheduleRenderBodyCell(cellModel, cell) {
+        if (this.cellRenderSchedules.has(cell)) {
+            window.clearTimeout(this.cellRenderSchedules.get(cell));
+            this.cellRenderSchedules.delete(cell);
+        }
+        this.cellRenderSchedules.set(cell, window.setTimeout(() => this.renderBodyCell(cellModel, cell)));
+    }
+    fixCellBorders(cell, style) {
+        if (style.bottom?.style == 'none') {
+            cell.style.borderBottomColor = 'transparent';
+        }
+        if (style.top?.style == 'none') {
+            cell.style.borderTop = 'transparent';
+        }
+        if (style.right?.style == 'none') {
+            cell.style.borderRight = 'transparent';
+        }
+        if (style.left?.style == 'none') {
+            cell.style.borderLeft = 'transparent';
+        }
+    }
+    renderBodyCell(cellModel, cell) {
+        const force = !cell;
+        cell = cell || this.getCellByCellModel(cellModel);
+        if (cell) {
+            let div = (force ? null : this.bCache.get(cellModel.c, cellModel.r));
+            if (!div) {
+                div = dom.createElement('div');
+                getCellRenderer(cellModel).call(this, div, cellModel);
+                this.bCache.set(cellModel.c, cellModel.r, div);
+            }
+            if (this.renderAll) {
+                // do this only when rendering all cells for performance reasons, good for exports to raw html
+                const s = cellModel.composedStyle;
+                if (s)
+                    this.fixCellBorders(cell, s);
+            }
+            dom.empty(cell);
+            cell.appendChild(div);
+        }
+        else {
+            this.bCache.delete(cellModel.c, cellModel.r);
+        }
+    }
+    mergeBodyCells(mergedCells) {
+        let cell;
+        const skipSet = new Set();
+        for (const m of mergedCells) {
+            cell = this.bRows[m.r].cells[m.c];
+            if (!cell || skipSet.has(cell))
+                continue;
+            for (let r = m.r; r < m.r + m.rs; r++) {
+                for (let c = m.c; c < m.c + m.cs; c++) {
+                    cell = this.bRows[r].cells[c];
+                    if (!cell)
+                        continue;
+                    if (r == m.r && c == m.c) {
+                        cell.colSpan = m.cs;
+                        cell.rowSpan = m.rs;
+                    }
+                    else {
+                        skipSet.add(cell);
+                        dom.hideCell(cell);
+                    }
+                }
+            }
+        }
+    }
+    renderRowTree() {
+        if (!this.model.hasRowTreeEnabled)
+            return;
+        let cell;
+        const viewport = this.viewport;
+        const cIndex = -this.rowHeaderCount;
+        for (let r = 0; r < this.bRows.length; r++) {
+            cell = this.bRows[r].children[0];
+            cell.innerHTML = '';
+            if (r < viewport.rows.length) {
+                cell.className = 'vtree';
+                this.renderRowTreeCell(cIndex, viewport.rows[r], cell);
+            }
+        }
+    }
+    renderRowTreeCell(cIndex, row, th) {
+        let div = this.bCache.get(cIndex, row.index);
+        if (!div) {
+            div = dom.createElement('div');
+            this.bCache.set(cIndex, row.index, div);
+            const rowHeight = row.height + 1;
+            const treeColWidth = this.treeHeaderWidth / this.model.maxRowLevel;
+            if (row.hasChildren) {
+                const expander = new Expander();
+                expander.addEventListener('toggle', () => this.grid.rendering.toggleRow(row.index));
+                th.parentElement.expander = expander;
+                div.expander = expander;
+                div.appendChild(expander);
+                dom.setPosition(expander, {
+                    t: rowHeight / 2 - constants.EXPANDER_SIZE / 2,
+                    l: row.level * treeColWidth + treeColWidth / 2 - constants.EXPANDER_SIZE / 2
+                });
+                const line = this.createExpanderLine('v');
+                div.appendChild(line);
+                dom.setPosition(line, {
+                    t: this.model.options.rowTree.reversed ? 0 : (rowHeight / 2),
+                    l: row.level * treeColWidth + treeColWidth / 2
+                });
+                dom.setSize(line, {
+                    w: treeColWidth / 2,
+                    h: rowHeight / 2 + 1
+                });
+            }
+            if (row.hasParent) {
+                let parent = row;
+                while (parent.hasParent) {
+                    parent = parent.parent;
+                    const line = this.createExpanderLine('v');
+                    div.appendChild(line);
+                    dom.setSize(line, {
+                        w: treeColWidth / 2,
+                        h: rowHeight + 2
+                    });
+                    dom.setPosition(line, {
+                        t: -1,
+                        l: parent.level * treeColWidth + treeColWidth / 2
+                    });
+                }
+            }
+        }
+        if (div.expander)
+            div.expander.state = row.collapsed ? 'closed' : 'open';
+        th.appendChild(div);
+    }
+};
+Table.styles = [tableStyles];
+__decorate([
+    property({ type: Object })
+], Table.prototype, "model", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Table.prototype, "hideOuterBorder", void 0);
+__decorate([
+    property({ type: Number, hasChanged: () => false })
+], Table.prototype, "rowOffset", void 0);
+__decorate([
+    property({ type: Number, hasChanged: () => false })
+], Table.prototype, "colOffset", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], Table.prototype, "zoom", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Table.prototype, "nogrid", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Table.prototype, "renderAll", void 0);
+Table = __decorate([
+    customElement('og-table')
+], Table);
+export { Table };
+//# sourceMappingURL=table.js.map