@fluid-topics/ftds-table 2.2.1 → 2.2.3

package/build/ftds-table.d.ts

@@ -33,6 +33,10 @@ export declare class FtdsTable<T extends Record<string, any>> extends FtLitEleme
     protected renderColumnSort(column: ColumnConfiguration<T>, index: number): typeof nothing | TemplateResult<1>;
     protected getSortIcon(isSorted: boolean | undefined): FtdsIcons;
     protected update(props: PropertyValues): void;
+    protected updated(props: PropertyValues): void;
+    private scrollHighlightedRowIntoDisplayedRows;
+    private getStickyHeaderBottom;
+    private isScrollable;
     protected columnPart(prefix: string, index: number): string;
     protected getValue(column: ColumnConfiguration<T>, row: T): any;
     private renderEmptyStateTable;

package/build/ftds-table.js

@@ -190,6 +190,40 @@ export class FtdsTable extends FtLitElement {
             this.currentSort = this.sort;
         }
     }
+    updated(props) {
+        super.updated(props);
+        if (props.has("highlightedRowIndex") && this.highlightedRowIndex >= 0) {
+            this.scrollHighlightedRowIntoDisplayedRows();
+        }
+    }
+    scrollHighlightedRowIntoDisplayedRows() {
+        var _a;
+        const row = (_a = this.rows) === null || _a === void 0 ? void 0 : _a[this.highlightedRowIndex];
+        if (!row || !this.isScrollable()) {
+            return;
+        }
+        const rowRect = row.getBoundingClientRect();
+        const containerRect = this.getBoundingClientRect();
+        const visibleTop = Math.max(containerRect.top, this.getStickyHeaderBottom());
+        if (rowRect.top < visibleTop) {
+            this.scrollTop -= visibleTop - rowRect.top;
+        }
+        else if (rowRect.bottom > containerRect.bottom) {
+            this.scrollTop += rowRect.bottom - containerRect.bottom;
+        }
+    }
+    getStickyHeaderBottom() {
+        var _a, _b;
+        if (!this.stickyHeaders) {
+            return 0;
+        }
+        const stickyCell = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".header-cell--sticky");
+        return (_b = stickyCell === null || stickyCell === void 0 ? void 0 : stickyCell.getBoundingClientRect().bottom) !== null && _b !== void 0 ? _b : 0;
+    }
+    isScrollable() {
+        const overflowY = getComputedStyle(this).overflowY;
+        return (overflowY === "auto" || overflowY === "scroll") && this.scrollHeight > this.clientHeight;
+    }
     columnPart(prefix, index) {
         return `${prefix} ${prefix}-column-${index}`;
     }