overview-components 1.0.79 → 1.0.80

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

@@ -1,676 +1,1061 @@
-import "../node_modules/@lit/reactive-element/reactive-element.js";
-import { html as u } from "../node_modules/lit-html/lit-html.js";
-import { LitElement as tt } from "../node_modules/lit-element/lit-element.js";
-import et, { isEqual as it } from "lodash";
-import { msg as R } from "../node_modules/@lit/localize/init/install.js";
-import "../node_modules/@lit/localize/init/runtime.js";
-import { customElement as ot } from "../node_modules/@lit/reactive-element/decorators/custom-element.js";
-import { property as a } from "../node_modules/@lit/reactive-element/decorators/property.js";
-import { state as z } from "../node_modules/@lit/reactive-element/decorators/state.js";
-import { query as Q } from "../node_modules/@lit/reactive-element/decorators/query.js";
-import { unsafeHTML as j } from "../node_modules/lit-html/directives/unsafe-html.js";
-import { TableController as nt, flexRender as L } from "../node_modules/@tanstack/lit-table/build/lib/index.js";
-import { repeat as T } from "../node_modules/lit-html/directives/repeat.js";
-import { VirtualizerController as K } from "../node_modules/@tanstack/lit-virtual/dist/esm/index.js";
-import { createRef as lt, ref as X } from "../node_modules/lit-html/directives/ref.js";
-import { styleMap as E } from "../node_modules/lit-html/directives/style-map.js";
-import st from "../node_modules/sortablejs/modular/sortable.esm.js";
-import { formatDate as W } from "../utils/date.js";
-import { formatCurrency as rt } from "../utils/currency.js";
-import { dateFilterFn as Z, dateRangeFilterFn as Y, multiselectFilterFn as J } from "../utils/custom-filters.js";
-import { getLocale as at, setLocale as dt } from "../utils/localization.js";
-import { getOperatorsByColumnType as ct } from "../utils/getOperatorByType.js";
-import { filterFns as V, getFacetedUniqueValues as ht, getExpandedRowModel as pt, getGroupedRowModel as ut, getFacetedRowModel as gt, getFilteredRowModel as mt, getSortedRowModel as ft, getCoreRowModel as bt } from "../node_modules/@tanstack/table-core/build/lib/index.js";
-import { css as yt } from "../node_modules/@lit/reactive-element/css-tag.js";
-var wt = Object.defineProperty, xt = Object.getOwnPropertyDescriptor, l = (t, e, o, d) => {
-  for (var s = d > 1 ? void 0 : d ? xt(e, o) : e, p = t.length - 1, g; p >= 0; p--)
-    (g = t[p]) && (s = (d ? g(e, o, s) : g(s)) || s);
-  return d && s && wt(e, o, s), s;
+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;
 };
-let n = class extends tt {
-  constructor() {
-    super(...arguments), this.row = [], this.columns = [], this.enableRowVirtualization = !0, this.enableColumnVirtualization = !1, this.enableColumnPinning = !0, this.enableColumnOrdering = !1, this.enableGrouping = !0, this.enablePinning = !0, this.exportData = !0, this.actionButtonsInMenu = !1, this.id = "", this.initialSorting = [], this.initialRowExpanded = {}, this.columnSizing = {}, this.leftPinnedColumns = [], this.rightPinnedColumns = [], this.enableFiltering = !0, this.enableSorting = !0, this.userLang = "cs", this.dateFormat = null, this.isLoading = !1, this.enableRowSelection = !1, this.initialFiltering = [], this.server = !1, this.scrollEndThreshold = 100, this.rowDensity = "standard", this.enableMultiRowSelection = !1, this.minFilterCharacters = 3, this.localizeDate = !0, this.rowsSelected = {}, this.enableSettings = !1, this.onSettingsChanged = () => {
-    }, this.onCellKeyDown = (t, e) => {
-    }, this.onColumnResize = () => {
-    }, this.onColumnFiltersChanged = (t, e) => {
-    }, this.onColumnSortChanged = (t, e) => {
-    }, this.onRowSelectionChanged = (t, e) => {
-    }, this.onColumnOrderChanged = (t, e) => {
-    }, this.hideFooter = !1, this.columnVisibility = {}, this.onColumnVisibilityChanged = (t, e) => {
-    }, this.onMouseDown = (t, e) => {
-    }, this.onRowFocusChanged = (t, e) => {
-    }, this.focusedRowIndex = null, this.autoFocus = !1, this.rowsCount = 0, this.isScrollable = !1, this.disableScrollLeft = !0, this.disableScrollRight = !1, this.columnOrder = [], this.isOpen = !1, this.filterText = "", this.isOpenModal = !1, this.scrollToEnd = !1, this.tableContainerRef = lt(), this.scrollInterval = null, this.currentScrollTop = 0, this.lastSelectedIndex = null, this.getCellBackgroundColor = (t) => t.getIsGrouped() ? this.columnGroupedColor ?? "var(--color-primary-light, #f0fadf)" : t.getIsAggregated() ? this.rowAggregationColor ?? "var(--color-warning-light, #ffe1a8)" : t.getIsPlaceholder() ? "var(--background-default, #eff3f4)" : t.column.getIsPinned() ? "var(--background-paper, #fff)" : "transparent", this.updateScrollState = () => {
-      const t = this.tableContainerRef.value;
-      if (t) {
-        const e = t.scrollWidth > t.clientWidth;
-        this.isScrollable = e, this.disableScrollLeft = t.scrollLeft === 0, this.disableScrollRight = t.scrollLeft + t.clientWidth >= t.scrollWidth, this.currentScrollTop = t.scrollTop;
-      }
-    };
-  }
-  get rows() {
-    return [...this.row || []];
-  }
-  get getColumns() {
-    return [...this.columns || []];
-  }
-  // lifecycle
-  connectedCallback() {
-    this.initRowVirtualizer(), this.initColumnVirtualizer(), this.initTable(), window.addEventListener("resize", this.updateScrollState), super.connectedCallback();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), window.removeEventListener("resize", this.updateScrollState);
-  }
-  updated(t) {
-    var e, o, d, s, p;
-    if (t.has("rowsCount") && this.enableRowVirtualization) {
-      this.scrollToEnd = !1;
-      const g = (e = this.rowVirtualizerController) == null ? void 0 : e.getVirtualizer();
-      g && g.setOptions({
-        ...g.options,
-        count: (d = (o = this.table) == null ? void 0 : o.getRowModel()) == null ? void 0 : d.rows.length
-      }), this.requestUpdate();
+import { css, html, LitElement } from 'lit';
+import _, { isEqual } from 'lodash';
+import { msg } from '@lit/localize';
+import { customElement, 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 './components-settings/data-grid-settings.js';
+// utils
+import { formatDate } from '../utils/date.js';
+import { formatCurrency } from '../utils/currency.js';
+import { dateFilterFn, multiselectFilterFn, dateRangeFilterFn } from '../utils/custom-filters.js';
+import { setLocale, getLocale } from '../utils/localization.js';
+import { getOperatorsByColumnType } from '../utils/getOperatorByType.js';
+let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.row = [];
+        this.columns = [];
+        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.initialSorting = [];
+        this.initialRowExpanded = {};
+        this.columnSizing = {};
+        this.leftPinnedColumns = [];
+        this.rightPinnedColumns = [];
+        this.enableFiltering = true;
+        this.enableSorting = true;
+        this.userLang = '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.localizeDate = true;
+        this.rowsSelected = {};
+        this.enableSettings = 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.rowsCount = 0;
+        this.isScrollable = false;
+        this.disableScrollLeft = true;
+        this.disableScrollRight = false;
+        this.columnOrder = [];
+        this.isOpen = false;
+        this.filterText = '';
+        this.isOpenModal = false;
+        this.scrollToEnd = false;
+        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.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;
+            }
+        };
     }
-    if ((t.has("columns") || t.has("columnVisibility")) && this.enableColumnVirtualization) {
-      const g = (s = this.columnVirtualizerController) == null ? void 0 : s.getVirtualizer();
-      g && g.setOptions({
-        ...g.options,
-        count: (p = this.table) == null ? void 0 : p.getVisibleLeafColumns().length
-      });
+    get rows() {
+        return [...(this.row || [])];
     }
-    (t.has("row") || t.has("columns")) && (this.initTable(), this.requestUpdate());
-  }
-  firstUpdated() {
-    const t = this.tableContainerRef.value;
-    t && t.addEventListener("scroll", this.updateScrollState), this.updateScrollState(), this.initSortable(), this._container.addEventListener("scroll", this.handleScroll.bind(this)), this.autoFocus && setTimeout(() => {
-      var e, o;
-      if (this.focusedRowIndex !== null && this.focusedRowIndex !== void 0)
-        (e = this.focusRow) == null || e.call(this, this.focusedRowIndex);
-      else {
-        const d = this.table.getSelectedRowModel().rows;
-        d.length > 0 && ((o = this.focusRow) == null || o.call(this, d[0].index));
-      }
-    }, 0);
-  }
-  toggleModal() {
-    this.isOpenModal = !this.isOpenModal;
-  }
-  async initSortable() {
-    var e;
-    if (!this.enableColumnOrdering) return;
-    const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector("thead tr.head");
-    t && st.create(t, {
-      animation: 150,
-      direction: "horizontal",
-      handle: ".drag-handle",
-      filter: 'th[data-index="checkbox"], th[data-index="actions"]',
-      preventOnFilter: !1,
-      onMove: (o) => {
-        var v, I, i, r, b, c, D, y;
-        const d = o.dragged.getAttribute("data-index"), s = o.related.getAttribute("data-index"), p = ["checkbox", "actions"];
-        if (p.includes(d) || p.includes(s))
-          return !1;
-        const g = this.table.getHeaderGroups()[0].headers, h = g.find((F) => F.id === d), m = g.find((F) => F.id === s);
-        if (!h || !m) return !1;
-        const x = (I = (v = h.column).getIsPinned) == null ? void 0 : I.call(v), C = (r = (i = m.column).getIsPinned) == null ? void 0 : r.call(i), w = (c = (b = h.column).getIsGrouped) == null ? void 0 : c.call(b), S = (y = (D = m.column).getIsGrouped) == null ? void 0 : y.call(D);
-        return !(x || C || w || S);
-      },
-      onEnd: () => {
-        const o = Array.from(t.querySelectorAll("th")).map((d) => d.getAttribute("data-index")).filter((d) => {
-          var p, g, h, m;
-          if (!d || d === "checkbox" || d === "actions") return !1;
-          const s = this.table.getHeaderGroups()[0].headers.find((x) => x.id === d);
-          return s ? !((g = (p = s.column).getIsPinned) != null && g.call(p)) && !((m = (h = s.column).getIsGrouped) != null && m.call(h)) : !1;
+    get getColumns() {
+        return [...(this.columns || [])];
+    }
+    // lifecycle
+    connectedCallback() {
+        this.initRowVirtualizer();
+        this.initColumnVirtualizer();
+        this.initTable();
+        window.addEventListener('resize', this.updateScrollState);
+        super.connectedCallback();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        window.removeEventListener('resize', this.updateScrollState);
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('rowsCount') && this.enableRowVirtualization) {
+            this.scrollToEnd = false;
+            const virtualizer = this.rowVirtualizerController?.getVirtualizer();
+            if (virtualizer) {
+                virtualizer.setOptions({
+                    ...virtualizer.options,
+                    count: this.table?.getRowModel()?.rows.length,
+                });
+            }
+            this.requestUpdate();
+        }
+        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();
+            this.requestUpdate();
+        }
+    }
+    firstUpdated() {
+        const grid = this.tableContainerRef.value;
+        if (grid) {
+            grid.addEventListener('scroll', this.updateScrollState);
+        }
+        this.updateScrollState();
+        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);
+            },
         });
-        this.table.setColumnOrder(o);
-      }
-    });
-  }
-  async loadXLSX() {
-    !window.XLSX && !this.server && await new Promise((t) => {
-      const e = document.createElement("script");
-      e.src = "../../public/libs/xlsx.mini.min.js", e.onload = t, document.head.appendChild(e);
-    });
-  }
-  // 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";
+    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);
+            });
+        }
     }
