overview-components 0.1.4 → 0.1.6

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

@@ -24,6 +24,7 @@ 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';
 // utils
 import { formatDate } from '../utils/date.js';
 import { dateFilterFn } from './custom-filters.js';
@@ -47,11 +48,21 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
         this.userLang = 'cs';
         this.dateFormat = null;
         this.isLoading = false;
+        this.disableRowSelectionOnClick = false;
+        this.initialFiltering = [];
+        this.server = false;
+        this.onColumnFiltersChanged = (filterModel) => { };
+        this.onColumnSortChanged = (sortModel) => { };
+        this.rowBufferPx = 100;
+        this.rowDensity = 'standard';
         this.rowsCount = 0;
+        this.selectedRowId = null;
         this.isScrollable = false;
         this.disableScrollLeft = true;
         this.disableScrollRight = false;
-        this.tableController = new TableController(this);
+        this.filters = [];
+        this.sorting = [];
+        this.rowHeight = 31;
         this.tableContainerRef = createRef();
         this.scrollInterval = null;
         this.getCellBackgroundColor = (cell) => {
@@ -79,24 +90,123 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
             }
         };
     }
+    get rows() {
+        return [...(this.row || [])];
+    }
+    // lifecycle
     connectedCallback() {
+        super.connectedCallback();
         this.initRowVirtualizer();
         this.initColumnVirtualizer();
-        super.connectedCallback();
+        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.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();
+        }
+    }
+    firstUpdated() {
+        const grid = this.tableContainerRef.value;
+        if (grid) {
+            grid.addEventListener('scroll', this.updateScrollState);
+        }
+        this.updateScrollState();
+    }
+    // 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.disableRowSelectionOnClick)
+            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 || this.row?.length || 1,
             getScrollElement: () => this.tableContainerRef.value,
-            estimateSize: () => 38,
+            estimateSize: () => this.rowHeight,
             overscan: 5,
         });
     }
+    initTable() {
+        this.tableController = new TableController(this);
+    }
     initColumnVirtualizer() {
         this.columnVirtualizerController = new VirtualizerController(this, {
             horizontal: true,
@@ -106,14 +216,17 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
             overscan: 5,
         });
     }
