overview-components 1.1.0 → 1.1.10

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

@@ -5,15 +5,16 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { css, html, LitElement } from 'lit';
-import _ from 'lodash';
+import _, { isEqual } from 'lodash';
 import { msg } from '@lit/localize';
-import { customElement, property, state } from 'lit/decorators.js';
+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';
@@ -22,19 +23,20 @@ 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/ilustration/not-found.js';
-import '../shared/lit-overflow-tooltip.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 { getDefaultOperator, isAllowedType } from '../utils/getOperatorByType.js';
+import { getOperatorsByColumnType } from '../utils/getOperatorByType.js';
 let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
     constructor() {
         super(...arguments);
@@ -43,7 +45,9 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
         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 = '';
@@ -53,13 +57,10 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
         this.leftPinnedColumns = [];
         this.rightPinnedColumns = [];
         this.enableFiltering = true;
+        this.enableSorting = true;
         this.userLang = 'cs';
         this.dateFormat = null;
         this.isLoading = false;
-        this.onColumnResize = () => { };
-        this.onColumnFiltersChanged = (table, filterModel) => { };
-        this.onColumnSortChanged = (table, sortModel) => { };
-        this.onRowSelectionChanged = (table, selectedRows) => { };
         this.enableRowSelection = false;
         this.initialFiltering = [];
         this.server = false;
@@ -69,21 +70,34 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
         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.filters = [];
-        this.filtersServer = [];
-        this.sorting = [];
-        this.rowExpanded = {};
-        this.rowHeight = 31;
+        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.operatorMap = new Map();
         this.getCellBackgroundColor = (cell) => {
             if (cell.getIsGrouped()) {
                 return this.columnGroupedColor ?? `var(--color-primary-light, #f0fadf)`;
@@ -118,81 +132,128 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
     }
     // lifecycle
     connectedCallback() {
-        super.connectedCallback();
-        if (this.server && this.initialFiltering) {
-            for (const filter of this.initialFiltering) {
-                if (typeof filter.operator === 'string') {
-                    this.operatorMap.set(filter.id, filter.operator);
-                }
-            }
-        }
-        if (this.server) {
-            this.columns.forEach((column) => {
-                if (!this.operatorMap.has(column.field)) {
-                    const columnType = column.type;
-                    if (isAllowedType(columnType)) {
-                        const defaultOperator = getDefaultOperator(columnType);
-                        this.operatorMap.set(column.field, defaultOperator);
-                    }
-                }
-            });
-        }
         this.initRowVirtualizer();
         this.initColumnVirtualizer();
         this.initTable();
         window.addEventListener('resize', this.updateScrollState);
-        document.addEventListener('keydown', this.handleKeyDown.bind(this));
+        super.connectedCallback();
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         window.removeEventListener('resize', this.updateScrollState);
-        document.removeEventListener('keydown', this.handleKeyDown.bind(this));
     }
     updated(changedProperties) {
-        if ((changedProperties.has('rowsCount') || changedProperties.has('rowDensity')) &&
-            this.enableRowVirtualization) {
+        if (changedProperties.has('rowsCount') && this.enableRowVirtualization) {
             this.scrollToEnd = false;
-            this.initRowVirtualizer();
-            this.requestUpdate();
-        }
-        if (changedProperties.has('columns') && this.enableColumnVirtualization) {
-            this.initColumnVirtualizer();
+            const virtualizer = this.rowVirtualizerController?.getVirtualizer();
+            if (virtualizer) {
+                virtualizer.setOptions({
+                    ...virtualizer.options,
+                    count: this.table?.getRowModel()?.rows.length,
+                });
+            }
             this.requestUpdate();
         }
-        if (changedProperties.has('initialFiltering')) {
-            if (this.server && this.initialFiltering) {
-                for (const filter of this.initialFiltering) {
-                    if (typeof filter.operator === 'string') {
-                        this.operatorMap.set(filter.id, filter.operator);
-                    }
-                }
-                this.filtersServer = [...(this.initialFiltering || [])];
-            }
-            else {
-                this.filters = [...(this.initialFiltering || [])];
+        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('initialSorting')) {
-            this.sorting = [...(this.initialSorting || [])];
-        }
-        if (changedProperties.has('rowDensity')) {
-            this.rowHeight = this.getRowHeight();
-        }
-        if (changedProperties.has('initialRowExpanded')) {
-            this.rowExpanded = this.initialRowExpanded;
-        }
         if (changedProperties.has('row') || changedProperties.has('columns')) {
             this.initTable();
             this.requestUpdate();
         }
+        if (changedProperties.has('rowDensity') && this.enableRowVirtualization) {
+            const virtualizer = this.rowVirtualizerController?.getVirtualizer();
+            if (virtualizer) {
+                virtualizer.setOptions({
+                    ...virtualizer.options,
+                    estimateSize: () => this.getRowHeight(),
+                });
+                // Force full re-measure of all rows with new height
+                virtualizer.measure();
+            }
+            this.requestUpdate();
+        }
     }
     firstUpdated() {
-        this.addEventListener('filter-operator-change', (e) => this.handleOperatorChange(e));
         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);
+            },
+        });
     }
     async loadXLSX() {
         if (!window.XLSX && !this.server) {
@@ -235,6 +296,11 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
             this.rowDensityChange(this.table, density);
         }
     }
+    handleMouseDown(event, row) {
+        if (this.onMouseDown) {
+            this.onMouseDown(event, row);
+        }
+    }
     handleFilterTabNavigation(event) {
         const { direction, currentFilter } = event.detail;
         // Získajte všetky filter-inputs elementy z DOM
@@ -287,39 +353,15 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
         // Nastav focus na ďalší filter podľa smeru
         filterInputs[nextIndex].focus();
     }