-  }
-  handleSetDensity(t) {
-    this.rowDensity = t, this.rowDensityChange && this.rowDensityChange(this.table, t);
-  }
-  handleMouseDown(t, e) {
-    this.onMouseDown && this.onMouseDown(t, e);
-  }
-  handleFilterTabNavigation(t) {
-    var g, h, m;
-    const { direction: e, currentFilter: o } = t.detail, d = Array.from(((g = this.shadowRoot) == null ? void 0 : g.querySelectorAll("filter-inputs")) || []);
-    if (d.length === 0) return;
-    const s = d.indexOf(o);
-    let p;
-    if (e === "forward")
-      if (s === d.length - 1) {
-        const x = (h = this.shadowRoot) == null ? void 0 : h.querySelector(".grid");
-        x && (x.scrollLeft = 0), setTimeout(() => {
-          var w;
-          const C = (w = this.shadowRoot) == null ? void 0 : w.querySelector("filter-inputs");
-          C && C.focus();
-        }, 0);
-        return;
-      } else
-        p = s + 1;
-    else if (s === 0) {
-      const x = (m = this.shadowRoot) == null ? void 0 : m.querySelector(".grid");
-      x && (x.scrollLeft = x.scrollWidth), setTimeout(() => {
-        var w;
-        const C = Array.from(
-          ((w = this.shadowRoot) == null ? void 0 : w.querySelectorAll("filter-inputs")) || []
-        );
-        C.length > 0 && C[C.length - 1].focus();
-      }, 0);
-      return;
-    } else
-      p = s - 1;
-    d[p].focus();
-  }
-  // virtualization
-  initRowVirtualizer() {
-    var t, e, o;
-    this.rowVirtualizerController = new K(this, {
-      count: ((e = (t = this.table) == null ? void 0 : t.getRowModel()) == null ? void 0 : e.rows.length) || ((o = this.row) == null ? void 0 : o.length) || 1,
-      getScrollElement: () => this.tableContainerRef.value,
-      estimateSize: () => this.getRowHeight(),
-      overscan: 5,
-      initialOffset: this.currentScrollTop,
-      enabled: this.enableRowVirtualization
-    });
-  }
-  initTable() {
-    this.tableController = new nt(this);
-  }
-  initColumnVirtualizer() {
-    var t;
-    this.columnVirtualizerController = new K(this, {
-      horizontal: !0,
-      count: ((t = this.table) == null ? void 0 : t.getVisibleLeafColumns().length) || this.columns.length || 1,
-      getScrollElement: () => this.tableContainerRef.value,
-      estimateSize: (e) => {
-        var o;
-        return ((o = this.table.getVisibleLeafColumns()[e]) == null ? void 0 : o.getSize()) || 200;
-      },
-      overscan: 5,
-      enabled: this.enableColumnVirtualization
-    });
-  }
-  handleRowClick(t, e) {
-    var s, p;
-    (s = this.onRowClick) == null || s.call(this, t, this.table, e), (p = this.onRowFocusChanged) == null || p.call(this, this.table, e.index);
-    const o = t.shiftKey, d = t.ctrlKey || t.metaKey;
-    if (this.enableRowSelection && e.getCanSelect() && (d || o)) {
-      const { rows: g } = this.table.getRowModel();
-      if (this.enableMultiRowSelection && o && this.focusedRowIndex !== null && this.focusedRowIndex !== void 0) {
-        const [h, m] = [
-          Math.min(this.focusedRowIndex, e.index),
-          Math.max(this.focusedRowIndex, e.index)
-        ], x = g.slice(h, m + 1).map((w) => w.id), C = { ...this.rowsSelected };
-        x.forEach((w) => C[w] = !0), this.table.setRowSelection(C);
-      } else if (d && this.enableMultiRowSelection) {
-        const h = { ...this.rowsSelected };
-        h[e.id] ? delete h[e.id] : h[e.id] = !0, this.table.setRowSelection(h);
-      } else {
-        const h = { [e.id]: !0 };
-        this.table.setRowSelection(h);
-      }
+    // row density
+    getRowHeight() {
+        switch (this.rowDensity) {
+            case 'compact':
+                return 31;
+            case 'standard':
+                return 38;
+            case 'comfort':
+                return 50;
+            default:
+                return 38;
+        }
     }
-    this.focusedRowIndex = e.index;
-  }
-  handleRowDoubleClick(t) {
-    this.onRowDoubleClick && this.onRowDoubleClick(this.table, t);
-  }
-  handleKeyDown(t) {
-    var d;
-    const e = this.table.getRowModel().rows;
-    if (!e.length) return;
-    let o = this.focusedRowIndex ?? e.findIndex((s) => this.rowsSelected[s.id]);
-    if (this.enableRowSelection) {
-      if (o === -1 && (o = 0), t.key === "ArrowDown" && t.shiftKey && this.enableMultiRowSelection) {
-        t.preventDefault();
-        const s = o + 1;
-        if (s < e.length) {
-          const p = e[s].id;
-          this.table.setRowSelection((g) => ({
-            ...g,
-            [p]: !g[p]
-          })), this.focusRow(s);
+    getButtonSize() {
+        switch (this.rowDensity) {
+            case 'compact':
+                return 'small';
+            case 'standard':
+                return 'medium';
+            case 'comfort':
+                return 'large';
+            default:
+                return 'medium';
         }
-      } else if (t.key === "ArrowUp" && t.shiftKey && this.enableMultiRowSelection) {
-        t.preventDefault();
-        const s = o - 1;
-        if (s >= 0) {
-          const p = e[s].id;
-          this.table.setRowSelection((g) => ({
-            ...g,
-            [p]: !g[p]
-          })), this.focusRow(s);
+    }
+    handleSetDensity(density) {
+        this.rowDensity = density;
+        if (this.rowDensityChange) {
+            this.rowDensityChange(this.table, density);
         }
-      } else if (t.key === "ArrowDown" && o < e.length - 1) {
-        t.preventDefault();
-        const s = o + 1;
-        this.focusRow(s);
-      } else if (t.key === "ArrowUp" && o > 0) {
-        t.preventDefault();
-        const s = o - 1;
-        this.focusRow(s);
-      }
     }
-    (d = this.onCellKeyDown) == null || d.call(this, t, e[o]);
-  }
-  focusRow(t) {
-    var o, d;
-    const e = t ?? this.focusedRowIndex;
-    (o = this.rowVirtualizerController) == null || o.getVirtualizer().scrollToIndex(e ?? 0, { align: "auto" }), setTimeout(() => {
-      var p;
-      const s = (p = this.shadowRoot) == null ? void 0 : p.querySelector(
-        `[data-row-index="${e}"]`
-      );
-      this.enableRowVirtualization ? s && setTimeout(() => {
-        s.focus();
-      }, 0) : s && (s.focus(), s.scrollIntoView({ block: "nearest" }));
-    }, 100), (d = this.onRowFocusChanged) == null || d.call(this, this.table, e), this.focusedRowIndex = e;
-  }
-  getTanstackColumns(t) {
-    return t.map((e) => ({
-      id: e.field,
-      accessorKey: e.field,
-      accessorFn: (o) => (e.type === "date" || e.type === "dateTime" || e.type === "dateTimeRange" || e.type === "dateRange") && !this.server && this.localizeDate ? e.accessorFn ? W(
-        e.accessorFn(o),
-        this.userLang || "cs",
-        e.type === "date" || e.type === "dateRange" ? void 0 : !0,
-        this.dateFormat
-      ) : W(
-        o[e.field],
-        this.userLang || "cs",
-        e.type === "date" || e.type === "dateRange" ? void 0 : !0,
-        this.dateFormat
-      ) : e.accessorFn ? e.accessorFn(o) : o[e.field],
-      type: e.type,
-      header: e.headerName,
-      cell: (o) => {
-        var s;
-        const d = o.getValue();
-        return e.type === "actions" ? u`
+    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;
+    }
+    getTanstackColumns(columns) {
+        return columns.map((column) => {
+            return {
+                id: column.field,
+                accessorKey: column.field,
+                accessorFn: (originalRow) => (column.type === 'date' ||
+                    column.type === 'dateTime' ||
+                    column.type === 'dateTimeRange' ||
+                    column.type === 'dateRange') &&
+                    !this.server &&
+                    this.localizeDate
+                    ? column.accessorFn
+                        ? formatDate(column.accessorFn(originalRow), this.userLang || 'cs', column.type === 'date' || column.type === 'dateRange'
+                            ? undefined
+                            : true, this.dateFormat)
+                        : formatDate(originalRow[column.field], this.userLang || 'cs', column.type === 'date' || column.type === 'dateRange'
+                            ? undefined
+                            : true, this.dateFormat)
+                    : column.accessorFn
+                        ? column.accessorFn(originalRow)
+                        : originalRow[column.field],
+                type: column.type,
+                header: column.headerName,
+                cell: (props) => {
+                    const value = props.getValue();
+                    if (column.type === 'actions') {
+                        return html `
                             <lit-data-grid-row-actions
-                                .buttons=${((s = e.getActions) == null ? void 0 : s.call(e, o)) || []}
+                                .buttons=${column.getActions?.(props) || []}
                             ></lit-data-grid-row-actions>
-                        ` : e.type === "currency" ? rt(d, this.userLang || "cs") : e.cell ? e.cell(o, u, j) : d;
-      },
-      filterFn: (() => {
-        switch (e.type) {
-          case "numberRange":
-            return V.inNumberRange;
-          case "select":
-            return V.weakEquals;
-          case "multiselect":
-            return J;
-          case "number":
-          case "currency":
-            return V.weakEquals;
-          case "dateRange":
-          case "dateTimeRange":
-            return Y;
-          case "date":
-          case "dateTime":
-            return Z;
-          case "string":
-          default:
-            return V.includesString;
+                        `;
+                    }
+                    if (column.type === 'currency') {
+                        return formatCurrency(value, this.userLang || 'cs');
+                    }
+                    return column.cell ? column.cell(props, html, unsafeHTML) : value;
+                },
+                filterFn: (() => {
+                    switch (column.type) {
+                        case 'numberRange':
+                            return filterFns.inNumberRange;
+                        case 'select':
+                            return filterFns.weakEquals;
+                        case 'multiselect':
+                            return multiselectFilterFn;
+                        case 'number':
+                        case 'currency':
+                            return filterFns.weakEquals;
+                        case 'dateRange':
+                        case 'dateTimeRange':
+                            return dateRangeFilterFn;
+                        case 'date':
+                        case 'dateTime':
+                            return dateFilterFn;
+                        case 'string':
+                        default:
+                            return filterFns.includesString;
+                    }
+                })(),
+                enableSorting: column.enableSorting ?? true,
+                enableColumnFilter: this.enableFiltering && (column.enableFilter ?? true),
+                size: column.size || this.columnDefaultSize || undefined,
+                maxSize: column.maxSize || this.columnDefaultMaxSize || 500,
+                minSize: column.minSize || this.columnDefaultMinSize || 100,
+                meta: {
+                    filterVariant: column.type ?? 'string',
+                    valueOptions: column.valueOptions,
+                    filterOperators: column.filterOperators,
+                },
+                aggregationFn: column.columnAggregation ?? undefined,
+                enableGrouping: column.enableGrouping ?? true,
+                sortDescFirst: column.sortDescFirst || true,
+                enableResizing: column.enableResizing ?? true,
+                enablePinning: this.enablePinning && (column.enablePinning ?? true),
+                aggregatedCell: (props) => {
+                    const value = props.getValue();
+                    return column.aggregatedCell
+                        ? column.aggregatedCell(props, html, unsafeHTML)
+                        : value;
+                },
+            };
+        });
+    }
+    getCommonPinningStyles(column) {
+        const isPinned = column.getIsPinned();
+        if (!isPinned) {
+            return {};
         }
-      })(),
-      enableSorting: e.enableSorting ?? !0,
-      enableColumnFilter: this.enableFiltering && (e.enableFilter ?? !0),
-      size: e.size || this.columnDefaultSize || void 0,
-      maxSize: e.maxSize || this.columnDefaultMaxSize || 500,
-      minSize: e.minSize || this.columnDefaultMinSize || 100,
-      meta: {
-        filterVariant: e.type ?? "string",
-        valueOptions: e.valueOptions,
-        filterOperators: e.filterOperators
-      },
-      aggregationFn: e.columnAggregation ?? void 0,
-      enableGrouping: e.enableGrouping ?? !0,
-      sortDescFirst: e.sortDescFirst || !0,
-      enableResizing: e.enableResizing ?? !0,
-      enablePinning: this.enablePinning && (e.enablePinning ?? !0),
-      aggregatedCell: (o) => {
-        const d = o.getValue();
-        return e.aggregatedCell ? e.aggregatedCell(o, u, j) : d;
-      }
-    }));
-  }
-  getCommonPinningStyles(t) {
-    const e = t.getIsPinned();
-    if (!e)
-      return {};
-    const o = e === "left" && t.getIsLastColumn("left");
-    return {
-      position: e ? "sticky" : "relative",
-      left: e === "left" ? `${t.getStart("left")}px` : void 0,
-      right: e === "right" ? "0px" : void 0,
-      boxShadow: o && t.columnDef.type !== "checkbox" ? "-4px 0 4px -4px gray inset" : void 0,
-      zIndex: `${e ? 1 : "auto"}`,
-      background: e ? "var(--background-paper, #fff)" : void 0
-    };
-  }
-  togglePin(t) {
-    t.column.getIsPinned() ? t.column.pin(!1) : t.column.pin("left");
-  }
-  // export to excel and csv
-  exportDataToCsv() {
-    const t = this.getAllRowsIncludingGrouped(this.table.getRowModel().rows);
-    if (!t || t.length === 0) {
-      console.warn("No data to export");
-      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,
+        };
     }