-    updated(changedProperties) {
-        if (changedProperties.has('rowsCount') && this.enableRowVirtualization) {
-            this.initRowVirtualizer();
-            this.requestUpdate();
+    handleRowClick(row) {
+        if (this.onRowClick) {
+            this.onRowClick(row);
         }
-        if (changedProperties.has('columns') && this.enableColumnVirtualization) {
-            this.initColumnVirtualizer();
-            this.requestUpdate();
+        if (this.disableRowSelectionOnClick)
+            return;
+        this.selectedRowId = row.id;
+    }
+    handleRowDoubleClick(row) {
+        if (this.onRowDoubleClick) {
+            this.onRowDoubleClick(row);
         }
     }
     getTanstackColumns(columns) {
@@ -189,6 +302,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) {
@@ -292,13 +406,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)
@@ -317,12 +424,21 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
             this.scrollInterval = null;
         }
     }
+    handleScroll(event) {
+        const container = event.target;
+        if (container.scrollTop + container.clientHeight >=
+            container.scrollHeight - (this.rowBufferPx || 100)) {
+            if (this.onRowsScrollEnd) {
+                this.onRowsScrollEnd();
+            }
+        }
+    }
     render() {
         if (getLocale() !== this.userLang) {
             setLocale(this.userLang || 'cs');
         }
         this.table = this.tableController.table({
-            data: this.row || [],
+            data: this.rows || [],
             columns: this.getTanstackColumns(this.columns),
             columnResizeMode: 'onChange',
             columnResizeDirection: 'ltr',
@@ -332,6 +448,7 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
                 maxSize: this.columnDefaultMaxSize || 500, //enforced during column resizing
             },
             initialState: {
+                // columnFilters: [...(this.initialFiltering || [])],
                 sorting: [...(this.initialSorting || [])],
                 grouping: [...(this.initialGroups || [])],
                 columnVisibility: { ...this.initialColumnVisibility },
@@ -340,11 +457,17 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
                     right: [...(this.rightPinnedColumns || [])],
                 },
             },
+            state: {
+                columnFilters: this.filters,
+                sorting: this.sorting,
+            },
             filterFns: {
                 dateFilterFn: dateFilterFn,
             },
+            debugTable: true,
             enableColumnPinning: this.enableColumnPinning,
             enableGrouping: this.enableGrouping,
+            manualFiltering: this.server,
             // groupedColumnMode: 'reorder',
             getCoreRowModel: getCoreRowModel(),
             getSortedRowModel: getSortedRowModel(),
@@ -353,7 +476,24 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
             getGroupedRowModel: getGroupedRowModel(),
             getExpandedRowModel: getExpandedRowModel(),
             getFacetedUniqueValues: getFacetedUniqueValues(),
-            // onColumnFiltersChange: () => rowVirtualizer?.measure(),
+            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
@@ -372,9 +512,9 @@ 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);
@@ -388,37 +528,37 @@ 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)}>
-                    <table style="width: ${this.table.getCenterTotalSize()}px">
-                        <thead style="height: ${this.enableFiltering ? '4rem' : '1.625rem'};">
+            : 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'};">
                             ${repeat(this.table.getHeaderGroups(), (headerGroup) => headerGroup.id, (headerGroup) => {
             const headerColumns = this.enableColumnVirtualization
                 ? virtualColumns.map((vc) => headerGroup.headers[vc.index])
@@ -429,15 +569,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 = {
@@ -445,22 +585,22 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
                     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}"
-                                                        >
+                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 ===
@@ -476,167 +616,167 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
                                 .columnSizingInfo
                                 .deltaOffset ??
                                 0)}px)`
-                        : ''}"
-                                                                      >
-                                                                          <div
-                                                                              style="display: flex; align-items: center; height: 100%;"
-                                                                          >
-                                                                              <div
-                                                                                  class="column-header"
-                                                                                  @click=${header.column.getToggleSortingHandler()}
-                                                                              >
-                                                                                  <lit-overflow-tooltip
+                        : ''}"
+                                                                      >
+                                                                          <div
+                                                                              style="display: flex; align-items: center; height: 100%;"
+                                                                          >
+                                                                              <div
+                                                                                  class="column-header"
+                                                                                  @click=${header.column.getToggleSortingHandler()}
+                                                                              >
+                                                                                  <lit-overflow-tooltip
                                                                                       label="${header
                         .column
                         .columnDef
-                        .header}"
-                                                                                  >
+                        .header}"
+                                                                                  >
                                                                                       ${header
                         .column
                         .columnDef
-                        .header}
-                                                                                  </lit-overflow-tooltip>
-                                                                              </div>
-
-                                                                              <div
-                                                                                  class="icons-group-pin"
-                                                                              >
+                        .header}
+                                                                                  </lit-overflow-tooltip>
+                                                                              </div>
+
+                                                                              <div
+                                                                                  class="icons-group-pin"
+                                                                              >
                                                                                   ${header.column.getIsSorted()
                         ? header.column.getIsSorted() ===
                             'asc'
-                            ? html `<slot
-                                                                                                name="iconSortUp"
-                                                                                                ><lit-icon
-                                                                                                    size="0.75rem"
-                                                                                                    icon="chevronUpFilled"
-                                                                                                ></lit-icon
+                            ? html `<slot
+                                                                                                name="iconSortUp"
+                                                                                                ><lit-icon
+                                                                                                    size="0.75rem"
+                                                                                                    icon="chevronUpFilled"
+                                                                                                ></lit-icon
                                                                                             ></slot>`
-                            : html `<slothea
-                                                                                                name="iconSortDown"
-                                                                                            >
-                                                                                                <lit-icon
-                                                                                                    size="0.75rem"
-                                                                                                    icon="chevronDownFilled"
-                                                                                                ></lit-icon>
+                            : html `<slothea
+                                                                                                name="iconSortDown"
+                                                                                            >
+                                                                                                <lit-icon
+                                                                                                    size="0.75rem"
+                                                                                                    icon="chevronDownFilled"
+                                                                                                ></lit-icon>
                                                                                             </slothea>`
-                        : html `<div></div>`}
-                                                                                  <div class="flex">
+                        : html `<div></div>`}
+                                                                                  <div class="flex">
                                                                                       ${!this
                         .actionButtonsInMenu
-                        ? html `
+                        ? html `
                                                                                                 ${header.column.getCanPin()
-                            ? html `
-                                                                                                          <lit-tooltip
+                            ? html `
+                                                                                                          <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()}"
-                                                                                                              >
-                                                                                                              </lit-icon-button>
-                                                                                                          </lit-tooltip>
+                                : msg('Připnout sloupec vlevo')}"
+                                                                                                              variant="bottom"
+                                                                                                          >
+                                                                                                              <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()
-                            ? html `
-                                                                                                          <lit-tooltip
+                            ? html `
+                                                                                                          <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"
-                                                                                                              >
-                                                                                                              </lit-icon-button>
-                                                                                                          </lit-tooltip>
+                                : msg('Seskupit sloupec')}"
+                                                                                                              variant="bottom"
+                                                                                                          >
+                                                                                                              <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}"
+                        : 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>
+                                                                                            `}
+                                                                                  </div>
+                                                                              </div>
+                                                                          </div>
+                                                                      </div>
                                                                       ${header.column.getCanFilter()
-                        ? html `
-                                                                                <div>
-                                                                                    <filter-inputs
-                                                                                        .column=${header.column}
+                        ? html `
+                                                                                <div>
+                                                                                    <filter-inputs
+                                                                                        .column=${header.column}
                                                                                         .dateFormat=${this
-                            .dateFormat}
+                            .dateFormat}
                                                                                         .userLang=${this
-                            .userLang}
-                                                                                    ></filter-inputs>
-                                                                                </div>
+                            .userLang}
+                                                                                    ></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) => {
                     if (event.target.classList.contains('resize-handle')) {
                         header.getResizeHandler()(event);
                     }
-                }}"
+                }}"
                                                                 @touchstart="${(event) => {
                     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 class="progress-root">
