overview-components 0.6.0

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

@@ -0,0 +1,1085 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import * as XLSX from 'xlsx';
+import { css, html, LitElement } from 'lit';
+import { msg } from '@lit/localize';
+import { customElement, property, state } from 'lit/decorators.js';
+import { TableController, getCoreRowModel, flexRender, getSortedRowModel, getFilteredRowModel, getFacetedRowModel, getFacetedUniqueValues, getGroupedRowModel, getExpandedRowModel, filterFns, } from '@tanstack/lit-table';
+import { repeat } from 'lit/directives/repeat.js';
+import { VirtualizerController } from '@tanstack/lit-virtual';
+import { createRef, ref } from 'lit/directives/ref.js';
+import { styleMap } from 'lit/directives/style-map.js';
+// components
+import '../shared/filter-inputs.js';
+import '../shared/lit-icon.js';
+import '../shared/lit-icon-button.js';
+import '../shared/lit-button.js';
+import '../shared/lit-responsive-button.js';
+import '../shared/lit-tooltip.js';
+import '../shared/lit-data-grid-export-popover.js';
+import '../assets/ilustration/not-found.js';
+// utils
+import { formatDate } from '../utils/date.js';
+import { dateFilterFn } from './custom-filters';
+let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.row = [];
+        this.columns = [];
+        this.enableRowVirtualization = false;
+        this.enableColumnVirtualization = false;
+        this.enableColumnPinning = true;
+        this.enableGrouping = true;
+        this.exportData = true;
+        this.id = '';
+        this.initialSorting = [];
+        this.leftPinnedColumns = [];
+        this.rightPinnedColumns = [];
+        this.enableFiltering = true;
+        this.locale = 'cs-CZ';
+        this.tableController = new TableController(this);
+        this.tableContainerRef = createRef();
+        this.rowsCount = 0;
+        // @state() grouping: any = this.initialGroups;
+        this.isScrollable = false;
+        this.disableScrollLeft = true;
+        this.disableScrollRight = false;
+        this.isLoading = true;
+        this.scrollInterval = null;
+        this.getCellBackgroundColor = (cell) => {
+            if (cell.getIsGrouped()) {
+                return this.columnGroupedColor ?? `var(--color-primary-light, #f0fadf)`;
+            }
+            if (cell.getIsAggregated()) {
+                return this.rowAggregationColor ?? `var(--color-warning-light, #ffe1a8)`;
+            }
+            if (cell.getIsPlaceholder()) {
+                return `var(--background-default, #eff3f4)`;
+            }
+            if (cell.column.getIsPinned()) {
+                return `var(--background-paper, #fff)`;
+            }
+            return 'transparent';
+        };
+        this.updateScrollState = () => {
+            const grid = this.tableContainerRef.value;
+            if (grid) {
+                const canScrollHorizontally = grid.scrollWidth > grid.clientWidth;
+                this.isScrollable = canScrollHorizontally;
+                this.disableScrollLeft = grid.scrollLeft === 0;
+                this.disableScrollRight = grid.scrollLeft + grid.clientWidth >= grid.scrollWidth;
+            }
+        };
+    }
+    connectedCallback() {
+        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();
+        window.addEventListener('resize', this.updateScrollState);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        window.removeEventListener('resize', this.updateScrollState);
+    }
+    initializeVirtualizer() {
+        this.rowVirtualizerController = new VirtualizerController(this, {
+            count: this.table.getRowModel().rows.length, // number of rows
+            getScrollElement: () => this.tableContainerRef.value,
+            estimateSize: () => 38, // estimate row height for accurate scrollbar dragging
+            overscan: 5, // buffer to render more rows for smoother scrolling
+        });
+    }
+    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();
+            }
+        }
+        if (changedProperties.has('row')) {
+            this.isLoading = !(this.row && this.row.length > 0);
+        }
+    }
+    // format date by dynamic by locale props
+    formatDate(date, locale) {
+        return new Date(date).toLocaleDateString(locale, {
+            year: 'numeric',
+            month: '2-digit',
+            day: '2-digit',
+        });
+    }
+    getTanstackColumns(columns) {
+        return columns.map((column) => {
+            return {
+                id: column.field,
+                accessorKey: column.field,
+                accessorFn: column.accessorFn ?? ((originalRow) => originalRow[column.field]),
+                type: column.type,
+                header: column.headerName,
+                cell: (props) => column.cell
+                    ? column.cell(props)
+                    : column.type === 'date'
+                        ? formatDate(props.getValue(), this.locale)
+                        : props.getValue(),
+                filterFn: (() => {
+                    switch (column.type) {
+                        case 'range':
+                            return filterFns.inNumberRange;
+                        case 'select':
+                            return filterFns.weakEquals;
+                        case 'number':
+                            return filterFns.weakEquals;
+                        case 'date':
+                            return dateFilterFn;
+                        case 'string':
+                            return filterFns.includesString;
+                        default:
+                            return filterFns.includesString;
+                    }
+                })(),
+                enableColumnFilter: this.enableFiltering && (column.columnFilter ?? true),
+                size: column.size || this.columnDefaultSize || undefined,
+                maxSize: column.maxSize || this.columnDefaultMaxSize || 800,
+                minSize: column.minSize || this.columnDefaultMinSize || 50,
+                meta: {
+                    filterVariant: column.type ?? 'string',
+                },
+                aggregationFn: column.columnAggregation ?? undefined,
+                enableGrouping: column.enableGrouping ?? true,
+            };
+        });
+    }
+    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');
+        return {
+            position: isPinned ? 'sticky' : 'relative',
+            left: isPinned === 'left' ? `${column.getStart('left')}px` : undefined,
+            boxShadow: isLastLeftPinnedColumn ? '-4px 0 4px -4px gray inset' : undefined,
+            zIndex: isPinned ? 1 : 0,
+            background: isPinned ? 'var(--background-paper, #fff)' : undefined,
+        };
+    }
+    togglePin(header) {
+        if (header.column.getIsPinned()) {
+            header.column.pin(false); // Odpinovanie
+        }
+        else {
+            header.column.pin('left'); // Pripnutie doľava
+        }
+    }
+    exportDataToCsv() {
+        const rows = this.getAllRowsIncludingGrouped(this.table.getRowModel().rows); // Získanie všetkých riadkov vrátane skupín
+        if (!rows || rows.length === 0) {
+            console.warn('No data to export');
+            return;
+        }
+        // Generovanie hlavičky CSV zo stĺpcov
+        const header = this.columns
+            .map((col) => col.headerName || '') // Získanie názvov stĺpcov
+            .join(',');
+        // Generovanie dát pre CSV
+        const csvRows = rows.map((row) => {
+            return this.columns
+                .map((col) => {
+                const accessor = col.field; // Získanie kľúča pre hodnotu
+                if (row.getIsGrouped?.()) {
+                    // Ak je skupinový riadok, pridaj počet záznamov do prvej bunky
+                    if (col.field === row.groupingColumnId) {
+                        return `"${row.getValue(col.field)} (${row.subRows.length})"`;
+                    }
+                    return ''; // Ostatné stĺpce v skupinovom riadku prázdne
+                }
+                const value = accessor ? row.original?.[accessor] || '' : ''; // Získanie hodnoty pre normálny riadok
+                return typeof value === 'string'
+                    ? `"${value.replace(/"/g, '""')}"` // Ošetrenie dvojitých úvodzoviek
+                    : value;
+            })
+                .join(',');
+        });
+        // Pridanie hlavičky na začiatok CSV
+        csvRows.unshift(header);
+        // Vytvorenie CSV súboru
+        const csvContent = csvRows.join('\n');
+        const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+        // Stiahnutie CSV súboru
+        const url = URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = 'data.csv';
+        link.click();
+        URL.revokeObjectURL(url);
+    }
+    exportDataToExcel() {
+        const rows = this.getAllRowsIncludingGrouped(this.table.getRowModel().rows); // Získanie všetkých riadkov vrátane skupín
+        if (!rows || rows.length === 0) {
+            console.warn('No data to export');
+            return;
+        }
+        // Príprava dát pre Excel
+        const data = rows.map((row) => {
+            const formattedRow = {};
+            this.columns.forEach((col) => {
+                const columnName = col.headerName || ''; // Dynamický názov stĺpca
+                const accessor = col.field; // Dynamický kľúč pre hodnoty
+                if (row.getIsGrouped?.()) {
+                    // Skupinový riadok
+                    if (col.field === row.groupingColumnId) {
+                        // Pridanie názvu skupiny a počtu záznamov
+                        formattedRow[columnName] =
+                            `${row.getValue(accessor)} (${row.subRows.length})`;
+                    }
+                    else {
+                        // Ostatné stĺpce prázdne
+                        formattedRow[columnName] = '';
+                    }
+                }
+                else if (accessor) {
+                    // Normálny riadok
+                    formattedRow[columnName] =
+                        row.original?.[accessor] || row.getValue?.(accessor) || '';
+                }
+            });
+            return formattedRow;
+        });
+        // Vytvorenie pracovného listu a zošita
+        const worksheet = XLSX.utils.json_to_sheet(data); // Konverzia dát do Excel formátu
+        // Automatické prispôsobenie šírky stĺpcov
+        const colWidths = this.columns.map((col, colIndex) => {
+            const maxContentLength = Math.max(col.headerName?.length || 10, // Dĺžka názvu stĺpca
+            ...data.map((row) => row[col.headerName || '']?.toString().length || 0));
+            return { wch: maxContentLength + 2 }; // Pridanie extra priestoru
+        });
+        worksheet['!cols'] = colWidths; // Nastavenie šírky stĺpcov
+        const workbook = XLSX.utils.book_new(); // Nový Excel zošit
+        XLSX.utils.book_append_sheet(workbook, worksheet, 'Data'); // Pridanie dát do zošita
+        // Export do súboru
+        XLSX.writeFile(workbook, 'data.xlsx');
+    }
+    getAllRowsIncludingGrouped(rows) {
+        const allRows = [];
+        rows.forEach((row) => {
+            if (row.getIsGrouped?.()) {
+                allRows.push(row);
+                if (row.subRows && row.subRows.length > 0) {
+                    allRows.push(...this.getAllRowsIncludingGrouped(row.subRows));
+                }
+            }
+            else {
+                allRows.push(row);
+            }
+        });
+        return allRows.filter((row, index, self) => index === self.findIndex((r) => r.id === row.id));
+    }
+    firstUpdated() {
+        const grid = this.tableContainerRef.value;
+        if (grid) {
+            grid.addEventListener('scroll', this.updateScrollState);
+        }
+        this.updateScrollState();
+    }
+    startScroll(direction) {
+        const grid = this.tableContainerRef.value;
+        if (!grid)
+            return;
+        const scrollAmount = direction === 'left' ? -15 : 15;
+        const scroll = () => {
+            grid.scrollLeft += scrollAmount;
+            this.updateScrollState();
+            this.scrollInterval = requestAnimationFrame(scroll);
+        };
+        this.scrollInterval = requestAnimationFrame(scroll);
+    }
+    stopScroll() {
+        if (this.scrollInterval) {
+            cancelAnimationFrame(this.scrollInterval);
+            this.scrollInterval = null;
+        }
+    }
+    render() {
+        // Ak virtualizácia nie je povolená, použijeme celý zoznam riadkov alebo stĺpcov
+        const rowVirtualizer = this.enableRowVirtualization
+            ? this.rowVirtualizerController.getVirtualizer()
+            : null;
+        const columnVirtualizer = this.enableColumnVirtualization
+            ? this.columnVirtualizerController.getVirtualizer()
+            : null;
+        const virtualColumns = columnVirtualizer?.getVirtualItems() ?? [];
+        // Get table rows (either virtualized or all)
+        const { rows } = this.table.getRowModel();
+        // console.log('rows', rows);
+        const rowItems = rowVirtualizer
+            ? rowVirtualizer.getVirtualItems()
+            : rows.map((_, index) => ({
+                key: index,
+                index,
+                start: index * 38,
+                end: (index + 1) * 38,
+                size: 38,
+                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 =
+                columnVirtualizer.getTotalSize() -
+                    (virtualColumns[virtualColumns.length - 1]?.end ?? 0);
+        }
+        return html `
+            <div class="data-grid__wrapper">
+                ${this.isScrollable
+            ? 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'};">
+                            ${repeat(this.table.getHeaderGroups(), (headerGroup) => headerGroup.id, (headerGroup) => {
+            const headerColumns = this.enableColumnVirtualization
+                ? virtualColumns.map((vc) => headerGroup.headers[vc.index])
+                : headerGroup.headers;
+            const newHeaderColumns = this.enableColumnVirtualization
+                ? [
+                    ...headerGroup.headers.filter((hc) => hc.column.getIsPinned()),
+                    ...headerColumns.filter((hc) => !hc.column.getIsPinned()),
+                ]
+                : headerColumns;
+            return html `
+                                        <tr class="head" data-index="${headerGroup.id}">
+                                            ${virtualPaddingLeft
+                ? html `
+                                                      <th
+                                                          style=" display: flex; width: ${virtualPaddingLeft}px;"
+                                                      ></th>
+                                                  `
+                : ''}
+                                            ${repeat(newHeaderColumns, (header) => header.id, (header, index) => {
+                const column = header.column;
+                const style = {
+                    ...this.getCommonPinningStyles(header.column),
+                    width: `${column.getSize()}px`,
+                };
+                return html `
+                                                        <th
+                                                            class="head"
+                                                            style="${styleMap(style)}"
+                                                            colspan="${header.colSpan}"
+                                                            data-index="${header.id}"
+                                                        >
+                                                            ${header.isPlaceholder
+                    ? ''
+                    : html `
+                                                                      <div
+                                                                          class="resizer ${this
+                        .table.options
+                        .columnResizeDirection} ${header.column.getIsResizing()
+                        ? 'is-resizing'
+                        : ''}"
+                                                                          @dblclick="${() => header.column.resetSize()}"
+                                                                          @mousedown="${header.getResizeHandler()}"
+                                                                          @touchstart="${header.getResizeHandler()}"
+                                                                          style="transform:  ${this
+                        .table.options
+                        .columnResizeMode ===
+                        'onEnd' &&
+                        header.column.getIsResizing()
+                        ? `translateX(${(this.table
+                            .options
+                            .columnResizeDirection ===
+                            'rtl'
+                            ? -1
+                            : 1) *
+                            (this.table.getState()
+                                .columnSizingInfo
+                                .deltaOffset ??
+                                0)}px)`
+                        : ''}"
+                                                                      >
+                                                                          <div
+                                                                              style="display: flex; align-items: center; justify-content: space-between; height: 100%"
+                                                                          >
+                                                                              <div
+                                                                                  class="column-header"
+                                                                                  @click=${header.column.getToggleSortingHandler()}
+                                                                              >
+                                                                                  ${header.column
+                        .columnDef
+                        .header}
+                                                                                  ${header.column.getIsSorted()
+                        ? header.column.getIsSorted() ===
+                            'asc'
+                            ? html `<slot
+                                                                                                name="iconSortUp"
+                                                                                                ><lit-icon
+                                                                                                    size="0.75rem"
+                                                                                                    icon="chevronUpFilled"
+                                                                                                ></lit-icon
+                                                                                            ></slot>`
+                            : html `<slot
+                                                                                                name="iconSortDown"
+                                                                                            >
+                                                                                                <lit-icon
+                                                                                                    size="0.75rem"
+                                                                                                    icon="chevronDownFilled"
+                                                                                                ></lit-icon>
+                                                                                            </slot>`
+                        : ''}
+                                                                              </div>
+                                                                              <span
+                                                                                  style="display: flex"
+                                                                              >
+                                                                                  ${header.column.getCanPin()
+                        ? html `
+                                                                                            <lit-tooltip
+                                                                                                label="${header.column.getIsPinned()
+                            ? msg('Zrušit připnutí sloupce')
+                            : msg('Připnout sloupec vlevo')}"
+                                                                                                variant="left"
+                                                                                            >
+                                                                                                <lit-icon-button
+                                                                                                    @click="${() => this.togglePin(header)}"
+                                                                                                    size="small"
+                                                                                                    variant="text"
+                                                                                                    icon="pin"
+                                                                                                    .active="${header.column.getIsPinned()}"
+                                                                                                >
+                                                                                                    <!-- <slot
+                                                                                                    name="iconPin"
+                                                                                                >
+                                                                                                </slot> -->
+                                                                                                </lit-icon-button>
+                                                                                            </lit-tooltip>
+                                                                                        `
+                        : ''}
+                                                                                  ${header.column.getCanGroup()
+                        ? html `
+                                                                                            <lit-tooltip
+                                                                                                label="${header.column.getIsGrouped()
+                            ? msg('Zrušit seskupení')
+                            : msg('Seskupit sloupec')}"
+                                                                                                variant="left"
+                                                                                            >
+                                                                                                <lit-icon-button
+                                                                                                    @click="${header.column.getToggleGroupingHandler()}"
+                                                                                                    size="small"
+                                                                                                    variant="text"
+                                                                                                    .active="${header.column.getIsGrouped()}"
+                                                                                                    icon="agregation"
+                                                                                                >
+                                                                                                    <!-- <slot
+                                                                                                    name="iconGroup"
+                                                                                                    >G</slot
+                                                                                                > -->
+                                                                                                </lit-icon-button>
+                                                                                            </lit-tooltip>
+                                                                                        `
+                        : ''}
+                                                                              </span>
+                                                                          </div>
+                                                                      </div>
+                                                                      ${header.column.getCanFilter()
+                        ? html `
+                                                                                <div>
+                                                                                    <filter-inputs
+                                                                                        .column=${header.column}
+                                                                                    ></filter-inputs>
+                                                                                </div>
+                                                                            `
+                        : null}
+                                                                  `}
+                                                        </th>
+                                                    `;
+            })}
+                                            ${virtualPaddingRight
+                ? html `
+                                                      <th
+                                                          style=" display: flex; width: ${virtualPaddingRight}px;"
+                                                      ></th>
+                                                  `
+                : ''}
+                                        </tr>
+                                    `;
+        })}
+                        </thead>
+                        ${this.isLoading
+            ? html `
+                                  <div class="progress-root">
+                                      <div class="bar bar1Indeterminate"></div>
+                                      <div class="bar bar2Indeterminate"></div>
+                                  </div>
+                              `
+            : ''}
+                        <tbody
+                            style="height: ${rowVirtualizer &&
+            this.table.getRowModel().rows.length > 0
+            ? rowVirtualizer.getTotalSize() + 'px'
+            : 'auto'};"
+                        >
+                            ${rows.length > 0
+            ? repeat(rowItems, (item) => item.key, (item) => {
+                const row = rows[item.index];
+                const visibleCells = row?.getVisibleCells();
+                // console.log('visibleCells', visibleCells);
+                const bodyColumns = this.enableColumnVirtualization
+                    ? virtualColumns?.map((vc) => visibleCells && visibleCells[vc.index])
+                    : visibleCells;
+                const pinnedColumns = visibleCells?.filter((bc) => bc.column.getIsPinned()) || [];
+                const newBodyColumns = this.enableColumnVirtualization
+                    ? [...new Set([...pinnedColumns, ...bodyColumns])]
+                    : bodyColumns;
+                const tbodyStyle = {
+                    transform: rowVirtualizer
+                        ? `translateY(${item.start}px)`
+                        : 'none',
+                    height: '38px',
+                    lineHeight: '38px',
+                    position: rowVirtualizer ? 'absolute' : 'relative',
+                };
+                return row
+                    ? html `
+                                                    <tr
+                                                        class="body"
+                                                        data-index="${item.index}"
+                                                        style="${styleMap(tbodyStyle)}"
+                                                        ${ref((node) => {
+                        if (node &&
+                            this.enableRowVirtualization &&
+                            rowVirtualizer) {
+                            // Only measure element if virtualization is enabled
+                            rowVirtualizer.measureElement(node);
+                        }
+                    })}
+                                                    >
+                                                        ${virtualPaddingLeft
+                        ? html `
+                                                                  <th
+                                                                      style=" display: flex; width: ${virtualPaddingLeft}px;"
+                                                                  ></th>
+                                                              `
+                        : ''}
+                                                        <!-- Cells for each row -->
+                                                        ${repeat(newBodyColumns, (cell) => cell.key, (cell) => {
+                        const { column } = cell;
+                        const style = {
+                            ...this.getCommonPinningStyles(cell.column),
+                            width: `${cell.column.getSize()}px`,
+                            background: this.getCellBackgroundColor(cell),
+                            lineHeight: '2.3125rem', // správny zápis reťazca
+                            padding: '0px 0.75rem',
+                        };
+                        return html `
+                                                                    <td style="${styleMap(style)}">
+                                                                        ${cell.getIsGrouped()
+                            ? html `
+                                                                                  <lit-button
+                                                                                      @click="${row.getToggleExpandedHandler()}"
+                                                                                      variant="text"
+                                                                                      count="${row
+                                .subRows
+                                .length}"
+                                                                                      label="${flexRender(cell
+                                .column
+                                .columnDef
+                                .cell, cell.getContext())}"
+                                                                                      icon="${row.getIsExpanded()
+                                ? 'chevronDownFilled'
+                                : 'chevron'}"
+                                                                                  >
+                                                                                      <!-- ${row.getIsExpanded()
+                                ? html `<slot
+                                                                                                name="groupedIcon-expanded"
+                                                                                                slot="start-icon"
+                                                                                            ></slot>`
+                                : html `<slot
+                                                                                                name="groupedIcon"
+                                                                                                slot="start-icon"
+                                                                                            ></slot>`} -->
+                                                                                      }
+                                                                                      ${row.subRows
+                                .length}
+                                                                                      ${flexRender(cell
+                                .column
+                                .columnDef
+                                .cell, cell.getContext())}
+                                                                                  </lit-button>
+                                                                              `
+                            : cell.getIsAggregated()
+                                ? html `
+                                                                                    <div
+                                                                                        style="display: flex; flex-direction: row; align-items: center;"
+                                                                                    >
+                                                                                        ${flexRender(cell
+                                    .column
+                                    .columnDef
+                                    .aggregatedCell ??
+                                    cell
+                                        .column
+                                        .columnDef
+                                        .cell, cell.getContext())}
+                                                                                    </div>
+                                                                                `
+                                : cell.getIsPlaceholder()
+                                    ? null
+                                    : flexRender(cell.column
+                                        .columnDef
+                                        .cell, cell.getContext())}
+                                                                    </td>
+                                                                `;
+                    })}
+                                                        ${virtualPaddingRight
+                        ? html `
+                                                                  <th
+                                                                      style=" display: flex; width: ${virtualPaddingRight}px;"
+                                                                  ></th>
+                                                              `
+                        : ''}
+                                                    </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>
+                            ${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>
+                                  `
+            : 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í')}
+                      </div>`
+            : null}
+            </div>
+        `;
+    }
+};
+LitDataGridTanstack.styles = [
+    // styles,
+    css `
+            :host {
+                *,
+                *::before,
+                *::after {
+                    margin: 0;
+                    padding: 0;
+                    box-sizing: border-box;
+                }
+
+                display: block;
+                font-family: 'Inter', sans-serif;
+                box-sizing: border-box;
+
+                table {
+                    border-collapse: collapse;
+                    border-spacing: 0;
+                    width: 100%;
+                }
+            }
+
+            .data-grid__wrapper {
+                position: relative;
+                padding: var(--section-padding, 0.75rem 1rem);
+                border-radius: 0.75rem;
+                background-color: var(--background-paper, #fff);
+            }
+
+            .data-grid__empty {
+                position: absolute;
+                top: 30%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                font-size: 0.875rem;
+                text-align: center;
+            }
+
+            table {
+                height: calc(100% - 38px);
+            }
+
+            .grid {
+                overflow: auto;
+                position: relative;
+                height: 500px;
+            }
+
+            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;
+                //flex-grow: 1;
+                position: relative;
+                padding: 0 0.375rem 0 0.125rem;
+                gap: 0.25rem;
+            }
+
+            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: 0 0 0 0.75rem;
+                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;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                margin: 0 0.25rem;
+            }
+
+            .resizer {
+                height: 24px;
+                padding: 0 0 0 0.375rem;
+                text-align: start;
+                cursor: col-resize;
+                user-select: none;
+                touch-action: none;
+            }
+
+            .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: 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%;
+                }
+            }
+        `,
+];
+__decorate([
+    property({ type: Array })
+], LitDataGridTanstack.prototype, "row", void 0);
+__decorate([
+    property({ type: Array })
+], LitDataGridTanstack.prototype, "columns", void 0);
+__decorate([
+    property({ type: Number })
+], LitDataGridTanstack.prototype, "columnDefaultSize", void 0);
+__decorate([
+    property({ type: Number })
+], LitDataGridTanstack.prototype, "columnDefaultMinSize", void 0);
+__decorate([
+    property({ type: Number })
+], LitDataGridTanstack.prototype, "columnDefaultMaxSize", void 0);
+__decorate([
+    property({ type: String })
+], LitDataGridTanstack.prototype, "columnGroupedColor", void 0);
+__decorate([
+    property({ type: String })
+], LitDataGridTanstack.prototype, "rowAggregationColor", void 0);
+__decorate([
+    property({ type: Boolean })
+], LitDataGridTanstack.prototype, "enableRowVirtualization", void 0);
+__decorate([
+    property({ type: Boolean })
+], LitDataGridTanstack.prototype, "enableColumnVirtualization", void 0);
+__decorate([
+    property({ type: Boolean })
+], LitDataGridTanstack.prototype, "enableColumnPinning", void 0);
+__decorate([
+    property({ type: Boolean })
+], LitDataGridTanstack.prototype, "enableGrouping", void 0);
+__decorate([
+    property({ type: Boolean })
+], LitDataGridTanstack.prototype, "exportData", void 0);
+__decorate([
+    property({ type: String })
+], LitDataGridTanstack.prototype, "id", void 0);
+__decorate([
+    property({ type: Array })
+], LitDataGridTanstack.prototype, "initialGroups", void 0);
+__decorate([
+    property({ type: Array })
+], LitDataGridTanstack.prototype, "initialSorting", void 0);
+__decorate([
+    property({ type: Object })
+], LitDataGridTanstack.prototype, "initialColumnVisibility", void 0);
+__decorate([
+    property({ type: String })
+], LitDataGridTanstack.prototype, "requestUrl", void 0);
+__decorate([
+    property({ type: Array })
+], LitDataGridTanstack.prototype, "leftPinnedColumns", void 0);
+__decorate([
+    property({ type: Array })
+], LitDataGridTanstack.prototype, "rightPinnedColumns", void 0);
+__decorate([
+    property({ type: Boolean })
+], LitDataGridTanstack.prototype, "enableFiltering", void 0);
+__decorate([
+    property({ type: String })
+], LitDataGridTanstack.prototype, "locale", void 0);
+__decorate([
+    state()
+], LitDataGridTanstack.prototype, "rowsCount", void 0);
+__decorate([
+    state()
+], LitDataGridTanstack.prototype, "isScrollable", void 0);
+__decorate([
+    state()
+], LitDataGridTanstack.prototype, "disableScrollLeft", void 0);
+__decorate([
+    state()
+], LitDataGridTanstack.prototype, "disableScrollRight", void 0);
+__decorate([
+    state()
+], LitDataGridTanstack.prototype, "isLoading", void 0);
+LitDataGridTanstack = __decorate([
+    customElement('lit-data-grid-tanstack')
+], LitDataGridTanstack);
+export { LitDataGridTanstack };
+//# sourceMappingURL=lit-data-grid-tanstack.js.map