-    // scroll by keyboard arrows
-    handleKeyDown(event) {
-        if (_.isEmpty(this.rowsSelected) && this.enableMultiRowSelection)
-            return;
-        const rows = this.table.getRowModel().rows;
-        const selectedRowId = Object.keys(this.rowsSelected).find((key) => this.rowsSelected[key]);
-        const currentIndex = selectedRowId
-            ? this.table.getSelectedRowModel().rowsById[selectedRowId].index
-            : {};
-        if (event.key === 'ArrowDown') {
-            const nextIndex = Math.min(currentIndex + 1, (rows.length ?? 0) - 1);
-            this.rowsSelected = { [rows[nextIndex].id]: true };
-            this.lastSelectedIndex = nextIndex;
-        }
-        else if (event.key === 'ArrowUp') {
-            const prevIndex = Math.max(currentIndex - 1, 0);
-            this.rowsSelected = { [rows[prevIndex].id]: true };
-            this.lastSelectedIndex = prevIndex;
-        }
-        else if (event.key === 'Enter' && this.rowsSelected) {
-            if (selectedRowId) {
-                this.handleRowDoubleClick(this.table.getSelectedRowModel().rowsById[selectedRowId].original);
-            }
-        }
-    }
     // virtualization
     initRowVirtualizer() {
         this.rowVirtualizerController = new VirtualizerController(this, {
             count: this.table?.getRowModel()?.rows.length || this.row?.length || 1,
             getScrollElement: () => this.tableContainerRef.value,
-            estimateSize: () => this.rowHeight,
+            estimateSize: () => this.getRowHeight(),
             overscan: 5,
             initialOffset: this.currentScrollTop,
+            enabled: this.enableRowVirtualization,
         });
     }
     initTable() {
@@ -330,40 +372,126 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
             horizontal: true,
             count: this.table?.getVisibleLeafColumns().length || this.columns.length || 1,
             getScrollElement: () => this.tableContainerRef.value,
-            estimateSize: (index) => this.table.getVisibleLeafColumns()[index].getSize() || 200,
+            estimateSize: (index) => this.table.getVisibleLeafColumns()[index]?.getSize() || 200,
             overscan: 5,
+            enabled: this.enableColumnVirtualization,
         });
     }
     handleRowClick(event, row) {
-        const isShiftPressed = event.shiftKey;
-        if (this.onRowClick) {
-            this.onRowClick(this.table, row);
-        }
-        if (this.enableRowSelection && !this.enableMultiRowSelection) {
-            this.rowsSelected = { [row.id]: true };
-        }
-        if (this.enableMultiRowSelection && this.enableRowSelection) {
-            if (isShiftPressed && this.lastSelectedIndex !== null) {
-                const selectedRows = this.table
-                    .getRowModel()
-                    .rows.slice(Math.min(this.lastSelectedIndex, row.index), Math.max(this.lastSelectedIndex, row.index) + 1);
-                const selectedRowsIds = selectedRows.map((r) => r.id);
-                this.rowsSelected = {
-                    ...this.rowsSelected,
-                    ...selectedRowsIds.reduce((acc, id) => ({ ...acc, [id]: true }), {}),
-                };
+        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 {
-                row.toggleSelected();
-                this.lastSelectedIndex = row.index;
+                // 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 {
@@ -390,12 +518,15 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
                 cell: (props) => {
                     const value = props.getValue();
                     if (column.type === 'actions') {
-                        return html `
-                            <lit-data-grid-row-actions
-                                .buttons=${column.getActions?.(props) || []}
-                            ></lit-data-grid-row-actions>
+                        return html `
+                            <lit-data-grid-row-actions
+                                .buttons=${column.getActions?.(props) || []}
+                            ></lit-data-grid-row-actions>
                         `;
                     }
+                    if (column.type === 'currency') {
+                        return formatCurrency(value, this.userLang || 'cs');
+                    }
                     return column.cell ? column.cell(props, html, unsafeHTML) : value;
                 },
                 filterFn: (() => {
@@ -407,6 +538,7 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
                         case 'multiselect':
                             return multiselectFilterFn;
                         case 'number':
+                        case 'currency':
                             return filterFns.weakEquals;
                         case 'dateRange':
                         case 'dateTimeRange':
@@ -427,12 +559,13 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
                 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: column.enablePinning ?? true,
+                enablePinning: this.enablePinning && (column.enablePinning ?? true),
                 aggregatedCell: (props) => {
                     const value = props.getValue();
                     return column.aggregatedCell
@@ -601,10 +734,15 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
             this.scrollInterval = null;
         }
     }
-    handleScroll(event) {
-        const container = event.target;
-        if (container.scrollTop + container.clientHeight >=
-            container.scrollHeight - (this.scrollEndThreshold || 100) &&
+    // 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) {
@@ -612,76 +750,147 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
             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();
         }
     }
-    handleOperatorChange(e) {
-        if (!this.server)
-            return;
-        const { columnId, operator } = e.detail;
-        this.operatorMap.set(columnId, operator);
-        const filtersState = this.filtersServer;
-        const filter = filtersState.find((f) => f.id === columnId);
-        const Operator = operator === 'isEmpty' || operator === 'isNotEmpty';
-        if (!Operator && !filter?.value) {
-            return;
+    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;
         }
-        const filtersServer = [];
-        for (const filter of filtersState) {
-            const operator = this.operatorMap.get(filter.id);
-            filtersServer.push({
-                id: filter.id,
-                value: filter.value,
-                operator: operator,
-            });
+        if (value?.enableFiltering !== undefined) {
+            this.enableFiltering = value.enableFiltering;
         }
-        for (const [columnId, operator] of this.operatorMap.entries()) {
-            if (operator === 'isEmpty' || operator === 'isNotEmpty') {
-                filtersServer.push({
-                    id: columnId,
-                    value: undefined,
-                    operator: operator,
-                });
-            }
+        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;
         }
-        this.filtersServer = filtersServer;
-        if (this.onColumnFiltersChanged) {
-            this.onColumnFiltersChanged(this.table, this.filtersServer);
+        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);
+        }
+    }
+    _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() {
-        console.log('columns', this.columns);
+        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: 'checkbox',
+                    id: 'checkboxForMultiselect',
                     type: 'checkbox',
                     minSize: 30,
                     size: 30,
                     enablePinning: false,
                     enableResizing: false,
-                    header: ({ table }) => html `
-                          <div style="position: absolute; left: 0; bottom: 0; margin: 0.65rem 0;">
-                              <lit-checkbox
-                                  type="checkbox"
-                                  .onChange="${table.getToggleAllRowsSelectedHandler()}"
-                                  .checked="${table.getIsAllRowsSelected()}"
-                                  .indeterminate="${table.getIsSomeRowsSelected()}"
-                              ></lit-checkbox>
-                          </div>
+                    header: ({ table }) => html `
+                          <div style="position: absolute; left: 0; bottom: 0; margin: 0.65rem 0;">
+                              <lit-checkbox
+                                  type="checkbox"
+                                  .onChange="${() => table.getIsSomeRowsSelected()
+                        ? this._rowUnselectAll(table)
+                        : table.toggleAllRowsSelected()}"
+                                  .checked="${table.getIsAllRowsSelected()}"
+                                  .indeterminate="${table.getIsSomeRowsSelected()}"
+                              ></lit-checkbox>
+                          </div>
                       `,
-                    cell: ({ row }) => html `
-                          <div style="padding: 0.1875rem 0px 0px 0px">
-                              <lit-checkbox
-                                  type="checkbox"
-                                  .onChange="${row.getToggleSelectedHandler()}"
-                                  .checked="${row.getIsSelected()}"
-                                  ?disabled="${!row.getCanSelect()}"
-                                  .indeterminate="${row.getIsSomeSelected()}"
-                              ></lit-checkbox>
-                          </div>
+                    cell: ({ table, row }) => html `
+                          <div
+                              style="padding: 0.1875rem 0px 0px 0px"
+                              @click=${(e) => e.stopPropagation()}
+                          >
+                              <lit-checkbox
+                                  type="checkbox"
+                                  .onChange="${(e) => {
+                        e.stopPropagation();
+                        row.toggleSelected(e.target.checked);
+                    }}"
+                                  .checked="${row.getIsSelected()}"
+                                  ?disabled="${!row.getCanSelect()}"
+                                  .indeterminate="${row.getIsSomeSelected()}"
+                              ></lit-checkbox>
+                          </div>
                       `,
                 },
             ]
@@ -706,16 +915,19 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
                 grouping: [...(this.initialGroups || [])],
                 columnVisibility: { ...this.initialColumnVisibility },
                 columnPinning: {
-                    left: [...(this.leftPinnedColumns || []), 'checkbox'],
+                    left: [...(this.leftPinnedColumns || []), 'checkboxForMultiselect'],
                     right: ['actions'],
                 },
             },
             state: {
-                columnFilters: this.server ? this.filtersServer : this.filters,
-                sorting: this.sorting,
+                columnVisibility: this.columnVisibility,
+                // columnFilters: this.server ? this.filtersServer : this.filters,
+                columnFilters: this.initialFiltering,
+                sorting: this.initialSorting,
                 rowSelection: this.rowsSelected,
                 columnSizing: this.columnSizing,
-                expanded: this.rowExpanded,
+                expanded: this.initialRowExpanded,
+                columnOrder: this.columnOrder,
             },
             filterFns: {
                 dateRangeFilterFn: dateRangeFilterFn,
@@ -729,6 +941,7 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
             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(),
@@ -747,35 +960,9 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
                 const filtersState = typeof updaterOrValue === 'function'
                     ? updaterOrValue(this.table.getState().columnFilters)
                     : updaterOrValue;
-                this.filters = filtersState;
-                if (this.server) {
-                    const filtersServer = [];
-                    for (const filter of filtersState) {
-                        const operator = this.operatorMap.get(filter.id);
-                        filtersServer.push({
-                            id: filter.id,
-                            value: filter.value,
-                            operator: operator,
-                        });
-                    }
-                    for (const [columnId, operator] of this.operatorMap.entries()) {
-                        if (operator === 'isEmpty' || operator === 'isNotEmpty') {
-                            filtersServer.push({
-                                id: columnId,
-                                value: undefined,
-                                operator: operator,
-                            });
-                        }
-                    }
-                    this.filtersServer = [...filtersServer];
-                    if (this.onColumnFiltersChanged) {
-                        this.onColumnFiltersChanged(this.table, this.filtersServer);
-                    }
-                }
-                else {
-                    if (this.onColumnFiltersChanged) {
-                        this.onColumnFiltersChanged(this.table, filtersState);
-                    }
+                this.initialFiltering = filtersState;
+                if (this.onColumnFiltersChanged) {
+                    this.onColumnFiltersChanged(this.table, filtersState);
                 }
             },
             onSortingChange: (updaterOrValue) => {
@@ -787,17 +974,15 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
                 const sortingState = typeof updaterOrValue === 'function'
                     ? updaterOrValue(this.table.getState().sorting)
                     : updaterOrValue;
-                this.sorting = sortingState;
+                this.initialSorting = sortingState;
                 if (this.onColumnSortChanged) {
                     this.onColumnSortChanged(this.table, sortingState);
                 }
             },
             onRowSelectionChange: (updaterOrValue) => {
-                const rowSelection = this.enableRowSelection && this.enableMultiRowSelection
-                    ? typeof updaterOrValue === 'function'
-                        ? updaterOrValue(this.rowsSelected)
-                        : updaterOrValue
-                    : this.rowsSelected;
+                const rowSelection = typeof updaterOrValue === 'function'
+                    ? updaterOrValue(this.rowsSelected)
+                    : updaterOrValue;
                 this.rowsSelected = rowSelection;
                 if (this.onRowSelectionChanged) {
                     this.onRowSelectionChanged(this.table, rowSelection);
@@ -814,17 +999,40 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
             },
             onExpandedChange: (updaterOrValue) => {
                 const rowExpanded = typeof updaterOrValue === 'function'
-                    ? updaterOrValue(this.rowExpanded)
+                    ? updaterOrValue(this.initialRowExpanded)
                     : updaterOrValue;
-                this.rowExpanded = _.isEmpty(rowExpanded) ? this.rowExpanded : rowExpanded;
+                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 rowModel = this.table.getRowModel();
+        const { rows } = rowModel;
+        this.rowsCount = rows.length;
+        // Cache expensive calls to avoid recalculation on every render
         const rowVirtualizer = this.enableRowVirtualization
             ? this.rowVirtualizerController?.getVirtualizer()
             : null;
@@ -832,16 +1040,14 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
             ? 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.rowHeight,
-                end: (index + 1) * this.rowHeight,
-                size: this.rowHeight,
+                start: index * this.getRowHeight(),
+                end: (index + 1) * this.getRowHeight(),
+                size: this.getRowHeight(),
                 lane: 0,
             }));
         // Calculate padding for virtualization
@@ -854,37 +1060,44 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
                     (virtualColumns[virtualColumns.length - 1]?.end ?? 0);
         }
         let isMobile = window.matchMedia('(max-width: 600px)').matches;
-        return html `
-            <div class="data-grid__wrapper">
+        return html `
+            <div class="data-grid__wrapper">
                 ${this.isScrollable && !isMobile
-            ? html `
-                          <lit-icon-button
-                              class="scroll-button left"
-                              .disabled="${this.disableScrollLeft}"
-                              @pointerdown="${() => this.startScroll('left')}"
-                              @pointerup="${this.stopScroll}"
-                              @pointerleave="${this.stopScroll}"
-                              size="small"
-                              variant="contained"
-                              icon="arrowLeft"
-                          >
-                          </lit-icon-button>
-                          <lit-icon-button
-                              class="scroll-button right"
-                              .disabled="${this.disableScrollRight}"
-                              @pointerdown="${() => this.startScroll('right')}"
-                              @pointerup="${this.stopScroll}"
-                              @pointerleave="${this.stopScroll}"
-                              size="small"
-                              variant="contained"
-                              icon="arrowRight"
-                          >
-                          </lit-icon-button>
+            ? html `
+                          <lit-icon-button
+                              class="scroll-button left"
+                              .disabled="${this.disableScrollLeft}"
+                              @pointerdown="${() => this.startScroll('left')}"
+                              @pointerup="${this.stopScroll}"
+                              @pointerleave="${this.stopScroll}"
+                              size="small"
+                              variant="contained"
+                              icon="arrowLeft"
+                          >
+                          </lit-icon-button>
+                          <lit-icon-button
+                              class="scroll-button right"
+                              .disabled="${this.disableScrollRight}"
+                              @pointerdown="${() => this.startScroll('right')}"
+                              @pointerup="${this.stopScroll}"
+                              @pointerleave="${this.stopScroll}"
+                              size="small"
+                              variant="contained"
+                              icon="arrowRight"
+                          >
+                          </lit-icon-button>
                       `
-            : null}
-                <div class="grid" ${ref(this.tableContainerRef)} @scroll="${this.handleScroll}">
-                    <table style="width: ${this.table.getCenterTotalSize()}px">
-                        <thead style="height: ${this.enableFiltering ? '4rem' : '1.625rem'};">
+            : null}
+
+                <div class="grid" ${ref(this.tableContainerRef)}>
+                    <table
+                        part="dataGrid-table"
+                        style="width: ${this.table.getCenterTotalSize()}px"
+                    >
+                        <thead
+                            part="dataGrid-header"
+                            style="height: ${this.enableFiltering ? '4rem' : '1.625rem'};"
+                        >
                             ${repeat(this.table.getHeaderGroups(), (headerGroup) => headerGroup.id, (headerGroup) => {
             const headerColumns = this.enableColumnVirtualization
                 ? virtualColumns.map((vc) => headerGroup.headers[vc.index])
@@ -895,15 +1108,15 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
                     ...headerColumns.filter((hc) => !hc.column.getIsPinned()),
                 ]
                 : headerColumns;
-            return html `
-                                        <tr class="head" data-index="${headerGroup.id}">
+            return html `
+                                        <tr class="head" data-index="${headerGroup.id}">
                                             ${virtualPaddingLeft
-                ? html `
-                                                      <th
-                                                          style=" display: flex; width: ${virtualPaddingLeft}px;"
-                                                      ></th>
+                ? html `
+                                                      <th
+                                                          style=" display: flex; width: ${virtualPaddingLeft}px;"
+                                                      ></th>
                                                   `
-                : ''}
+                : ''}
                                             ${repeat(newHeaderColumns, (header) => header.id, (header, index) => {
                 const column = header.column;
                 const style = {
@@ -911,25 +1124,54 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
                         ? 'hidden'
                         : 'visible',
                     ...this.getCommonPinningStyles(header.column),
-                    width: `${column.getSize()}px`,
+                    width: `${column?.getSize()}px`,
                     flexGrow: `${column.columnDef.size === undefined ? 1 : 'unset'}`,
                 };
-                return html `
-                                                        <th
-                                                            class="head"
-                                                            style="${styleMap(style)}"
-                                                            colspan="${header.colSpan}"
-                                                            data-index="${header.id}"
-                                                        >
+                const filterVariant = column.columnDef.meta?.filterVariant;
+                const filterOperators = column?.columnDef?.meta?.filterOperators ||
+                    getOperatorsByColumnType(filterVariant);
+                const value = column?.getFilterValue()?.value ||
+                    column?.getFilterValue() ||
+                    '';
+                const operator = column?.getFilterValue()?.operator ||
+                    filterOperators[0]?.value;
+                let valueOptions = [];
+                if (filterVariant === 'select' ||
+                    filterVariant === 'multiselect') {
+                    if (column?.columnDef?.meta.valueOptions ||
+                        this.server) {
+                        valueOptions =
+                            column?.columnDef?.meta
+                                .valueOptions || [];
+                    }
+                    else {
+                        const sortedUniqueValues = Array.from(column
+                            ?.getFacetedUniqueValues()
+                            .keys())
+                            .sort()
+                            .slice(0, 5000);
+                        valueOptions = sortedUniqueValues.map((value) => ({
+                            value,
+                            label: value,
+                        }));
+                    }
+                }
+                return html `
+                                                        <th
+                                                            class="head"
+                                                            style="${styleMap(style)}"
+                                                            colspan="${header.colSpan}"
+                                                            data-index="${header.id}"
+                                                        >
                                                             ${header.isPlaceholder
                     ? ''
-                    : html `
-                                                                      <div
+                    : html `
+                                                                      <div
                                                                           class="resizer ${this
                         .table.options
                         .columnResizeDirection} ${header.column.getIsResizing()
                         ? 'is-resizing'
-                        : ''}"
+                        : ''}"
                                                                           style="transform:  ${this
                         .table.options
                         .columnResizeMode ===
@@ -945,184 +1187,225 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
                                 .columnSizingInfo
                                 .deltaOffset ??
                                 0)}px)`
-                        : ''}"
-                                                                      >
-                                                                          <div class="header">
-                                                                              <div
-                                                                                  class="column-header"
-                                                                                  @click=${header.column.getToggleSortingHandler()}
-                                                                              >
-                                                                                  <lit-overflow-tooltip
+                        : ''}"
+                                                                      >
+                                                                          <div class="header">
+                                                                              ${header.column.getIsFiltered()
+                        ? html `
+                                                                                        <div
+                                                                                            class="filterCirclePoint"
+                                                                                        ></div>
+                                                                                    `
+                        : ''}
+                                                                              <div
+                                                                                  class="column-header"
+                                                                                  @click=${header.column.getToggleSortingHandler()}
+                                                                              >
+                                                                                  <lit-overflow-tooltip
                                                                                       label="${header
                         .column
                         .columnDef
-                        .header}"
-                                                                                  >
+                        .header}"
+                                                                                  >
                                                                                       ${flexRender(header
                         .column
                         .columnDef
-                        .header, header.getContext())}
-                                                                                  </lit-overflow-tooltip>
-                                                                              </div>
-
-                                                                              <div
-                                                                                  class="icons-group-pin"
-                                                                              >
+                        .header, header.getContext())}
+                                                                                  </lit-overflow-tooltip>
+                                                                              </div>
+
+                                                                              <div
+                                                                                  class="icons-group-pin"
+                                                                              >
                                                                                   ${header.column.getCanSort()
                         ? header.column.getIsSorted()
                             ? header.column.getIsSorted() ===
                                 'asc'
-                                ? html `<slot
-                                                                                                    name="iconSortUp"
-                                                                                                    ><lit-icon
-                                                                                                        @click=${header.column.getToggleSortingHandler()}
-                                                                                                        size="0.75rem"
-                                                                                                        icon="chevronUpFilled"
-                                                                                                    ></lit-icon
+                                ? html `<slot
+                                                                                                    name="iconSortUp"
+                                                                                                    ><lit-icon
+                                                                                                        class="cursor"
+                                                                                                        @click=${header.column.getToggleSortingHandler()}
+                                                                                                        size="0.75rem"
+                                                                                                        icon="chevronUpFilled"
+                                                                                                    ></lit-icon
                                                                                                 ></slot>`
-                                : html `<slot
-                                                                                                    name="iconSortDown"
-                                                                                                >
-                                                                                                    <lit-icon
-                                                                                                        @click=${header.column.getToggleSortingHandler()}
-                                                                                                        size="0.75rem"
-                                                                                                        icon="chevronDownFilled"
-                                                                                                    ></lit-icon>
+                                : html `<slot
+                                                                                                    name="iconSortDown"
+                                                                                                >
+                                                                                                    <lit-icon
+                                                                                                        class="cursor"
+                                                                                                        @click=${header.column.getToggleSortingHandler()}
+                                                                                                        size="0.75rem"
+                                                                                                        icon="chevronDownFilled"
+                                                                                                    ></lit-icon>
                                                                                                 </slot>`
-                            : html `<div
-                                                                                                class="sortFilled"
-                                                                                            >
-                                                                                                <lit-icon
-                                                                                                    @click=${header.column.getToggleSortingHandler()}
-                                                                                                    size="0.75rem"
-                                                                                                    icon="sortFilled"
-                                                                                                ></lit-icon>
+                            : html `<div
+                                                                                                class="sortFilled"
+                                                                                            >
+                                                                                                <lit-icon
+                                                                                                    class="cursor"
+                                                                                                    @click=${header.column.getToggleSortingHandler()}
+                                                                                                    size="0.75rem"
+                                                                                                    icon="sortFilled"
+                                                                                                ></lit-icon>
                                                                                             </div>`
-                        : html `<div></div>`}
-                                                                                  <div class="flex">
+                        : html `<div></div>`}
+                                                                                  <div class="flex">
                                                                                       ${!this
                         .actionButtonsInMenu
-                        ? html `
+                        ? html `
                                                                                                 ${header.column.getCanPin()
-                            ? html `
-                                                                                                          <lit-icon-button
-                                                                                                              @click="${() => this.togglePin(header)}"
-                                                                                                              size="small"
-                                                                                                              variant="text"
-                                                                                                              icon="pin"
-                                                                                                              .active="${header.column.getIsPinned()}"
-                                                                                                          >
-                                                                                                          </lit-icon-button>
-                                                                                                          <simple-tooltip
-                                                                                                              placement="bottom"
+                            ? html `
+                                                                                                          <lit-icon-button
+                                                                                                              @click="${() => this.togglePin(header)}"
+                                                                                                              size="small"
+                                                                                                              variant="text"
+                                                                                                              icon="pin"
+                                                                                                              .active="${header.column.getIsPinned()}"
+                                                                                                          >
+                                                                                                          </lit-icon-button>
+                                                                                                          <simple-tooltip
+                                                                                                              placement="bottom"
                                                                                                               >${header.column.getIsPinned()
                                 ? msg('Zrušit připnutí sloupce')
-                                : msg('Připnout sloupec vlevo')}
-                                                                                                          </simple-tooltip>
+                                : msg('Připnout sloupec vlevo')}
+                                                                                                          </simple-tooltip>
                                                                                                       `
-                            : ''}
+                            : ''}
                                                                                                 ${header.column.getCanGroup()
-                            ? html `
-                                                                                                          <lit-icon-button
-                                                                                                              @click="${header.column.getToggleGroupingHandler()}"
-                                                                                                              size="small"
-                                                                                                              variant="text"
-                                                                                                              .active="${header.column.getIsGrouped()}"
-                                                                                                              icon="agregation"
-                                                                                                          >
-                                                                                                          </lit-icon-button>
-                                                                                                          <simple-tooltip
-                                                                                                              placement="bottom"
-                                                                                                          >
+                            ? html `
+                                                                                                          <lit-icon-button
+                                                                                                              @click="${header.column.getToggleGroupingHandler()}"
+                                                                                                              size="small"
+                                                                                                              variant="text"
+                                                                                                              .active="${header.column.getIsGrouped()}"
+                                                                                                              icon="agregation"
+                                                                                                          >
+                                                                                                          </lit-icon-button>
+                                                                                                          <simple-tooltip
+                                                                                                              placement="bottom"
+                                                                                                          >
                                                                                                               ${header.column.getIsGrouped()
                                 ? msg('Zrušit seskupení')
-                                : msg('Seskupit sloupec')}</simple-tooltip
-                                                                                                          >
+                                : msg('Seskupit sloupec')}</simple-tooltip
+                                                                                                          >
                                                                                                       `
-                            : ''}
+                            : ''}
                                                                                             `
