overview-components 0.8.0 → 1.0.0

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

@@ -4,7 +4,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import * as XLSX from 'xlsx';
 import { css, html, LitElement } from 'lit';
 import { msg } from '@lit/localize';
 import { customElement, property, state } from 'lit/decorators.js';
@@ -23,10 +22,13 @@ import '../shared/lit-tooltip.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 '../shared/lit-data-grid-density-popover.js';
+import '../shared/lit-loading-bar.js';
 // utils
 import { formatDate } from '../utils/date.js';
-import { dateFilterFn } from './custom-filters';
-import { setLocale } from '../utils/localization.js';
+import { dateFilterFn, multiselectFilterFn } from '../utils/custom-filters.js';
+import { setLocale, getLocale } from '../utils/localization.js';
 let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
     constructor() {
         super(...arguments);
@@ -45,14 +47,24 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
         this.enableFiltering = true;
         this.userLang = 'cs';
         this.dateFormat = null;
-        this.tableController = new TableController(this);
-        this.tableContainerRef = createRef();
+        this.isLoading = false;
+        this.enableRowSelectionOnClick = false;
+        this.initialFiltering = [];
+        this.server = false;
+        this.onColumnFiltersChanged = (filterModel) => { };
+        this.onColumnSortChanged = (sortModel) => { };
+        this.scrollEndThreshold = 100;
+        this.rowDensity = 'standard';
         this.rowsCount = 0;
-        // @state() grouping: any = this.initialGroups;
+        this.selectedRowId = null;
         this.isScrollable = false;
         this.disableScrollLeft = true;
         this.disableScrollRight = false;
-        this.isLoading = true;
+        this.filters = [];
+        this.sorting = [];
+        this.rowHeight = 31;
+        this.scrollToEnd = false;
+        this.tableContainerRef = createRef();
         this.scrollInterval = null;
         this.getCellBackgroundColor = (cell) => {
             if (cell.getIsGrouped()) {
@@ -79,54 +91,157 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
             }
         };
     }
+    get rows() {
+        return [...(this.row || [])];
+    }
+    get getColumns() {
+        return [...(this.columns || [])];
+    }
+    // lifecycle
     connectedCallback() {
-        this.setLanguage();
-        this.table.setGrouping([...(this.initialGroups || [])]);
-        if (this.enableRowVirtualization && this.table) {
-            this.initializeVirtualizer();
-        }
-        if (this.enableColumnVirtualization) {
-            // Inicializácia columnVirtualizerController (stĺpcová virtualizácia)
-            this.columnVirtualizerController = new VirtualizerController(this, {
-                horizontal: true,
-                count: this.table.getVisibleLeafColumns().length,
-                getScrollElement: () => this.tableContainerRef.value,
-                estimateSize: (index) => this.table.getVisibleLeafColumns()[index].getSize(),
-                overscan: 5,
-            });
-        }
         super.connectedCallback();
+        this.initRowVirtualizer();
+        this.initColumnVirtualizer();
+        this.initTable();
         window.addEventListener('resize', this.updateScrollState);
+        document.addEventListener('keydown', this.handleKeyDown.bind(this));
     }
     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) {
+            this.scrollToEnd = false;
+            this.initRowVirtualizer();
+            this.requestUpdate();
+        }
+        if (changedProperties.has('columns') && this.enableColumnVirtualization) {
+            this.initColumnVirtualizer();
+            this.requestUpdate();
+        }
+        if (changedProperties.has('initialFiltering')) {
+            this.filters = [...(this.initialFiltering || [])];
+        }
+        if (changedProperties.has('initialSorting')) {
+            this.sorting = [...(this.initialSorting || [])];
+        }
+        if (changedProperties.has('rowDensity')) {
+            this.rowHeight = this.getRowHeight();
+        }
+        if (changedProperties.has('row') || changedProperties.has('columns')) {
+            this.initTable();
+            this.requestUpdate();
+        }
     }