-                                          <div class="bar bar1Indeterminate"></div>
-                                          <div class="bar bar2Indeterminate"></div>
-                                      </div>
+            ? html `
+                                      <div class="progress-root">
+                                          <div class="bar bar1Indeterminate"></div>
+                                          <div class="bar bar2Indeterminate"></div>
+                                      </div>
                                   `
-            : ''}
-                        </thead>
-
-                        <tbody
+            : ''}
+                        </thead>
+
+                        <tbody
                             style="height: ${rowVirtualizer &&
             this.table.getRowModel().rows.length > 0
             ? rowVirtualizer.getTotalSize() + 'px'
-            : 'auto'};"
-                        >
+            : 'auto'};"
+                        >
                             ${rows.length > 0
             ? repeat(rowItems, (item) => item.key, (item) => {
                 const row = rows[item.index];
@@ -649,20 +789,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"
-                                                        data-index="${item.index}"
-                                                        style="${styleMap(tbodyStyle)}"
+                    ? html `
+                                                    <tr
+                                                        class="${this.selectedRowId === row.id
+                        ? 'selected body'
+                        : 'body'}"
+                                                        data-index="${item.index}"
+                                                        @click="${() => this.handleRowClick(row)}"
+                                                        @dblclick="${() => this.handleRowDoubleClick(row)}"
+                                                        style="${styleMap(rowStyle)}"
                                                         ${ref((node) => {
                         if (node &&
                             this.enableRowVirtualization &&
@@ -670,66 +814,68 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
                             // Only measure element if virtualization is enabled
                             rowVirtualizer.measureElement(node);
                         }
-                    })}
-                                                    >
+                    })}
+                                                    >
                                                         ${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`,
                             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)}">
+                        return html `
+                                                                    <td style="${styleMap(style)}">
                                                                         ${cell.getIsGrouped()
-                            ? html `
-                                                                                  <lit-button
-                                                                                      @click="${row.getToggleExpandedHandler()}"
-                                                                                      variant="inherit"
+                            ? html `
+                                                                                  <lit-button
+                                                                                      @click="${row.getToggleExpandedHandler()}"
+                                                                                      variant="inherit"
+                                                                                      size="${buttonSize}"
                                                                                       count="${row
                                 .subRows
-                                .length}"
+                                .length}"
                                                                                       label="${flexRender(cell
                                 .column
                                 .columnDef
-                                .cell, cell.getContext())}"
+                                .cell, cell.getContext())}"
                                                                                       icon="${row.getIsExpanded()
                                 ? 'chevronDownFilled'
-                                : 'chevron'}"
-                                                                                  >
+                                : 'chevron'}"
+                                                                                  >
                                                                                       <!-- ${row.getIsExpanded()
-                                ? html `<slot
-                                                                                                name="groupedIcon-expanded"
-                                                                                                slot="start-icon"
+                                ? html `<slot
+                                                                                                name="groupedIcon-expanded"
+                                                                                                slot="start-icon"
                                                                                             ></slot>`
-                                : html `<slot
-                                                                                                name="groupedIcon"
-                                                                                                slot="start-icon"
-                                                                                            ></slot>`} -->
-                                                                                      }
+                                : html `<slot
+                                                                                                name="groupedIcon"
+                                                                                                slot="start-icon"
+                                                                                            ></slot>`} -->
+                                                                                      }
                                                                                       ${row.subRows
-                                .length}
+                                .length}
                                                                                       ${flexRender(cell
                                 .column
                                 .columnDef
-                                .cell, cell.getContext())}
-                                                                                  </lit-button>
+                                .cell, cell.getContext())}
+                                                                                  </lit-button>
                                                                               `
                             : cell.getIsAggregated()
-                                ? html `
-                                                                                    <div
-                                                                                        style="display: flex; flex-direction: row; align-items: center;"
-                                                                                    >
+                                ? html `
+                                                                                    <div
+                                                                                        style="display: flex; flex-direction: row; align-items: center;"
+                                                                                    >
                                                                                         ${flexRender(cell
                                     .column
                                     .columnDef
@@ -737,350 +883,351 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
                                     cell
                                         .column
                                         .columnDef
-                                        .cell, cell.getContext())}
-                                                                                    </div>
+                                        .cell, cell.getContext())}
+                                                                                    </div>
                                                                                 `
                                 : cell.getIsPlaceholder()
                                     ? null
                                     : flexRender(cell.column
                                         .columnDef
-                                        .cell, cell.getContext())}
-                                                                    </td>
+                                        .cell, cell.getContext())}
+                                                                    </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">
-                        <span class="numberCount">
-                            ${msg('Počet záznamů')}: ${this.table.getRowModel().rows.length}
-                        </span>
-                        <div class="right-actions">
-                            <lit-responsive-button
-                                size="small"
-                                variant="text"
-                                label=${msg('Přizpůsobit sloupce')}
-                                icon="columns"
-                                @click=${() => this.table.resetColumnSizing()}
-                            ></lit-responsive-button>
+            : null}
+                        </tbody>
+                    </table>
+                    <div class="footer-container">
+                        <span class="numberCount">
+                            ${msg('Počet záznamů')}: ${this.table.getRowModel().rows.length}
+                        </span>
+                        <div class="right-actions">
+                            <lit-data-grid-density-popover
+                                .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="${() => this.exportDataToCsv()}"
-                                          .exportToExcel="${() => this.exportDataToExcel()}"
-                                      >
-                                          <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>
+            ? html `
+                                      <lit-data-grid-export-popover
+                                          .exportToCsv="${() => this.exportDataToCsv()}"
+                                          .exportToExcel="${() => this.exportDataToExcel()}"
+                                      >
+                                      </lit-data-grid-export-popover>
                                   `