-                        : html `
-                                                                                                <lit-data-grid-action-buttons-popover
-                                                                                                    .group="${header.column.getToggleGroupingHandler()}"
-                                                                                                    .pin="${() => this.togglePin(header)}"
-                                                                                                    .header="${header}"
+                        : 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>
-                                                                                            `}
-                                                                                  </div>
-                                                                              </div>
-                                                                          </div>
-                                                                      </div>
+                            .table}"
+                                                                                                ></lit-data-grid-action-buttons-popover>
+                                                                                            `}
+                                                                                      ${this
+                        .enableColumnOrdering &&
+                        !header.column.getIsPinned() &&
+                        !header.column.getIsGrouped() &&
+                        ![
+                            'checkbox',
+                            'actions',
+                        ].includes(header
+                            .column
+                            .id)
+                        ? html `<div
+                                                                                                    class="drag-handle"
+                                                                                                >
+                                                                                                    <lit-icon
+                                                                                                        icon="hamburger"
+                                                                                                        size="1rem"
+                                                                                                    ></lit-icon>
+                                                                                                </div>
+                                                                                                <simple-tooltip
+                                                                                                    placement="bottom"
+                                                                                                    >${msg('Přesunout sloupec')}</simple-tooltip
+                                                                                                > `
+                        : null}
+                                                                                  </div>
+                                                                              </div>
+                                                                          </div>
+                                                                      </div>
                                                                       ${header.column.getCanFilter()
-                        ? html `
-                                                                                <div>
-                                                                                    <filter-inputs
+                        ? html `
+                                                                                <div>
+                                                                                    <filter-inputs
                                                                                         .minFilterCharacters=${this
-                            .minFilterCharacters}
-                                                                                        .column=${header.column}
+                            .minFilterCharacters}
+                                                                                        .column=${header.column}
                                                                                         .dateFormat=${this
-                            .dateFormat}
+                            .dateFormat}
                                                                                         .userLang=${this
-                            .userLang}
+                            .userLang}
                                                                                         @filter-tab=${this
-                            .handleFilterTabNavigation}
+                            .handleFilterTabNavigation}
                                                                                         .server=${this
-                            .server}
-                                                                                        .operator=${this.operatorMap.get(header
-                            .column
-                            .id)}
-                                                                                    ></filter-inputs>
-                                                                                </div>
+                            .server}
+                                                                                        .value="${value}"
+                                                                                        .operator="${operator}"
+                                                                                        .filterVariant="${filterVariant}"
+                                                                                        .filterOperators="${filterOperators}"
+                                                                                    ></filter-inputs>
+                                                                                </div>
                                                                             `