-    const e = this.columns.map((m) => m.headerName || "").join(","), o = t.map((m) => this.columns.map((x) => {
-      var S, v;
-      const C = x.field;
-      if ((S = m.getIsGrouped) != null && S.call(m))
-        return x.field === m.groupingColumnId ? `"${m.getValue(x.field)} (${m.subRows.length})"` : "";
-      const w = ((v = m.getValue) == null ? void 0 : v.call(m, C)) || "";
-      return typeof w == "string" ? `"${w.replace(/"/g, '""')}"` : w;
-    }).join(","));
-    o.unshift(e);
-    const d = o.join(`
-`), s = new Blob([d], { type: "text/csv;charset=utf-8;" }), p = prompt(R("Zadejte název souboru:"), "data");
-    if (!p)
-      return;
-    const g = URL.createObjectURL(s), h = document.createElement("a");
-    h.href = g, h.download = `${p}.csv`, h.click(), URL.revokeObjectURL(g);
-  }
-  async exportDataToExcel() {
-    await this.loadXLSX();
-    const t = window.XLSX, e = this.getAllRowsIncludingGrouped(this.table.getRowModel().rows);
-    if (!e || e.length === 0) {
-      console.warn("No data to export");
-      return;
+    togglePin(header) {
+        if (header.column.getIsPinned()) {
+            header.column.pin(false); // Odpinovanie
+        }
+        else {
+            header.column.pin('left'); // Pripnutie doľava
+        }
     }
-    const o = e.map((h) => {
-      const m = {};
-      return this.columns.forEach((x) => {
-        var S, v;
-        const C = x.headerName || "", w = x.field;
-        (S = h.getIsGrouped) != null && S.call(h) ? x.field === h.groupingColumnId ? m[C] = `${h.getValue(w)} (${h.subRows.length})` : m[C] = "" : w && (m[C] = ((v = h.getValue) == null ? void 0 : v.call(h, w)) || "");
-      }), m;
-    }), d = t.utils.json_to_sheet(o), s = this.columns.map((h, m) => {
-      var C;
-      return { wch: Math.max(
-        ((C = h.headerName) == null ? void 0 : C.length) || 10,
-        ...o.map((w) => {
-          var S;
-          return ((S = w[h.headerName || ""]) == null ? void 0 : S.toString().length) || 0;
-        })
-        // Najdlhší obsah v stĺpci
-      ) + 2 };
-    });
-    d["!cols"] = s;
-    const p = t.utils.book_new();
-    t.utils.book_append_sheet(p, d, "Data");
-    const g = prompt(R("Zadejte název souboru:"), "data");
-    g && t.writeFile(p, `${g}.xlsx`);
-  }
-  getAllRowsIncludingGrouped(t) {
-    const e = [];
-    return t.forEach((o) => {
-      var d;
-      (d = o.getIsGrouped) != null && d.call(o) ? (e.push(o), o.subRows && o.subRows.length > 0 && e.push(...this.getAllRowsIncludingGrouped(o.subRows))) : e.push(o);
-    }), e.filter(
-      (o, d, s) => d === s.findIndex((p) => p.id === o.id)
-    );
-  }
-  startScroll(t) {
-    const e = this.tableContainerRef.value;
-    if (!e) return;
-    const o = t === "left" ? -15 : 15, d = () => {
-      e.scrollLeft += o, this.updateScrollState(), this.scrollInterval = requestAnimationFrame(d);
-    };
-    this.scrollInterval = requestAnimationFrame(d);
-  }
-  stopScroll() {
-    this.scrollInterval && (cancelAnimationFrame(this.scrollInterval), this.scrollInterval = null);
-  }
-  // centralize your “at end” logic
-  _atScrollEnd(t) {
-    const e = this.scrollEndThreshold ?? 100;
-    return t.scrollHeight <= t.clientHeight || t.scrollTop + t.clientHeight >= t.scrollHeight - e;
-  }
-  _maybeTriggerScrollEnd() {
-    this._atScrollEnd(this._container) && this.onRowsScrollEnd && !this.isLoading && !this.scrollToEnd && (this.scrollToEnd = !0, this.onRowsScrollEnd());
-  }
-  handleScroll(t) {
-    this._maybeTriggerScrollEnd();
-  }
-  // handleScroll(event: Event) {
-  //     const container = event.target as HTMLElement;
-  //     if (
-  //         container.scrollTop + container.clientHeight >=
-  //             container.scrollHeight - (this.scrollEndThreshold || 100) &&
-  //         this.onRowsScrollEnd &&
-  //         !this.isLoading &&
-  //         !this.scrollToEnd
-  //     ) {
-  //         this.scrollToEnd = true;
-  //         this.onRowsScrollEnd();
-  //     }
-  // }
-  handleGetTotalNumber() {
-    this.getTotalNumberFn && this.getTotalNumberFn();
-  }
-  toggleCustomPopover() {
-    this.isOpen = !this.isOpen;
-  }
-  closePopover() {
-    this.isOpen = !1;
-  }
-  toggleColumn(t) {
-    var e;
-    this.columnVisibility = {
-      ...this.columnVisibility,
-      [t]: !(((e = this.columnVisibility) == null ? void 0 : e[t]) ?? !0)
-    }, this.table.setColumnVisibility(this.columnVisibility);
-  }
-  onSettingsChangedCallback(t) {
-    var e;
-    (t == null ? void 0 : t.enableSorting) !== void 0 && (this.enableSorting = t.enableSorting), (t == null ? void 0 : t.enableFiltering) !== void 0 && (this.enableFiltering = t.enableFiltering), (t == null ? void 0 : t.columnDefaultSize) !== void 0 && (this.columnDefaultSize = t.columnDefaultSize), (t == null ? void 0 : t.columnGroupedColor) !== void 0 && (this.columnGroupedColor = t.columnGroupedColor), (t == null ? void 0 : t.rowAggregationColor) !== void 0 && (this.rowAggregationColor = t.rowAggregationColor), (t == null ? void 0 : t.enableGrouping) !== void 0 && (this.enableGrouping = t.enableGrouping), (t == null ? void 0 : t.exportData) !== void 0 && (this.exportData = t.exportData), (t == null ? void 0 : t.actionButtonsInMenu) !== void 0 && (this.actionButtonsInMenu = t.actionButtonsInMenu), (t == null ? void 0 : t.hideFooter) !== void 0 && (this.hideFooter = t.hideFooter), (t == null ? void 0 : t.enableColumnPinning) !== void 0 && (this.enableColumnPinning = t.enableColumnPinning), this.initTable(), this.requestUpdate(), this.onSettingsChanged && (this.dispatchEvent(
-      new CustomEvent("onSettingsChanged", {
-        bubbles: !0,
-        composed: !0,
-        detail: t
-      })
-    ), (e = this.onSettingsChanged) == null || e.call(this, t));
-  }
-  _onRowMouseDown(t, e) {
-    if (this.handleMouseDown(t, e), t.shiftKey) {
-      t.currentTarget && t.currentTarget.classList.add("no-select");
-      const o = window.getSelection();
-      o && o.removeAllRanges();
+    // 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 header = this.columns
+            .map((col) => 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 data = rows.map((row) => {
+            const formattedRow = {};
+            this.columns.forEach((col) => {
+                const columnName = 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 maxContentLength = Math.max(col.headerName?.length || 10, // Dĺžka názvu stĺpca
+            ...data.map((row) => row[col.headerName || '']?.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) &&
+            this.onRowsScrollEnd &&
+            !this.isLoading &&
+            !this.scrollToEnd) {
+            this.scrollToEnd = true;
+            this.onRowsScrollEnd();
+        }
+    }
+    handleScroll(_event) {
+        // every scroll, re‑test
+        this._maybeTriggerScrollEnd();
+    }
+    // handleScroll(event: Event) {
+    //     const container = event.target as HTMLElement;
+    //     if (
+    //         container.scrollTop + container.clientHeight >=
+    //             container.scrollHeight - (this.scrollEndThreshold || 100) &&
+    //         this.onRowsScrollEnd &&
+    //         !this.isLoading &&
+    //         !this.scrollToEnd
+    //     ) {
+    //         this.scrollToEnd = true;
+    //         this.onRowsScrollEnd();
+    //     }
+    // }
+    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;
+        }
+        this.initTable();
+        this.requestUpdate();
+        if (this.onSettingsChanged) {
+            this.dispatchEvent(new CustomEvent('onSettingsChanged', {
+                bubbles: true,
+                composed: true,
+                detail: value,
+            }));
+            this.onSettingsChanged?.(value);
+        }
     }
-  }
-  _onRowMouseUp(t) {
-    t.currentTarget.classList.remove("no-select");
-  }
-  _rowUnselectAll(t) {
-    t.resetRowSelection(), this.focusedRowIndex = 0;
-  }
-  render() {
-    var C, w, S, v, I;
-    const t = ((C = this.columns) == null ? void 0 : C.filter((i) => {
-      var b;
-      return (((b = i.headerName) == null ? void 0 : b.toLowerCase()) || i.field.toLowerCase()).includes(this.filterText);
-    })) || [], e = this.enableMultiRowSelection ? [
-      {
-        id: "checkboxForMultiselect",
-        type: "checkbox",
-        minSize: 30,
-        size: 30,
-        enablePinning: !1,
-        enableResizing: !1,
-        header: ({ table: i }) => u`
+    _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?.toLowerCase() || 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="${() => i.getIsSomeRowsSelected() ? this._rowUnselectAll(i) : i.toggleAllRowsSelected()}"
-                                  .checked="${i.getIsAllRowsSelected()}"
-                                  .indeterminate="${i.getIsSomeRowsSelected()}"
+                                  .onChange="${() => table.getIsSomeRowsSelected()
+                        ? this._rowUnselectAll(table)
+                        : table.toggleAllRowsSelected()}"
+                                  .checked="${table.getIsAllRowsSelected()}"
+                                  .indeterminate="${table.getIsSomeRowsSelected()}"
                               ></lit-checkbox>
                           </div>
                       `,
-        cell: ({ table: i, row: r }) => u`
+                    cell: ({ table, row }) => html `
                           <div
                               style="padding: 0.1875rem 0px 0px 0px"
-                              @click=${(b) => b.stopPropagation()}
+                              @click=${(e) => e.stopPropagation()}
                           >
                               <lit-checkbox
                                   type="checkbox"
-                                  .onChange="${(b) => {
-          b.stopPropagation(), r.toggleSelected(b.target.checked);
-        }}"
-                                  .checked="${r.getIsSelected()}"
-                                  ?disabled="${!r.getCanSelect()}"
-                                  .indeterminate="${r.getIsSomeSelected()}"
+                                  .onChange="${(e) => {
+                        e.stopPropagation();
+                        row.toggleSelected(e.target.checked);
+                    }}"
+                                  .checked="${row.getIsSelected()}"
+                                  ?disabled="${!row.getCanSelect()}"
+                                  .indeterminate="${row.getIsSomeSelected()}"
                               ></lit-checkbox>
                           </div>
-                      `
-      }
-    ] : [];
-    at() !== this.userLang && dt(this.userLang || "cs"), this.table = this.tableController.table({
-      data: this.rows || [],
-      columns: [...e, ...this.getTanstackColumns(this.getColumns)],
-      columnResizeMode: "onChange",
-      columnResizeDirection: "ltr",
-      defaultColumn: {
-        size: this.columnDefaultSize || void 0,
-        //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 },
-        grouping: [...this.initialGroups || []],
-        columnVisibility: { ...this.initialColumnVisibility },
-        columnPinning: {
-          left: [...this.leftPinnedColumns || [], "checkboxForMultiselect"],
-          right: ["actions"]
+                      `,
+                },
+            ]
+            : [];
+        if (getLocale() !== this.userLang) {
+            setLocale(this.userLang || 'cs');
         }
-      },
-      state: {
-        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
-      },
-      filterFns: {
-        dateRangeFilterFn: Y,
-        dateFilterFn: Z,
-        multiselectFilterFn: J
-      },
-      // debugTable: true,
-      enableRowSelection: this.enableRowSelection,
-      enableMultiRowSelection: this.enableMultiRowSelection,
-      enableColumnPinning: this.enableColumnPinning,
-      enableGrouping: this.enableGrouping,
-      manualFiltering: this.server,
-      manualSorting: this.server,
-      enableSorting: this.enableSorting,
-      getRowId: (i, r) => this.getRowId ? this.getRowId(i, r) : r.toString(),
-      // groupedColumnMode: 'reorder',
-      getCoreRowModel: bt(),
-      getSortedRowModel: ft(),
-      getFilteredRowModel: mt(),
-      getFacetedRowModel: gt(),
-      getGroupedRowModel: ut(),
-      getExpandedRowModel: pt(),
-      getFacetedUniqueValues: ht(),
-      onColumnFiltersChange: (i) => {
-        this.currentScrollTop = 0;
-        const r = this.tableContainerRef.value;
-        r && (r.scrollTop = 0);
-        const b = typeof i == "function" ? i(this.table.getState().columnFilters) : i;
-        this.initialFiltering = b, this.onColumnFiltersChanged && this.onColumnFiltersChanged(this.table, b);
-      },
-      onSortingChange: (i) => {
-        this.currentScrollTop = 0;
-        const r = this.tableContainerRef.value;
-        r && (r.scrollTop = 0);
-        const b = typeof i == "function" ? i(this.table.getState().sorting) : i;
-        this.initialSorting = b, this.onColumnSortChanged && this.onColumnSortChanged(this.table, b);
-      },
-      onRowSelectionChange: (i) => {
-        const r = typeof i == "function" ? i(this.rowsSelected) : i;
-        this.rowsSelected = r, this.onRowSelectionChanged && this.onRowSelectionChanged(this.table, r);
-      },
-      onColumnSizingChange: (i) => {
-        const r = typeof i == "function" ? i(this.table.getState().columnSizing) : i;
-        this.columnSizing = r, this.onColumnResize && this.onColumnResize(this.table, r);
-      },
-      onExpandedChange: (i) => {
-        const r = typeof i == "function" ? i(this.initialRowExpanded) : i;
-        this.initialRowExpanded = et.isEmpty(r) ? this.initialRowExpanded : r, this.requestUpdate();
-      },
-      onColumnOrderChange: (i) => {
-        const r = typeof i == "function" ? i(this.columnOrder) : i;
-        this.columnOrder = r, this.render(), this.onColumnOrderChanged && this.onColumnOrderChanged(this.table, r);
-      },
-      onColumnVisibilityChange: (i) => {
-        const r = typeof i == "function" ? i(this.table.getState().columnVisibility) : i;
-        this.columnVisibility = r, this.onColumnVisibilityChanged && this.onColumnVisibilityChanged(this.table, r);
-      }
-    }), this.rowsCount = this.table.getRowModel().rows.length;
-    const o = this.enableRowVirtualization ? (w = this.rowVirtualizerController) == null ? void 0 : w.getVirtualizer() : null, d = this.enableColumnVirtualization ? (S = this.columnVirtualizerController) == null ? void 0 : S.getVirtualizer() : null, s = (d == null ? void 0 : d.getVirtualItems()) ?? [], { rows: p } = this.table.getRowModel(), g = o ? o.getVirtualItems() : p.map((i, r) => ({
-      key: r,
-      index: r,
-      start: r * this.getRowHeight(),
-      end: (r + 1) * this.getRowHeight(),
-      size: this.getRowHeight(),
-      lane: 0
-    }));
-    let h, m;
-    d && (s != null && s.length) && this.enableColumnVirtualization && (h = ((v = s[0]) == null ? void 0 : v.start) ?? 0, m = d.getTotalSize() - (((I = s[s.length - 1]) == null ? void 0 : I.end) ?? 0));
-    let x = window.matchMedia("(max-width: 600px)").matches;
-    return u`
+        this.table = this.tableController.table({
+            data: this.rows || [],
+            columns: [...checkboxColumn, ...this.getTanstackColumns(this.getColumns)],
+            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 },
+                grouping: [...(this.initialGroups || [])],
+                columnVisibility: { ...this.initialColumnVisibility },
+                columnPinning: {
+                    left: [...(this.leftPinnedColumns || []), 'checkboxForMultiselect'],
+                    right: ['actions'],
+                },
+            },
+            state: {
+                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,
+            },
+            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) => this.getRowId ? this.getRowId(row, index) : index.toString(),
+            // groupedColumnMode: 'reorder',
+            getCoreRowModel: getCoreRowModel(),
+            getSortedRowModel: getSortedRowModel(),
+            getFilteredRowModel: getFilteredRowModel(),
+            getFacetedRowModel: getFacetedRowModel(),
+            getGroupedRowModel: getGroupedRowModel(),
+            getExpandedRowModel: getExpandedRowModel(),
+            getFacetedUniqueValues: getFacetedUniqueValues(),
+            onColumnFiltersChange: (updaterOrValue) => {
+                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;
+                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.initialRowExpanded)
+                    : updaterOrValue;
+                this.initialRowExpanded = _.isEmpty(rowExpanded)
+                    ? this.initialRowExpanded
+                    : rowExpanded;
+                this.requestUpdate();
+                // if (this.onColumnResize) {
+                //     this.onColumnResize(this.table, columnSizingState);
+                // }
+            },
+            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);
+                }
+            },
+        });
+        this.rowsCount = this.table.getRowModel().rows.length;
+        // Ak virtualizácia nie je povolená, použijeme celý zoznam riadkov alebo stĺpcov
+        const rowVirtualizer = this.enableRowVirtualization
+            ? this.rowVirtualizerController?.getVirtualizer()
+            : null;
+        const columnVirtualizer = this.enableColumnVirtualization
+            ? this.columnVirtualizerController?.getVirtualizer()
+            : null;
+        const virtualColumns = columnVirtualizer?.getVirtualItems() ?? [];
+        // Get table rows (either virtualized or all)
+        const { rows } = this.table.getRowModel();
+        const rowItems = rowVirtualizer
+            ? rowVirtualizer.getVirtualItems()
+            : rows.map((_, index) => ({
+                key: index,
+                index,
+                start: index * this.getRowHeight(),
+                end: (index + 1) * this.getRowHeight(),
+                size: this.getRowHeight(),
+                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);
+        }
+        let isMobile = window.matchMedia('(max-width: 600px)').matches;
+        return html `
             <div class="data-grid__wrapper">
