@omegagrid/grid 0.2.5

package/dist/ui/table.js

@@ -0,0 +1,899 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Table = exports.TableEvent = void 0;
+const constants_1 = __importDefault(require("../constants"));
+const core_1 = require("@omegagrid/core");
+const lit_1 = require("lit");
+const decorators_js_1 = require("lit/decorators.js");
+const ref_js_1 = require("lit/directives/ref.js");
+const grid_core_1 = require("@omegagrid/grid-core");
+const elementCache_1 = require("./elementCache");
+const table_styles_1 = require("./table.styles");
+const sortingArrow_1 = require("./sortingArrow");
+const filter_1 = require("./filter");
+const renderers_1 = require("../renderers");
+class TableEvent extends Event {
+}
+exports.TableEvent = TableEvent;
+let Table = class Table extends lit_1.LitElement {
+    get table() { return this.tableRef.value; }
+    get colgroup() { return this.colgroupRef.value; }
+    get thead() { return this.theadRef.value; }
+    get tbody() { return this.tbodyRef.value; }
+    //#endregion
+    //#region calculated props
+    get colMap() { return this._colMap; }
+    get rowMap() { return this._rowMap; }
+    get freezeLeft() {
+        if (this._freezeLeft == null) {
+            if (this.offsetWidth > 0) {
+                let w = 0;
+                for (let c = 0; c < this.model.options.freezeLeft; c++) {
+                    w += this.model.columns[c].width;
+                }
+                this._freezeLeft = w < this.offsetWidth / 2 ? this.model.options.freezeLeft : 0;
+            }
+            else {
+                this._freezeLeft = this.model.options.freezeLeft;
+            }
+        }
+        return this._freezeLeft;
+    }
+    previewZoom(zoom) {
+        core_1.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.model.hasColumnTree ? 0 : this.rowHeaderCount;
+        columns.forEach(c => {
+            const cell = this.hRows[this.model.hasColumnTree ? 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 => {
+            var _a;
+            const cell = (_a = this.getRowByModelIndex(r)) === null || _a === void 0 ? void 0 : _a.children[this.model.hasRowTree ? 1 : 0];
+            if (cell) {
+                this._highlightedRowHeaderCells.push(cell);
+                cell.className = 'vlabel selected';
+            }
+        });
+    }
+    get columnHeaderCount() {
+        return this.model.headerCount
+            + (this.model.hasColumnTree ? 1 : 0)
+            + (this.model.hasFilter ? 1 : 0)
+            + (this.model.options.colLetters ? 1 : 0);
+    }
+    get rowHeaderCount() { return (this.model.hasRowTree ? 1 : 0) + (this.model.options.rowNumbers ? 1 : 0); }
+    get renderRowCount() {
+        return this.renderAll
+            ? this.model.visibleRows.length
+            : Math.round(Math.min(this.clientHeight / constants_1.default.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_1.default.MIN_COL_WIDTH) || 5, this.model.columns.length + this.rowHeaderCount));
+    }
+    get totalHeaderHeight() {
+        let h = 0, r = 0;
+        if (this.model.hasColumnTree) {
+            h += this.treeHeaderHeight;
+            ++r;
+        }
+        for (let i = 0; i < this.model.headerCount; i++) {
+            h += this.thead.children[r + i].offsetHeight || constants_1.default.DEFAULT_ROW_HEIGHT;
+        }
+        if (this.model.hasFilter)
+            h += constants_1.default.DEFAULT_ROW_HEIGHT;
+        return h;
+    }
+    get treeHeaderWidth() { return this.model.hasRowTree ? 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_1.default.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_1.default.SLIDER_SIZE) / this.zoom,
+                h: (this.clientHeight - this.totalHeaderHeight - constants_1.default.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;
+    }
+    //#endregion
+    constructor() {
+        super();
+        // map of model indexes on element indexes
+        this._rowMap = new Map();
+        this._colMap = new Map();
+        this.rowOffset = 0;
+        this.colOffset = 0;
+        this.zoom = 1;
+        this.nogrid = false;
+        this.renderAll = false;
+        //#endregion
+        //#region element references
+        this.tableRef = (0, ref_js_1.createRef)();
+        this.colgroupRef = (0, ref_js_1.createRef)();
+        this.theadRef = (0, ref_js_1.createRef)();
+        this.tbodyRef = (0, ref_js_1.createRef)();
+        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) => { var _a; return (_a = this.getRowByModelIndex(r)) === null || _a === void 0 ? void 0 : _a.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 = () => {
+            var _a, _b, _c, _d;
+            return (0, lit_1.html) `
+		<style>
+			table {
+				font-size: ${((_a = this.model) === null || _a === void 0 ? void 0 : _a.options.fontSize) || 12}px;
+			}
+
+			table td, table th {
+				height: ${((_b = this.model) === null || _b === void 0 ? void 0 : _b.options.rowHeight) || 22}px;
+				line-height: ${(((_c = this.model) === null || _c === void 0 ? void 0 : _c.options.rowHeight) || 22) - 1}px;
+			}
+		</style>
+
+		<table ${(0, ref_js_1.ref)(this.tableRef)}
+			class="${((_d = this.model) === null || _d === void 0 ? void 0 : _d.options.grid) ? '' : 'nogrid'}"
+			style="transform: scale(${this.zoom})">
+			<colgroup ${(0, ref_js_1.ref)(this.colgroupRef)}></colgroup>
+			<thead ${(0, ref_js_1.ref)(this.theadRef)}></thead>
+			<tbody ${(0, ref_js_1.ref)(this.tbodyRef)}></tbody>
+		</table>
+	`;
+        };
+        this.clearHeaderCache = () => {
+            this.resetFreezeLeft();
+            this.hCache = new elementCache_1.ElementCache(this.model.columns.length, this.columnHeaderCount);
+        };
+        this.clearBodyCache = () => this.bCache = new elementCache_1.ElementCache(this.model.columns.length, this.model.rows.length);
+        //#endregion
+        this.cellRenderSchedules = new WeakMap();
+    }
+    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] = core_1.dom.createElement('col');
+                this.cols.forEach(() => this.colgroup.appendChild(this.cols[c]));
+            }
+        }
+    }
+    createHeaderRows() {
+        const rowCount = this.columnHeaderCount;
+        const colCount = this.renderColCount;
+        core_1.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] = core_1.dom.createElement('tr');
+                core_1.dom.setSize(this.hRows[r], { h: constants_1.default.DEFAULT_ROW_HEIGHT }, false);
+                for (let c = 0; c < colCount; c++) {
+                    this.hRows[r].appendChild(core_1.dom.createElement('th'));
+                }
+            }
+        }
+        core_1.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 = [core_1.dom.createElement('tr')];
+                this.bRows[0].appendChild(core_1.dom.createElement('td'));
+            }
+            else {
+                this.bRows = new Array(rowCount);
+                for (let r = 0; r < rowCount; r++) {
+                    this.bRows[r] = core_1.dom.createElement('tr');
+                    for (let c = 0; c < offset; c++) {
+                        this.bRows[r].appendChild(core_1.dom.createElement('th'));
+                    }
+                    for (let c = offset; c < colCount; c++) {
+                        this.bRows[r].appendChild(core_1.dom.createElement('td'));
+                    }
+                }
+            }
+        }
+        core_1.dom.empty(this.tbody);
+        this.bRows.forEach(row => this.tbody.appendChild(row));
+    }
+    renderCells(update = { vertical: true, horizontal: true }) {
+        if (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.model.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.hasRowTree) {
+            core_1.dom.setSize(this.colgroup.children[0], { w: this.treeHeaderWidth }, true);
+        }
+        if (this.model.options.rowNumbers) {
+            core_1.dom.setSize(this.colgroup.children[offset - 1], { w: constants_1.default.ROW_HEADER_WIDTH }, true);
+        }
+        for (let c = 0; c < viewport.columns.length; c++) {
+            column = viewport.columns[c];
+            this.colMap.set(column.index, c);
+            core_1.dom.setMinSize(this.colgroup.children[c + offset], { w: column.width });
+            core_1.dom.setMaxSize(this.colgroup.children[c + offset], { w: column.width });
+        }
+        let r = 0;
+        if (this.model.hasColumnTree) {
+            this.renderHeaderRowTree(this.hRows[r], r);
+            ++r;
+        }
+        if (this.model.options.colLetters) {
+            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) {
+            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;
+        if ((this.model.hasRowTree || this.model.options.rowNumbers) && !this.model.hasColumnTree) {
+            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++) {
+                core_1.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;
+                core_1.dom.showCell(cell);
+            }
+            else {
+                core_1.dom.hideCell(cell);
+            }
+        }
+    }
+    renderHeaderRowTree(tr, index) {
+        if (!this.model.hasColumnTree)
+            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.hasRowTree;
+        core_1.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 || this.model.hasRowTree) {
+            ++offset;
+            if (this.model.hasRowTree) {
+                cell = tr.children[offset];
+                cell.innerHTML = '';
+                core_1.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);
+                }
+                core_1.dom.showCell(cell);
+            }
+            else {
+                core_1.dom.hideCell(cell);
+            }
+        }
+    }
+    renderHeaderRowTreeCell(tr, rIndex, column, th) {
+        let div = this.hCache.get(column.index, rIndex);
+        if (!div) {
+            div = core_1.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 core_1.Expander();
+                expander.addEventListener('toggle', () => this.grid.rendering.toggleColumn(column.index));
+                div.expander = expander;
+                div.appendChild(expander);
+                core_1.dom.setPosition(expander, {
+                    l: colWidth / 2 - constants_1.default.EXPANDER_SIZE / 2,
+                    t: column.level * treeRowHeight + treeRowHeight / 2 - constants_1.default.EXPANDER_SIZE / 2
+                });
+                div.expanderLine = this.createExpanderLine('h');
+                div.appendChild(div.expanderLine);
+                core_1.dom.setPosition(div.expanderLine, {
+                    l: colWidth / 2,
+                    t: column.level * treeRowHeight + treeRowHeight / 2
+                });
+                core_1.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);
+                    core_1.dom.setSize(line, {
+                        h: treeRowHeight / 2,
+                        w: colWidth - 1
+                    });
+                    core_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 = core_1.dom.createElement('div');
+        expanderLine.className = `${direction}tree-line`;
+        return expanderLine;
+    }
+    renderHeaderRowLabels(tr, rIndex, hIndex) {
+        var _a;
+        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;
+        if (this.model.hasRowTree) {
+            cell = tr.children[offset];
+            cell.innerHTML = '';
+            if (this.model.hasColumnTree || this.model.options.colLetters || hIndex > 0) {
+                core_1.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.hasRowTree || this.model.options.colLetters || this.model.hasColumnTree || hIndex > 0) {
+                core_1.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];
+                cell.colSpan = 1;
+                cell.rowSpan = 1;
+                cell.c = colModel.index;
+                cell.r = hIndex;
+                if (header === null || header === void 0 ? void 0 : header.hidden) {
+                    if (c2 == this.freezeLeft) {
+                        let prevModel = colModel.prevVisible;
+                        let c3 = 0;
+                        while (prevModel && ((_a = prevModel.header[hIndex]) === null || _a === void 0 ? void 0 : _a.hidden)) {
+                            prevModel = prevModel.prevVisible;
+                            ++c3;
+                        }
+                        if (prevModel && prevModel.header[hIndex].cs) {
+                            core_1.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 {
+                            core_1.dom.hideCell(cell);
+                        }
+                    }
+                    else {
+                        core_1.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;
+                    }
+                    core_1.dom.showCell(cell);
+                    this.renderHeaderRowLabelCell(cell, colModel, rIndex, hIndex);
+                    if (cornerCell && cornerCell.r == r && cornerCell.c == c2) {
+                        this.renderHeaderRowCornerCell(cell);
+                    }
+                }
+            }
+            else {
+                core_1.dom.hideCell(cell);
+            }
+        }
+    }
+    renderHeaderRowLabelCell(th, column, rIndex, hIndex) {
+        var _a, _b;
+        let div = this.hCache.get(column.index, rIndex);
+        const h = column.header[hIndex];
+        if (!div) {
+            div = core_1.dom.createElement('div');
+            if (!h)
+                div.innerHTML = '';
+            else if (h.html)
+                div.innerHTML = (_a = h.label) !== null && _a !== void 0 ? _a : "";
+            else {
+                const innerDiv = core_1.dom.createElement('div');
+                innerDiv.innerText = (_b = h.label) !== null && _b !== void 0 ? _b : "";
+                div.appendChild(innerDiv);
+            }
+            if (h && h.style) {
+                (0, renderers_1.applyStyle)(div, (0, grid_core_1.styleToCSStyle)(h.style));
+            }
+            this.hCache.set(column.index, rIndex, div);
+        }
+        if (this.columnSorting && column.sorting && hIndex == column.header.length - 1) {
+            th.className += ' sort';
+            if (!div.sortingArrow) {
+                div.sortingArrow = new sortingArrow_1.SortingArrow();
+                div.appendChild(div.sortingArrow);
+                core_1.dom.setPosition(div.sortingArrow, { t: 0, r: 5 });
+            }
+            div.sortingArrow.sortSettings = this.columnSorting.get(column.index);
+        }
+        if (h && h.height)
+            core_1.dom.setSize(th, { h: h.height });
+        th.appendChild(div);
+    }
+    renderHeaderRowFilters(tr, index) {
+        let cell;
+        let offset = 0;
+        let c2;
+        const viewport = this.viewport;
+        if (this.model.hasRowTree) {
+            cell = tr.children[offset];
+            cell.innerHTML = '';
+            if (this.model.columnHeaderCount > 1) {
+                core_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.hasRowTree || this.model.columnHeaderCount > 1)
+                core_1.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) {
+                core_1.dom.showCell(cell);
+                const column = viewport.columns[c2];
+                if (column.filter)
+                    this.renderHeaderRowFilterCell(tr, index, column, cell);
+                else
+                    cell.innerHTML = '';
+            }
+            else {
+                core_1.dom.hideCell(cell);
+            }
+        }
+    }
+    renderHeaderRowFilterCell(tr, rIndex, column, th) {
+        var _a, _b;
+        th.innerHTML = '';
+        th.className = 'filter';
+        th.c = column.index;
+        let div = this.hCache.get(column.index, rIndex);
+        if (!div) {
+            div = core_1.dom.createElement('div');
+            div.filter = new filter_1.Filter();
+            div.appendChild(div.filter);
+            this.hCache.set(column.index, rIndex, div);
+        }
+        div.filter.text = (_b = (_a = this.grid.filtering.filter.get(column.index)) === null || _a === void 0 ? void 0 : _a.term) !== null && _b !== void 0 ? _b : null;
+        th.appendChild(div);
+    }
+    renderHeaderRowCornerCell(th) {
+        this.cornerDiv = core_1.dom.createElement('div');
+        const treeColWidth = Math.max((this.treeHeaderWidth || 35) / (this.model.maxRowLevel + 1), constants_1.default.EXPANDER_SIZE + 2);
+        if (this.model.maxRowLevel > 0) {
+            for (let l = 0; l <= this.model.maxRowLevel; l++) {
+                const expander = new core_1.LevelExpander();
+                expander.level = l;
+                this.cornerDiv.appendChild(expander);
+                core_1.dom.setPosition(expander, {
+                    l: l * treeColWidth + treeColWidth / 2 - constants_1.default.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.maxColumnLevel > 0) {
+            const treeRowHeight = this.treeHeaderHeight / (this.model.maxColumnLevel + 1);
+            const vertical = this.treeHeaderHeight <= th.clientHeight;
+            for (let l = 0; l <= this.model.maxColumnLevel; l++) {
+                const expander = new core_1.LevelExpander();
+                expander.level = l;
+                this.cornerDiv.appendChild(expander);
+                core_1.dom.setPosition(expander, vertical ? {
+                    t: l * treeRowHeight + treeRowHeight / 2 - constants_1.default.EXPANDER_SIZE / 2,
+                    r: 3
+                } : {
+                    r: l * treeColWidth + treeColWidth / 2 - constants_1.default.EXPANDER_SIZE / 2,
+                    b: 3
+                });
+                expander.addEventListener('mousedown', e => e.stopPropagation());
+                expander.addEventListener('toggle', (e) => {
+                    this.grid.rendering.setColumnExpandLevel(e.level);
+                });
+            }
+        }
+        core_1.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 hiddenRowCells: Map<number, Merge>;
+        // let merge: Merge;
+        // const freezeLeft = this.freezeLeft;
+        // const freezeTop = this.model.options.freezeTop || 0;
+        const offset = this.rowHeaderCount;
+        const rowNumbers = this.model.options.rowNumbers;
+        const viewport = this.viewport;
+        const mergedCells = [];
+        //const hiddenCells = this.model.hiddenCells;
+        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;
+                core_1.dom.setSize(row, { h: 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 = (0, grid_core_1.encodeRow)(rIndex);
+                }
+                //hiddenRowCells = hiddenCells.get(rIndex);
+                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;
+                        cell.colSpan = 1; //cellModel.colspan;
+                        cell.rowSpan = 1; //cellModel.rowspan;
+                        // merge = hiddenRowCells && hiddenRowCells.get(cIndex);
+                        // if (merge) {
+                        // 	if (c == offset + freezeLeft) { // || r == freezeTop) {
+                        // 		cIndex = merge.c;
+                        // 		rIndex = merge.r;
+                        // 		mergedCells.push(merge);
+                        // 	} else {
+                        // 		dom.hideCell(cell);
+                        // 		continue;
+                        // 	}
+                        // }
+                        cellModel = rowModel.cell(cIndex);
+                        if (cellModel.colspan > 1 || cellModel.rowspan > 1) {
+                            mergedCells.push({ r: r, c: c, cs: cellModel.colspan, rs: cellModel.rowspan });
+                        }
+                        core_1.dom.showCell(cell);
+                        this.renderBodyCell(cellModel, cell);
+                        // this.scheduleRenderBodyCell(cellModel, cell);
+                    }
+                    else {
+                        core_1.dom.hideCell(cell);
+                    }
+                }
+                row.style.display = 'table-row';
+                row.className = rowModel.filterState == core_1.tree.FilterState.ChildMatched ? `filtered` : '';
+            }
+            else {
+                row.style.display = 'none';
+            }
+        }
+        this.mergeBodyCells(mergedCells);
+    }
+    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)));
+    }
+    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 = core_1.dom.createElement('div');
+                (cellModel.renderer || renderers_1.cellTypeRendererMap[cellModel.type]).call(this, div, cellModel);
+                this.bCache.set(cellModel.c, cellModel.r, div);
+            }
+            core_1.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);
+                        core_1.dom.hideCell(cell);
+                    }
+                }
+            }
+        }
+    }
+    renderRowTree() {
+        if (!this.model.hasRowTree)
+            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 = core_1.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 core_1.Expander();
+                expander.addEventListener('toggle', () => this.grid.rendering.toggleRow(row.index));
+                th.parentElement.expander = expander;
+                div.expander = expander;
+                div.appendChild(expander);
+                core_1.dom.setPosition(expander, {
+                    t: rowHeight / 2 - constants_1.default.EXPANDER_SIZE / 2,
+                    l: row.level * treeColWidth + treeColWidth / 2 - constants_1.default.EXPANDER_SIZE / 2
+                });
+                const line = this.createExpanderLine('v');
+                div.appendChild(line);
+                core_1.dom.setPosition(line, {
+                    t: rowHeight / 2,
+                    l: row.level * treeColWidth + treeColWidth / 2
+                });
+                core_1.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);
+                    core_1.dom.setSize(line, {
+                        w: treeColWidth / 2,
+                        h: rowHeight + 2
+                    });
+                    core_1.dom.setPosition(line, {
+                        t: -1,
+                        l: parent.level * treeColWidth + treeColWidth / 2
+                    });
+                }
+            }
+        }
+        if (div.expander)
+            div.expander.state = row.collapsed ? 'closed' : 'open';
+        th.appendChild(div);
+    }
+};
+exports.Table = Table;
+Table.styles = [table_styles_1.tableStyles];
+__decorate([
+    (0, decorators_js_1.property)({ type: Object })
+], Table.prototype, "model", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: Number, hasChanged: () => false })
+], Table.prototype, "rowOffset", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: Number, hasChanged: () => false })
+], Table.prototype, "colOffset", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: Number, reflect: true })
+], Table.prototype, "zoom", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: Boolean, reflect: true })
+], Table.prototype, "nogrid", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: Boolean, reflect: true })
+], Table.prototype, "renderAll", void 0);
+exports.Table = Table = __decorate([
+    (0, decorators_js_1.customElement)('og-table')
+], Table);
+//# sourceMappingURL=table.js.map