-                        : null}
-                                                                  `}
-                                                            <div
-                                                                class="resize-handle"
+                        : null}
+                                                                  `}
+                                                            <div
+                                                                class="resize-handle"
                                                                 @dblclick="${(event) => {
                     if (event.target.classList.contains('resize-handle')) {
                         header.column.resetSize();
                     }
-                }}"
+                }}"
                                                                 @mousedown="${(event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
                     if (event.target.classList.contains('resize-handle')) {
                         header.getResizeHandler()(event);
                     }
-                }}"
+                }}"
                                                                 @touchstart="${(event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
                     if (event.target.classList.contains('resize-handle')) {
                         header.getResizeHandler()(event);
                     }
-                }}"
-                                                            ></div>
-                                                        </th>
+                }}"
+                                                            ></div>
+                                                        </th>
                                                     `;
-            })}
+            })}
                                             ${virtualPaddingRight
-                ? html `
-                                                      <th
-                                                          style=" display: flex; width: ${virtualPaddingRight}px;"
-                                                      ></th>
+                ? html `
+                                                      <th
+                                                          style=" display: flex; width: ${virtualPaddingRight}px;"
+                                                      ></th>
                                                   `
-                : ''}
-                                        </tr>
+                : ''}
+                                        </tr>
                                     `;
-        })}
+        })}
                             ${this.isLoading
-            ? html `
-                                      <div style="position: absolute; bottom: 0px; width: 100%;">
-                                          <lit-loading-bar></lit-loading-bar>
-                                      </div>
+            ? html `
+                                      <div style="position: absolute; bottom: 0px; width: 100%;">
+                                          <lit-loading-bar></lit-loading-bar>
+                                      </div>
                                   `