-    setLanguage() {
-        const lang = this.userLang || localStorage.getItem('userLang');
-        if (lang) {
-            setLocale(lang);
+    firstUpdated() {
+        const grid = this.tableContainerRef.value;
+        if (grid) {
+            grid.addEventListener('scroll', this.updateScrollState);
         }
+        this.updateScrollState();
     }
-    initializeVirtualizer() {
+    async loadXLSX() {
+        if (!window.XLSX) {
+            await new Promise((resolve) => {
+                const script = document.createElement('script');
+                script.src = '../../public/libs/xlsx.mini.min.js';
+                script.onload = resolve;
+                document.head.appendChild(script);
+            });
+        }
+    }
+    // row density
+    getRowHeight() {
+        switch (this.rowDensity) {
+            case 'compact':
+                return 31;
+            case 'standard':
+                return 38;
+            case 'comfort':
+                return 50;
+            default:
+                return 38;
+        }
+    }
+    getButtonSize() {
+        switch (this.rowDensity) {
+            case 'compact':
+                return 'small';
+            case 'standard':
+                return 'medium';
+            case 'comfort':
+                return 'large';
+            default:
+                return 'medium';
+        }
+    }
+    handleSetDensity(density) {
+        this.rowDensity = density;
+    }
+    // scroll by keyboard arrows
+    handleKeyDown(event) {
+        if (!this.enableRowSelectionOnClick)
+            return;
+        const rows = this.table.getRowModel().rows;
+        const currentIndex = rows.findIndex((row) => row.id === this.selectedRowId);
+        if (event.key === 'ArrowDown') {
+            if (!this.selectedRowId) {
+                // this.selectedRowId = rows[0]?.id; // Select first row if none selected
+                return;
+            }
+            const nextIndex = Math.min(currentIndex + 1, (rows.length ?? 0) - 1);
+            this.selectedRowId = rows[nextIndex].id;
+        }
+        else if (event.key === 'ArrowUp') {
+            if (!this.selectedRowId) {
+                // this.selectedRowId = rows[0]?.id; // Select first row if none selected
+                return;
+            }
+            const prevIndex = Math.max(currentIndex - 1, 0);
+            this.selectedRowId = rows[prevIndex].id;
+        }
+        else if (event.key === 'Enter' && this.selectedRowId) {
+            const selectedRow = rows.find((row) => row.id === this.selectedRowId);
+            if (selectedRow) {
+                this.handleRowDoubleClick(selectedRow);
+            }
+        }
+    }
+    // virtualization
+    initRowVirtualizer() {
         this.rowVirtualizerController = new VirtualizerController(this, {
-            count: this.table.getRowModel().rows.length, // number of rows
+            count: this.table?.getRowModel()?.rows.length || this.row?.length || 1,
             getScrollElement: () => this.tableContainerRef.value,
-            estimateSize: () => 38, // estimate row height for accurate scrollbar dragging
-            overscan: 5, // buffer to render more rows for smoother scrolling
+            estimateSize: () => this.rowHeight,
+            overscan: 5,
         });
     }
-    updated(changedProperties) {
-        // console.log('changedProperties', changedProperties);
-        // Check if `table` has changed and update the virtualizer if needed
-        if (changedProperties.has('rowsCount')) {
-            if (this.enableRowVirtualization && this.table) {
-                this.initializeVirtualizer();
-                this.requestUpdate();
-            }
+    initTable() {
+        this.tableController = new TableController(this);
+    }
+    initColumnVirtualizer() {
+        this.columnVirtualizerController = new VirtualizerController(this, {
+            horizontal: true,
+            count: this.table?.getVisibleLeafColumns().length || this.columns.length || 1,
+            getScrollElement: () => this.tableContainerRef.value,
+            estimateSize: (index) => this.table.getVisibleLeafColumns()[index].getSize() || 200,
+            overscan: 5,
+        });
+    }
+    handleRowClick(row) {
+        if (this.onRowClick) {
+            this.onRowClick(row);
         }
-        if (changedProperties.has('row')) {
-            this.isLoading = !(this.row && this.row.length > 0);
+        if (!this.enableRowSelectionOnClick)
+            return;
+        this.selectedRowId = row.id;
+    }
+    handleRowDoubleClick(row) {
+        if (this.onRowDoubleClick) {
+            this.onRowDoubleClick(row);
         }
     }
     getTanstackColumns(columns) {
@@ -141,19 +256,25 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
                     const value = props.getValue();
                     const isGrouped = props.row.getIsGrouped?.();
                     const isAggregated = props.row.getIsAggregated?.();
-                    if (isGrouped && column.type !== 'date') {
+                    if (isGrouped) {
+                        if (column.type === 'date') {
+                            return formatDate(value, this.userLang || 'cs', undefined, this.dateFormat);
+                        }
+                        if (column.type === 'dateTime') {
+                            return formatDate(value, this.userLang || 'cs', true, this.dateFormat);
+                        }
                         return value;
                     }
-                    if (isGrouped && column.type === 'date') {
-                        return formatDate(value, this.userLang || 'cs', this.dateFormat);
-                    }
                     if (isAggregated) {
                         return value;
                     }
                     if (column.type === 'date' && value) {
-                        return formatDate(value, this.userLang || 'cs', this.dateFormat);
+                        return formatDate(value, this.userLang || 'cs', undefined, this.dateFormat);
                     }
-                    return column.cell ? column.cell(props) : value;
+                    if (column.type === 'dateTime' && value) {
+                        return formatDate(value, this.userLang || 'cs', true, this.dateFormat);
+                    }
+                    return column.cell ? column.cell(props, html) : value;
                 },
                 filterFn: (() => {
                     switch (column.type) {
@@ -161,12 +282,14 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
                             return filterFns.inNumberRange;
                         case 'select':
                             return filterFns.weakEquals;
+                        case 'multiselect':
+                            return multiselectFilterFn;
                         case 'number':
                             return filterFns.weakEquals;
                         case 'date':
+                        case 'dateTime':
                             return dateFilterFn;
                         case 'string':
-                            return filterFns.includesString;
                         default:
                             return filterFns.includesString;
                     }
@@ -183,40 +306,6 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
             };
         });
     }
-    get table() {
-        return this.tableController.table({
-            data: this.row || [],
-            columns: this.getTanstackColumns(this.columns),
-            columnResizeMode: 'onChange',
-            columnResizeDirection: 'ltr',
-            defaultColumn: {
-                size: this.columnDefaultSize || 250, //starting column size
-                minSize: this.columnDefaultMinSize || 100, //enforced during column resizing
-                maxSize: this.columnDefaultMaxSize || 500, //enforced during column resizing
-            },
-            initialState: {
-                sorting: [...(this.initialSorting || [])],
-                columnVisibility: { ...this.initialColumnVisibility },
-                columnPinning: {
-                    left: [...(this.leftPinnedColumns || [])],
-                    right: [...(this.rightPinnedColumns || [])],
-                },
-            },
-            filterFns: {
-                dateFilterFn: dateFilterFn,
-            },
-            enableColumnPinning: this.enableColumnPinning,
-            enableGrouping: this.enableGrouping,
-            // groupedColumnMode: 'reorder',
-            getCoreRowModel: getCoreRowModel(),
-            getSortedRowModel: getSortedRowModel(),
-            getFilteredRowModel: getFilteredRowModel(),
-            getFacetedRowModel: getFacetedRowModel(),
-            getGroupedRowModel: getGroupedRowModel(),
-            getExpandedRowModel: getExpandedRowModel(),
-            getFacetedUniqueValues: getFacetedUniqueValues(),
-        });
-    }
     getCommonPinningStyles(column) {
         const isPinned = column.getIsPinned();
         const isLastLeftPinnedColumn = isPinned === 'left' && column.getIsLastColumn('left');
@@ -236,6 +325,7 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
             header.column.pin('left'); // Pripnutie doľava
         }
     }
+    // export to excel and csv
     exportDataToCsv() {
         const rows = this.getAllRowsIncludingGrouped(this.table.getRowModel().rows); // Získanie všetkých riadkov vrátane skupín
         if (!rows || rows.length === 0) {
@@ -278,7 +368,9 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
         link.click();
         URL.revokeObjectURL(url);
     }
-    exportDataToExcel() {
+    async exportDataToExcel() {
+        await this.loadXLSX(); // Ensure XLSX is loaded
+        const XLSX = window.XLSX;
         const rows = this.getAllRowsIncludingGrouped(this.table.getRowModel().rows); // Získanie všetkých riadkov vrátane skupín
         if (!rows || rows.length === 0) {
             console.warn('No data to export');
@@ -339,13 +431,6 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
         });
         return allRows.filter((row, index, self) => index === self.findIndex((r) => r.id === row.id));
     }
-    firstUpdated() {
-        const grid = this.tableContainerRef.value;
-        if (grid) {
-            grid.addEventListener('scroll', this.updateScrollState);
-        }
-        this.updateScrollState();
-    }
     startScroll(direction) {
         const grid = this.tableContainerRef.value;
         if (!grid)
@@ -364,13 +449,88 @@ 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) &&
+            this.onRowsScrollEnd &&
+            !this.isLoading &&
+            !this.scrollToEnd) {
+            this.scrollToEnd = true;
+            this.onRowsScrollEnd();
+        }
+    }
     render() {
+        if (getLocale() !== this.userLang) {
+            setLocale(this.userLang || 'cs');
+        }
+        this.table = this.tableController.table({
+            data: this.rows || [],
+            columns: this.getTanstackColumns(this.getColumns),
+            columnResizeMode: 'onChange',
+            columnResizeDirection: 'ltr',
+            defaultColumn: {
+                size: this.columnDefaultSize || undefined, //starting column size
+                minSize: this.columnDefaultMinSize || 100, //enforced during column resizing
+                maxSize: this.columnDefaultMaxSize || 500, //enforced during column resizing
+            },
+            initialState: {
+                // columnFilters: [...(this.initialFiltering || [])],
+                sorting: [...(this.initialSorting || [])],
+                grouping: [...(this.initialGroups || [])],
+                columnVisibility: { ...this.initialColumnVisibility },
+                columnPinning: {
+                    left: [...(this.leftPinnedColumns || [])],
+                    right: [...(this.rightPinnedColumns || [])],
+                },
+            },
+            state: {
+                columnFilters: this.filters,
+                sorting: this.sorting,
+            },
+            filterFns: {
+                dateFilterFn: dateFilterFn,
+                multiselectFilterFn: multiselectFilterFn,
+            },
+            // debugTable: true,
+            enableColumnPinning: this.enableColumnPinning,
+            enableGrouping: this.enableGrouping,
+            manualFiltering: this.server,
+            getRowId: (row, index) => index.toString(),
+            // groupedColumnMode: 'reorder',
+            getCoreRowModel: getCoreRowModel(),
+            getSortedRowModel: getSortedRowModel(),
+            getFilteredRowModel: getFilteredRowModel(),
+            getFacetedRowModel: getFacetedRowModel(),
+            getGroupedRowModel: getGroupedRowModel(),
+            getExpandedRowModel: getExpandedRowModel(),
+            getFacetedUniqueValues: getFacetedUniqueValues(),
+            onColumnFiltersChange: (updaterOrValue) => {
+                const filtersState = typeof updaterOrValue === 'function'
+                    ? updaterOrValue(this.table.getState().columnFilters)
+                    : updaterOrValue;
+                this.filters = filtersState;
+                if (this.onColumnFiltersChanged) {
+                    this.onColumnFiltersChanged(filtersState);
+                }
+            },
+            onSortingChange: (updaterOrValue) => {
+                const sortingState = typeof updaterOrValue === 'function'
+                    ? updaterOrValue(this.table.getState().sorting)
+                    : updaterOrValue;
+                this.sorting = sortingState;
+                if (this.onColumnSortChanged) {
+                    this.onColumnSortChanged(sortingState);
+                }
+            },
+        });
+        this.rowsCount = this.table.getRowModel().rows.length;
         // Ak virtualizácia nie je povolená, použijeme celý zoznam riadkov alebo stĺpcov
         const rowVirtualizer = this.enableRowVirtualization
-            ? this.rowVirtualizerController.getVirtualizer()
+            ? this.rowVirtualizerController?.getVirtualizer()
             : null;
         const columnVirtualizer = this.enableColumnVirtualization
-            ? this.columnVirtualizerController.getVirtualizer()
+            ? this.columnVirtualizerController?.getVirtualizer()
             : null;
         const virtualColumns = columnVirtualizer?.getVirtualItems() ?? [];
         // Get table rows (either virtualized or all)
@@ -381,16 +541,15 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
             : rows.map((_, index) => ({
                 key: index,
                 index,
-                start: index * 38,
-                end: (index + 1) * 38,
-                size: 38,
+                start: index * this.rowHeight,
+                end: (index + 1) * this.rowHeight,
+                size: this.rowHeight,
                 lane: 0,
             }));
         // console.log('rowItems', rowItems);
         // Calculate padding for virtualization
         let virtualPaddingLeft;
         let virtualPaddingRight;
-        this.rowsCount = this.table.getRowModel().rows.length;
         if (columnVirtualizer && virtualColumns?.length && this.enableColumnVirtualization) {
             virtualPaddingLeft = virtualColumns[0]?.start ?? 0;
             virtualPaddingRight =
@@ -426,7 +585,7 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
                           </lit-icon-button>
                       `
             : null}
-                <div class="grid" ${ref(this.tableContainerRef)}>
+                <div class="grid" ${ref(this.tableContainerRef)} @scroll="${this.handleScroll}">
                     <table style="width: ${this.table.getCenterTotalSize()}px">
                         <thead style="height: ${this.enableFiltering ? '4rem' : '1.625rem'};">
                             ${repeat(this.table.getHeaderGroups(), (headerGroup) => headerGroup.id, (headerGroup) => {
@@ -453,6 +612,7 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
                 const style = {
                     ...this.getCommonPinningStyles(header.column),
                     width: `${column.getSize()}px`,
+                    flexGrow: `${column.columnDef.size === undefined ? 1 : 'unset'}`,
                 };
                 return html `
                                                         <th
@@ -488,15 +648,28 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
                         : ''}"
                                                                       >
                                                                           <div
-                                                                              style="display: flex; align-items: center; justify-content: space-between; height: 100%"
+                                                                              style="display: flex; align-items: center; height: 100%;"
                                                                           >
                                                                               <div
                                                                                   class="column-header"
                                                                                   @click=${header.column.getToggleSortingHandler()}
                                                                               >
-                                                                                  ${header.column
+                                                                                  <lit-overflow-tooltip
+                                                                                      label="${header
+                        .column
+                        .columnDef
+                        .header}"
+                                                                                  >
+                                                                                      ${header
+                        .column
                         .columnDef
                         .header}
+                                                                                  </lit-overflow-tooltip>
+                                                                              </div>
+
+                                                                              <div
+                                                                                  class="icons-group-pin"
+                                                                              >
                                                                                   ${header.column.getIsSorted()
                         ? header.column.getIsSorted() ===
                             'asc'
@@ -507,72 +680,69 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
                                                                                                     icon="chevronUpFilled"
                                                                                                 ></lit-icon
                                                                                             ></slot>`
-                            : html `<slot
+                            : html `<slothea
                                                                                                 name="iconSortDown"
                                                                                             >
                                                                                                 <lit-icon
                                                                                                     size="0.75rem"
                                                                                                     icon="chevronDownFilled"
                                                                                                 ></lit-icon>
-                                                                                            </slot>`
-                        : ''}
-                                                                              </div>
-
-                                                                              <span
-                                                                                  style="display: flex; height: 100%"
-                                                                              >
-                                                                                  ${!this
+                                                                                            </slothea>`
+                        : html `<div></div>`}
+                                                                                  <div class="flex">
+                                                                                      ${!this
                         .actionButtonsInMenu
                         ? html `
-                                                                                            ${header.column.getCanPin()
+                                                                                                ${header.column.getCanPin()
                             ? html `
-                                                                                                      <lit-tooltip
-                                                                                                          label="${header.column.getIsPinned()
+                                                                                                          <lit-tooltip
+                                                                                                              label="${header.column.getIsPinned()
                                 ? msg('Zrušit připnutí sloupce')
                                 : msg('Připnout sloupec vlevo')}"
-                                                                                                          variant="bottom"
-                                                                                                      >
-                                                                                                          <lit-icon-button
-                                                                                                              @click="${() => this.togglePin(header)}"
-                                                                                                              size="small"
-                                                                                                              variant="text"
-                                                                                                              icon="pin"
-                                                                                                              .active="${header.column.getIsPinned()}"
+                                                                                                              variant="bottom"
                                                                                                           >
-                                                                                                          </lit-icon-button>
-                                                                                                      </lit-tooltip>
-                                                                                                  `
+                                                                                                              <lit-icon-button
+                                                                                                                  @click="${() => this.togglePin(header)}"
+                                                                                                                  size="small"
+                                                                                                                  variant="text"
+                                                                                                                  icon="pin"
+                                                                                                                  .active="${header.column.getIsPinned()}"
+                                                                                                              >
+                                                                                                              </lit-icon-button>
+                                                                                                          </lit-tooltip>
+                                                                                                      `
                             : ''}
-                                                                                            ${header.column.getCanGroup()
+                                                                                                ${header.column.getCanGroup()
                             ? html `
-                                                                                                      <lit-tooltip
-                                                                                                          label="${header.column.getIsGrouped()
+                                                                                                          <lit-tooltip
+                                                                                                              label="${header.column.getIsGrouped()
                                 ? msg('Zrušit seskupení')
                                 : msg('Seskupit sloupec')}"
-                                                                                                          variant="bottom"
-                                                                                                      >
-                                                                                                          <lit-icon-button
-                                                                                                              @click="${header.column.getToggleGroupingHandler()}"
-                                                                                                              size="small"
-                                                                                                              variant="text"
-                                                                                                              .active="${header.column.getIsGrouped()}"
-                                                                                                              icon="agregation"
+                                                                                                              variant="bottom"
                                                                                                           >
-                                                                                                          </lit-icon-button>
-                                                                                                      </lit-tooltip>
-                                                                                                  `
+                                                                                                              <lit-icon-button
+                                                                                                                  @click="${header.column.getToggleGroupingHandler()}"
+                                                                                                                  size="small"
+                                                                                                                  variant="text"
+                                                                                                                  .active="${header.column.getIsGrouped()}"
+                                                                                                                  icon="agregation"
+                                                                                                              >
+                                                                                                              </lit-icon-button>
+                                                                                                          </lit-tooltip>
+                                                                                                      `
                             : ''}
-                                                                                        `
+                                                                                            `
                         : html `
-                                                                                            <lit-data-grid-action-buttons-popover
-                                                                                                .group="${header.column.getToggleGroupingHandler()}"
-                                                                                                .pin="${() => this.togglePin(header)}"
-                                                                                                .header="${header}"
-                                                                                                .table="${this
+                                                                                                <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>
-                                                                                        `}
-                                                                              </span>
+                                                                                                ></lit-data-grid-action-buttons-popover>
+                                                                                            `}
+                                                                                  </div>
+                                                                              </div>
                                                                           </div>
                                                                       </div>
                                                                       ${header.column.getCanFilter()
@@ -620,15 +790,15 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
                                         </tr>
                                     `;
         })}
-                        </thead>
-                        ${this.isLoading
+                            ${this.isLoading
             ? html `
-                                  <div class="progress-root">
-                                      <div class="bar bar1Indeterminate"></div>
-                                      <div class="bar bar2Indeterminate"></div>
-                                  </div>
-                              `
+                                      <div style="position: absolute; bottom: 0px; width: 100%;">
+                                          <lit-loading-bar></lit-loading-bar>
+                                      </div>
+                                  `
             : ''}
+                        </thead>
+
                         <tbody
                             style="height: ${rowVirtualizer &&
             this.table.getRowModel().rows.length > 0
@@ -647,20 +817,24 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
                 const newBodyColumns = this.enableColumnVirtualization
                     ? [...new Set([...pinnedColumns, ...bodyColumns])]
                     : bodyColumns;
-                const tbodyStyle = {
+                const rowStyle = {
                     transform: rowVirtualizer
                         ? `translateY(${item.start}px)`
                         : 'none',
-                    height: '38px',
-                    lineHeight: '38px',
+                    height: `${this.rowHeight}px`,
+                    lineHeight: `${this.rowHeight}px`,
                     position: rowVirtualizer ? 'absolute' : 'relative',
                 };
                 return row
                     ? html `
                                                     <tr
-                                                        class="body"
+                                                        class="${this.selectedRowId === row.id
+                        ? 'selected body'
+                        : 'body'}"
                                                         data-index="${item.index}"
-                                                        style="${styleMap(tbodyStyle)}"
+                                                        @click="${() => this.handleRowClick(row)}"
+                                                        @dblclick="${() => this.handleRowDoubleClick(row)}"
+                                                        style="${styleMap(rowStyle)}"
                                                         ${ref((node) => {
                         if (node &&
                             this.enableRowVirtualization &&
@@ -679,12 +853,14 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
                         : ''}
                                                         <!-- 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`,
+                            flexGrow: `${column.columnDef.size === undefined ? 1 : 'unset'}`,
                             background: this.getCellBackgroundColor(cell),
-                            lineHeight: '2.3125rem', // správny zápis reťazca
+                            lineHeight: `${this.rowHeight}px`,
                         };
                         return html `
                                                                     <td style="${styleMap(style)}">
@@ -693,6 +869,7 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
                                                                                   <lit-button
                                                                                       @click="${row.getToggleExpandedHandler()}"
                                                                                       variant="inherit"
+                                                                                      size="${buttonSize}"
                                                                                       count="${row
                                 .subRows
                                 .length}"
@@ -764,6 +941,11 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
                             ${msg('Počet záznamů')}: ${this.table.getRowModel().rows.length}
                         </span>
                         <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"
@@ -776,20 +958,15 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
                                       <lit-data-grid-export-popover
                                           .exportToCsv="${() => this.exportDataToCsv()}"
                                           .exportToExcel="${() => this.exportDataToExcel()}"
+                                          .disabledButtons="${this.isLoading}"
                                       >
-                                          <slot slot="iconExcel" name="iconExcel"
-                                              ><lit-icon icon="csv"></lit-icon
-                                          ></slot>
-                                          <slot slot="iconCsv" name="iconCsv"
-                                              ><lit-icon icon="csv"></lit-icon
-                                          ></slot>
                                       </lit-data-grid-export-popover>
                                   `
             : null}
                         </div>
                     </div>
                 </div>
-                ${this.table.getRowModel().rows.length < 1
+                ${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>
@@ -816,20 +993,21 @@ LitDataGridTanstack.styles = [
             font-family: 'Inter', sans-serif;
             box-sizing: border-box;
 
-            table {
-                border-collapse: collapse;
-                border-spacing: 0;
-                width: 100%;
-            }
             td {
                 padding: 0px;
             }
 
             .data-grid__wrapper {
                 position: relative;
-                padding: var(--section-padding, 0.75rem 1rem);
-                border-radius: 0.75rem;
                 background-color: var(--background-paper, #fff);
+                height: 100%;
+                z-index: 1;
+            }
+
+            .grid {
+                overflow: auto;
+                position: relative;
+                height: 100%;
             }
 
             .data-grid__empty {
@@ -842,15 +1020,12 @@ LitDataGridTanstack.styles = [
             }
 
             table {
+                border-collapse: collapse;
+                border-spacing: 0;
+                width: 100% !important;
                 height: calc(100% - 38px);
             }
 
-            .grid {
-                overflow: auto;
-                position: relative;
-                height: 500px;
-            }
-
             thead {
                 display: flex;
                 position: sticky;
@@ -893,7 +1068,7 @@ LitDataGridTanstack.styles = [
                 display: table-cell;
                 white-space: nowrap;
                 overflow: hidden;
-                padding: 0px 12px;
+                padding: 0px 14px;
                 font-weight: 500;
                 font-size: 13px;
                 color: var(--text-primary, #111827);
@@ -905,10 +1080,31 @@ LitDataGridTanstack.styles = [
                 color: var(--text-secondary, #5d6371);
                 cursor: pointer;
                 gap: 0.25rem;
-                display: flex;
                 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 {
@@ -961,7 +1157,7 @@ LitDataGridTanstack.styles = [
                 flex-direction: row;
                 justify-content: space-between;
                 align-items: center;
-                padding: 0 16px;
+                // padding: 0 16px;
                 z-index: 10;
             }
 
@@ -994,73 +1190,13 @@ LitDataGridTanstack.styles = [
                 right: 3rem;
             }
 
-            .progress-root {
-                position: sticky;
-                overflow: hidden;
-                display: block;
-                width: 100%;
-
-                height: 4px;
-                background-color: #e0e0e0; /* Podobná farba pozadia ako v MUI */
-                box-sizing: border-box;
-            }
-
-            .bar {
-                position: absolute;
-                height: 100%;
-                display: block;
-                background-color: #75b603; /* Podobná farba ako primary theme v MUI */
-                width: auto;
-                will-change: left, right;
-                box-sizing: border-box;
-            }
-
-            /* Prvá animovaná "vlna" */
-
-            .bar1Indeterminate {
-                animation: mui-indeterminate1 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
-            }
-
-            /* Druhá animovaná "vlna" (oneskorená) */
-
-            .bar2Indeterminate {
-                animation: mui-indeterminate2 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
-                animation-delay: 1.05s;
-            }
-
-            @keyframes mui-indeterminate1 {
-                0% {
-                    left: -35%;
-                    right: 100%;
-                }
-                60% {
-                    left: 100%;
-                    right: -90%;
-                }
-                100% {
-                    left: 100%;
-                    right: -90%;
-                }
-            }
-
-            @keyframes mui-indeterminate2 {
-                0% {
-                    left: -200%;
-                    right: 100%;
-                }
-                60% {
-                    left: 107%;
-                    right: -8%;
-                }
-                100% {
-                    left: 107%;
-                    right: -8%;
-                }
+            .selected {
+                background-color: var(--color-primary-light, #f0fadf);
             }
         `,
 ];
 __decorate([
-    property({ type: Array })
+    property({ type: Array, reflect: true })
 ], LitDataGridTanstack.prototype, "row", void 0);
 __decorate([
     property({ type: Array })
@@ -1128,9 +1264,45 @@ __decorate([
 __decorate([
     property({ type: String })
 ], LitDataGridTanstack.prototype, "dateFormat", void 0);
+__decorate([
+    property({ type: Boolean })
+], LitDataGridTanstack.prototype, "isLoading", void 0);
+__decorate([
+    property({ type: Function })
+], LitDataGridTanstack.prototype, "onRowClick", void 0);
+__decorate([
+    property({ type: Function })
+], LitDataGridTanstack.prototype, "onRowsScrollEnd", void 0);
+__decorate([
+    property({ type: Function })
+], LitDataGridTanstack.prototype, "onRowDoubleClick", void 0);
+__decorate([
+    property({ type: Boolean })
+], LitDataGridTanstack.prototype, "enableRowSelectionOnClick", void 0);
+__decorate([
+    property({ type: Array })
+], LitDataGridTanstack.prototype, "initialFiltering", void 0);
+__decorate([
+    property({ type: Boolean })
+], LitDataGridTanstack.prototype, "server", void 0);
+__decorate([
+    property({ type: Boolean })
+], LitDataGridTanstack.prototype, "onColumnFiltersChanged", void 0);
+__decorate([
+    property({ type: Boolean })
+], LitDataGridTanstack.prototype, "onColumnSortChanged", void 0);
+__decorate([
+    property({ type: Number })
+], LitDataGridTanstack.prototype, "scrollEndThreshold", void 0);
+__decorate([
+    property({ type: String })
+], LitDataGridTanstack.prototype, "rowDensity", void 0);
 __decorate([
     state()
 ], LitDataGridTanstack.prototype, "rowsCount", void 0);
+__decorate([
+    state()
+], LitDataGridTanstack.prototype, "selectedRowId", void 0);
 __decorate([
     state()
 ], LitDataGridTanstack.prototype, "isScrollable", void 0);
@@ -1142,7 +1314,16 @@ __decorate([
 ], LitDataGridTanstack.prototype, "disableScrollRight", void 0);
 __decorate([
     state()
-], LitDataGridTanstack.prototype, "isLoading", void 0);
+], LitDataGridTanstack.prototype, "filters", void 0);
+__decorate([
+    state()
+], LitDataGridTanstack.prototype, "sorting", void 0);
+__decorate([
+    state()
+], LitDataGridTanstack.prototype, "table", void 0);
+__decorate([
+    state()
+], LitDataGridTanstack.prototype, "rowHeight", void 0);
 LitDataGridTanstack = __decorate([
     customElement('lit-data-grid-tanstack')
 ], LitDataGridTanstack);