overview-components 1.1.159 → 1.1.161

package/dist/components/lit-data-grid-tanstack.js

@@ -1,2550 +0,0 @@
-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 { css, html, LitElement } from 'lit';
-import { isEqual } from 'lodash';
-import { msg } from '@lit/localize';
-import { property, state, query } from 'lit/decorators.js';
-import { unsafeHTML } from 'lit/directives/unsafe-html.js';
-import { TableController, getCoreRowModel, flexRender, getSortedRowModel, getFilteredRowModel, getFacetedRowModel, getFacetedUniqueValues, getGroupedRowModel, getExpandedRowModel, filterFns, } from '@tanstack/lit-table';
-import { repeat } from 'lit/directives/repeat.js';
-import { VirtualizerController } from '@tanstack/lit-virtual';
-import { createRef, ref } from 'lit/directives/ref.js';
-import { styleMap } from 'lit/directives/style-map.js';
-import Sortable from 'sortablejs';
-// components
-import '../shared/filter-inputs.js';
-import '../shared/lit-icon.js';
-import '../shared/lit-icon-button.js';
-import '../shared/lit-button.js';
-import '../shared/lit-responsive-button.js';
-import '../shared/lit-data-grid-export-popover.js';
-import '../shared/lit-data-grid-action-buttons-popover.js';
-import '../assets/illustration/not-found.js';
-import '../shared/lit-data-grid-density-popover.js';
-import '../shared/lit-loading-bar.js';
-import '../shared/lit-data-grid-row-actions.js';
-import '../shared/simple-tooltip.js';
-import '../shared/lit-checkbox.js';
-import '../shared/lit-overflow-tooltip.js';
-import '../shared/lit-document-thumbnail.js';
-import './components-settings/data-grid-settings.js';
-// utils
-import { formatDate } from '../utils/date.js';
-import { formatCurrency, formatDecimal } from '../utils/formatNumber.js';
-import { dateFilterFn, multiselectFilterFn, dateRangeFilterFn } from '../utils/custom-filters.js';
-import { setLocale, getLocale, LOCALE_LANGS } from '../utils/localization.js';
-import { getOperatorsByColumnType } from '../utils/getOperatorByType.js';
-import { tooltip } from '../shared/simple-tooltip.js';
-export class LitDataGridTanstack extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.row = [];
-        this.columns = [];
-        this.allColumns = [];
-        this.enableRowVirtualization = true;
-        this.enableColumnVirtualization = false;
-        this.enableColumnPinning = true;
-        this.enableColumnOrdering = false;
-        this.enableGrouping = true;
-        this.enablePinning = true;
-        this.exportData = true;
-        this.actionButtonsInMenu = false;
-        this.id = '';
-        this.initialGroups = [];
-        this.initialSorting = [];
-        this.initialRowExpanded = {};
-        this.columnSizing = {};
-        this.leftPinnedColumns = [];
-        this.rightPinnedColumns = [];
-        this.enableFiltering = true;
-        this.enableSorting = true;
-        this.userLang = 'cs';
-        this.allowedLang = ['cs'];
-        this.dateFormat = null;
-        this.isLoading = false;
-        this.enableRowSelection = false;
-        this.initialFiltering = [];
-        this.server = false;
-        this.scrollEndThreshold = 100;
-        this.rowDensity = 'standard';
-        this.enableMultiRowSelection = false;
-        this.minFilterCharacters = 3;
-        this.rowsSelected = {};
-        this.enableSettings = false;
-        this.enableSettingsAlwaysFilter = false;
-        this.alwaysFilterActive = false;
-        this.onSettingsChanged = () => { };
-        this.onCellKeyDown = (event, row) => { };
-        this.onColumnResize = () => { };
-        this.onColumnFiltersChanged = (table, filterModel) => { };
-        this.onColumnSortChanged = (table, sortModel) => { };
-        this.onRowSelectionChanged = (table, selectedRows) => { };
-        this.onColumnOrderChanged = (table, columnOrder) => { };
-        this.hideFooter = false;
-        this.columnVisibility = {};
-        this.onColumnVisibilityChanged = (table, columnVisibility) => { };
-        this.onMouseDown = (e, row) => { };
-        this.onRowFocusChanged = (table, rowIndex) => { };
-        this.focusedRowIndex = null;
-        this.autoFocus = false;
-        this.onColumnPinningChanged = (table, leftPinnedColumns) => { };
-        this.onGroupingChanged = (table, grouping) => { };
-        this.onRowExpanded = (table, rowsExpanded) => { };
-        this.variables = [];
-        this._prevRowsCount = 0;
-        this.isScrollable = false;
-        this.disableScrollLeft = true;
-        this.disableScrollRight = false;
-        this.columnOrder = [];
-        this.isOpen = false;
-        this.filterText = '';
-        this.isOpenModal = false;
-        this.scrollToEnd = false;
-        this.resizeTimeout = null;
-        this.tableContainerRef = createRef();
-        this.scrollInterval = null;
-        this.currentScrollTop = 0;
-        this.lastSelectedIndex = null;
-        this.getCellBackgroundColor = (cell) => {
-            if (cell.getIsGrouped()) {
-                return this.columnGroupedColor ?? `var(--color-primary-light, #f0fadf)`;
-            }
-            if (cell.getIsAggregated()) {
-                return this.rowAggregationColor ?? `var(--color-warning-light, #ffe1a8)`;
-            }
-            if (cell.getIsPlaceholder()) {
-                return `var(--background-default, #eff3f4)`;
-            }
-            if (cell.column.getIsPinned()) {
-                return `var(--background-paper, #fff)`;
-            }
-            return 'transparent';
-        };
-        this.handleWindowResize = () => {
-            // Clear any existing timeout
-            if (this.resizeTimeout) {
-                clearTimeout(this.resizeTimeout);
-            }
-            // Debounce the resize event
-            this.resizeTimeout = window.setTimeout(() => {
-                this.updateScrollState();
-                // Call the onWindowResize callback to potentially fetch new rows
-                if (this.onWindowResize) {
-                    this.onWindowResize();
-                }
-            }, 500); // 500ms debounce
-        };
-        this.updateScrollState = () => {
-            const grid = this.tableContainerRef.value;
-            if (grid) {
-                const canScrollHorizontally = grid.scrollWidth > grid.clientWidth;
-                this.isScrollable = canScrollHorizontally;
-                this.disableScrollLeft = grid.scrollLeft === 0;
-                this.disableScrollRight = grid.scrollLeft + grid.clientWidth >= grid.scrollWidth;
-                this.currentScrollTop = grid.scrollTop;
-            }
-            // Check if we've reached the scroll end after scroll state update
-            this._maybeTriggerScrollEnd();
-        };
-    }
-    getLocaleLang() {
-        if (this.userLang && LOCALE_LANGS.has(this.userLang)) {
-            return this.userLang;
-        }
-        return 'cs';
-    }
-    get rows() {
-        return [...(this.row || [])];
-    }
-    get getColumns() {
-        return [...(this.columns || [])];
-    }
-    // lifecycle
-    connectedCallback() {
-        this.initRowVirtualizer();
-        this.initColumnVirtualizer();
-        this.initTable();
-        window.addEventListener('resize', this.handleWindowResize);
-        super.connectedCallback();
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        window.removeEventListener('resize', this.handleWindowResize);
-        if (this.resizeTimeout) {
-            clearTimeout(this.resizeTimeout);
-        }
-    }
-    updated(changedProperties) {
-        if (changedProperties.has('userLang')) {
-            const localeLang = this.getLocaleLang();
-            if (getLocale() !== localeLang) {
-                setLocale(localeLang).then(() => this.requestUpdate());
-            }
-        }
-        let needsUpdate = false;
-        if ((changedProperties.has('columns') || changedProperties.has('columnVisibility')) &&
-            this.enableColumnVirtualization) {
-            const virtualizer = this.columnVirtualizerController?.getVirtualizer();
-            if (virtualizer) {
-                virtualizer.setOptions({
-                    ...virtualizer.options,
-                    count: this.table?.getVisibleLeafColumns().length,
-                });
-            }
-        }
-        if (changedProperties.has('row') || changedProperties.has('columns')) {
-            this.initTable();
-            needsUpdate = true;
-        }
-        if (changedProperties.has('rowDensity') && this.enableRowVirtualization) {
-            const virtualizer = this.rowVirtualizerController?.getVirtualizer();
-            if (virtualizer) {
-                virtualizer.setOptions({
-                    ...virtualizer.options,
-                    estimateSize: () => this.getRowHeight(),
-                });
-                // Force full re-measure of all rows with new height
-                virtualizer.measure();
-            }
-            needsUpdate = true;
-        }
-        // Single requestUpdate() call if needed
-        if (needsUpdate) {
-            this.requestUpdate();
-        }
-        // Check scroll end when data or layout changes
-        if (changedProperties.has('rowDensity')) {
-            // Use setTimeout to ensure DOM is updated
-            setTimeout(() => this._maybeTriggerScrollEnd(), 100);
-        }
-    }
-    firstUpdated() {
-        const grid = this.tableContainerRef.value;
-        if (grid) {
-            grid.addEventListener('scroll', this.updateScrollState);
-        }
-        setTimeout(() => {
-            this.updateScrollState();
-        }, 1500);
-        this.initSortable();
-        this._container.addEventListener('scroll', this.handleScroll.bind(this));
-        // focus row by index
-        if (this.autoFocus) {
-            setTimeout(() => {
-                if (this.focusedRowIndex !== null && this.focusedRowIndex !== undefined) {
-                    this.focusRow?.(this.focusedRowIndex);
-                }
-                else {
-                    // first selected row if exists
-                    const selectedRows = this.table.getSelectedRowModel().rows;
-                    if (selectedRows.length > 0) {
-                        this.focusRow?.(selectedRows[0].index);
-                    }
-                }
-            }, 0);
-        }
-    }
-    toggleModal() {
-        this.isOpenModal = !this.isOpenModal;
-    }
-    async initSortable() {
-        if (!this.enableColumnOrdering)
-            return;
-        const headerRow = this.shadowRoot?.querySelector('thead tr.head');
-        if (!headerRow)
-            return;
-        Sortable.create(headerRow, {
-            animation: 150,
-            direction: 'horizontal',
-            handle: '.drag-handle',
-            filter: 'th[data-index="checkbox"], th[data-index="actions"]',
-            preventOnFilter: false,
-            onMove: (evt) => {
-                const dragged = evt.dragged.getAttribute('data-index');
-                const target = evt.related.getAttribute('data-index');
-                const disallowed = ['checkbox', 'actions'];
-                if (disallowed.includes(dragged) || disallowed.includes(target)) {
-                    return false;
-                }
-                const headers = this.table.getHeaderGroups()[0].headers;
-                const draggedHeader = headers.find((header) => header.id === dragged);
-                const targetHeader = headers.find((header) => header.id === target);
-                if (!draggedHeader || !targetHeader)
-                    return false;
-                const isDraggedPinned = draggedHeader.column.getIsPinned?.();
-                const isTargetPinned = targetHeader.column.getIsPinned?.();
-                const isDraggedGrouped = draggedHeader.column.getIsGrouped?.();
-                const isTargetGrouped = targetHeader.column.getIsGrouped?.();
-                return !(isDraggedPinned || isTargetPinned || isDraggedGrouped || isTargetGrouped);
-            },
-            onEnd: () => {
-                const newOrder = Array.from(headerRow.querySelectorAll('th'))
-                    .map((th) => th.getAttribute('data-index'))
-                    .filter((id) => {
-                    if (!id || id === 'checkbox' || id === 'actions')
-                        return false;
-                    const header = this.table
-                        .getHeaderGroups()[0]
-                        .headers.find((h) => h.id === id);
-                    if (!header)
-                        return false;
-                    return !header.column.getIsPinned?.() && !header.column.getIsGrouped?.();
-                });
-                this.table.setColumnOrder(newOrder);
-            },
-        });
-    }
-    async loadXLSX() {
-        if (!window.XLSX && !this.server) {
-            await new Promise((resolve) => {
-                const script = document.createElement('script');
-                script.src = '../../public/libs/xlsx.mini.min.js';
-                script.onload = resolve;
-                document.head.appendChild(script);
-            });
-        }
-    }
-    // row density
-    getRowHeight() {
-        switch (this.rowDensity) {
-            case 'compact':
-                return 31;
-            case 'standard':
-                return 38;
-            case 'comfort':
-                return 50;
-            default:
-                return 38;
-        }
-    }
-    getButtonSize() {
-        switch (this.rowDensity) {
-            case 'compact':
-                return 'small';
-            case 'standard':
-                return 'medium';
-            case 'comfort':
-                return 'large';
-            default:
-                return 'medium';
-        }
-    }
-    handleSetDensity(density) {
-        this.rowDensity = density;
-        if (this.rowDensityChange) {
-            this.rowDensityChange(this.table, density);
-        }
-    }
-    handleMouseDown(event, row) {
-        if (this.onMouseDown) {
-            this.onMouseDown(event, row);
-        }
-    }
-    handleFilterTabNavigation(event) {
-        const { direction, currentFilter } = event.detail;
-        // Získajte všetky filter-inputs elementy z DOM
-        const filterInputs = Array.from(this.shadowRoot?.querySelectorAll('filter-inputs') || []);
-        if (filterInputs.length === 0)
-            return;
-        const currentIndex = filterInputs.indexOf(currentFilter);
-        let nextIndex;
-        if (direction === 'forward') {
-            // Ak je aktuálny filter posledný vo viditeľnom zozname
-            if (currentIndex === filterInputs.length - 1) {
-                // Scroll na začiatok (ľavá strana)
-                const grid = this.shadowRoot?.querySelector('.grid');
-                if (grid) {
-                    grid.scrollLeft = 0;
-                }
-                // Po vykonaní scrollu čakáme krátko a potom nastavený focus na prvý filter
-                setTimeout(() => {
-                    const firstFilter = this.shadowRoot?.querySelector('filter-inputs');
-                    if (firstFilter) {
-                        firstFilter.focus();
-                    }
-                }, 0);
-                return;
-            }
-            else {
-                nextIndex = currentIndex + 1;
-            }
-        }
-        else {
-            // Podobne môžeme spracovať aj spätnú navigáciu
-            if (currentIndex === 0) {
-                const grid = this.shadowRoot?.querySelector('.grid');
-                if (grid) {
-                    // Scroll na koniec (pravá strana)
-                    grid.scrollLeft = grid.scrollWidth;
-                }
-                setTimeout(() => {
-                    const filters = Array.from(this.shadowRoot?.querySelectorAll('filter-inputs') || []);
-                    if (filters.length > 0) {
-                        filters[filters.length - 1].focus();
-                    }
-                }, 0);
-                return;
-            }
-            else {
-                nextIndex = currentIndex - 1;
-            }
-        }
-        // Nastav focus na ďalší filter podľa smeru
-        filterInputs[nextIndex].focus();
-    }
-    // virtualization
-    initRowVirtualizer() {
-        this.rowVirtualizerController = new VirtualizerController(this, {
-            count: this.table?.getRowModel()?.rows.length || this.row?.length || 1,
-            getScrollElement: () => this.tableContainerRef.value,
-            estimateSize: () => this.getRowHeight(),
-            overscan: 5,
-            initialOffset: this.currentScrollTop,
-            enabled: this.enableRowVirtualization,
-        });
-    }
-    initTable() {
-        this.tableController = new TableController(this);
-    }
-    initColumnVirtualizer() {
-        this.columnVirtualizerController = new VirtualizerController(this, {
-            horizontal: true,
-            count: this.table?.getVisibleLeafColumns().length || this.columns.length || 1,
-            getScrollElement: () => this.tableContainerRef.value,
-            estimateSize: (index) => this.table.getVisibleLeafColumns()[index]?.getSize() || 200,
-            overscan: 5,
-            enabled: this.enableColumnVirtualization,
-        });
-    }
-    handleRowClick(event, row) {
-        this.onRowClick?.(event, this.table, row);
-        this.onRowFocusChanged?.(this.table, row.index);
-        const isShift = event.shiftKey;
-        const isCtrlOrMeta = event.ctrlKey || event.metaKey;
-        if (this.enableRowSelection && row.getCanSelect() && (isCtrlOrMeta || isShift)) {
-            const { rows } = this.table.getRowModel();
-            if (this.enableMultiRowSelection &&
-                isShift &&
-                this.focusedRowIndex !== null &&
-                this.focusedRowIndex !== undefined) {
-                const [start, end] = [
-                    Math.min(this.focusedRowIndex, row.index),
-                    Math.max(this.focusedRowIndex, row.index),
-                ];
-                const ids = rows.slice(start, end + 1).map((r) => r.id);
-                const selected = { ...this.rowsSelected };
-                ids.forEach((id) => (selected[id] = true));
-                this.table.setRowSelection(selected);
-            }
-            else if (isCtrlOrMeta && this.enableMultiRowSelection) {
-                // Ctrl/Cmd+Click: toggle row selection
-                const selected = { ...this.rowsSelected };
-                if (selected[row.id]) {
-                    delete selected[row.id];
-                }
-                else {
-                    selected[row.id] = true;
-                }
-                this.table.setRowSelection(selected);
-            }
-            else {
-                // Single click: select only this row
-                const selected = { [row.id]: true };
-                this.table.setRowSelection(selected);
-            }
-        }
-        this.focusedRowIndex = row.index;
-    }
-    handleRowDoubleClick(row) {
-        if (this.onRowDoubleClick) {
-            this.onRowDoubleClick(this.table, row);
-        }
-    }
-    handleKeyDown(e) {
-        const rows = this.table.getRowModel().rows;
-        if (!rows.length)
-            return;
-        let index = this.focusedRowIndex ?? rows.findIndex((row) => this.rowsSelected[row.id]);
-        if (this.enableRowSelection) {
-            if (index === -1)
-                index = 0;
-            if (e.key === 'ArrowDown' && e.shiftKey && this.enableMultiRowSelection) {
-                e.preventDefault();
-                const nextIndex = index + 1;
-                if (nextIndex < rows.length) {
-                    const nextRowId = rows[nextIndex].id;
-                    this.table.setRowSelection((prev) => ({
-                        ...prev,
-                        [nextRowId]: !prev[nextRowId],
-                    }));
-                    this.focusRow(nextIndex);
-                }
-            }
-            else if (e.key === 'ArrowUp' && e.shiftKey && this.enableMultiRowSelection) {
-                e.preventDefault();
-                const prevIndex = index - 1;
-                if (prevIndex >= 0) {
-                    const prevRowId = rows[prevIndex].id;
-                    this.table.setRowSelection((prev) => ({
-                        ...prev,
-                        [prevRowId]: !prev[prevRowId],
-                    }));
-                    this.focusRow(prevIndex);
-                }
-            }
-            else if (e.key === 'ArrowDown' && index < rows.length - 1) {
-                e.preventDefault();
-                const nextIndex = index + 1;
-                this.focusRow(nextIndex);
-            }
-            else if (e.key === 'ArrowUp' && index > 0) {
-                e.preventDefault();
-                const prevIndex = index - 1;
-                this.focusRow(prevIndex);
-            }
-        }
-        this.onCellKeyDown?.(e, rows[index]);
-    }
-    focusRow(index) {
-        const rowIndex = index ?? this.focusedRowIndex;
-        // Scroll to the row using virtualizer if available
-        this.rowVirtualizerController
-            ?.getVirtualizer()
-            .scrollToIndex(rowIndex ?? 0, { align: 'auto' });
-        setTimeout(() => {
-            const row = this.shadowRoot?.querySelector(`[data-row-index="${rowIndex}"]`);
-            // Find the row element in the shadow DOM
-            if (this.enableRowVirtualization) {
-                if (row) {
-                    setTimeout(() => {
-                        row.focus();
-                    }, 0);
-                }
-            }
-            else {
-                if (row) {
-                    row.focus();
-                    row.scrollIntoView({ block: 'nearest' });
-                }
-            }
-        }, 100);
-        this.onRowFocusChanged?.(this.table, rowIndex);
-        this.focusedRowIndex = rowIndex;
-    }
-    // Optimized getTanstackColumns for performance
-    getTanstackColumns(columns) {
-        // Cache config values to avoid repeated property lookups
-        const userLang = this.userLang || 'cs';
-        const dateFormat = this.dateFormat;
-        const columnDefaultSize = this.columnDefaultSize;
-        const columnDefaultMaxSize = this.columnDefaultMaxSize || 500;
-        const columnDefaultMinSize = this.columnDefaultMinSize || 100;
-        const enableFiltering = this.enableFiltering;
-        const enablePinning = this.enablePinning;
-        // Precompute type-based filterFns for all columns
-        const typeToFilterFn = {
-            numberRange: filterFns.inNumberRange,
-            select: filterFns.weakEquals,
-            multiselect: multiselectFilterFn,
-            number: filterFns.weakEquals,
-            currency: filterFns.weakEquals,
-            dateRange: dateRangeFilterFn,
-            dateTimeRange: dateRangeFilterFn,
-            date: dateFilterFn,
-            dateTime: dateFilterFn,
-            string: filterFns.includesString,
-        };
-        return columns.map((column) => {
-            const isDateType = column.type === 'date' ||
-                column.type === 'dateTime' ||
-                column.type === 'dateTimeRange' ||
-                column.type === 'dateRange';
-            // Precompute some column config
-            const colType = column.type ?? 'string';
-            const colField = column.field;
-            const colHeader = column[`headerName_${userLang}`] || column.headerName;
-            const colCell = column.cell;
-            const colAggCell = column.aggregatedCell;
-            const colCurrency = column.currency;
-            const colNumDecimals = column.numberOfDecimal;
-            const colValueOptions = column.valueOptions;
-            const colFilterOperators = column.filterOperators;
-            const colEnableSorting = column.enableSorting ?? true;
-            const colEnableFilter = column.enableFilter ?? true;
-            const colEnableGrouping = column.enableGrouping ?? true;
-            const colSortDescFirst = column.sortDescFirst ?? true;
-            const colEnableResizing = column.enableResizing ?? true;
-            const colEnablePinning = column.enablePinning ?? true;
-            const colSize = column.size || columnDefaultSize || undefined;
-            const colMaxSize = column.maxSize || columnDefaultMaxSize;
-            const colMinSize = column.minSize || columnDefaultMinSize;
-            const colAggFn = column.columnAggregation ?? undefined;
-            // Precompute filterFn
-            const filterFn = typeToFilterFn[colType] || filterFns.includesString;
-            // Precompute accessorFn
-            let accessorFn;
-            if (column.accessorFn) {
-                accessorFn = column.accessorFn;
-            }
-            else {
-                accessorFn = (originalRow) => originalRow[colField];
-            }
-            // Precompute cell renderer
-            const cell = (props) => {
-                const value = props.getValue();
-                if (colType === 'actions') {
-                    return html `
-                        <lit-data-grid-row-actions
-                            @click=${(e) => {
-                        e.stopPropagation();
-                        this.onRowFocusChanged?.(this.table, props.row.index);
-                    }}
-                            .buttons=${column.getActions?.(props) || []}
-                        ></lit-data-grid-row-actions>
-                    `;
-                }
-                if ((colType === 'number' || colType === 'numberRange') && !colCell) {
-                    return html `<div style="text-align: right;">
-                        ${formatDecimal(value, {
-                        locale: userLang,
-                        numberOfDecimal: colNumDecimals || 0,
-                    })}
-                    </div>`;
-                }
-                if (colType === 'currency' && !colCell) {
-                    return html `<div style="text-align: right;">
-                        ${formatCurrency(value, {
-                        locale: userLang,
-                        currency: colCurrency,
-                        numberOfDecimal: colNumDecimals || 2,
-                    })}
-                    </div>`;
-                }
-                if (isDateType && !this.server) {
-                    return formatDate(value, userLang, colType === 'date' || colType === 'dateRange' ? undefined : true, dateFormat);
-                }
-                if (colType === 'thumbnail' && !colCell) {
-                    const thumbnailSize = this.rowDensity === 'compact' ? 24 : this.rowDensity === 'comfort' ? 40 : 30;
-                    return html `<div style="display: flex; align-items: center; justify-content: center; height: 100%;">
-                        <lit-document-thumbnail
-                            .thumbnail="${value?.thumbnail}"
-                            .fileType="${value?.fileType}"
-                            .size="${thumbnailSize}"
-                            .previewMaxWidth="${column.thumbnailPreviewMaxWidth ?? 300}"
-                            .previewMaxHeight="${column.thumbnailPreviewMaxHeight ?? 300}"
-                            .enableHoverPreview="${true}"
-                            .enableThumbnailDetail="${true}"
-                        ></lit-document-thumbnail>
-                    </div>`;
-                }
-                return colCell ? colCell(props, html, unsafeHTML) : value;
-            };
-            // Precompute aggregatedCell renderer
-            const aggregatedCell = (props) => colAggCell ? colAggCell(props, html, unsafeHTML) : props.getValue();
-            return {
-                id: colField,
-                accessorKey: colField,
-                accessorFn,
-                type: colType,
-                header: colHeader,
-                cell,
-                filterFn,
-                enableSorting: colEnableSorting,
-                enableColumnFilter: enableFiltering && colEnableFilter,
-                size: colSize,
-                maxSize: colMaxSize,
-                minSize: colMinSize,
-                meta: {
-                    filterVariant: colType,
-                    valueOptions: colValueOptions,
-                    filterOperators: colFilterOperators,
-                },
-                aggregationFn: colAggFn,
-                enableGrouping: colEnableGrouping,
-                sortDescFirst: colSortDescFirst,
-                enableResizing: colEnableResizing,
-                enablePinning: enablePinning && colEnablePinning,
-                aggregatedCell,
-            };
-        });
-    }
-    getCommonPinningStyles(column) {
-        const isPinned = column.getIsPinned();
-        if (!isPinned) {
-            return {};
-        }
-        const isLastLeftPinnedColumn = isPinned === 'left' && column.getIsLastColumn('left');
-        return {
-            position: isPinned ? 'sticky' : 'relative',
-            left: isPinned === 'left' ? `${column.getStart('left')}px` : undefined,
-            right: isPinned === 'right' ? `0px` : undefined,
-            boxShadow: isLastLeftPinnedColumn && column.columnDef.type !== 'checkbox'
-                ? '-4px 0 4px -4px gray inset'
-                : undefined,
-            zIndex: `${isPinned ? 1 : 'auto'}`,
-            background: isPinned ? 'var(--background-paper, #fff)' : undefined,
-        };
-    }
-    togglePin(header) {
-        if (header.column.getIsPinned()) {
-            header.column.pin(false); // Odpinovanie
-        }
-        else {
-            header.column.pin('left'); // Pripnutie doľava
-        }
-    }
-    // export to excel and csv
-    exportDataToCsv() {
-        const rows = this.getAllRowsIncludingGrouped(this.table.getRowModel().rows); // Získanie všetkých riadkov vrátane skupín
-        if (!rows || rows.length === 0) {
-            console.warn('No data to export');
-            return;
-        }
-        // Generovanie hlavičky CSV zo stĺpcov
-        const vLang = this.userLang || 'cs';
-        const header = this.columns
-            .map((col) => col[`headerName_${vLang}`] || col.headerName || '') // Získanie názvov stĺpcov
-            .join(',');
-        // Generovanie dát pre CSV
-        const csvRows = rows.map((row) => {
-            return this.columns
-                .map((col) => {
-                const accessor = col.field; // Získanie kľúča pre hodnotu
-                if (row.getIsGrouped?.()) {
-                    // Ak je skupinový riadok, pridaj počet záznamov do prvej bunky
-                    if (col.field === row.groupingColumnId) {
-                        return `"${row.getValue(col.field)} (${row.subRows.length})"`;
-                    }
-                    return ''; // Ostatné stĺpce v skupinovom riadku prázdne
-                }
-                const value = row.getValue?.(accessor) || ''; // Získanie hodnoty pre normálny riadok
-                return typeof value === 'string'
-                    ? `"${value.replace(/"/g, '""')}"` // Ošetrenie dvojitých úvodzoviek
-                    : value;
-            })
-                .join(',');
-        });
-        // Pridanie hlavičky na začiatok CSV
-        csvRows.unshift(header);
-        // Vytvorenie CSV súboru
-        const csvContent = csvRows.join('\n');
-        const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
-        // Export do súboru
-        const fileName = prompt(msg('Zadejte název souboru:'), 'data');
-        // Ak používateľ stlačí Cancel, export sa zruší
-        if (!fileName) {
-            return;
-        }
-        // Stiahnutie CSV súboru
-        const url = URL.createObjectURL(blob);
-        const link = document.createElement('a');
-        link.href = url;
-        link.download = `${fileName}.csv`;
-        link.click();
-        URL.revokeObjectURL(url);
-    }
-    async exportDataToExcel() {
-        await this.loadXLSX(); // Ensure XLSX is loaded
-        const XLSX = window.XLSX;
-        const rows = this.getAllRowsIncludingGrouped(this.table.getRowModel().rows); // Získanie všetkých riadkov vrátane skupín
-        if (!rows || rows.length === 0) {
-            console.warn('No data to export');
-            return;
-        }
-        // Príprava dát pre Excel
-        const vLang = this.userLang || 'cs';
-        const data = rows.map((row) => {
-            const formattedRow = {};
-            this.columns.forEach((col) => {
-                const columnName = col[`headerName_${vLang}`] || col.headerName || ''; // Dynamický názov stĺpca
-                const accessor = col.field; // Dynamický kľúč pre hodnoty
-                if (row.getIsGrouped?.()) {
-                    // Skupinový riadok
-                    if (col.field === row.groupingColumnId) {
-                        // Pridanie názvu skupiny a počtu záznamov
-                        formattedRow[columnName] =
-                            `${row.getValue(accessor)} (${row.subRows.length})`;
-                    }
-                    else {
-                        // Ostatné stĺpce prázdne
-                        formattedRow[columnName] = '';
-                    }
-                }
-                else if (accessor) {
-                    // Normálny riadok
-                    formattedRow[columnName] = row.getValue?.(accessor) || '';
-                }
-            });
-            return formattedRow;
-        });
-        // Vytvorenie pracovného listu a zošita
-        const worksheet = XLSX.utils.json_to_sheet(data); // Konverzia dát do Excel formátu
-        // Automatické prispôsobenie šírky stĺpcov
-        const colWidths = this.columns.map((col, colIndex) => {
-            const resolvedHeader = col[`headerName_${vLang}`] || col.headerName || '';
-            const maxContentLength = Math.max(resolvedHeader.length || 10, // Dĺžka názvu stĺpca
-            ...data.map((row) => row[resolvedHeader]?.toString().length || 0));
-            return { wch: maxContentLength + 2 }; // Pridanie extra priestoru
-        });
-        worksheet['!cols'] = colWidths; // Nastavenie šírky stĺpcov
-        const workbook = XLSX.utils.book_new(); // Nový Excel zošit
-        XLSX.utils.book_append_sheet(workbook, worksheet, 'Data'); // Pridanie dát do zošita
-        // Export do súboru
-        const fileName = prompt(msg('Zadejte název souboru:'), 'data');
-        // Ak používateľ stlačí Cancel, export sa zruší
-        if (!fileName) {
-            return;
-        }
-        XLSX.writeFile(workbook, `${fileName}.xlsx`);
-    }
-    getAllRowsIncludingGrouped(rows) {
-        const allRows = [];
-        rows.forEach((row) => {
-            if (row.getIsGrouped?.()) {
-                allRows.push(row);
-                if (row.subRows && row.subRows.length > 0) {
-                    allRows.push(...this.getAllRowsIncludingGrouped(row.subRows));
-                }
-            }
-            else {
-                allRows.push(row);
-            }
-        });
-        return allRows.filter((row, index, self) => index === self.findIndex((r) => r.id === row.id));
-    }
-    startScroll(direction) {
-        const grid = this.tableContainerRef.value;
-        if (!grid)
-            return;
-        const scrollAmount = direction === 'left' ? -15 : 15;
-        const scroll = () => {
-            grid.scrollLeft += scrollAmount;
-            this.updateScrollState();
-            this.scrollInterval = requestAnimationFrame(scroll);
-        };
-        this.scrollInterval = requestAnimationFrame(scroll);
-    }
-    stopScroll() {
-        if (this.scrollInterval) {
-            cancelAnimationFrame(this.scrollInterval);
-            this.scrollInterval = null;
-        }
-    }
-    // centralize your “at end” logic
-    _atScrollEnd(container) {
-        const thresh = this.scrollEndThreshold ?? 100;
-        // if not scrollable OR within threshold of bottom
-        return (container.scrollHeight <= container.clientHeight ||
-            container.scrollTop + container.clientHeight >= container.scrollHeight - thresh);
-    }
-    _maybeTriggerScrollEnd() {
-        if (this._atScrollEnd(this._container)) {
-            if (this.onRowsScrollEnd && !this.isLoading && !this.scrollToEnd) {
-                this.scrollToEnd = true;
-                this.onRowsScrollEnd();
-            }
-        }
-        else {
-            // Reset scrollToEnd flag when not at the end anymore
-            this.scrollToEnd = false;
-        }
-    }
-    handleScroll(_event) {
-        // every scroll, re‑test
-        this._maybeTriggerScrollEnd();
-    }
-    handleGetTotalNumber() {
-        if (this.getTotalNumberFn) {
-            this.getTotalNumberFn();
-        }
-    }
-    toggleCustomPopover() {
-        this.isOpen = !this.isOpen;
-    }
-    closePopover() {
-        this.isOpen = false;
-    }
-    toggleColumn(field) {
-        this.columnVisibility = {
-            ...this.columnVisibility,
-            [field]: !(this.columnVisibility?.[field] ?? true),
-        };
-        this.table.setColumnVisibility(this.columnVisibility);
-    }
-    onSettingsChangedCallback(value) {
-        if (value?.enableSorting !== undefined) {
-            this.enableSorting = value.enableSorting;
-        }
-        if (value?.enableFiltering !== undefined) {
-            this.enableFiltering = value.enableFiltering;
-        }
-        if (value?.columnDefaultSize !== undefined) {
-            this.columnDefaultSize = value.columnDefaultSize;
-        }
-        if (value?.columnGroupedColor !== undefined) {
-            this.columnGroupedColor = value.columnGroupedColor;
-        }
-        if (value?.rowAggregationColor !== undefined) {
-            this.rowAggregationColor = value.rowAggregationColor;
-        }
-        if (value?.enableGrouping !== undefined) {
-            this.enableGrouping = value.enableGrouping;
-        }
-        if (value?.exportData !== undefined) {
-            this.exportData = value.exportData;
-        }
-        if (value?.actionButtonsInMenu !== undefined) {
-            this.actionButtonsInMenu = value.actionButtonsInMenu;
-        }
-        if (value?.hideFooter !== undefined) {
-            this.hideFooter = value.hideFooter;
-        }
-        if (value?.enableColumnPinning !== undefined) {
-            this.enableColumnPinning = value.enableColumnPinning;
-        }
-        if (value?.alwaysFilter !== undefined) {
-            this.alwaysFilter = value.alwaysFilter;
-        }
-        if (value?.alwaysFilterActive !== undefined) {
-            this.alwaysFilterActive = value.alwaysFilterActive;
-        }
-        if (value?.emptyText !== undefined) {
-            this.emptyText = value.emptyText;
-        }
-        this.initTable();
-        this.requestUpdate();
-        if (this.onSettingsChanged) {
-            this.dispatchEvent(new CustomEvent('onSettingsChanged', {
-                bubbles: true,
-                composed: true,
-                detail: value,
-            }));
-            this.onSettingsChanged?.(value);
-        }
-    }
-    _onRowMouseDown(event, row) {
-        this.handleMouseDown(event, row);
-        // do not highlight cell text if multirow selection is enabled and shift key is pressed
-        if (event.shiftKey) {
-            if (event.currentTarget) {
-                event.currentTarget.classList.add('no-select');
-            }
-            // Optionally, clear existing selection:
-            const selection = window.getSelection();
-            if (selection) {
-                selection.removeAllRanges();
-            }
-        }
-    }
-    _onRowMouseUp(event) {
-        event.currentTarget.classList.remove('no-select');
-    }
-    _rowUnselectAll(table) {
-        table.resetRowSelection();
-        this.focusedRowIndex = 0;
-    }
-    render() {
-        const filteredColumns = this.columns?.filter((col) => {
-            const name = (col[`headerName_${this.userLang}`] ||
-                col.headerName ||
-                col.field).toLowerCase();
-            return name.includes(this.filterText);
-        }) || [];
-        // checbox column for multiple selection
-        const checkboxColumn = this.enableMultiRowSelection
-            ? [
-                {
-                    id: 'checkboxForMultiselect',
-                    type: 'checkbox',
-                    minSize: 30,
-                    size: 30,
-                    enablePinning: false,
-                    enableResizing: false,
-                    header: ({ table }) => html `
-                          <div style="position: absolute; left: 0; bottom: 0; margin: 0.65rem 0;">
-                              <lit-checkbox
-                                  type="checkbox"
-                                  .onChange="${() => table.getIsSomeRowsSelected()
-                        ? this._rowUnselectAll(table)
-                        : table.toggleAllRowsSelected()}"
-                                  .checked="${table.getIsAllRowsSelected()}"
-                                  .indeterminate="${table.getIsSomeRowsSelected()}"
-                              ></lit-checkbox>
-                          </div>
-                      `,
-                    cell: ({ table, row }) => html `
-                          <div
-                              style="padding: 0.1875rem 0px 0px 0px"
-                              @click=${(e) => e.stopPropagation()}
-                          >
-                              <lit-checkbox
-                                  type="checkbox"
-                                  .onChange="${(e) => {
-                        e.stopPropagation();
-                        row.toggleSelected(e.target.checked);
-                    }}"
-                                  .checked="${row.getIsSelected()}"
-                                  ?disabled="${!row.getCanSelect()}"
-                                  .indeterminate="${row.getIsSomeSelected()}"
-                              ></lit-checkbox>
-                          </div>
-                      `,
-                },
-            ]
-            : [];
-        this.table = this.tableController.table({
-            data: this.rows || [],
-            columns: [...checkboxColumn, ...this.getTanstackColumns(this.columns || [])],
-            columnResizeMode: 'onChange',
-            columnResizeDirection: 'ltr',
-            defaultColumn: {
-                size: this.columnDefaultSize || undefined, //starting column size
-                minSize: this.columnDefaultMinSize || 100, //enforced during column resizing
-                maxSize: this.columnDefaultMaxSize || 500, //enforced during column resizing
-            },
-            initialState: {
-                // columnFilters: [...(this.initialFiltering || [])],
-                // sorting: [...(this.initialSorting || [])],
-                // expanded: { ...this.initialRowExpanded },
-                columnVisibility: { ...this.initialColumnVisibility },
-            },
-            state: {
-                grouping: this.initialGroups,
-                columnVisibility: this.columnVisibility,
-                // columnFilters: this.server ? this.filtersServer : this.filters,
-                columnFilters: this.initialFiltering,
-                sorting: this.initialSorting,
-                rowSelection: this.rowsSelected,
-                columnSizing: this.columnSizing,
-                expanded: this.initialRowExpanded,
-                columnOrder: this.columnOrder,
-                columnPinning: {
-                    left: [
-                        'checkboxForMultiselect',
-                        ...(this.leftPinnedColumns ?? []).filter((col) => col !== 'checkboxForMultiselect'),
-                    ],
-                    right: [
-                        'actions',
-                        ...(this.rightPinnedColumns ?? []).filter((col) => col !== 'actions'),
-                    ],
-                },
-            },
-            filterFns: {
-                dateRangeFilterFn: dateRangeFilterFn,
-                dateFilterFn: dateFilterFn,
-                multiselectFilterFn: multiselectFilterFn,
-            },
-            // debugTable: true,
-            enableRowSelection: this.enableRowSelection,
-            enableMultiRowSelection: this.enableMultiRowSelection,
-            enableColumnPinning: this.enableColumnPinning,
-            enableGrouping: this.enableGrouping,
-            manualFiltering: this.server,
-            manualSorting: this.server,
-            enableSorting: this.enableSorting,
-            getRowId: (row, index) => {
-                if (this.getRowId) {
-                    return this.getRowId(row, index);
-                }
-                return index.toString();
-            },
-            // groupedColumnMode: 'reorder',
-            getCoreRowModel: getCoreRowModel(),
-            getSortedRowModel: getSortedRowModel(),
-            getFilteredRowModel: getFilteredRowModel(),
-            getFacetedRowModel: getFacetedRowModel(),
-            getGroupedRowModel: getGroupedRowModel(),
-            getExpandedRowModel: getExpandedRowModel(),
-            getFacetedUniqueValues: getFacetedUniqueValues(),
-            onColumnFiltersChange: (updaterOrValue) => {
-                // Preserve expanded state before filtering
-                const currentExpandedState = this.table.getState().expanded;
-                this.currentScrollTop = 0;
-                const scrollElement = this.tableContainerRef.value;
-                if (scrollElement) {
-                    scrollElement.scrollTop = 0;
-                }
-                const filtersState = typeof updaterOrValue === 'function'
-                    ? updaterOrValue(this.table.getState().columnFilters)
-                    : updaterOrValue;
-                this.initialFiltering = filtersState;
-                // Restore expanded state after filtering
-                if (currentExpandedState && Object.keys(currentExpandedState).length > 0) {
-                    setTimeout(() => {
-                        this.table.setExpanded(currentExpandedState);
-                    }, 0);
-                }
-                if (this.onColumnFiltersChanged) {
-                    this.onColumnFiltersChanged(this.table, filtersState);
-                }
-            },
-            onSortingChange: (updaterOrValue) => {
-                this.currentScrollTop = 0;
-                const scrollElement = this.tableContainerRef.value;
-                if (scrollElement) {
-                    scrollElement.scrollTop = 0;
-                }
-                const sortingState = typeof updaterOrValue === 'function'
-                    ? updaterOrValue(this.table.getState().sorting)
-                    : updaterOrValue;
-                this.initialSorting = sortingState;
-                if (this.onColumnSortChanged) {
-                    this.onColumnSortChanged(this.table, sortingState);
-                }
-            },
-            onRowSelectionChange: (updaterOrValue) => {
-                const rowSelection = typeof updaterOrValue === 'function'
-                    ? updaterOrValue(this.rowsSelected)
-                    : updaterOrValue;
-                this.rowsSelected = rowSelection;
-                if (this.onRowSelectionChanged) {
-                    this.onRowSelectionChanged(this.table, rowSelection);
-                }
-            },
-            onColumnSizingChange: (updaterOrValue) => {
-                const columnSizingState = typeof updaterOrValue === 'function'
-                    ? updaterOrValue(this.table.getState().columnSizing)
-                    : updaterOrValue;
-                this.columnSizing = columnSizingState;
-                if (this.onColumnResize) {
-                    this.onColumnResize(this.table, columnSizingState);
-                }
-            },
-            onExpandedChange: (updaterOrValue) => {
-                const rowExpanded = typeof updaterOrValue === 'function'
-                    ? updaterOrValue(this.table.getState().expanded)
-                    : updaterOrValue;
-                this.initialRowExpanded = rowExpanded;
-                if (this.onRowExpanded) {
-                    this.onRowExpanded(this.table, this.initialRowExpanded);
-                }
-            },
-            onColumnOrderChange: (updaterOrValue) => {
-                const newOrder = typeof updaterOrValue === 'function'
-                    ? updaterOrValue(this.columnOrder)
-                    : updaterOrValue;
-                this.columnOrder = newOrder;
-                this.render();
-                if (this.onColumnOrderChanged) {
-                    this.onColumnOrderChanged(this.table, newOrder);
-                }
-            },
-            onColumnVisibilityChange: (updaterOrValue) => {
-                const columnVisibility = typeof updaterOrValue === 'function'
-                    ? updaterOrValue(this.table.getState().columnVisibility)
-                    : updaterOrValue;
-                this.columnVisibility = columnVisibility;
-                if (this.onColumnVisibilityChanged) {
-                    this.onColumnVisibilityChanged(this.table, columnVisibility);
-                }
-            },
-            onColumnPinningChange: (updaterOrValue) => {
-                const columnPinning = typeof updaterOrValue === 'function'
-                    ? updaterOrValue(this.table.getState().columnPinning)
-                    : updaterOrValue;
-                this.leftPinnedColumns = columnPinning.left || [];
-                if (this.onColumnPinningChanged) {
-                    this.onColumnPinningChanged(this.table, columnPinning);
-                }
-            },
-            onGroupingChange: (updaterOrValue) => {
-                // Preserve expanded state before grouping
-                const currentExpandedState = this.table.getState().expanded;
-                const groupingState = typeof updaterOrValue === 'function'
-                    ? updaterOrValue(this.table.getState().grouping)
-                    : updaterOrValue;
-                this.initialGroups = groupingState;
-                // Restore expanded state after grouping
-                if (currentExpandedState && Object.keys(currentExpandedState).length > 0) {
-                    setTimeout(() => {
-                        this.table.setExpanded(currentExpandedState);
-                    }, 0);
-                }
-                if (this.onGroupingChanged) {
-                    this.onGroupingChanged(this.table, groupingState);
-                }
-            },
-        });
-        const rowModel = this.table.getRowModel();
-        const { rows } = rowModel;
-        const rowsLength = rows.length;
-        // Update virtualizer and trigger scroll-end check when row count changes
-        // Done here instead of via @state to avoid scheduling updates during render
-        if (this._prevRowsCount !== rowsLength) {
-            this._prevRowsCount = rowsLength;
-            this.scrollToEnd = false;
-            if (this.enableRowVirtualization) {
-                const virtualizer = this.rowVirtualizerController?.getVirtualizer();
-                if (virtualizer) {
-                    virtualizer.setOptions({
-                        ...virtualizer.options,
-                        count: rowsLength,
-                    });
-                }
-            }
-            setTimeout(() => this._maybeTriggerScrollEnd(), 100);
-        }
-        // Pre-calculate row height to avoid repeated function calls
-        const cachedRowHeight = this.getRowHeight();
-        // Cache expensive calls to avoid recalculation on every render
-        const rowVirtualizer = this.enableRowVirtualization
-            ? this.rowVirtualizerController?.getVirtualizer()
-            : null;
-        const columnVirtualizer = this.enableColumnVirtualization
-            ? this.columnVirtualizerController?.getVirtualizer()
-            : null;
-        const virtualColumns = columnVirtualizer?.getVirtualItems() ?? [];
-        const rowItems = rowVirtualizer
-            ? rowVirtualizer.getVirtualItems()
-            : rows.length > 0
-                ? rows.map((_, index) => ({
-                    key: index,
-                    index,
-                    start: index * cachedRowHeight,
-                    end: (index + 1) * cachedRowHeight,
-                    size: cachedRowHeight,
-                    lane: 0,
-                }))
-                : [];
-        // Calculate padding for virtualization
-        let virtualPaddingLeft;
-        let virtualPaddingRight;
-        if (columnVirtualizer && virtualColumns?.length && this.enableColumnVirtualization) {
-            virtualPaddingLeft = virtualColumns[0]?.start ?? 0;
-            virtualPaddingRight =
-                columnVirtualizer.getTotalSize() -
-                    (virtualColumns[virtualColumns.length - 1]?.end ?? 0);
-        }
-        // Cache common styles that don't change per row
-        const commonRowStyles = {
-            height: `${cachedRowHeight}px`,
-            lineHeight: `${cachedRowHeight}px`,
-        };
-        // Create caches for expensive style calculations
-        const pinningStylesCache = new Map();
-        const backgroundColorCache = new Map();
-        // Helper to get cached pinning styles
-        const getCachedPinningStyles = (column) => {
-            const cacheKey = `${column.id}-${column.getIsPinned()}-${column.getStart?.('left') || 0}`;
-            if (!pinningStylesCache.has(cacheKey)) {
-                pinningStylesCache.set(cacheKey, this.getCommonPinningStyles(column));
-            }
-            return pinningStylesCache.get(cacheKey);
-        };
-        // Helper to get cached background colors
-        const getCachedBackgroundColor = (cell) => {
-            const cacheKey = `${cell.id}-${cell.getIsGrouped()}-${cell.getIsAggregated()}-${cell.getIsPlaceholder()}-${cell.column.getIsPinned()}`;
-            if (!backgroundColorCache.has(cacheKey)) {
-                backgroundColorCache.set(cacheKey, this.getCellBackgroundColor(cell));
-            }
-            return backgroundColorCache.get(cacheKey);
-        };
-        let isMobile = window.matchMedia('(max-width: 600px)').matches;
-        return html `
-            <div
-                class="data-grid__wrapper"
-                style="min-height: ${rowsLength < 1 ? '14.375rem' : ''}"
-            >
-                ${this.isScrollable && !isMobile
-            ? html `
-                          <lit-icon-button
-                              class="scroll-button left"
-                              .disabled="${this.disableScrollLeft}"
-                              @pointerdown="${() => this.startScroll('left')}"
-                              @pointerup="${this.stopScroll}"
-                              @pointerleave="${this.stopScroll}"
-                              size="small"
-                              variant="contained"
-                              icon="arrowLeft"
-                          >
-                          </lit-icon-button>
-                          <lit-icon-button
-                              class="scroll-button right"
-                              .disabled="${this.disableScrollRight}"
-                              @pointerdown="${() => this.startScroll('right')}"
-                              @pointerup="${this.stopScroll}"
-                              @pointerleave="${this.stopScroll}"
-                              size="small"
-                              variant="contained"
-                              icon="arrowRight"
-                          >
-                          </lit-icon-button>
-                      `
-            : null}
-
-                <div class="grid" ${ref(this.tableContainerRef)}>
-                    <table
-                        part="dataGrid-table"
-                        style="width: ${this.table.getCenterTotalSize()}px"
-                    >
-                        <thead
-                            part="dataGrid-header"
-                            style="height: ${this.enableFiltering ? '4rem' : '1.625rem'};"
-                        >
-                            ${repeat(this.table.getHeaderGroups(), (headerGroup) => headerGroup.id, (headerGroup) => {
-            const headerColumns = this.enableColumnVirtualization
-                ? virtualColumns.map((vc) => headerGroup.headers[vc.index])
-                : headerGroup.headers;
-            const newHeaderColumns = this.enableColumnVirtualization
-                ? [
-                    ...headerGroup.headers.filter((hc) => hc.column.getIsPinned()),
-                    ...headerColumns.filter((hc) => !hc.column.getIsPinned()),
-                ]
-                : headerColumns;
-            return html `
-                                        <tr class="head" data-index="${headerGroup.id}">
-                                            ${virtualPaddingLeft
-                ? html `
-                                                      <th
-                                                          style=" display: flex; width: ${virtualPaddingLeft}px;"
-                                                      ></th>
-                                                  `
-                : ''}
-                                            ${repeat(newHeaderColumns, (header) => header.id, (header, index) => {
-                const column = header.column;
-                const style = {
-                    visibility: column.columnDef.type === 'actions'
-                        ? 'hidden'
-                        : 'visible',
-                    ...getCachedPinningStyles(header.column),
-                    width: `${column?.getSize()}px`,
-                    flexGrow: `${column.columnDef.size === undefined ? 1 : 'unset'}`,
-                };
-                const filterVariant = column.columnDef.meta?.filterVariant;
-                const filterOperators = column?.columnDef?.meta?.filterOperators ||
-                    getOperatorsByColumnType(filterVariant);
-                const value = column?.getFilterValue()?.value ||
-                    column?.getFilterValue() ||
-                    '';
-                const operator = column?.getFilterValue()?.operator ||
-                    filterOperators[0]?.value;
-                let valueOptions = [];
-                if (filterVariant === 'select' ||
-                    filterVariant === 'multiselect') {
-                    if (column?.columnDef?.meta.valueOptions ||
-                        this.server) {
-                        valueOptions =
-                            column?.columnDef?.meta
-                                .valueOptions || [];
-                    }
-                    else {
-                        const sortedUniqueValues = Array.from(column
-                            ?.getFacetedUniqueValues()
-                            .keys())
-                            .sort()
-                            .slice(0, 5000);
-                        valueOptions = sortedUniqueValues.map((value) => ({
-                            value,
-                            label: value,
-                        }));
-                    }
-                }
-                return html `
-                                                        <th
-                                                            class="head"
-                                                            style="${styleMap(style)}"
-                                                            colspan="${header.colSpan}"
-                                                            data-index="${header.id}"
-                                                        >
-                                                            ${header.isPlaceholder
-                    ? ''
-                    : html `
-                                                                      <div
-                                                                          class="resizer ${this
-                        .table.options
-                        .columnResizeDirection} ${header.column.getIsResizing()
-                        ? 'is-resizing'
-                        : ''}"
-                                                                          style="transform:  ${this
-                        .table.options
-                        .columnResizeMode ===
-                        'onEnd' &&
-                        header.column.getIsResizing()
-                        ? `translateX(${(this.table
-                            .options
-                            .columnResizeDirection ===
-                            'rtl'
-                            ? -1
-                            : 1) *
-                            (this.table.getState()
-                                .columnSizingInfo
-                                .deltaOffset ??
-                                0)}px)`
-                        : ''}"
-                                                                      >
-                                                                          <div class="header">
-                                                                              ${header.column.getIsFiltered()
-                        ? html `
-                                                                                        <div
-                                                                                            class="filterCirclePoint"
-                                                                                        ></div>
-                                                                                    `
-                        : ''}
-                                                                              <div
-                                                                                  class="column-header"
-                                                                                  @click=${header.column.getToggleSortingHandler()}
-                                                                              >
-                                                                                  <lit-overflow-tooltip
-                                                                                      label="${header
-                        .column
-                        .columnDef
-                        .header}"
-                                                                                  >
-                                                                                      ${flexRender(header
-                        .column
-                        .columnDef
-                        .header, header.getContext())}
-                                                                                  </lit-overflow-tooltip>
-                                                                              </div>
-
-                                                                              <div
-                                                                                  class="icons-group-pin"
-                                                                              >
-                                                                                  ${header.column.getCanSort()
-                        ? header.column.getIsSorted()
-                            ? header.column.getIsSorted() ===
-                                'asc'
-                                ? html `<slot
-                                                                                                    name="iconSortUp"
-                                                                                                    ><lit-icon
-                                                                                                        class="cursor"
-                                                                                                        @click=${header.column.getToggleSortingHandler()}
-                                                                                                        size="0.75rem"
-                                                                                                        icon="chevronUpFilled"
-                                                                                                    ></lit-icon
-                                                                                                ></slot>`
-                                : html `<slot
-                                                                                                    name="iconSortDown"
-                                                                                                >
-                                                                                                    <lit-icon
-                                                                                                        class="cursor"
-                                                                                                        @click=${header.column.getToggleSortingHandler()}
-                                                                                                        size="0.75rem"
-                                                                                                        icon="chevronDownFilled"
-                                                                                                    ></lit-icon>
-                                                                                                </slot>`
-                            : html `<div
-                                                                                                class="sortFilled"
-                                                                                            >
-                                                                                                <lit-icon
-                                                                                                    class="cursor"
-                                                                                                    @click=${header.column.getToggleSortingHandler()}
-                                                                                                    size="0.75rem"
-                                                                                                    icon="sortFilled"
-                                                                                                ></lit-icon>
-                                                                                            </div>`
-                        : html `<div></div>`}
-                                                                                  <div class="flex">
-                                                                                      ${!this
-                        .actionButtonsInMenu
-                        ? html `
-                                                                                                ${header.column.getCanPin()
-                            ? html `
-                                                                                                          <lit-icon-button
-                                                                                                              @click="${() => this.togglePin(header)}"
-                                                                                                              size="small"
-                                                                                                              variant="text"
-                                                                                                              color="secondary"
-                                                                                                              icon="pin"
-                                                                                                              .active="${header.column.getIsPinned()}"
-                                                                                                              ${tooltip(header.column.getIsPinned()
-                                ? msg('Zrušit připnutí sloupce')
-                                : msg('Připnout sloupec vlevo'), 'bottom')}
-                                                                                                          >
-                                                                                                          </lit-icon-button>
-                                                                                                      `
-                            : ''}
-                                                                                                ${header.column.getCanGroup()
-                            ? html `
-                                                                                                          <lit-icon-button
-                                                                                                              @click="${header.column.getToggleGroupingHandler()}"
-                                                                                                              size="small"
-                                                                                                              variant="text"
-                                                                                                              color="secondary"
-                                                                                                              .active="${header.column.getIsGrouped()}"
-                                                                                                              icon="agregation"
-                                                                                                              ${tooltip(header.column.getIsGrouped()
-                                ? msg('Zrušit seskupení')
-                                : msg('Seskupit sloupec'), 'bottom')}
-                                                                                                          >
-                                                                                                          </lit-icon-button>
-                                                                                                      `
-                            : ''}
-                                                                                            `
-                        : html `
-                                                                                                <lit-data-grid-action-buttons-popover
-                                                                                                    .group="${header.column.getToggleGroupingHandler()}"
-                                                                                                    .pin="${() => this.togglePin(header)}"
-                                                                                                    .header="${header}"
-                                                                                                    .table="${this
-                            .table}"
-                                                                                                ></lit-data-grid-action-buttons-popover>
-                                                                                            `}
-                                                                                      ${this
-                        .enableColumnOrdering &&
-                        !header.column.getIsPinned() &&
-                        !header.column.getIsGrouped() &&
-                        ![
-                            'checkbox',
-                            'actions',
-                        ].includes(header
-                            .column
-                            .id)
-                        ? html `<div
-                                                                                                    class="drag-handle"
-                                                                                                >
-                                                                                                    <lit-icon
-                                                                                                        icon="hamburger"
-                                                                                                        size="1rem"
-                                                                                                    ></lit-icon>
-                                                                                                </div>
-                                                                                                <simple-tooltip
-                                                                                                    placement="bottom"
-                                                                                                    >${msg('Přesunout sloupec')}</simple-tooltip
-                                                                                                > `
-                        : null}
-                                                                                  </div>
-                                                                              </div>
-                                                                          </div>
-                                                                      </div>
-                                                                      ${header.column.getCanFilter()
-                        ? html `
-                                                                                <div>
-                                                                                    <filter-inputs
-                                                                                        .minFilterCharacters=${this
-                            .minFilterCharacters}
-                                                                                        .column=${header.column}
-                                                                                        .dateFormat=${this
-                            .dateFormat}
-                                                                                        .userLang=${this
-                            .userLang}
-                                                                                        @filter-tab=${this
-                            .handleFilterTabNavigation}
-                                                                                        .server=${this
-                            .server}
-                                                                                        .value="${value}"
-                                                                                        .operator="${operator}"
-                                                                                        .filterVariant="${filterVariant}"
-                                                                                        .filterOperators="${filterOperators}"
-                                                                                    ></filter-inputs>
-                                                                                </div>
-                                                                            `
-                        : null}
-                                                                  `}
-                                                            <div
-                                                                class="resize-handle"
-                                                                @dblclick="${(event) => {
-                    if (event.target.classList.contains('resize-handle')) {
-                        header.column.resetSize();
-                    }
-                }}"
-                                                                @mousedown="${(event) => {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    if (event.target.classList.contains('resize-handle')) {
-                        header.getResizeHandler()(event);
-                    }
-                }}"
-                                                                @touchstart="${(event) => {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    if (event.target.classList.contains('resize-handle')) {
-                        header.getResizeHandler()(event);
-                    }
-                }}"
-                                                            ></div>
-                                                        </th>
-                                                    `;
-            })}
-                                            ${virtualPaddingRight
-                ? html `
-                                                      <th
-                                                          style=" display: flex; width: ${virtualPaddingRight}px;"
-                                                      ></th>
-                                                  `
-                : ''}
-                                        </tr>
-                                    `;
-        })}
-                            ${this.isLoading
-            ? html `
-                                      <div style="position: absolute; bottom: 0px; width: 100%;">
-                                          <lit-loading-bar></lit-loading-bar>
-                                      </div>
-                                  `
-            : ''}
-                        </thead>
-
-                        <tbody
-                            @keydown=${this.handleKeyDown}
-                            tabindex="0"
-                            part="dataGrid-body"
-                            style="height: ${rowVirtualizer && rows.length > 0
-            ? rowVirtualizer.getTotalSize() + 'px'
-            : rows.length < 1
-                ? '8.125rem'
-                : 'auto'};"
-                        >
-                            ${rows.length > 0
-            ? repeat(rowItems, (item) => item.key, (item) => {
-                const row = rows[item.index];
-                if (!row)
-                    return null;
-                const visibleCells = row.getVisibleCells();
-                if (!visibleCells)
-                    return null;
-                // Optimize column calculations
-                let newBodyColumns;
-                if (this.enableColumnVirtualization) {
-                    const pinnedColumns = visibleCells.filter((cell) => cell.column.getIsPinned());
-                    const virtualBodyColumns = virtualColumns
-                        .map((vc) => visibleCells[vc.index])
-                        .filter(Boolean);
-                    // Use Set for deduplication only when necessary
-                    const combinedColumns = [
-                        ...pinnedColumns,
-                        ...virtualBodyColumns,
-                    ];
-                    newBodyColumns =
-                        pinnedColumns.length > 0
-                            ? [...new Set(combinedColumns)]
-                            : virtualBodyColumns;
-                }
-                else {
-                    newBodyColumns = visibleCells;
-                }
-                // Optimize row styles
-                const rowStyle = {
-                    ...commonRowStyles,
-                    transform: rowVirtualizer
-                        ? `translateY(${item.start}px)`
-                        : 'none',
-                    position: rowVirtualizer ? 'absolute' : 'relative',
-                };
-                return row
-                    ? html `
-                                                    <tr
-                                                        tabindex=${this.enableRowSelection
-                        ? '0'
-                        : undefined}
-                                                        data-row-index="${row.index}"
-                                                        class="${this.rowsSelected[row.id]
-                        ? 'selected body'
-                        : 'body'}"
-                                                        data-index="${item.index}"
-                                                        @click="${row.getIsGrouped()
-                        ? row.getToggleExpandedHandler()
-                        : (e) => this.handleRowClick(e, row)}"
-                                                        @mousedown=${(e) => this._onRowMouseDown(e, row)}
-                                                        @mouseup=${this._onRowMouseUp}
-                                                        @mouseleave=${this._onRowMouseUp}
-                                                        @contextmenu=${(e) => e.preventDefault()}
-                                                        @dblclick="${() => this.handleRowDoubleClick(row)}"
-                                                        @touchend="${() => this.handleRowDoubleClick(row)}"
-                                                        style="${styleMap(rowStyle)}"
-                                                        ${ref(() => {
-                        // No measurement needed - using fixed row heights
-                    })}
-                                                    >
-                                                        ${virtualPaddingLeft
-                        ? html `
-                                                                  <th
-                                                                      style=" display: flex; width: ${virtualPaddingLeft}px;"
-                                                                  ></th>
-                                                              `
-                        : ''}
-                                                        <!-- Cells for each row -->
-                                                        ${repeat(newBodyColumns, (cell) => cell.key, (cell) => {
-                        const { column } = cell;
-                        const style = {
-                            ...getCachedPinningStyles(cell.column),
-                            width: `${cell.column?.getSize()}px`,
-                            flexGrow: `${column.columnDef.size === undefined ? 1 : 'unset'}`,
-                            background: getCachedBackgroundColor(cell),
-                            lineHeight: `${cachedRowHeight}px`,
-                            padding: column.columnDef.type ===
-                                'actions' ||
-                                column.columnDef.type ===
-                                    'checkbox' ||
-                                column.columnDef.type ===
-                                    'thumbnail'
-                                ? '0'
-                                : '0px 14px',
-                            overflow: column.columnDef.type ===
-                                'thumbnail'
-                                ? 'visible'
-                                : undefined,
-                            justifyContent: column.columnDef.type ===
-                                'thumbnail'
-                                ? 'center'
-                                : undefined,
-                        };
-                        return html `
-                                                                    <td style="${styleMap(style)}">
-                                                                        ${cell.getIsGrouped()
-                            ? html `<div
-                                                                                  class="grouped-column"
-                                                                              >
-                                                                                  <lit-icon
-                                                                                      class="grouped-column--icon-button"
-                                                                                      size="1.25rem"
-                                                                                      icon="${row.getIsExpanded()
-                                ? 'chevronDownFilled'
-                                : 'chevron'}"
-                                                                                  ></lit-icon>
-                                                                                  <div
-                                                                                      class="grouped-column--label"
-                                                                                  >
-                                                                                      <lit-overflow-tooltip
-                                                                                          label=${this.table.getColumn(cell
-                                .column
-                                .id)
-                                ?.columnDef
-                                .cell
-                                ? flexRender(this.table.getColumn(cell
-                                    .column
-                                    .id)
-                                    .columnDef
-                                    .cell, cell.getContext())
-                                : cell.getValue()}
-                                                                                      >
-                                                                                          ${this.table.getColumn(cell
-                                .column
-                                .id)
-                                ?.columnDef
-                                .cell
-                                ? flexRender(this.table.getColumn(cell
-                                    .column
-                                    .id)
-                                    .columnDef
-                                    .cell, cell.getContext())
-                                : cell.getValue()}
-                                                                                      </lit-overflow-tooltip>
-                                                                                  </div>
-                                                                                  <lit-pill
-                                                                                      class="grouped-column--pill"
-                                                                                      style="margin-left: 0.5rem"
-                                                                                      count="${row
-                                .subRows
-                                .length}"
-                                                                                  ></lit-pill>
-                                                                              </div>`
-                            : cell.getIsAggregated()
-                                ? html `
-                                                                                    <div
-                                                                                        style="flex-grow:1"
-                                                                                    >
-                                                                                        ${flexRender(cell
-                                    .column
-                                    .columnDef
-                                    .aggregatedCell ??
-                                    cell
-                                        .column
-                                        .columnDef
-                                        .cell, cell.getContext())}
-                                                                                    </div>
-                                                                                `
-                                : cell.getIsPlaceholder()
-                                    ? null
-                                    : column.columnDef.type === 'thumbnail'
-                                        ? flexRender(cell
-                                            .column
-                                            .columnDef
-                                            .cell, cell.getContext())
-                                        : html `<lit-overflow-tooltip
-                                                                                      placement="right"
-                                                                                      label=${flexRender(cell
-                                            .column
-                                            .columnDef
-                                            .cell, cell.getContext())}
-                                                                                  >
-                                                                                      ${flexRender(cell
-                                            .column
-                                            .columnDef
-                                            .cell, cell.getContext())}
-                                                                                  </lit-overflow-tooltip>`}
-                                                                    </td>
-                                                                `;
-                    })}
-                                                        ${virtualPaddingRight
-                        ? html `
-                                                                  <th
-                                                                      style=" display: flex; width: ${virtualPaddingRight}px;"
-                                                                  ></th>
-                                                              `
-                        : ''}
-                                                    </tr>
-                                                `
-                    : null;
-            })
-            : null}
-                        </tbody>
-                    </table>
-                </div>
-                ${!this.hideFooter || this.exportData || this.enableSettings
-            ? html `
-                          <slot
-                              part="dataGrid-footer"
-                              name="dataGridFooter"
-                              class="footer-container"
-                          >
-                              ${!this.hideFooter
-                ? html ` <div class="numberCount">
-                                        ${msg('Počet záznamů')}: ${rows.length}
-                                        <pre>/</pre>
-                                        ${this.server
-                    ? this.totalNumberRows
-                        ? this.totalNumberRows
-                        : '?'
-                    : rows.length}
-                                        ${this.server
-                    ? html `<lit-icon-button
-                                                  icon="reload"
-                                                  size="mini"
-                                                  variant="text"
-                                                  color="secondary"
-                                                  @click="${() => this.handleGetTotalNumber()}"
-                                                  style="margin-left: 0.2rem; margin-top: -0.1rem"
-                                              ></lit-icon-button>`
-                    : ''}
-                                    </div>`
-                : ''}
-                              <div class="right-actions">
-                                  ${!this.hideFooter
-                ? html `
-                                            <lit-data-grid-density-popover
-                                                .density="${this.rowDensity}"
-                                                .setDensity="${(density) => this.handleSetDensity(density)}"
-                                            >
-                                            </lit-data-grid-density-popover>
-                                            <lit-responsive-button
-                                                size="medium"
-                                                variant="text"
-                                                color="secondary"
-                                                label=${msg('Přizpůsobit sloupce')}
-                                                icon="columns"
-                                                @click=${() => this.table.resetColumnSizing()}
-                                            ></lit-responsive-button>
-                                        `
-                : ''}
-                                  ${this.exportData
-                ? html `
-                                            <lit-data-grid-export-popover
-                                                .exportToCsv="${typeof this.exportExcelFn ===
-                    'function'
-                    ? () => this.exportCsvFn && this.exportCsvFn()
-                    : () => this.exportDataToCsv()}"
-                                                .exportToExcel="${typeof this.exportExcelFn ===
-                    'function'
-                    ? () => this.exportExcelFn &&
-                        this.exportExcelFn()
-                    : () => this.exportDataToExcel()}"
-                                                .disabledButtons="${this.isLoading}"
-                                            >
-                                            </lit-data-grid-export-popover>
-                                        `
-                : null}
-                                  ${this.enableSettings
-                ? html `
-                                            <div>
-                                                <lit-responsive-button
-                                                    color="secondary"
-                                                    variant="dashed"
-                                                    label="${msg('Přiřadit sloupec')}"
-                                                    icon="add"
-                                                    style="display: inline-block"
-                                                    @click="${this.toggleCustomPopover}"
-                                                ></lit-responsive-button>
-
-                                                <simple-popper
-                                                    .showing=${this.isOpen}
-                                                    .placement=${'top-end'}
-                                                    .manualOpening=${true}
-                                                    .maxWidthAsTarget=${false}
-                                                    .onClose=${() => this.closePopover()}
-                                                >
-                                                    <div
-                                                        class="popper-input"
-                                                        style="position: sticky; top: 0; z-index: 1;"
-                                                    >
-                                                        <lit-input
-                                                            .value=${this.filterText}
-                                                            .onInput=${(value) => {
-                    this.filterText =
-                        value?.toLowerCase?.() ||
-                            '';
-                }}
-                                                            .onClear=${() => {
-                    this.filterText = '';
-                }}
-                                                            placeholder="${msg('Zadejte název sloupce')}"
-                                                        ></lit-input>
-                                                    </div>
-                                                    <lit-menu tabindex="0">
-                                                        ${this.columns
-                    .filter((col) => {
-                    const name = col?.headerName?.toLowerCase() ||
-                        col?.field.toLowerCase();
-                    return name.includes(this.filterText);
-                })
-                    .sort((a, b) => {
-                    const aUnderscore = a.field.startsWith('_');
-                    const bUnderscore = b.field.startsWith('_');
-                    if (aUnderscore && !bUnderscore)
-                        return 1;
-                    if (!aUnderscore && bUnderscore)
-                        return -1;
-                    return (a.headerName || a.field).localeCompare(b.headerName || b.field);
-                })
-                    .map((col) => html `
-                                                                    <lit-menu-item
-                                                                        .onClick=${() => this.toggleColumn(col?.field)}
-                                                                        .isActive=${!(this
-                    .columnVisibility?.[col?.field] === false)}
-                                                                    >
-                                                                        <span
-                                                                            class="menu-item--multiple"
-                                                                        >
-                                                                            <lit-checkbox
-                                                                                class="cursor"
-                                                                                .checked=${!(this
-                    .columnVisibility?.[col
-                    ?.field] === false)}
-                                                                            ></lit-checkbox>
-                                                                            ${col?.headerName ||
-                    col?.field}
-                                                                        </span>
-                                                                    </lit-menu-item>
-                                                                `)}
-                                                    </lit-menu>
-
-                                                    ${isEqual(filteredColumns.length, 0)
-                    ? html `
-                                                              <div
-                                                                  style="display: flex; flex-direction: column; align-items: center; padding: 1rem;"
-                                                              >
-                                                                  <div
-                                                                      style="max-height: 6rem; max-width: 6rem;"
-                                                                  >
-                                                                      <not-found></not-found>
-                                                                  </div>
-                                                                  <div>
-                                                                      ${msg('Nenalezeno')}
-                                                                  </div>
-                                                              </div>
-                                                          `
-                    : null}
-                                                </simple-popper>
-
-                                                <lit-icon-button
-                                                    icon="administration"
-                                                    @click="${this.toggleModal}"
-                                                    variant="dashed"
-                                                    color="secondary"
-                                                    style="display: inline-block"
-                                                ></lit-icon-button>
-                                                <data-grid-settings
-                                                    .onClose="${() => {
-                    this.isOpenModal = false;
-                }}"
-                                                    .isOpenModal="${this.isOpenModal}"
-                                                    .enableFiltering="${this.enableFiltering}"
-                                                    .enableSorting="${this.enableSorting}"
-                                                    .columnDefaultSize="${this
-                    .columnDefaultSize}"
-                                                    .columnGroupedColor="${this
-                    .columnGroupedColor}"
-                                                    .rowAggregationColor="${this
-                    .rowAggregationColor}"
-                                                    .enableGrouping="${this.enableGrouping}"
-                                                    .enableColumnPinning="${this
-                    .enableColumnPinning}"
-                                                    .exportData="${this.exportData}"
-                                                    .actionButtonsInMenu="${this
-                    .actionButtonsInMenu}"
-                                                    .hideFooter="${this.hideFooter}"
-                                                    .alwaysFilter="${this.alwaysFilter}"
-                                                    .alwaysFilterActive="${this
-                    .alwaysFilterActive}"
-                                                    .enableSettingsAlwaysFilter="${this
-                    .enableSettingsAlwaysFilter}"
-                                                    .columns="${this.allColumns ||
-                    this.columns}"
-                                                    .variables="${this.variables}"
-                                                    .userLang="${this.userLang}"
-                                                    .allowedLang="${this.allowedLang}"
-                                                    .emptyText="${this.emptyText}"
-                                                    .onSettingsChangedModal="${this.onSettingsChangedCallback.bind(this)}"
-                                                ></data-grid-settings>
-                                            </div>
-                                        `
-                : null}
-                              </div>
-                          </slot>
-                      `
-            : ''}
-                ${rows.length < 1 && !this.isLoading
-            ? html ` <div class="data-grid__empty">
-                          <slot name="empty">
-                              <div style="max-height: 7.125rem; max-width: 7.125rem">
-                                  <not-found></not-found>
-                              </div>
-                              <div class="data-grid__empty-text">
-                                  ${this.emptyText
-                ? this.emptyText?.[this.userLang || ''] || this.emptyText?.default || msg('Nic tady není')
-                : msg('Nic tady není')}
-                              </div>
-                          </slot>
-                      </div>`
-            : null}
-            </div>
-        `;
-    }
-}
-LitDataGridTanstack.styles = [
-    // styles,
-    css `
-            *,
-            *::before,
-            *::after {
-                margin: 0;
-                padding: 0;
-                box-sizing: border-box;
-            }
-
-            :host {
-                display: block;
-                height: 100%;
-                overflow: hidden;
-            }
-
-            font-family: 'Inter', sans-serif;
-            box-sizing: border-box;
-
-            td {
-                padding: 0px;
-            }
-            .data-grid__wrapper {
-                position: relative;
-                background-color: var(--background-paper, #fff);
-                height: 100%;
-                z-index: 1;
-                display: flex;
-                flex-direction: column;
-            }
-
-            .grid {
-                overflow: auto;
-                position: relative;
-                flex: 1;
-                min-height: 0;
-            }
-
-            .data-grid__empty {
-                position: absolute;
-                top: 50%;
-                left: 50%;
-                transform: translate(-50%, -50%);
-                font-size: 0.875rem;
-                text-align: center;
-            }
-
-            table {
-                border-collapse: collapse;
-                border-spacing: 0;
-                width: 99% !important;
-            }
-
-            thead {
-                display: flex;
-                position: sticky;
-                top: 0;
-                z-index: 10;
-                background-color: var(--background-paper, #fff);
-                border-bottom: 1px solid var(--color-divider, #d0d3db);
-            }
-
-            tr.head {
-                display: flex;
-                width: 100%;
-            }
-
-            th.head {
-                display: block;
-                position: relative;
-                padding: 0 6px;
-                gap: 0.25rem;
-                //z-index: auto !important;
-            }
-
-            tbody {
-                display: grid;
-                position: relative;
-                outline: none;
-            }
-
-            tr.body {
-                width: 100%;
-                border-bottom: 1px solid var(--color-divider, #d0d3db);
-                display: flex;
-                overflow: visible;
-            }
-            tr:focus {
-                background-color: var(--color-primary-light, #f0fadf);
-                outline: none;
-            }
-            // tr.selected:focus {
-            //     background-color: var(--color-primary-main, #f0fadf);
-            //     outline: none;
-            // }
-
-            tr.body:hover:not(.selected):not(:focus) {
-                cursor: pointer;
-                background-color: var(--background-default, #eff3f4);
-            }
-
-            td {
-                display: table-cell;
-                white-space: nowrap;
-                overflow: hidden;
-                padding: 0px 14px;
-                font-weight: 500;
-                font-size: 12px;
-                color: var(--text-primary, #111827);
-                display: flex;
-                align-items: center;
-            }
-
-            .column-header {
-                font-size: 11px;
-                font-weight: 600;
-                color: var(--text-secondary, #5d6371);
-                cursor: pointer;
-                gap: 0.25rem;
-                justify-content: center;
-                align-items: center;
-                margin: 0 0.25rem;
-                overflow: hidden;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-                height: inherit;
-                display: flex;
-            }
-            .no-select,
-            .no-select * {
-                user-select: none !important;
-            }
-            .ellipsis {
-                overflow: hidden;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-            }
-
-            .icons-group-pin {
-                display: flex;
-                height: 100%;
-                justify-content: space-between;
-                flex-grow: 1;
-            }
-
-            .flex {
-                display: flex;
-            }
-
-            .drag-handle {
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                padding: 1px 6px;
-                cursor: grab;
-            }
-
-            .resizer {
-                height: 23px;
-                padding: 0 0 0 6px;
-                text-align: start;
-                //cursor: col-resize;
-                user-select: none;
-                touch-action: none;
-            }
-
-            .resize-handle {
-                position: absolute;
-                top: 0;
-                right: 0px;
-                width: 6px;
-                height: 100%;
-                background: transparent;
-                cursor: col-resize;
-                transition: background-color 0.2s ease-in-out;
-                // border-radius: 5px;
-                // padding-bottom: 5px;
-            }
-
-            .resize-handle:hover {
-                border-right: 2px solid var(--color-primary-main, #75b603);
-            }
-
-            .resizer.ltr {
-                right: 0;
-            }
-
-            .resizer.rtl {
-                left: 0;
-            }
-
-            .resizer.is-resizing {
-                opacity: 1;
-            }
-
-            .footer-container {
-                position: relative;
-                background-color: var(--background-paper, #fff);
-                width: auto;
-                border-top: 1px solid var(--color-divider, #d0d3db);
-                height: 2.375rem;
-                display: flex;
-                flex-direction: row;
-                justify-content: space-between;
-                align-items: center;
-                z-index: 10;
-                flex-shrink: 0;
-            }
-
-            .right-actions {
-                position: absolute;
-                right: 0;
-                display: flex;
-            }
-
-            .numberCount {
-                margin: 0.375rem 0;
-                font-size: 12px;
-                font-weight: 400;
-                color: var(--text-primary, #111827);
-                display: flex;
-                align-items: center;
-            }
-
-            .scroll-button {
-                position: absolute;
-                top: 50%;
-                transform: translateY(-50%);
-                z-index: 1000;
-                cursor: pointer;
-                opacity: 0.5;
-            }
-
-            .scroll-button.left {
-                left: 4rem;
-            }
-
-            .scroll-button.right {
-                right: 4rem;
-            }
-
-            .selected {
-                background-color: var(--color-primary-light, #f0fadf);
-            }
-
-            .sortFilled {
-                visibility: hidden;
-            }
-            .header {
-                display: flex;
-                align-items: center;
-                height: 100%;
-            }
-            .header:hover .sortFilled {
-                visibility: visible;
-            }
-            .grouped-column {
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                width: 100%;
-                gap: 0.25rem;
-            }
-            .grouped-column--icon-button {
-                display: flex;
-                align-items: center;
-                position: relative;
-                top: -1.5px;
-            }
-            .grouped-column--label {
-                display: flex;
-                align-items: center;
-                overflow: hidden;
-                flex-grow: 1;
-            }
-            .grouped-column--pill {
-                margin-left: 0.5rem;
-            }
-            .filterCirclePoint {
-                width: 8px;
-                height: 8px;
-                border-radius: 50%;
-                background-color: var(--color-primary-main, #75b603);
-                display: inline-block;
-                vertical-align: middle;
-            }
-            .cursor {
-                cursor: pointer;
-                color: var(--text-secondary, #5d6371);
-            }
-            .data-grid__empty-text {
-                color: var(--text-primary, #5d6371);
-            }
-        `,
-];
-__decorate([
-    property({ type: Array, reflect: true })
-], LitDataGridTanstack.prototype, "row", void 0);
-__decorate([
-    property({ type: Array })
-], LitDataGridTanstack.prototype, "columns", void 0);
-__decorate([
-    property({ type: Array })
-], LitDataGridTanstack.prototype, "allColumns", void 0);
-__decorate([
-    property({ type: Number })
-], LitDataGridTanstack.prototype, "columnDefaultSize", void 0);
-__decorate([
-    property({ type: Number })
-], LitDataGridTanstack.prototype, "columnDefaultMinSize", void 0);
-__decorate([
-    property({ type: Number })
-], LitDataGridTanstack.prototype, "columnDefaultMaxSize", void 0);
-__decorate([
-    property({ type: String })
-], LitDataGridTanstack.prototype, "columnGroupedColor", void 0);
-__decorate([
-    property({ type: String })
-], LitDataGridTanstack.prototype, "rowAggregationColor", void 0);
-__decorate([
-    property({ type: Boolean })
-], LitDataGridTanstack.prototype, "enableRowVirtualization", void 0);
-__decorate([
-    property({ type: Boolean })
-], LitDataGridTanstack.prototype, "enableColumnVirtualization", void 0);
-__decorate([
-    property({ type: Boolean })
-], LitDataGridTanstack.prototype, "enableColumnPinning", void 0);
-__decorate([
-    property({ type: Boolean })
-], LitDataGridTanstack.prototype, "enableColumnOrdering", void 0);
-__decorate([
-    property({ type: Boolean })
-], LitDataGridTanstack.prototype, "enableGrouping", void 0);
-__decorate([
-    property({ type: Boolean })
-], LitDataGridTanstack.prototype, "enablePinning", void 0);
-__decorate([
-    property({ type: Boolean })
-], LitDataGridTanstack.prototype, "exportData", void 0);
-__decorate([
-    property({ type: Boolean })
-], LitDataGridTanstack.prototype, "actionButtonsInMenu", void 0);
-__decorate([
-    property({ type: String })
-], LitDataGridTanstack.prototype, "id", void 0);
-__decorate([
-    property({ type: Array })
-], LitDataGridTanstack.prototype, "initialGroups", void 0);
-__decorate([
-    property({ type: Array })
-], LitDataGridTanstack.prototype, "initialSorting", void 0);
-__decorate([
-    property({ type: Object })
-], LitDataGridTanstack.prototype, "initialColumnVisibility", void 0);
-__decorate([
-    property({ type: Object })
-], LitDataGridTanstack.prototype, "initialRowExpanded", void 0);
-__decorate([
-    property({ type: Object })
-], LitDataGridTanstack.prototype, "columnSizing", void 0);
-__decorate([
-    property({ type: Array })
-], LitDataGridTanstack.prototype, "leftPinnedColumns", void 0);
-__decorate([
-    property({ type: Array })
-], LitDataGridTanstack.prototype, "rightPinnedColumns", void 0);
-__decorate([
-    property({ type: Boolean })
-], LitDataGridTanstack.prototype, "enableFiltering", void 0);
-__decorate([
-    property({ type: Boolean })
-], LitDataGridTanstack.prototype, "enableSorting", void 0);
-__decorate([
-    property({ type: String })
-], LitDataGridTanstack.prototype, "userLang", void 0);
-__decorate([
-    property({ type: Array })
-], LitDataGridTanstack.prototype, "allowedLang", void 0);
-__decorate([
-    property({ type: String })
-], LitDataGridTanstack.prototype, "dateFormat", void 0);
-__decorate([
-    property({ type: Boolean })
-], LitDataGridTanstack.prototype, "isLoading", void 0);
-__decorate([
-    property({ type: Boolean })
-], LitDataGridTanstack.prototype, "enableRowSelection", void 0);
-__decorate([
-    property({ type: Array })
-], LitDataGridTanstack.prototype, "initialFiltering", void 0);
-__decorate([
-    property({ type: Boolean })
-], LitDataGridTanstack.prototype, "server", void 0);
-__decorate([
-    property({ type: Number })
-], LitDataGridTanstack.prototype, "scrollEndThreshold", void 0);
-__decorate([
-    property({ type: String })
-], LitDataGridTanstack.prototype, "rowDensity", void 0);
-__decorate([
-    property({ type: Boolean })
-], LitDataGridTanstack.prototype, "enableMultiRowSelection", void 0);
-__decorate([
-    property({ type: Number })
-], LitDataGridTanstack.prototype, "totalNumberRows", void 0);
-__decorate([
-    property({ type: Number })
-], LitDataGridTanstack.prototype, "minFilterCharacters", void 0);
-__decorate([
-    property({ type: Boolean })
-], LitDataGridTanstack.prototype, "rowsSelected", void 0);
-__decorate([
-    property({ type: Boolean })
-], LitDataGridTanstack.prototype, "enableSettings", void 0);
-__decorate([
-    property({ type: Boolean })
-], LitDataGridTanstack.prototype, "enableSettingsAlwaysFilter", void 0);
-__decorate([
-    property({ type: Boolean })
-], LitDataGridTanstack.prototype, "alwaysFilterActive", void 0);
-__decorate([
-    property({ attribute: false })
-], LitDataGridTanstack.prototype, "onSettingsChanged", void 0);
-__decorate([
-    property({ type: Function })
-], LitDataGridTanstack.prototype, "onRowClick", void 0);
-__decorate([
-    property({ type: Function })
-], LitDataGridTanstack.prototype, "onRowsScrollEnd", void 0);
-__decorate([
-    property({ type: Function })
-], LitDataGridTanstack.prototype, "onWindowResize", void 0);
-__decorate([
-    property({ type: Function })
-], LitDataGridTanstack.prototype, "onRowDoubleClick", void 0);
-__decorate([
-    property({ type: Function })
-], LitDataGridTanstack.prototype, "rowDensityChange", void 0);
-__decorate([
-    property({ type: Function })
-], LitDataGridTanstack.prototype, "exportExcelFn", void 0);
-__decorate([
-    property({ type: Function })
-], LitDataGridTanstack.prototype, "exportCsvFn", void 0);
-__decorate([
-    property({ type: Function })
-], LitDataGridTanstack.prototype, "getTotalNumberFn", void 0);
-__decorate([
-    property({ type: Function })
-], LitDataGridTanstack.prototype, "onCellKeyDown", void 0);
-__decorate([
-    property({ type: Function })
-], LitDataGridTanstack.prototype, "getRowId", void 0);
-__decorate([
-    property({ type: Function })
-], LitDataGridTanstack.prototype, "onColumnResize", void 0);
-__decorate([
-    property({ type: Boolean })
-], LitDataGridTanstack.prototype, "onColumnFiltersChanged", void 0);
-__decorate([
-    property({ type: Boolean })
-], LitDataGridTanstack.prototype, "onColumnSortChanged", void 0);
-__decorate([
-    property({ type: Function })
-], LitDataGridTanstack.prototype, "onRowSelectionChanged", void 0);
-__decorate([
-    property({ type: Function })
-], LitDataGridTanstack.prototype, "onColumnOrderChanged", void 0);
-__decorate([
-    property({ type: Boolean })
-], LitDataGridTanstack.prototype, "hideFooter", void 0);
-__decorate([
-    property({ type: Object })
-], LitDataGridTanstack.prototype, "columnVisibility", void 0);
-__decorate([
-    property({ type: Function })
-], LitDataGridTanstack.prototype, "onColumnVisibilityChanged", void 0);
-__decorate([
-    property({ type: Function })
-], LitDataGridTanstack.prototype, "onMouseDown", void 0);
-__decorate([
-    property({ type: Function })
-], LitDataGridTanstack.prototype, "onRowFocusChanged", void 0);
-__decorate([
-    property({ type: Number })
-], LitDataGridTanstack.prototype, "focusedRowIndex", void 0);
-__decorate([
-    property({ type: Boolean })
-], LitDataGridTanstack.prototype, "autoFocus", void 0);
-__decorate([
-    property({ type: Boolean })
-], LitDataGridTanstack.prototype, "onColumnPinningChanged", void 0);
-__decorate([
-    property({ type: Boolean })
-], LitDataGridTanstack.prototype, "onGroupingChanged", void 0);
-__decorate([
-    property({ type: Boolean })
-], LitDataGridTanstack.prototype, "onRowExpanded", void 0);
-__decorate([
-    property({ type: Object })
-], LitDataGridTanstack.prototype, "alwaysFilter", void 0);
-__decorate([
-    property({ type: Array })
-], LitDataGridTanstack.prototype, "variables", void 0);
-__decorate([
-    property({ type: Object })
-], LitDataGridTanstack.prototype, "emptyText", void 0);
-__decorate([
-    state()
-], LitDataGridTanstack.prototype, "isScrollable", void 0);
-__decorate([
-    state()
-], LitDataGridTanstack.prototype, "disableScrollLeft", void 0);
-__decorate([
-    state()
-], LitDataGridTanstack.prototype, "disableScrollRight", void 0);
-__decorate([
-    state()
-], LitDataGridTanstack.prototype, "columnOrder", void 0);
-__decorate([
-    state()
-], LitDataGridTanstack.prototype, "table", void 0);
-__decorate([
-    state()
-], LitDataGridTanstack.prototype, "isOpen", void 0);
-__decorate([
-    state()
-], LitDataGridTanstack.prototype, "filterText", void 0);
-__decorate([
-    state()
-], LitDataGridTanstack.prototype, "isOpenModal", void 0);
-__decorate([
-    query('tbody')
-], LitDataGridTanstack.prototype, "tableBody", void 0);
-__decorate([
-    query('.grid')
-], LitDataGridTanstack.prototype, "_container", void 0);
-if (!window.customElements.get('lit-data-grid-tanstack')) {
-    window.customElements.define('lit-data-grid-tanstack', LitDataGridTanstack);
-}
-//# sourceMappingURL=lit-data-grid-tanstack.js.map