-            : ''}
-                        </thead>
-
-                        <tbody
+            : ''}
+                        </thead>
+
+                        <tbody
+                            @keydown=${this.handleKeyDown}
+                            tabindex="0"
+                            part="dataGrid-body"
                             style="height: ${rowVirtualizer &&
-            this.table.getRowModel().rows.length > 0
+            rows.length > 0
             ? rowVirtualizer.getTotalSize() + 'px'
-            : 'auto'};"
-                        >
+            : 'auto'};"
+                        >
                             ${rows.length > 0
             ? repeat(rowItems, (item) => item.key, (item) => {
                 const row = rows[item.index];
@@ -1138,48 +1421,51 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
                     transform: rowVirtualizer
                         ? `translateY(${item.start}px)`
                         : 'none',
-                    height: `${this.rowHeight}px`,
-                    lineHeight: `${this.rowHeight}px`,
+                    height: `${this.getRowHeight()}px`,
+                    lineHeight: `${this.getRowHeight()}px`,
                     position: rowVirtualizer ? 'absolute' : 'relative',
                 };
                 return row
-                    ? html `
-                                                    <tr
+                    ? html `
+                                                    <tr
+                                                        tabindex=${this.enableRowSelection
+                        ? '0'
+                        : undefined}
+                                                        data-row-index="${row.index}"
                                                         class="${this.rowsSelected[row.id]
                         ? 'selected body'
-                        : 'body'}"
-                                                        data-index="${item.index}"
+                        : 'body'}"
+                                                        data-index="${item.index}"
                                                         @click="${row.getIsGrouped()
                         ? row.getToggleExpandedHandler()
-                        : (e) => this.handleRowClick(e, row)}"
-                                                        @dblclick="${() => this.handleRowDoubleClick(row)}"
-                                                        style="${styleMap(rowStyle)}"
-                                                        ${ref((node) => {
-                        if (node &&
-                            this.enableRowVirtualization &&
-                            rowVirtualizer) {
-                            // Only measure element if virtualization is enabled
-                            rowVirtualizer.measureElement(node);
-                        }
-                    })}
-                                                    >
+                        : (e) => this.handleRowClick(e, row)}"
+                                                        @mousedown=${(e) => this._onRowMouseDown(e, row)}
+                                                        @mouseup=${this._onRowMouseUp}
+                                                        @mouseleave=${this._onRowMouseUp}
+                                                        @contextmenu=${(e) => e.preventDefault()}
+                                                        @dblclick="${() => this.handleRowDoubleClick(row)}"
+                                                        style="${styleMap(rowStyle)}"
+                                                        ${ref(() => {
+                        // No measurement needed - using fixed row heights
+                    })}
+                                                    >
                                                         ${virtualPaddingLeft
-                        ? html `
-                                                                  <th
-                                                                      style=" display: flex; width: ${virtualPaddingLeft}px;"
-                                                                  ></th>
+                        ? html `
+                                                                  <th
+                                                                      style=" display: flex; width: ${virtualPaddingLeft}px;"
+                                                                  ></th>
                                                               `
-                        : ''}
-                                                        <!-- Cells for each row -->
+                        : ''}
+                                                        <!-- Cells for each row -->
                                                         ${repeat(newBodyColumns, (cell) => cell.key, (cell) => {
                         const buttonSize = this.getButtonSize();
                         const { column } = cell;
                         const style = {
                             ...this.getCommonPinningStyles(cell.column),
-                            width: `${cell.column.getSize()}px`,
+                            width: `${cell.column?.getSize()}px`,
                             flexGrow: `${column.columnDef.size === undefined ? 1 : 'unset'}`,
                             background: this.getCellBackgroundColor(cell),
-                            lineHeight: `${this.rowHeight}px`,
+                            lineHeight: `${this.getRowHeight()}px`,
                             padding: column.columnDef.type ===
                                 'actions' ||
                                 column.columnDef.type ===
@@ -1187,41 +1473,41 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
                                 ? '0'
                                 : '0px 14px',
                         };
-                        return html `
-                                                                    <td style="${styleMap(style)}">
+                        return html `
+                                                                    <td style="${styleMap(style)}">
                                                                         ${cell.getIsGrouped()
-                            ? html `<div
-                                                                                  class="grouped-column"
-                                                                              >
-                                                                                  <lit-icon
-                                                                                      class="grouped-column--icon-button"
-                                                                                      size="1.25rem"
+                            ? html `<div
+                                                                                  class="grouped-column"
+                                                                              >
+                                                                                  <lit-icon
+                                                                                      class="grouped-column--icon-button"
+                                                                                      size="1.25rem"
                                                                                       icon="${row.getIsExpanded()
                                 ? 'chevronDownFilled'
-                                : 'chevron'}"
-                                                                                  ></lit-icon>
-                                                                                  <div
-                                                                                      class="grouped-column--label"
-                                                                                  >
-                                                                                      <lit-overflow-tooltip
-                                                                                          label=${cell.getValue()}
-                                                                                      >
-                                                                                          ${cell.getValue()}
-                                                                                      </lit-overflow-tooltip>
-                                                                                  </div>
-                                                                                  <lit-pill
-                                                                                      class="grouped-column--pill"
-                                                                                      style="margin-left: 0.5rem"
+                                : 'chevron'}"
+                                                                                  ></lit-icon>
+                                                                                  <div
+                                                                                      class="grouped-column--label"
+                                                                                  >
+                                                                                      <lit-overflow-tooltip
+                                                                                          label=${cell.getValue()}
+                                                                                      >
+                                                                                          ${cell.getValue()}
+                                                                                      </lit-overflow-tooltip>
+                                                                                  </div>
+                                                                                  <lit-pill
+                                                                                      class="grouped-column--pill"
+                                                                                      style="margin-left: 0.5rem"
                                                                                       count="${row
                                 .subRows
-                                .length}"
-                                                                                  ></lit-pill>
+                                .length}"
+                                                                                  ></lit-pill>
                                                                               </div> `
                             : cell.getIsAggregated()
-                                ? html `
-                                                                                    <div
-                                                                                        style="flex-grow:1"
-                                                                                    >
+                                ? html `
+                                                                                    <div
+                                                                                        style="flex-grow:1"
+                                                                                    >
                                                                                         ${flexRender(cell
                                     .column
                                     .columnDef
@@ -1229,350 +1515,519 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
                                     cell
                                         .column
                                         .columnDef
-                                        .cell, cell.getContext())}
-                                                                                    </div>
+                                        .cell, cell.getContext())}
+                                                                                    </div>
                                                                                 `
                                 : cell.getIsPlaceholder()
                                     ? null
-                                    : html `<lit-overflow-tooltip
-                                                                                      placement="right"
-                                                                                      label=${cell.getValue()}
+                                    : html `<lit-overflow-tooltip
+                                                                                      placement="right"
+                                                                                      label=${cell.getValue()}
                                                                                       >${flexRender(cell
                                         .column
                                         .columnDef
-                                        .cell, cell.getContext())}</lit-overflow-tooltip
-                                                                                  >`}
-                                                                    </td>
+                                        .cell, cell.getContext())}</lit-overflow-tooltip
+                                                                                  >`}
+                                                                    </td>
                                                                 `;
-                    })}
+                    })}
                                                         ${virtualPaddingRight
-                        ? html `
-                                                                  <th
-                                                                      style=" display: flex; width: ${virtualPaddingRight}px;"
-                                                                  ></th>
+                        ? html `
+                                                                  <th
+                                                                      style=" display: flex; width: ${virtualPaddingRight}px;"
+                                                                  ></th>
                                                               `
-                        : ''}
-                                                    </tr>
+                        : ''}
+                                                    </tr>
                                                 `
                     : null;
             })