-                ${this.isScrollable && !x ? u`
+                ${this.isScrollable && !isMobile
+            ? html `
                           <lit-icon-button
                               class="scroll-button left"
                               .disabled="${this.disableScrollLeft}"
-                              @pointerdown="${() => this.startScroll("left")}"
+                              @pointerdown="${() => this.startScroll('left')}"
                               @pointerup="${this.stopScroll}"
                               @pointerleave="${this.stopScroll}"
                               size="small"
@@ -681,7 +1066,7 @@ let n = class extends tt {
                           <lit-icon-button
                               class="scroll-button right"
                               .disabled="${this.disableScrollRight}"
-                              @pointerdown="${() => this.startScroll("right")}"
+                              @pointerdown="${() => this.startScroll('right')}"
                               @pointerup="${this.stopScroll}"
                               @pointerleave="${this.stopScroll}"
                               size="small"
@@ -689,175 +1074,233 @@ let n = class extends tt {
                               icon="arrowRight"
                           >
                           </lit-icon-button>
-                      ` : null}
+                      `
+            : null}
 
-                <div class="grid" ${X(this.tableContainerRef)}>
+                <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"};"
+                            style="height: ${this.enableFiltering ? '4rem' : '1.625rem'};"
                         >
-                            ${T(
-      this.table.getHeaderGroups(),
-      (i) => i.id,
-      (i) => {
-        const r = this.enableColumnVirtualization ? s.map((c) => i.headers[c.index]) : i.headers, b = this.enableColumnVirtualization ? [
-          ...i.headers.filter(
-            (c) => c.column.getIsPinned()
-          ),
-          ...r.filter(
-            (c) => !c.column.getIsPinned()
-          )
-        ] : r;
-        return u`
-                                        <tr class="head" data-index="${i.id}">
-                                            ${h ? u`
+                            ${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: ${h}px;"
+                                                          style=" display: flex; width: ${virtualPaddingLeft}px;"
                                                       ></th>
-                                                  ` : ""}
-                                            ${T(
-          b,
-          (c) => c.id,
-          (c, D) => {
-            var G, A, O, _, B, N, H, U;
-            const y = c.column, F = {
-              visibility: y.columnDef.type === "actions" ? "hidden" : "visible",
-              ...this.getCommonPinningStyles(
-                c.column
-              ),
-              width: `${y == null ? void 0 : y.getSize()}px`,
-              flexGrow: `${y.columnDef.size === void 0 ? 1 : "unset"}`
-            }, f = (G = y.columnDef.meta) == null ? void 0 : G.filterVariant, k = ((O = (A = y == null ? void 0 : y.columnDef) == null ? void 0 : A.meta) == null ? void 0 : O.filterOperators) || ct(f), P = ((_ = y == null ? void 0 : y.getFilterValue()) == null ? void 0 : _.value) || (y == null ? void 0 : y.getFilterValue()) || "", M = ((B = y == null ? void 0 : y.getFilterValue()) == null ? void 0 : B.operator) || ((N = k[0]) == null ? void 0 : N.value);
-            return (f === "select" || f === "multiselect") && ((H = y == null ? void 0 : y.columnDef) != null && H.meta.valueOptions || this.server ? (U = y == null ? void 0 : y.columnDef) != null && U.meta.valueOptions : Array.from(
-              y == null ? void 0 : y.getFacetedUniqueValues().keys()
-            ).sort().slice(0, 5e3).map(
-              (q) => ({
-                value: q,
-                label: q
-              })
-            )), u`
+                                                  `
+                : ''}
+                                            ${repeat(newHeaderColumns, (header) => header.id, (header, index) => {
+                const column = header.column;
+                const style = {
+                    visibility: column.columnDef.type === 'actions'
+                        ? 'hidden'
+                        : 'visible',
+                    ...this.getCommonPinningStyles(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="${E(F)}"
-                                                            colspan="${c.colSpan}"
-                                                            data-index="${c.id}"
+                                                            style="${styleMap(style)}"
+                                                            colspan="${header.colSpan}"
+                                                            data-index="${header.id}"
                                                         >
-                                                            ${c.isPlaceholder ? "" : u`
+                                                            ${header.isPlaceholder
+                    ? ''
+                    : html `
                                                                       <div
-                                                                          class="resizer ${this.table.options.columnResizeDirection} ${c.column.getIsResizing() ? "is-resizing" : ""}"
-                                                                          style="transform:  ${this.table.options.columnResizeMode === "onEnd" && c.column.getIsResizing() ? `translateX(${(this.table.options.columnResizeDirection === "rtl" ? -1 : 1) * (this.table.getState().columnSizingInfo.deltaOffset ?? 0)}px)` : ""}"
+                                                                          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">
-                                                                              ${c.column.getIsFiltered() ? u`
+                                                                              ${header.column.getIsFiltered()
+                        ? html `
                                                                                         <div
                                                                                             class="filterCirclePoint"
                                                                                         ></div>
-                                                                                    ` : ""}
+                                                                                    `
+                        : ''}
                                                                               <div
                                                                                   class="column-header"
-                                                                                  @click=${c.column.getToggleSortingHandler()}
+                                                                                  @click=${header.column.getToggleSortingHandler()}
                                                                               >
                                                                                   <lit-overflow-tooltip
-                                                                                      label="${c.column.columnDef.header}"
+                                                                                      label="${header
+                        .column
+                        .columnDef
+                        .header}"
                                                                                   >
-                                                                                      ${L(
-              c.column.columnDef.header,
-              c.getContext()
-            )}
+                                                                                      ${flexRender(header
+                        .column
+                        .columnDef
+                        .header, header.getContext())}
                                                                                   </lit-overflow-tooltip>
                                                                               </div>
 
                                                                               <div
                                                                                   class="icons-group-pin"
                                                                               >
-                                                                                  ${c.column.getCanSort() ? c.column.getIsSorted() ? c.column.getIsSorted() === "asc" ? u`<slot
+                                                                                  ${header.column.getCanSort()
+                        ? header.column.getIsSorted()
+                            ? header.column.getIsSorted() ===
+                                'asc'
+                                ? html `<slot
                                                                                                     name="iconSortUp"
                                                                                                     ><lit-icon
                                                                                                         class="cursor"
-                                                                                                        @click=${c.column.getToggleSortingHandler()}
+                                                                                                        @click=${header.column.getToggleSortingHandler()}
                                                                                                         size="0.75rem"
                                                                                                         icon="chevronUpFilled"
                                                                                                     ></lit-icon
-                                                                                                ></slot>` : u`<slot
+                                                                                                ></slot>`
+                                : html `<slot
                                                                                                     name="iconSortDown"
                                                                                                 >
                                                                                                     <lit-icon
                                                                                                         class="cursor"
-                                                                                                        @click=${c.column.getToggleSortingHandler()}
+                                                                                                        @click=${header.column.getToggleSortingHandler()}
                                                                                                         size="0.75rem"
                                                                                                         icon="chevronDownFilled"
                                                                                                     ></lit-icon>
-                                                                                                </slot>` : u`<div
+                                                                                                </slot>`
+                            : html `<div
                                                                                                 class="sortFilled"
                                                                                             >
                                                                                                 <lit-icon
                                                                                                     class="cursor"
-                                                                                                    @click=${c.column.getToggleSortingHandler()}
+                                                                                                    @click=${header.column.getToggleSortingHandler()}
                                                                                                     size="0.75rem"
                                                                                                     icon="sortFilled"
                                                                                                 ></lit-icon>
-                                                                                            </div>` : u`<div></div>`}
+                                                                                            </div>`
+                        : html `<div></div>`}
                                                                                   <div class="flex">
-                                                                                      ${this.actionButtonsInMenu ? u`
-                                                                                                <lit-data-grid-action-buttons-popover
-                                                                                                    .group="${c.column.getToggleGroupingHandler()}"
-                                                                                                    .pin="${() => this.togglePin(
-              c
-            )}"
-                                                                                                    .header="${c}"
-                                                                                                    .table="${this.table}"
-                                                                                                ></lit-data-grid-action-buttons-popover>
-                                                                                            ` : u`
-                                                                                                ${c.column.getCanPin() ? u`
+                                                                                      ${!this
+                        .actionButtonsInMenu
+                        ? html `
+                                                                                                ${header.column.getCanPin()
+                            ? html `
                                                                                                           <lit-icon-button
-                                                                                                              @click="${() => this.togglePin(
-              c
-            )}"
+                                                                                                              @click="${() => this.togglePin(header)}"
                                                                                                               size="small"
                                                                                                               variant="text"
                                                                                                               icon="pin"
-                                                                                                              .active="${c.column.getIsPinned()}"
+                                                                                                              .active="${header.column.getIsPinned()}"
                                                                                                           >
                                                                                                           </lit-icon-button>
                                                                                                           <simple-tooltip
                                                                                                               placement="bottom"
-                                                                                                              >${c.column.getIsPinned() ? R(
-              "Zrušit připnutí sloupce"
-            ) : R(
-              "Připnout sloupec vlevo"
-            )}
+                                                                                                              >${header.column.getIsPinned()
+                                ? msg('Zrušit připnutí sloupce')
+                                : msg('Připnout sloupec vlevo')}
                                                                                                           </simple-tooltip>
-                                                                                                      ` : ""}
-                                                                                                ${c.column.getCanGroup() ? u`
+                                                                                                      `
+                            : ''}
+                                                                                                ${header.column.getCanGroup()
+                            ? html `
                                                                                                           <lit-icon-button
-                                                                                                              @click="${c.column.getToggleGroupingHandler()}"
+                                                                                                              @click="${header.column.getToggleGroupingHandler()}"
                                                                                                               size="small"
                                                                                                               variant="text"
-                                                                                                              .active="${c.column.getIsGrouped()}"
+                                                                                                              .active="${header.column.getIsGrouped()}"
                                                                                                               icon="agregation"
                                                                                                           >
                                                                                                           </lit-icon-button>
                                                                                                           <simple-tooltip
                                                                                                               placement="bottom"
                                                                                                           >
-                                                                                                              ${c.column.getIsGrouped() ? R(
-              "Zrušit seskupení"
-            ) : R(
-              "Seskupit sloupec"
-            )}</simple-tooltip
+                                                                                                              ${header.column.getIsGrouped()
+                                ? msg('Zrušit seskupení')
+                                : msg('Seskupit sloupec')}</simple-tooltip
                                                                                                           >
-                                                                                                      ` : ""}
+                                                                                                      `
+                            : ''}
+                                                                                            `
+                        : 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 && !c.column.getIsPinned() && !c.column.getIsGrouped() && ![
-              "checkbox",
-              "actions"
-            ].includes(
-              c.column.id
-            ) ? u`<div
+                                                                                      ${this
+                        .enableColumnOrdering &&
+                        !header.column.getIsPinned() &&
+                        !header.column.getIsGrouped() &&
+                        ![
+                            'checkbox',
+                            'actions',
+                        ].includes(header
+                            .column
+                            .id)
+                        ? html `<div
                                                                                                     class="drag-handle"
                                                                                                 >
                                                                                                     <lit-icon
@@ -867,235 +1310,296 @@ let n = class extends tt {
                                                                                                 </div>
                                                                                                 <simple-tooltip
                                                                                                     placement="bottom"
-                                                                                                    >${R(
-              "Přesunout sloupec"
-            )}</simple-tooltip
-                                                                                                > ` : null}
+                                                                                                    >${msg('Přesunout sloupec')}</simple-tooltip
+                                                                                                > `
+                        : null}
                                                                                   </div>
                                                                               </div>
                                                                           </div>
                                                                       </div>
-                                                                      ${c.column.getCanFilter() ? u`
+                                                                      ${header.column.getCanFilter()
+                        ? html `
                                                                                 <div>
                                                                                     <filter-inputs
-                                                                                        .minFilterCharacters=${this.minFilterCharacters}
-                                                                                        .column=${c.column}
-                                                                                        .dateFormat=${this.dateFormat}
-                                                                                        .userLang=${this.userLang}
-                                                                                        @filter-tab=${this.handleFilterTabNavigation}
-                                                                                        .server=${this.server}
-                                                                                        .value="${P}"
-                                                                                        .operator="${M}"
-                                                                                        .filterVariant="${f}"
-                                                                                        .filterOperators="${k}"
+                                                                                        .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}
+                                                                            `
+                        : null}
                                                                   `}
                                                             <div
                                                                 class="resize-handle"
-                                                                @dblclick="${($) => {
-              $.target.classList.contains(
-                "resize-handle"
-              ) && c.column.resetSize();
-            }}"
-                                                                @mousedown="${($) => {
-              $.preventDefault(), $.stopPropagation(), $.target.classList.contains(
-                "resize-handle"
-              ) && c.getResizeHandler()(
-                $
-              );
-            }}"
-                                                                @touchstart="${($) => {
-              $.preventDefault(), $.stopPropagation(), $.target.classList.contains(
-                "resize-handle"
-              ) && c.getResizeHandler()(
-                $
-              );
-            }}"
+                                                                @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>
                                                     `;
-          }
-        )}
-                                            ${m ? u`
+            })}
+                                            ${virtualPaddingRight
+                ? html `
                                                       <th
-                                                          style=" display: flex; width: ${m}px;"
+                                                          style=" display: flex; width: ${virtualPaddingRight}px;"
                                                       ></th>
-                                                  ` : ""}
+                                                  `
+                : ''}
                                         </tr>
                                     `;