-            : null}
-                        </div>
-                    </div>
-                </div>
+            : null}
+                        </div>
+                    </div>
+                </div>
                 ${this.table.getRowModel().rows.length < 1
-            ? 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í')}
+            ? 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í')}
                       </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;
-            }
-
-            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: 13px;
-                color: var(--text-primary, #111827);
-            }
-
-            .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);
-            }
-
-            .scroll-button {
-                position: absolute;
-                top: 50%;
-                transform: translateY(-50%);
-                z-index: 1000;
-                cursor: pointer;
-            }
-
-            .scroll-button.left {
-                left: 3rem;
-            }
-
-            .scroll-button.right {
-                right: 3rem;
-            }
-
-            .progress-root {
-                position: absolute;
-                bottom: 0;
-                left: 0;
-                overflow: hidden;
-                display: block;
-                width: 100%;
-                height: 0.125rem;
-                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%;
-                }
-            }
+    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;
+            }
+
+            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: 13px;
+                color: var(--text-primary, #111827);
+            }
+
+            .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);
+            }
+
+            .scroll-button {
+                position: absolute;
+                top: 50%;
+                transform: translateY(-50%);
+                z-index: 1000;
+                cursor: pointer;
+            }
+
+            .scroll-button.left {
+                left: 3rem;
+            }
+
+            .scroll-button.right {
+                right: 3rem;
+            }
+
+            .progress-root {
+                position: absolute;
+                bottom: 0;
+                left: 0;
+                overflow: hidden;
+                display: block;
+                width: 100%;
+                height: 0.125rem;
+                background-color: var(--color-primary-light, #f0fadf);
+                box-sizing: border-box;
+            }
+
+            .bar {
+                position: absolute;
+                height: 100%;
+                display: block;
+                background-color: var(--color-primary-main, #76b703);
+                width: auto;
+                will-change: left, right;
+                box-sizing: border-box;
+            }
+
+            .selected {
+                background-color: var(--color-primary-light, #f0fadf);
+            }
+
+            /* 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%;
+                }
+            }
         `,
 ];
 __decorate([
@@ -1155,9 +1302,42 @@ __decorate([
 __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, "disableRowSelectionOnClick", 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, "rowBufferPx", 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);
@@ -1167,6 +1347,18 @@ __decorate([
 __decorate([
     state()
 ], LitDataGridTanstack.prototype, "disableScrollRight", void 0);
+__decorate([
+    state()
+], 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);