-            : null}
-                        </tbody>
-                    </table>
-                    <div class="footer-container">
-                        <div class="numberCount">
-                            ${msg('Počet záznamů')}: ${this.table.getRowModel().rows.length}
-                            <pre>/</pre>
-                            ${this.server
-            ? this.totalNumberRows
+            : null}
+                        </tbody>
+                    </table>
+                    ${!this.hideFooter
+            ? html `
+                              <slot
+                                  part="dataGrid-footer"
+                                  name="dataGridFooter"
+                                  class="footer-container"
+                              >
+                                  <div class="numberCount">
+                                      ${msg('Počet záznamů')}:
+                                      ${rows.length}
+                                      <pre>/</pre>
+                                      ${this.server
                 ? this.totalNumberRows
-                : '?'
-            : this.table.getRowModel().rows.length}
-                            ${this.server
-            ? html `<lit-icon-button
-                                      icon="reload"
-                                      size="small"
-                                      variant="text"
-                                      @click="${() => this.handleGetTotalNumber()}"
-                                  ></lit-icon-button>`
-            : ''}
-                        </div>
-                        <div class="right-actions">
-                            <lit-data-grid-density-popover
-                                .density="${this.rowDensity}"
-                                .setDensity="${(density) => this.handleSetDensity(density)}"
-                            >
-                            </lit-data-grid-density-popover>
-                            <lit-responsive-button
-                                size="small"
-                                variant="text"
-                                label=${msg('Přizpůsobit sloupce')}
-                                icon="columns"
-                                @click=${() => this.table.resetColumnSizing()}
-                            ></lit-responsive-button>
-                            ${this.exportData
-            ? html `
-                                      <lit-data-grid-export-popover
-                                          .exportToCsv="${typeof this.exportExcelFn === 'function'
-                ? () => this.exportCsvFn && this.exportCsvFn()
-                : () => this.exportDataToCsv()}"
-                                          .exportToExcel="${typeof this.exportExcelFn === 'function'
-                ? () => this.exportExcelFn && this.exportExcelFn()
-                : () => this.exportDataToExcel()}"
-                                          .disabledButtons="${this.isLoading}"
-                                      >
-                                      </lit-data-grid-export-popover>
-                                  `
-            : null}
-                        </div>
-                    </div>
-                </div>
-                ${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>
-                          ${msg('Nic dalšího tu není')}
+                    ? this.totalNumberRows
+                    : '?'
+                : 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>`
+                : ''}
+                                  </div>
+                                  <div class="right-actions">
+                                      <lit-data-grid-density-popover
+                                          .density="${this.rowDensity}"
+                                          .setDensity="${(density) => this.handleSetDensity(density)}"
+                                      >
+                                      </lit-data-grid-density-popover>
+                                      <lit-responsive-button
+                                          size="medium"
+                                          variant="text"
+                                          label=${msg('Přizpůsobit sloupce')}
+                                          icon="columns"
+                                          @click=${() => this.table.resetColumnSizing()}
+                                      ></lit-responsive-button>
+                                      ${this.exportData
+                ? html `
+                                                <lit-data-grid-export-popover
+                                                    .exportToCsv="${typeof this.exportExcelFn ===
+                    'function'
+                    ? () => this.exportCsvFn && this.exportCsvFn()
+                    : () => this.exportDataToCsv()}"
+                                                    .exportToExcel="${typeof this.exportExcelFn ===
+                    'function'
+                    ? () => this.exportExcelFn &&
+                        this.exportExcelFn()
+                    : () => this.exportDataToExcel()}"
+                                                    .disabledButtons="${this.isLoading}"
+                                                >
+                                                </lit-data-grid-export-popover>
+                                            `
+                : null}
+                                      ${this.enableSettings
+                ? html `
+                                                <div>
+                                                    <lit-responsive-button
+                                                        variant="dashed"
+                                                        label="${msg('Přiřadit sloupec')}"
+                                                        icon="add"
+                                                        style="display: inline-block"
+                                                        @click="${this.toggleCustomPopover}"
+                                                    ></lit-responsive-button>
+
+                                                    <simple-popper
+                                                        .showing=${this.isOpen}
+                                                        .placement=${'top-end'}
+                                                        .manualOpening=${true}
+                                                        .maxWidthAsTarget=${false}
+                                                        .onClose=${() => this.closePopover()}
+                                                    >
+                                                        <div
+                                                            class="popper-input"
+                                                            style="position: sticky; top: 0; z-index: 1;"
+                                                        >
+                                                            <lit-input
+                                                                .value=${this.filterText}
+                                                                .onInput=${(value) => {
+                    this.filterText =
+                        value?.toLowerCase?.() ||
+                            '';
+                }}
+                                                                .onClear=${() => {
+                    this.filterText = '';
+                }}
+                                                                placeholder="${msg('Zadejte název sloupce')}"
+                                                            ></lit-input>
+                                                        </div>
+                                                        <lit-menu tabindex="0">
+                                                            ${this.columns
+                    .filter((col) => {
+                    const name = col?.headerName?.toLowerCase() ||
+                        col?.field.toLowerCase();
+                    return name.includes(this.filterText);
+                })
+                    .sort((a, b) => {
+                    const aUnderscore = a.field.startsWith('_');
+                    const bUnderscore = b.field.startsWith('_');
+                    if (aUnderscore && !bUnderscore)
+                        return 1;
+                    if (!aUnderscore && bUnderscore)
+                        return -1;
+                    return (a.headerName || a.field).localeCompare(b.headerName || b.field);
+                })
+                    .map((col) => html `
+                                                                        <lit-menu-item
+                                                                            .onClick=${() => this.toggleColumn(col?.field)}
+                                                                            .isActive=${!(this
+                    .columnVisibility?.[col?.field] === false)}
+                                                                        >
+                                                                            <span
+                                                                                class="menu-item--multiple"
+                                                                            >
+                                                                                <lit-checkbox
+                                                                                    class="cursor"
+                                                                                    .checked=${!(this
+                    .columnVisibility?.[col
+                    ?.field] === false)}
+                                                                                ></lit-checkbox>
+                                                                                ${col?.headerName ||
+                    col?.field}
+                                                                            </span>
+                                                                        </lit-menu-item>
+                                                                    `)}
+                                                        </lit-menu>
+
+                                                        ${isEqual(filteredColumns.length, 0)
+                    ? html `
+                                                                  <div
+                                                                      style="display: flex; flex-direction: column; align-items: center; padding: 1rem;"
+                                                                  >
+                                                                      <div
+                                                                          style="max-height: 6rem; max-width: 6rem;"
+                                                                      >
+                                                                          <not-found></not-found>
+                                                                      </div>
+                                                                      <div>
+                                                                          ${msg('Nenalezeno')}
+                                                                      </div>
+                                                                  </div>
+                                                              `
+                    : null}
+                                                    </simple-popper>
+
+                                                    <lit-icon-button
+                                                        icon="administration"
+                                                        @click="${this.toggleModal}"
+                                                        variant="dashed"
+                                                        style="display: inline-block"
+                                                    ></lit-icon-button>
+                                                    <data-grid-settings
+                                                        .onClose="${() => {
+                    this.isOpenModal = false;
+                }}"
+                                                        .isOpenModal="${this.isOpenModal}"
+                                                        .enableFiltering="${this.enableFiltering}"
+                                                        .enableSorting="${this.enableSorting}"
+                                                        .columnDefaultSize="${this
+                    .columnDefaultSize}"
+                                                        .columnGroupedColor="${this
+                    .columnGroupedColor}"
+                                                        .rowAggregationColor="${this
+                    .rowAggregationColor}"
+                                                        .enableGrouping="${this.enableGrouping}"
+                                                        .enableColumnPinning="${this
+                    .enableColumnPinning}"
+                                                        .exportData="${this.exportData}"
+                                                        .actionButtonsInMenu="${this
+                    .actionButtonsInMenu}"
+                                                        .hideFooter="${this.hideFooter}"
+                                                        .onSettingsChangedModal="${this.onSettingsChangedCallback.bind(this)}"
+                                                    ></data-grid-settings>
+                                                </div>
+                                            `
+                : null}
+                                  </div>
+                              </slot>
+                          `
+            : ''}
+                </div>
+                ${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">${msg('Nic dalšího tu není')}</div>
                       </div>`