-      }
-    )}
-                            ${this.isLoading ? u`
+        })}
+                            ${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: ${o && this.table.getRowModel().rows.length > 0 ? o.getTotalSize() + "px" : "auto"};"
+                            style="height: ${rowVirtualizer &&
+            this.table.getRowModel().rows.length > 0
+            ? rowVirtualizer.getTotalSize() + 'px'
+            : 'auto'};"
                         >
-                            ${p.length > 0 ? T(
-      g,
-      (i) => i.key,
-      (i) => {
-        const r = p[i.index], b = r == null ? void 0 : r.getVisibleCells(), c = this.enableColumnVirtualization ? s == null ? void 0 : s.map(
-          (f) => b && b[f.index]
-        ) : b, D = (b == null ? void 0 : b.filter(
-          (f) => f.column.getIsPinned()
-        )) || [], y = this.enableColumnVirtualization ? [.../* @__PURE__ */ new Set([...D, ...c])] : c, F = {
-          transform: o ? `translateY(${i.start}px)` : "none",
-          height: `${this.getRowHeight()}px`,
-          lineHeight: `${this.getRowHeight()}px`,
-          position: o ? "absolute" : "relative"
-        };
-        return r ? u`
+                            ${rows.length > 0
+            ? repeat(rowItems, (item) => item.key, (item) => {
+                const row = rows[item.index];
+                const visibleCells = row?.getVisibleCells();
+                const bodyColumns = this.enableColumnVirtualization
+                    ? virtualColumns?.map((vc) => visibleCells && visibleCells[vc.index])
+                    : visibleCells;
+                const pinnedColumns = visibleCells?.filter((bc) => bc.column.getIsPinned()) || [];
+                const newBodyColumns = this.enableColumnVirtualization
+                    ? [...new Set([...pinnedColumns, ...bodyColumns])]
+                    : bodyColumns;
+                const rowStyle = {
+                    transform: rowVirtualizer
+                        ? `translateY(${item.start}px)`
+                        : 'none',
+                    height: `${this.getRowHeight()}px`,
+                    lineHeight: `${this.getRowHeight()}px`,
+                    position: rowVirtualizer ? 'absolute' : 'relative',
+                };
+                return row
+                    ? html `
                                                     <tr
-                                                        tabindex=${this.enableRowSelection ? "0" : void 0}
-                                                        data-row-index="${r.index}"
-                                                        class="${this.rowsSelected[r.id] ? "selected body" : "body"}"
-                                                        data-index="${i.index}"
-                                                        @click="${r.getIsGrouped() ? r.getToggleExpandedHandler() : (f) => this.handleRowClick(f, r)}"
-                                                        @mousedown=${(f) => this._onRowMouseDown(f, r)}
+                                                        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=${(f) => f.preventDefault()}
-                                                        @dblclick="${() => this.handleRowDoubleClick(r)}"
-                                                        style="${E(F)}"
-                                                        ${X((f) => {
-          f && this.enableRowVirtualization && o && o.measureElement(f);
-        })}
+                                                        @contextmenu=${(e) => e.preventDefault()}
+                                                        @dblclick="${() => this.handleRowDoubleClick(row)}"
+                                                        style="${styleMap(rowStyle)}"
+                                                        ${ref((node) => {
+                        if (node &&
+                            this.enableRowVirtualization &&
+                            rowVirtualizer) {
+                            // Only measure element if virtualization is enabled
+                            rowVirtualizer.measureElement(node);
+                        }
+                    })}
                                                     >
-                                                        ${h ? u`
+                                                        ${virtualPaddingLeft
+                        ? html `
                                                                   <th
-                                                                      style=" display: flex; width: ${h}px;"
+                                                                      style=" display: flex; width: ${virtualPaddingLeft}px;"
                                                                   ></th>
-                                                              ` : ""}
+                                                              `
+                        : ''}
                                                         <!-- Cells for each row -->
-                                                        ${T(
-          y,
-          (f) => f.key,
-          (f) => {
-            var M;
-            this.getButtonSize();
-            const { column: k } = f, P = {
-              ...this.getCommonPinningStyles(
-                f.column
-              ),
-              width: `${(M = f.column) == null ? void 0 : M.getSize()}px`,
-              flexGrow: `${k.columnDef.size === void 0 ? 1 : "unset"}`,
-              background: this.getCellBackgroundColor(
-                f
-              ),
-              lineHeight: `${this.getRowHeight()}px`,
-              padding: k.columnDef.type === "actions" || k.columnDef.type === "checkbox" ? "0" : "0px 14px"
-            };
-            return u`
-                                                                    <td style="${E(P)}">
-                                                                        ${f.getIsGrouped() ? u`<div
+                                                        ${repeat(newBodyColumns, (cell) => cell.key, (cell) => {
+                        const buttonSize = this.getButtonSize();
+                        const { column } = cell;
+                        const style = {
+                            ...this.getCommonPinningStyles(cell.column),
+                            width: `${cell.column?.getSize()}px`,
+                            flexGrow: `${column.columnDef.size === undefined ? 1 : 'unset'}`,
+                            background: this.getCellBackgroundColor(cell),
+                            lineHeight: `${this.getRowHeight()}px`,
+                            padding: column.columnDef.type ===
+                                'actions' ||
+                                column.columnDef.type ===
+                                    'checkbox'
+                                ? '0'
+                                : '0px 14px',
+                        };
+                        return html `
+                                                                    <td style="${styleMap(style)}">
+                                                                        ${cell.getIsGrouped()
+                            ? html `<div
                                                                                   class="grouped-column"
                                                                               >
                                                                                   <lit-icon
                                                                                       class="grouped-column--icon-button"
                                                                                       size="1.25rem"
-                                                                                      icon="${r.getIsExpanded() ? "chevronDownFilled" : "chevron"}"
+                                                                                      icon="${row.getIsExpanded()
+                                ? 'chevronDownFilled'
+                                : 'chevron'}"
                                                                                   ></lit-icon>
                                                                                   <div
                                                                                       class="grouped-column--label"
                                                                                   >
                                                                                       <lit-overflow-tooltip
-                                                                                          label=${f.getValue()}
+                                                                                          label=${cell.getValue()}
                                                                                       >
-                                                                                          ${f.getValue()}
+                                                                                          ${cell.getValue()}
                                                                                       </lit-overflow-tooltip>
                                                                                   </div>
                                                                                   <lit-pill
                                                                                       class="grouped-column--pill"
                                                                                       style="margin-left: 0.5rem"
-                                                                                      count="${r.subRows.length}"
+                                                                                      count="${row
+                                .subRows
+                                .length}"
                                                                                   ></lit-pill>
-                                                                              </div> ` : f.getIsAggregated() ? u`
+                                                                              </div> `
+                            : cell.getIsAggregated()
+                                ? html `
                                                                                     <div
                                                                                         style="flex-grow:1"
                                                                                     >
-                                                                                        ${L(
-              f.column.columnDef.aggregatedCell ?? f.column.columnDef.cell,
-              f.getContext()
-            )}
+                                                                                        ${flexRender(cell
+                                    .column
+                                    .columnDef
+                                    .aggregatedCell ??
+                                    cell
+                                        .column
+                                        .columnDef
+                                        .cell, cell.getContext())}
                                                                                     </div>
-                                                                                ` : f.getIsPlaceholder() ? null : u`<lit-overflow-tooltip
+                                                                                `
+                                : cell.getIsPlaceholder()
+                                    ? null
+                                    : html `<lit-overflow-tooltip
                                                                                       placement="right"
-                                                                                      label=${f.getValue()}
-                                                                                      >${L(
-              f.column.columnDef.cell,
-              f.getContext()
-            )}</lit-overflow-tooltip
+                                                                                      label=${cell.getValue()}
+                                                                                      >${flexRender(cell
+                                        .column
+                                        .columnDef
+                                        .cell, cell.getContext())}</lit-overflow-tooltip
                                                                                   >`}
                                                                     </td>
                                                                 `;
-          }
-        )}
-                                                        ${m ? u`
+                    })}
+                                                        ${virtualPaddingRight
+                        ? html `
                                                                   <th
-                                                                      style=" display: flex; width: ${m}px;"
+                                                                      style=" display: flex; width: ${virtualPaddingRight}px;"
                                                                   ></th>
-                                                              ` : ""}
+                                                              `
+                        : ''}
                                                     </tr>
-                                                ` : null;
-      }
-    ) : null}
+                                                `
+                    : null;
+            })
+            : null}
                         </tbody>
                     </table>
-                    ${this.hideFooter ? "" : u`
+                    ${!this.hideFooter
+            ? html `
                               <slot
                                   part="dataGrid-footer"
                                   name="dataGridFooter"
                                   class="footer-container"
                               >
                                   <div class="numberCount">
-                                      ${R("Počet záznamů")}:
+                                      ${msg('Počet záznamů')}:
                                       ${this.table.getRowModel().rows.length}
                                       <pre>/</pre>
-                                      ${this.server ? this.totalNumberRows ? this.totalNumberRows : "?" : this.table.getRowModel().rows.length}
-                                      ${this.server ? u`<lit-icon-button
+                                      ${this.server
+                ? this.totalNumberRows
+                    ? this.totalNumberRows
+                    : '?'
+                : this.table.getRowModel().rows.length}
+                                      ${this.server
+                ? html `<lit-icon-button
                                                 icon="reload"
                                                 size="mini"
                                                 variant="text"
                                                 @click="${() => this.handleGetTotalNumber()}"
                                                 style="margin-left: 0.2rem; margin-top: -0.1rem"
-                                            ></lit-icon-button>` : ""}
+                                            ></lit-icon-button>`
+                : ''}
                                   </div>
                                   <div class="right-actions">
                                       <lit-data-grid-density-popover
                                           .density="${this.rowDensity}"
-                                          .setDensity="${(i) => this.handleSetDensity(i)}"
+                                          .setDensity="${(density) => this.handleSetDensity(density)}"
                                       >
                                       </lit-data-grid-density-popover>
                                       <lit-responsive-button
                                           size="medium"
                                           variant="text"
-                                          label=${R("Přizpůsobit sloupce")}
+                                          label=${msg('Přizpůsobit sloupce')}
                                           icon="columns"
                                           @click=${() => this.table.resetColumnSizing()}
                                       ></lit-responsive-button>
-                                      ${this.exportData ? u`
+                                      ${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()}"
+                                                    .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 ? u`
+                                            `
+                : null}
+                                      ${this.enableSettings
+                ? html `
                                                 <div>
                                                     <lit-responsive-button
                                                         variant="dashed"
-                                                        label="${R("Přiřadit sloupec")}"
+                                                        label="${msg('Přiřadit sloupec')}"
                                                         icon="add"
                                                         style="display: inline-block"
                                                         @click="${this.toggleCustomPopover}"
@@ -1103,9 +1607,9 @@ let n = class extends tt {
 
                                                     <simple-popper
                                                         .showing=${this.isOpen}
-                                                        .placement=${"top-end"}
-                                                        .manualOpening=${!0}
-                                                        .maxWidthAsTarget=${!1}
+                                                        .placement=${'top-end'}
+                                                        .manualOpening=${true}
+                                                        .maxWidthAsTarget=${false}
                                                         .onClose=${() => this.closePopover()}
                                                     >
                                                         <div
@@ -1114,55 +1618,57 @@ let n = class extends tt {
                                                         >
                                                             <lit-input
                                                                 .value=${this.filterText}
-                                                                .onInput=${(i) => {
-      var r;
-      this.filterText = ((r = i == null ? void 0 : i.toLowerCase) == null ? void 0 : r.call(i)) || "";
-    }}
+                                                                .onInput=${(value) => {
+                    this.filterText =
+                        value?.toLowerCase?.() ||
+                            '';
+                }}
                                                                 .onClear=${() => {
-      this.filterText = "";
-    }}
-                                                                placeholder="${R(
-      "Zadejte název sloupce"
-    )}"
+                    this.filterText = '';
+                }}
+                                                                placeholder="${msg('Zadejte název sloupce')}"
                                                             ></lit-input>
                                                         </div>
                                                         <lit-menu tabindex="0">
-                                                            ${this.columns.filter((i) => {
-      var b;
-      return (((b = i == null ? void 0 : i.headerName) == null ? void 0 : b.toLowerCase()) || (i == null ? void 0 : i.field.toLowerCase())).includes(
-        this.filterText
-      );
-    }).sort((i, r) => {
-      const b = i.field.startsWith("_"), c = r.field.startsWith("_");
-      return b && !c ? 1 : !b && c ? -1 : (i.headerName || i.field).localeCompare(
-        r.headerName || r.field
-      );
-    }).map(
-      (i) => {
-        var r, b;
-        return u`
+                                                            ${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(
-          i == null ? void 0 : i.field
-        )}
-                                                                            .isActive=${((r = this.columnVisibility) == null ? void 0 : r[i == null ? void 0 : i.field]) !== !1}
+                                                                            .onClick=${() => this.toggleColumn(col?.field)}
+                                                                            .isActive=${!(this
+                    .columnVisibility?.[col?.field] === false)}
                                                                         >
                                                                             <span
                                                                                 class="menu-item--multiple"
                                                                             >
                                                                                 <lit-checkbox
                                                                                     class="cursor"
-                                                                                    .checked=${((b = this.columnVisibility) == null ? void 0 : b[i == null ? void 0 : i.field]) !== !1}
+                                                                                    .checked=${!(this
+                    .columnVisibility?.[col
+                    ?.field] === false)}
                                                                                 ></lit-checkbox>
-                                                                                ${(i == null ? void 0 : i.headerName) || (i == null ? void 0 : i.field)}
+                                                                                ${col?.headerName ||
+                    col?.field}
                                                                             </span>
                                                                         </lit-menu-item>
-                                                                    `;
-      }
-    )}
+                                                                    `)}
                                                         </lit-menu>
 
-                                                        ${it(t.length, 0) ? u`
+                                                        ${isEqual(filteredColumns.length, 0)
+                    ? html `
                                                                   <div
                                                                       style="display: flex; flex-direction: column; align-items: center; padding: 1rem;"
                                                                   >
@@ -1172,10 +1678,11 @@ let n = class extends tt {
                                                                           <not-found></not-found>
                                                                       </div>
                                                                       <div>
-                                                                          ${R("Nenalezeno")}
+                                                                          ${msg('Nenalezeno')}
                                                                       </div>
                                                                   </div>
-                                                              ` : null}
+                                                              `
+                    : null}
                                                     </simple-popper>
 
                                                     <lit-icon-button
@@ -1186,42 +1693,49 @@ let n = class extends tt {
                                                     ></lit-icon-button>
                                                     <data-grid-settings
                                                         .onClose="${() => {
-      this.isOpenModal = !1;
-    }}"
+                    this.isOpenModal = false;
+                }}"
                                                         .isOpenModal="${this.isOpenModal}"
                                                         .enableFiltering="${this.enableFiltering}"
                                                         .enableSorting="${this.enableSorting}"
-                                                        .columnDefaultSize="${this.columnDefaultSize}"
-                                                        .columnGroupedColor="${this.columnGroupedColor}"
-                                                        .rowAggregationColor="${this.rowAggregationColor}"
+                                                        .columnDefaultSize="${this
+                    .columnDefaultSize}"
+                                                        .columnGroupedColor="${this
+                    .columnGroupedColor}"
+                                                        .rowAggregationColor="${this
+                    .rowAggregationColor}"
                                                         .enableGrouping="${this.enableGrouping}"