-            : null}
-            </div>
+            : null}
+            </div>
         `;
     }
 };
 LitDataGridTanstack.styles = [
     // styles,
-    css `
-            *,
-            *::before,
-            *::after {
-                margin: 0;
-                padding: 0;
-                box-sizing: border-box;
-            }
-
-            display: block;
-            font-family: 'Inter', sans-serif;
-            box-sizing: border-box;
-
-            td {
-                padding: 0px;
-            }
-
-            .data-grid__wrapper {
-                position: relative;
-                background-color: var(--background-paper, #fff);
-                height: 100%;
-                z-index: 1;
-            }
-
-            .grid {
-                overflow: auto;
-                position: relative;
-                height: 100%;
-            }
-
-            .data-grid__empty {
-                position: absolute;
-                top: 30%;
-                left: 50%;
-                transform: translate(-50%, -50%);
-                font-size: 0.875rem;
-                text-align: center;
-            }
-
-            table {
-                border-collapse: collapse;
-                border-spacing: 0;
-                width: 100% !important;
-                height: calc(100% - 38px);
-            }
-
-            thead {
-                display: flex;
-                position: sticky;
-                top: 0;
-                z-index: 10;
-                background-color: var(--background-paper, #fff);
-                border-bottom: 1px solid var(--color-divider, #d0d3db);
-            }
-
-            tr.head {
-                display: flex;
-                width: 100%;
-            }
-
-            th.head {
-                display: block;
-                position: relative;
-                padding: 0px 6px;
-                gap: 0.25rem;
-                //z-index: auto !important;
-            }
-
-            tbody {
-                display: grid;
-                position: relative;
-            }
-
-            tr.body {
-                width: 100%;
-                border-bottom: 1px solid var(--color-divider, #d0d3db);
-                display: flex;
-                overflow: visible;
-            }
-
-            tr.body:hover {
-                cursor: pointer;
-                background-color: var(--background-default, #eff3f4);
-            }
-
-            td {
-                display: table-cell;
-                white-space: nowrap;
-                overflow: hidden;
-                padding: 0px 14px;
-                font-weight: 500;
-                font-size: 12px;
-                color: var(--text-primary, #111827);
-                display: flex;
-                align-items: center;
-            }
-
-            .column-header {
-                font-size: 11px;
-                font-weight: 600;
-                color: var(--text-secondary, #5d6371);
-                cursor: pointer;
-                gap: 0.25rem;
-                justify-content: center;
-                align-items: center;
-                margin: 0 0.25rem;
-                overflow: hidden;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-                height: inherit;
-                display: flex;
-            }
-
-            .ellipsis {
-                overflow: hidden;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-            }
-
-            .icons-group-pin {
-                display: flex;
-                height: 100%;
-                justify-content: space-between;
-                flex-grow: 1;
-            }
-
-            .flex {
-                display: flex;
-            }
-
-            .resizer {
-                height: 23px;
-                padding: 0 0 0 6px;
-                text-align: start;
-                //cursor: col-resize;
-                user-select: none;
-                touch-action: none;
-            }
-
-            .resize-handle {
-                position: absolute;
-                top: 0;
-                right: 0px;
-                width: 6px;
-                height: 100%;
-                background: transparent;
-                cursor: col-resize;
-                transition: background-color 0.2s ease-in-out;
-                // border-radius: 5px;
-                // padding-bottom: 5px;
-            }
-
-            .resize-handle:hover {
-                border-right: 2px solid var(--color-primary-main, #75b603);
-            }
-
-            .resizer.ltr {
-                right: 0;
-            }
-
-            .resizer.rtl {
-                left: 0;
-            }
-
-            .resizer.is-resizing {
-                opacity: 1;
-            }
-
-            .footer-container {
-                position: sticky;
-                left: 0;
-                bottom: 0;
-                background-color: var(--background-paper, #fff);
-                width: auto;
-                border-top: 1px solid var(--color-divider, #d0d3db);
-                height: 2.375rem;
-                display: flex;
-                flex-direction: row;
-                justify-content: space-between;
-                align-items: center;
-                // padding: 0 16px;
-                z-index: 10;
-            }
-
-            .right-actions {
-                position: absolute;
-                right: 0;
-                display: flex;
-            }
-
-            .numberCount {
-                margin: 0.375rem 0;
-                font-size: 12px;
-                font-weight: 400;
-                color: var(--text-primary, #111827);
-                display: flex;
-                align-items: center;
-            }
-
-            .scroll-button {
-                position: absolute;
-                top: 50%;
-                transform: translateY(-50%);
-                z-index: 1000;
-                cursor: pointer;
-            }
-
-            .scroll-button.left {
-                left: 3rem;
-            }
-
-            .scroll-button.right {
-                right: 3rem;
-            }
-
-            .selected {
-                background-color: var(--color-primary-light, #f0fadf);
-            }
-
-            .sortFilled {
-                visibility: hidden;
-            }
-            .header {
-                display: flex;
-                align-items: center;
-                height: 100%;
-            }
-            .header:hover .sortFilled {
-                visibility: visible;
-            }
-            .grouped-column {
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                width: 100%;
-                gap: 0.25rem;
-            }
-            .grouped-column--icon-button {
-                display: flex;
-                align-items: center;
-                position: relative;
-                top: -1.5px;
-            }
-            .grouped-column--label {
-                display: flex;
-                align-items: center;
-                overflow: hidden;
-                flex-grow: 1;
-            }
-            .grouped-column--pill {
-                margin-left: 0.5rem;
-            }
+    css `
+            *,
+            *::before,
+            *::after {
+                margin: 0;
+                padding: 0;
+                box-sizing: border-box;
+            }
+
+            display: block;
+            font-family: 'Inter', sans-serif;
+            box-sizing: border-box;
+
+            td {
+                padding: 0px;
+            }
+            .data-grid__wrapper {
+                position: relative;
+                background-color: var(--background-paper, #fff);
+                height: 100%;
+                z-index: 1;
+            }
+
+            .grid {
+                overflow: auto;
+                position: relative;
+                height: 100%;
+            }
+
+            .data-grid__empty {
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                font-size: 0.875rem;
+                text-align: center;
+            }
+
+            table {
+                border-collapse: collapse;
+                border-spacing: 0;
+                width: 99% !important;
+                height: calc(100% - 38px);
+            }
+
+            thead {
+                display: flex;
+                position: sticky;
+                top: 0;
+                z-index: 10;
+                background-color: var(--background-paper, #fff);
+                border-bottom: 1px solid var(--color-divider, #d0d3db);
+            }
+
+            tr.head {
+                display: flex;
+                width: 100%;
+            }
+
+            th.head {
+                display: block;
+                position: relative;
+                padding: 0 6px;
+                gap: 0.25rem;
+                //z-index: auto !important;
+            }
+
+            tbody {
+                display: grid;
+                position: relative;
+                outline: none;
+            }
+
+            tr.body {
+                width: 100%;
+                border-bottom: 1px solid var(--color-divider, #d0d3db);
+                display: flex;
+                overflow: visible;
+            }
+            tr:focus {
+                background-color: var(--color-primary-light, #f0fadf);
+                outline: none;
+            }
+            // tr.selected:focus {
+            //     background-color: var(--color-primary-main, #f0fadf);
+            //     outline: none;
+            // }
+
+            tr.body:hover:not(.selected):not(:focus) {
+                cursor: pointer;
+                background-color: var(--background-default, #eff3f4);
+            }
+
+            td {
+                display: table-cell;
+                white-space: nowrap;
+                overflow: hidden;
+                padding: 0px 14px;
+                font-weight: 500;
+                font-size: 12px;
+                color: var(--text-primary, #111827);
+                display: flex;
+                align-items: center;
+            }
+
+            .column-header {
+                font-size: 11px;
+                font-weight: 600;
+                color: var(--text-secondary, #5d6371);
+                cursor: pointer;
+                gap: 0.25rem;
+                justify-content: center;
+                align-items: center;
+                margin: 0 0.25rem;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                height: inherit;
+                display: flex;
+            }
+            .no-select,
+            .no-select * {
+                user-select: none !important;
+            }
+            .ellipsis {
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+            }
+
+            .icons-group-pin {
+                display: flex;
+                height: 100%;
+                justify-content: space-between;
+                flex-grow: 1;
+            }
+
+            .flex {
+                display: flex;
+            }
+
+            .drag-handle {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                padding: 1px 6px;
+                cursor: grab;
+            }
+
+            .resizer {
+                height: 23px;
+                padding: 0 0 0 6px;
+                text-align: start;
+                //cursor: col-resize;
+                user-select: none;
+                touch-action: none;
+            }
+
+            .resize-handle {
+                position: absolute;
+                top: 0;
+                right: 0px;
+                width: 6px;
+                height: 100%;
+                background: transparent;
+                cursor: col-resize;
+                transition: background-color 0.2s ease-in-out;
+                // border-radius: 5px;
+                // padding-bottom: 5px;
+            }
+
+            .resize-handle:hover {
+                border-right: 2px solid var(--color-primary-main, #75b603);
+            }
+
+            .resizer.ltr {
+                right: 0;
+            }
+
+            .resizer.rtl {
+                left: 0;
+            }
+
+            .resizer.is-resizing {
+                opacity: 1;
+            }
+
+            .footer-container {
+                position: sticky;
+                left: 0;
+                bottom: 0;
+                background-color: var(--background-paper, #fff);
+                width: auto;
+                border-top: 1px solid var(--color-divider, #d0d3db);
+                height: 2.375rem;
+                display: flex;
+                flex-direction: row;
+                justify-content: space-between;
+                align-items: center;
+                // padding: 0 16px;
+                z-index: 10;
+            }
+
+            .right-actions {
+                position: absolute;
+                right: 0;
+                display: flex;
+            }
+
+            .numberCount {
+                margin: 0.375rem 0;
+                font-size: 12px;
+                font-weight: 400;
+                color: var(--text-primary, #111827);
+                display: flex;
+                align-items: center;
+            }
+
+            .scroll-button {
+                position: absolute;
+                top: 50%;
+                transform: translateY(-50%);
+                z-index: 1000;
+                cursor: pointer;
+            }
+
+            .scroll-button.left {
+                left: 3rem;
+            }
+
+            .scroll-button.right {
+                right: 3rem;
+            }
+
+            .selected {
+                background-color: var(--color-primary-light, #f0fadf);
+            }
+
+            .sortFilled {
+                visibility: hidden;
+            }
+            .header {
+                display: flex;
+                align-items: center;
+                height: 100%;
+            }
+            .header:hover .sortFilled {
+                visibility: visible;
+            }
+            .grouped-column {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                width: 100%;
+                gap: 0.25rem;
+            }
+            .grouped-column--icon-button {
+                display: flex;
+                align-items: center;
+                position: relative;
+                top: -1.5px;
+            }
+            .grouped-column--label {
+                display: flex;
+                align-items: center;
+                overflow: hidden;
+                flex-grow: 1;
+            }
+            .grouped-column--pill {
+                margin-left: 0.5rem;
+            }
+            .filterCirclePoint {
+                width: 8px;
+                height: 8px;
+                border-radius: 50%;
+                background-color: var(--color-primary-main, #75b603);
+                display: inline-block;
+                vertical-align: middle;
+            }
+            .cursor {
+                cursor: pointer;
+                color: var(--text-secondary, #5d6371);
+            }
+            .data-grid__empty-text {
+                color: var(--text-primary, #5d6371);
+            }
         `,
 ];
 __decorate([
@@ -1605,9 +2060,15 @@ __decorate([
 __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);
@@ -1632,9 +2093,6 @@ __decorate([
 __decorate([
     property({ type: Object })
 ], LitDataGridTanstack.prototype, "columnSizing", void 0);
-__decorate([
-    property({ type: String })
-], LitDataGridTanstack.prototype, "requestUrl", void 0);
 __decorate([
     property({ type: Array })
 ], LitDataGridTanstack.prototype, "leftPinnedColumns", void 0);
@@ -1644,6 +2102,9 @@ __decorate([
 __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);
@@ -1653,6 +2114,42 @@ __decorate([
 __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);
@@ -1667,58 +2164,55 @@ __decorate([
 ], LitDataGridTanstack.prototype, "rowDensityChange", void 0);
 __decorate([
     property({ type: Function })
-], LitDataGridTanstack.prototype, "onColumnResize", void 0);
+], LitDataGridTanstack.prototype, "exportExcelFn", void 0);
 __decorate([
-    property({ type: Boolean })
-], LitDataGridTanstack.prototype, "onColumnFiltersChanged", void 0);
+    property({ type: Function })
+], LitDataGridTanstack.prototype, "exportCsvFn", void 0);
 __decorate([
-    property({ type: Boolean })
-], LitDataGridTanstack.prototype, "onColumnSortChanged", void 0);
+    property({ type: Function })
+], LitDataGridTanstack.prototype, "getTotalNumberFn", void 0);
 __decorate([
     property({ type: Function })
-], LitDataGridTanstack.prototype, "onRowSelectionChanged", void 0);
+], LitDataGridTanstack.prototype, "onCellKeyDown", void 0);
 __decorate([
     property({ type: Function })
-], LitDataGridTanstack.prototype, "exportExcelFn", void 0);
+], LitDataGridTanstack.prototype, "getRowId", void 0);
 __decorate([
     property({ type: Function })
-], LitDataGridTanstack.prototype, "exportCsvFn", void 0);
+], LitDataGridTanstack.prototype, "onColumnResize", void 0);
 __decorate([
     property({ type: Boolean })
-], LitDataGridTanstack.prototype, "enableRowSelection", void 0);
-__decorate([
-    property({ type: Array })
-], LitDataGridTanstack.prototype, "initialFiltering", void 0);
+], LitDataGridTanstack.prototype, "onColumnFiltersChanged", void 0);
 __decorate([
     property({ type: Boolean })
-], LitDataGridTanstack.prototype, "server", void 0);
+], LitDataGridTanstack.prototype, "onColumnSortChanged", void 0);
 __decorate([
-    property({ type: Number })
-], LitDataGridTanstack.prototype, "scrollEndThreshold", void 0);
+    property({ type: Function })
+], LitDataGridTanstack.prototype, "onRowSelectionChanged", void 0);
 __decorate([
-    property({ type: String })
-], LitDataGridTanstack.prototype, "rowDensity", void 0);
+    property({ type: Function })
+], LitDataGridTanstack.prototype, "onColumnOrderChanged", void 0);
 __decorate([
     property({ type: Boolean })
-], LitDataGridTanstack.prototype, "enableMultiRowSelection", void 0);
+], LitDataGridTanstack.prototype, "hideFooter", void 0);
+__decorate([
+    property({ type: Object })
+], LitDataGridTanstack.prototype, "columnVisibility", void 0);
 __decorate([
     property({ type: Function })
-], LitDataGridTanstack.prototype, "getTotalNumberFn", void 0);
+], LitDataGridTanstack.prototype, "onColumnVisibilityChanged", void 0);
 __decorate([
-    property({ type: Number })
-], LitDataGridTanstack.prototype, "totalNumberRows", void 0);
+    property({ type: Function })
+], LitDataGridTanstack.prototype, "onMouseDown", void 0);
 __decorate([
-    property({ type: Number })
-], LitDataGridTanstack.prototype, "minFilterCharacters", void 0);
+    property({ type: Function })
+], LitDataGridTanstack.prototype, "onRowFocusChanged", void 0);
 __decorate([
-    property({ type: Boolean })
-], LitDataGridTanstack.prototype, "localizeDate", void 0);
+    property({ type: Number })
+], LitDataGridTanstack.prototype, "focusedRowIndex", void 0);
 __decorate([
     property({ type: Boolean })
-], LitDataGridTanstack.prototype, "rowsSelected", void 0);
-__decorate([
-    property({ type: Function })
-], LitDataGridTanstack.prototype, "getRowId", void 0);
+], LitDataGridTanstack.prototype, "autoFocus", void 0);
 __decorate([
     state()
 ], LitDataGridTanstack.prototype, "rowsCount", void 0);