-                                                        .enableColumnPinning="${this.enableColumnPinning}"
+                                                        .enableColumnPinning="${this
+                    .enableColumnPinning}"
                                                         .exportData="${this.exportData}"
-                                                        .actionButtonsInMenu="${this.actionButtonsInMenu}"
+                                                        .actionButtonsInMenu="${this
+                    .actionButtonsInMenu}"
                                                         .hideFooter="${this.hideFooter}"
-                                                        .onSettingsChangedModal="${this.onSettingsChangedCallback.bind(
-      this
-    )}"
+                                                        .onSettingsChangedModal="${this.onSettingsChangedCallback.bind(this)}"
                                                     ></data-grid-settings>
                                                 </div>
-                                            ` : null}
+                                            `
+                : null}
                                   </div>
                               </slot>
-                          `}
+                          `
+            : ''}
                 </div>
-                ${this.table.getRowModel().rows.length < 1 && !this.isLoading ? u` <div class="data-grid__empty">
+                ${this.table.getRowModel().rows.length < 1 && !this.isLoading
+            ? html ` <div class="data-grid__empty">
                           <div style="max-height: 7.125rem; max-width: 7.125rem">
                               <not-found></not-found>
                           </div>
-                          <div class="data-grid__empty-text">${R("Nic dalšího tu není")}</div>
-                      </div>` : null}
+                          <div class="data-grid__empty-text">${msg('Nic dalšího tu není')}</div>
+                      </div>`
+            : null}
             </div>
         `;
-  }
+    }
 };
-n.styles = [
-  // styles,
-  yt`
+LitDataGridTanstack.styles = [
+    // styles,
+    css `
             *,
             *::before,
             *::after {
@@ -1507,227 +2021,226 @@ n.styles = [
             .data-grid__empty-text {
                 color: var(--text-primary, #5d6371);
             }
-        `
+        `,
 ];
-l([
-  a({ type: Array, reflect: !0 })
-], n.prototype, "row", 2);
-l([
-  a({ type: Array })
-], n.prototype, "columns", 2);
-l([
-  a({ type: Number })
-], n.prototype, "columnDefaultSize", 2);
-l([
-  a({ type: Number })
-], n.prototype, "columnDefaultMinSize", 2);
-l([
-  a({ type: Number })
-], n.prototype, "columnDefaultMaxSize", 2);
-l([
-  a({ type: String })
-], n.prototype, "columnGroupedColor", 2);
-l([
-  a({ type: String })
-], n.prototype, "rowAggregationColor", 2);
-l([
-  a({ type: Boolean })
-], n.prototype, "enableRowVirtualization", 2);
-l([
-  a({ type: Boolean })
-], n.prototype, "enableColumnVirtualization", 2);
-l([
-  a({ type: Boolean })
-], n.prototype, "enableColumnPinning", 2);
-l([
-  a({ type: Boolean })
-], n.prototype, "enableColumnOrdering", 2);
-l([
-  a({ type: Boolean })
-], n.prototype, "enableGrouping", 2);
-l([
-  a({ type: Boolean })
-], n.prototype, "enablePinning", 2);
-l([
-  a({ type: Boolean })
-], n.prototype, "exportData", 2);
-l([
-  a({ type: Boolean })
-], n.prototype, "actionButtonsInMenu", 2);
-l([
-  a({ type: String })
-], n.prototype, "id", 2);
-l([
-  a({ type: Array })
-], n.prototype, "initialGroups", 2);
-l([
-  a({ type: Array })
-], n.prototype, "initialSorting", 2);
-l([
-  a({ type: Object })
-], n.prototype, "initialColumnVisibility", 2);
-l([
-  a({ type: Object })
-], n.prototype, "initialRowExpanded", 2);
-l([
-  a({ type: Object })
-], n.prototype, "columnSizing", 2);
-l([
-  a({ type: Array })
-], n.prototype, "leftPinnedColumns", 2);
-l([
-  a({ type: Array })
-], n.prototype, "rightPinnedColumns", 2);
-l([
-  a({ type: Boolean })
-], n.prototype, "enableFiltering", 2);
-l([
-  a({ type: Boolean })
-], n.prototype, "enableSorting", 2);
-l([
-  a({ type: String })
-], n.prototype, "userLang", 2);
-l([
-  a({ type: String })
-], n.prototype, "dateFormat", 2);
-l([
-  a({ type: Boolean })
-], n.prototype, "isLoading", 2);
-l([
-  a({ type: Boolean })
-], n.prototype, "enableRowSelection", 2);
-l([
-  a({ type: Array })
-], n.prototype, "initialFiltering", 2);
-l([
-  a({ type: Boolean })
-], n.prototype, "server", 2);
-l([
-  a({ type: Number })
-], n.prototype, "scrollEndThreshold", 2);
-l([
-  a({ type: String })
-], n.prototype, "rowDensity", 2);
-l([
-  a({ type: Boolean })
-], n.prototype, "enableMultiRowSelection", 2);
-l([
-  a({ type: Number })
-], n.prototype, "totalNumberRows", 2);
-l([
-  a({ type: Number })
-], n.prototype, "minFilterCharacters", 2);
-l([
-  a({ type: Boolean })
-], n.prototype, "localizeDate", 2);
-l([
-  a({ type: Boolean })
-], n.prototype, "rowsSelected", 2);
-l([
-  a({ type: Boolean })
-], n.prototype, "enableSettings", 2);
-l([
-  a({ attribute: !1 })
-], n.prototype, "onSettingsChanged", 2);
-l([
-  a({ type: Function })
-], n.prototype, "onRowClick", 2);
-l([
-  a({ type: Function })
-], n.prototype, "onRowsScrollEnd", 2);
-l([
-  a({ type: Function })
-], n.prototype, "onRowDoubleClick", 2);
-l([
-  a({ type: Function })
-], n.prototype, "rowDensityChange", 2);
-l([
-  a({ type: Function })
-], n.prototype, "exportExcelFn", 2);
-l([
-  a({ type: Function })
-], n.prototype, "exportCsvFn", 2);
-l([
-  a({ type: Function })
-], n.prototype, "getTotalNumberFn", 2);
-l([
-  a({ type: Function })
-], n.prototype, "onCellKeyDown", 2);
-l([
-  a({ type: Function })
-], n.prototype, "getRowId", 2);
-l([
-  a({ type: Function })
-], n.prototype, "onColumnResize", 2);
-l([
-  a({ type: Boolean })
-], n.prototype, "onColumnFiltersChanged", 2);
-l([
-  a({ type: Boolean })
-], n.prototype, "onColumnSortChanged", 2);
-l([
-  a({ type: Function })
-], n.prototype, "onRowSelectionChanged", 2);
-l([
-  a({ type: Function })
-], n.prototype, "onColumnOrderChanged", 2);
-l([
-  a({ type: Boolean })
-], n.prototype, "hideFooter", 2);
-l([
-  a({ type: Object })
-], n.prototype, "columnVisibility", 2);
-l([
-  a({ type: Function })
-], n.prototype, "onColumnVisibilityChanged", 2);
-l([
-  a({ type: Function })
-], n.prototype, "onMouseDown", 2);
-l([
-  a({ type: Function })
-], n.prototype, "onRowFocusChanged", 2);
-l([
-  a({ type: Number })
-], n.prototype, "focusedRowIndex", 2);
-l([
-  a({ type: Boolean })
-], n.prototype, "autoFocus", 2);
-l([
-  z()
-], n.prototype, "rowsCount", 2);
-l([
-  z()
-], n.prototype, "isScrollable", 2);
-l([
-  z()
-], n.prototype, "disableScrollLeft", 2);
-l([
-  z()
-], n.prototype, "disableScrollRight", 2);
-l([
-  z()
-], n.prototype, "columnOrder", 2);
-l([
-  z()
-], n.prototype, "table", 2);
-l([
-  z()
-], n.prototype, "isOpen", 2);
-l([
-  z()
-], n.prototype, "filterText", 2);
-l([
-  z()
-], n.prototype, "isOpenModal", 2);
-l([
-  Q("tbody")
-], n.prototype, "tableBody", 2);
-l([
-  Q(".grid")
-], n.prototype, "_container", 2);
-n = l([
-  ot("lit-data-grid-tanstack")
-], n);
-export {
-  n as LitDataGridTanstack
-};
+__decorate([
+    property({ type: Array, reflect: true })
+], LitDataGridTanstack.prototype, "row", void 0);
+__decorate([
+    property({ type: Array })
+], LitDataGridTanstack.prototype, "columns", 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: 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, "localizeDate", void 0);
+__decorate([
+    property({ type: Boolean })
+], LitDataGridTanstack.prototype, "rowsSelected", void 0);
+__decorate([
+    property({ type: Boolean })
+], LitDataGridTanstack.prototype, "enableSettings", 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, "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([
+    state()
+], LitDataGridTanstack.prototype, "rowsCount", 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);
+LitDataGridTanstack = __decorate([
+    customElement('lit-data-grid-tanstack')
+], LitDataGridTanstack);
+export { LitDataGridTanstack };
+//# sourceMappingURL=lit-data-grid-tanstack.js.map