@@ -1733,22 +2227,25 @@ __decorate([
 ], LitDataGridTanstack.prototype, "disableScrollRight", void 0);
 __decorate([
     state()
-], LitDataGridTanstack.prototype, "filters", void 0);
+], LitDataGridTanstack.prototype, "columnOrder", void 0);
 __decorate([
     state()
-], LitDataGridTanstack.prototype, "filtersServer", void 0);
+], LitDataGridTanstack.prototype, "table", void 0);
 __decorate([
     state()
-], LitDataGridTanstack.prototype, "sorting", void 0);
+], LitDataGridTanstack.prototype, "isOpen", void 0);
 __decorate([
     state()
-], LitDataGridTanstack.prototype, "rowExpanded", void 0);
+], LitDataGridTanstack.prototype, "filterText", void 0);
 __decorate([
     state()
-], LitDataGridTanstack.prototype, "table", void 0);
+], LitDataGridTanstack.prototype, "isOpenModal", void 0);
 __decorate([
-    state()
-], LitDataGridTanstack.prototype, "rowHeight", void 0);
+    query('tbody')
+], LitDataGridTanstack.prototype, "tableBody", void 0);
+__decorate([
+    query('.grid')
+], LitDataGridTanstack.prototype, "_container", void 0);
 LitDataGridTanstack = __decorate([
     customElement('lit-data-grid-tanstack')
 ], LitDataGridTanstack);