overview-components 1.0.1 → 1.0.3

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

@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { css, html, LitElement } from 'lit';
 import { msg } from '@lit/localize';
 import { customElement, property, state } from 'lit/decorators.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { TableController, getCoreRowModel, flexRender, getSortedRowModel, getFilteredRowModel, getFacetedRowModel, getFacetedUniqueValues, getGroupedRowModel, getExpandedRowModel, filterFns, } from '@tanstack/lit-table';
 import { repeat } from 'lit/directives/repeat.js';
 import { VirtualizerController } from '@tanstack/lit-virtual';
@@ -18,13 +19,16 @@ 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 '../shared/lit-data-grid-action-buttons-popover.js';
 import '../assets/ilustration/not-found.js';
 import '../shared/lit-overflow-tooltip.js';
 import '../shared/lit-data-grid-density-popover.js';
 import '../shared/lit-loading-bar.js';
+import '../shared/lit-data-grid-row-actions.js';
+import '../shared/simple-tooltip.js';
+import '../shared/lit-checkbox.js';
+import '../shared/lit-overflow-tooltip.js';
 // utils
 import { formatDate } from '../utils/date.js';
 import { dateFilterFn, multiselectFilterFn } from '../utils/custom-filters.js';
@@ -42,19 +46,23 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
         this.actionButtonsInMenu = false;
         this.id = '';
         this.initialSorting = [];
+        this.columnSizing = {};
         this.leftPinnedColumns = [];
         this.rightPinnedColumns = [];
         this.enableFiltering = true;
         this.userLang = 'cs';
         this.dateFormat = null;
         this.isLoading = false;
+        this.onColumnResize = () => { };
+        this.onColumnFiltersChanged = (filterModel) => { };
+        this.onColumnSortChanged = (table, sortModel) => { };
+        this.onRowSelectionChanged = (table, selectedRows) => { };
         this.enableRowSelectionOnClick = false;
         this.initialFiltering = [];
         this.server = false;
-        this.onColumnFiltersChanged = (filterModel) => { };
-        this.onColumnSortChanged = (sortModel) => { };
         this.scrollEndThreshold = 100;
         this.rowDensity = 'standard';
+        this.checkboxSelection = false;
         this.rowsCount = 0;
         this.selectedRowId = null;
         this.isScrollable = false;
@@ -63,9 +71,12 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
         this.filters = [];
         this.sorting = [];
         this.rowHeight = 31;
+        this._rowSelection = {};
+        this._columnSizing = {};
         this.scrollToEnd = false;
         this.tableContainerRef = createRef();
         this.scrollInterval = null;
+        this.currentScrollTop = 0;
         this.getCellBackgroundColor = (cell) => {
             if (cell.getIsGrouped()) {
                 return this.columnGroupedColor ?? `var(--color-primary-light, #f0fadf)`;
@@ -88,6 +99,7 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
                 this.isScrollable = canScrollHorizontally;
                 this.disableScrollLeft = grid.scrollLeft === 0;
                 this.disableScrollRight = grid.scrollLeft + grid.clientWidth >= grid.scrollWidth;
+                this.currentScrollTop = grid.scrollTop;
             }
         };
     }
@@ -135,6 +147,9 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
             this.initTable();
             this.requestUpdate();
         }
+        if (changedProperties.has('columnSizing')) {
+            this._columnSizing = this.columnSizing;
+        }
     }
     firstUpdated() {
         const grid = this.tableContainerRef.value;
@@ -144,7 +159,7 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
         this.updateScrollState();
     }
     async loadXLSX() {
-        if (!window.XLSX) {
+        if (!window.XLSX && !this.server) {
             await new Promise((resolve) => {
                 const script = document.createElement('script');
                 script.src = '../../public/libs/xlsx.mini.min.js';
@@ -180,9 +195,90 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
     }
     handleSetDensity(density) {
         this.rowDensity = density;
+        if (this.rowDensityChange) {
+            this.rowDensityChange(this.table, density);
+        }
+    }
+    handleFilterTabNavigation(event) {
+        const { direction, currentFilter } = event.detail;
+        // Získajte všetky filter-inputs elementy z DOM
+        const filterInputs = Array.from(this.shadowRoot?.querySelectorAll('filter-inputs') || []);
+        if (filterInputs.length === 0)
+            return;
+        const currentIndex = filterInputs.indexOf(currentFilter);
+        let nextIndex;
+        if (direction === 'forward') {
+            // Ak je aktuálny filter posledný vo viditeľnom zozname
+            if (currentIndex === filterInputs.length - 1) {
+                // Scroll na začiatok (ľavá strana)
+                const grid = this.shadowRoot?.querySelector('.grid');
+                if (grid) {
+                    grid.scrollLeft = 0;
+                }
+                // Po vykonaní scrollu čakáme krátko a potom nastavený focus na prvý filter
+                setTimeout(() => {
+                    const firstFilter = this.shadowRoot?.querySelector('filter-inputs');
+                    if (firstFilter) {
+                        firstFilter.focus();
+                    }
+                }, 0);
+                return;
+            }
+            else {
+                nextIndex = currentIndex + 1;
+            }
+        }
+        else {
+            // Podobne môžeme spracovať aj spätnú navigáciu
+            if (currentIndex === 0) {
+                const grid = this.shadowRoot?.querySelector('.grid');
+                if (grid) {
+                    // Scroll na koniec (pravá strana)
+                    grid.scrollLeft = grid.scrollWidth;
+                }
+                setTimeout(() => {
+                    const filters = Array.from(this.shadowRoot?.querySelectorAll('filter-inputs') || []);
+                    if (filters.length > 0) {
+                        filters[filters.length - 1].focus();
+                    }
+                }, 0);
+                return;
+            }
+            else {
+                nextIndex = currentIndex - 1;
+            }
+        }
+        // Nastav focus na ďalší filter podľa smeru
+        filterInputs[nextIndex].focus();
     }
     // scroll by keyboard arrows
     handleKeyDown(event) {
+        // if (event.key === 'Tab') {
+        //     // Získajte aktuálne fokusovaný element v shadow DOM
+        //     const active = this.shadowRoot?.activeElement;
+        //     // Ak nie je focusovaný element v rámci filter-inputs
+        //     if (!active || !active.closest('filter-inputs')) {
+        //         const grid = this.shadowRoot?.querySelector('.grid') as HTMLElement;
+        //         // Ak grid nie je úplne scrollnutý na začiatok, najprv scrollnite na začiatok
+        //         if (grid && grid.scrollLeft !== 0) {
+        //             grid.scrollLeft = 0;
+        //             // Po krátkej oneskorení, kým sa scroll dokončí, zvoľte prvý filter
+        //             setTimeout(() => {
+        //                 const firstFilter = this.shadowRoot?.querySelector('filter-inputs');
+        //                 if (firstFilter) {
+        //                     event.preventDefault();
+        //                     (firstFilter as HTMLElement).focus();
+        //                 }
+        //             }, 0);
+        //         } else {
+        //             const firstFilter = this.shadowRoot?.querySelector('filter-inputs');
+        //             if (firstFilter) {
+        //                 event.preventDefault();
+        //                 (firstFilter as HTMLElement).focus();
+        //             }
+        //         }
+        //     }
+        // }
         if (!this.enableRowSelectionOnClick)
             return;
         const rows = this.table.getRowModel().rows;
@@ -217,6 +313,7 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
             getScrollElement: () => this.tableContainerRef.value,
             estimateSize: () => this.rowHeight,
             overscan: 5,
+            initialOffset: this.currentScrollTop,
         });
     }
     initTable() {
@@ -232,16 +329,19 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
         });
     }
     handleRowClick(row) {
-        if (this.onRowClick) {
-            this.onRowClick(row);
+        if (this.onRowClick && !this.checkboxSelection) {
+            this.onRowClick(this.table, row);
+        }
+        if (this.enableRowSelectionOnClick && !this.checkboxSelection) {
+            this.selectedRowId = row.id;
+        }
+        if (this.checkboxSelection) {
+            row.toggleSelected();
         }
-        if (!this.enableRowSelectionOnClick)
-            return;
-        this.selectedRowId = row.id;
     }
     handleRowDoubleClick(row) {
-        if (this.onRowDoubleClick) {
-            this.onRowDoubleClick(row);
+        if (this.onRowDoubleClick && !this.checkboxSelection) {
+            this.onRowDoubleClick(this.table, row);
         }
     }
     getTanstackColumns(columns) {
@@ -257,10 +357,10 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
                     const isGrouped = props.row.getIsGrouped?.();
                     const isAggregated = props.row.getIsAggregated?.();
                     if (isGrouped) {
-                        if (column.type === 'date') {
+                        if (column.type === 'date' && !this.server) {
                             return formatDate(value, this.userLang || 'cs', undefined, this.dateFormat);
                         }
-                        if (column.type === 'dateTime') {
+                        if (column.type === 'dateTime' && !this.server) {
                             return formatDate(value, this.userLang || 'cs', true, this.dateFormat);
                         }
                         return value;
@@ -268,13 +368,20 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
                     if (isAggregated) {
                         return value;
                     }
-                    if (column.type === 'date' && value) {
+                    if (column.type === 'date' && value && !this.server) {
                         return formatDate(value, this.userLang || 'cs', undefined, this.dateFormat);
                     }
-                    if (column.type === 'dateTime' && value) {
+                    if (column.type === 'dateTime' && value && !this.server) {
                         return formatDate(value, this.userLang || 'cs', true, this.dateFormat);
                     }
-                    return column.cell ? column.cell(props, html) : value;
+                    if (column.type === 'actions') {
+                        return html `
+                            <lit-data-grid-row-actions
+                                .buttons=${column.getActions?.(props) || []}
+                            ></lit-data-grid-row-actions>
+                        `;
+                    }
+                    return column.cell ? column.cell(props, html, unsafeHTML) : value;
                 },
                 filterFn: (() => {
                     switch (column.type) {
@@ -303,16 +410,25 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
                 },
                 aggregationFn: column.columnAggregation ?? undefined,
                 enableGrouping: column.enableGrouping ?? true,
+                sortDescFirst: column.sortDescFirst || true,
+                enableResizing: column.enableResizing ?? true,
+                enablePinning: column.enablePinning ?? true,
             };
         });
     }
     getCommonPinningStyles(column) {
         const isPinned = column.getIsPinned();
+        if (!isPinned) {
+            return {};
+        }
         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,
+            right: isPinned === 'right' ? `0px` : undefined,
+            boxShadow: isLastLeftPinnedColumn && column.columnDef.type !== 'checkbox'
+                ? '-4px 0 4px -4px gray inset'
+                : undefined,
             zIndex: `${isPinned ? 1 : 'auto'}`,
             background: isPinned ? 'var(--background-paper, #fff)' : undefined,
         };
@@ -460,13 +576,49 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
             this.onRowsScrollEnd();
         }
     }
+    handleGetTotalNumber() {
+        if (this.getTotalNumberFn) {
+            this.getTotalNumberFn();
+        }
+    }
     render() {
+        const checkboxColumn = this.checkboxSelection
+            ? [
+                {
+                    id: 'checkbox',
+                    type: 'checkbox',
+                    minSize: 30,
+                    size: 30,
+                    enablePinning: false,
+                    enableResizing: false,
+                    header: ({ table }) => html `
+                          <div style="position: absolute; left: 0; bottom: 0; margin: 0.65rem 0;">
+                              <lit-checkbox
+                                  type="checkbox"
+                                  .onChange="${table.getToggleAllRowsSelectedHandler()}"
+                                  .checked="${table.getIsAllRowsSelected()}"
+                                  .indeterminate="${table.getIsSomeRowsSelected()}"
+                              ></lit-checkbox>
+                          </div>
+                      `,
+                    cell: ({ row }) => html `
+                          <lit-checkbox
+                              type="checkbox"
+                              .onChange="${row.getToggleSelectedHandler()}"
+                              .checked="${row.getIsSelected()}"
+                              ?disabled="${!row.getCanSelect()}"
+                              .indeterminate="${row.getIsSomeSelected()}"
+                          ></lit-checkbox>
+                      `,
+                },
+            ]
+            : [];
         if (getLocale() !== this.userLang) {
             setLocale(this.userLang || 'cs');
         }
         this.table = this.tableController.table({
             data: this.rows || [],
-            columns: this.getTanstackColumns(this.getColumns),
+            columns: [...checkboxColumn, ...this.getTanstackColumns(this.getColumns)],
             columnResizeMode: 'onChange',
             columnResizeDirection: 'ltr',
             defaultColumn: {
@@ -480,22 +632,26 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
                 grouping: [...(this.initialGroups || [])],
                 columnVisibility: { ...this.initialColumnVisibility },
                 columnPinning: {
-                    left: [...(this.leftPinnedColumns || [])],
-                    right: [...(this.rightPinnedColumns || [])],
+                    left: [...(this.leftPinnedColumns || []), 'checkbox'],
+                    right: ['actions'],
                 },
             },
             state: {
                 columnFilters: this.filters,
                 sorting: this.sorting,
+                rowSelection: this._rowSelection,
+                columnSizing: this._columnSizing,
             },
             filterFns: {
                 dateFilterFn: dateFilterFn,
                 multiselectFilterFn: multiselectFilterFn,
             },
             // debugTable: true,
+            enableRowSelection: this.checkboxSelection,
             enableColumnPinning: this.enableColumnPinning,
             enableGrouping: this.enableGrouping,
             manualFiltering: this.server,
+            manualSorting: this.server,
             getRowId: (row, index) => index.toString(),
             // groupedColumnMode: 'reorder',
             getCoreRowModel: getCoreRowModel(),
@@ -506,21 +662,49 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
             getExpandedRowModel: getExpandedRowModel(),
             getFacetedUniqueValues: getFacetedUniqueValues(),
             onColumnFiltersChange: (updaterOrValue) => {
+                this.currentScrollTop = 0;
+                const scrollElement = this.tableContainerRef.value;
+                if (scrollElement) {
+                    scrollElement.scrollTop = 0;
+                }
                 const filtersState = typeof updaterOrValue === 'function'
                     ? updaterOrValue(this.table.getState().columnFilters)
                     : updaterOrValue;
                 this.filters = filtersState;
                 if (this.onColumnFiltersChanged) {
-                    this.onColumnFiltersChanged(filtersState);
+                    this.onColumnFiltersChanged(this.table, filtersState);
                 }
             },
             onSortingChange: (updaterOrValue) => {
+                this.currentScrollTop = 0;
+                const scrollElement = this.tableContainerRef.value;
+                if (scrollElement) {
+                    scrollElement.scrollTop = 0;
+                }
                 const sortingState = typeof updaterOrValue === 'function'
                     ? updaterOrValue(this.table.getState().sorting)
                     : updaterOrValue;
                 this.sorting = sortingState;
                 if (this.onColumnSortChanged) {
-                    this.onColumnSortChanged(sortingState);
+                    this.onColumnSortChanged(this.table, sortingState);
+                }
+            },
+            onRowSelectionChange: (updaterOrValue) => {
+                const rowSelection = typeof updaterOrValue === 'function'
+                    ? updaterOrValue(this._rowSelection)
+                    : updaterOrValue;
+                this._rowSelection = rowSelection;
+                if (this.onRowSelectionChanged) {
+                    this.onRowSelectionChanged(this.table, rowSelection);
+                }
+            },
+            onColumnSizingChange: (updaterOrValue) => {
+                const columnSizingState = typeof updaterOrValue === 'function'
+                    ? updaterOrValue(this.table.getState().columnSizing)
+                    : updaterOrValue;
+                this._columnSizing = columnSizingState;
+                if (this.onColumnResize) {
+                    this.onColumnResize(this.table, columnSizingState);
                 }
             },
         });
@@ -535,7 +719,6 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
         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) => ({
@@ -546,7 +729,6 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
                 size: this.rowHeight,
                 lane: 0,
             }));
-        // console.log('rowItems', rowItems);
         // Calculate padding for virtualization
         let virtualPaddingLeft;
         let virtualPaddingRight;
@@ -610,6 +792,9 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
                                             ${repeat(newHeaderColumns, (header) => header.id, (header, index) => {
                 const column = header.column;
                 const style = {
+                    visibility: column.columnDef.type === 'actions'
+                        ? 'hidden'
+                        : 'visible',
                     ...this.getCommonPinningStyles(header.column),
                     width: `${column.getSize()}px`,
                     flexGrow: `${column.columnDef.size === undefined ? 1 : 'unset'}`,
@@ -660,10 +845,10 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
                         .columnDef
                         .header}"
                                                                                   >
-                                                                                      ${header
+                                                                                      ${flexRender(header
                         .column
                         .columnDef
-                        .header}
+                        .header, header.getContext())}
                                                                                   </lit-overflow-tooltip>
                                                                               </div>
 
@@ -695,40 +880,39 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
                         ? html `
                                                                                                 ${header.column.getCanPin()
                             ? 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
-                                                                                                                  @click="${() => this.togglePin(header)}"
-                                                                                                                  size="small"
-                                                                                                                  variant="text"
-                                                                                                                  icon="pin"
-                                                                                                                  .active="${header.column.getIsPinned()}"
-                                                                                                              >
-                                                                                                              </lit-icon-button>
-                                                                                                          </lit-tooltip>
+                                                                                                          </lit-icon-button>
+                                                                                                          <simple-tooltip
+                                                                                                              placement="bottom"
+                                                                                                              >${header.column.getIsPinned()
+                                ? msg('Zrušit připnutí sloupce')
+                                : msg('Připnout sloupec vlevo')}
+                                                                                                          </simple-tooltip>
                                                                                                       `
                             : ''}
                                                                                                 ${header.column.getCanGroup()
                             ? html `
-                                                                                                          <lit-tooltip
-                                                                                                              label="${header.column.getIsGrouped()
+                                                                                                          <lit-icon-button
+                                                                                                              @click="${header.column.getToggleGroupingHandler()}"
+                                                                                                              size="small"
+                                                                                                              variant="text"
+                                                                                                              .active="${header.column.getIsGrouped()}"
+                                                                                                              icon="agregation"
+                                                                                                          >
+                                                                                                          </lit-icon-button>
+                                                                                                          <simple-tooltip
+                                                                                                              placement="bottom"
+                                                                                                          >
+                                                                                                              ${header.column.getIsGrouped()
                                 ? msg('Zrušit seskupení')
-                                : msg('Seskupit sloupec')}"
-                                                                                                              variant="bottom"
+                                : msg('Seskupit sloupec')}</simple-tooltip
                                                                                                           >
-                                                                                                              <lit-icon-button
-                                                                                                                  @click="${header.column.getToggleGroupingHandler()}"
-                                                                                                                  size="small"
-                                                                                                                  variant="text"
-                                                                                                                  .active="${header.column.getIsGrouped()}"
-                                                                                                                  icon="agregation"
-                                                                                                              >
-                                                                                                              </lit-icon-button>
-                                                                                                          </lit-tooltip>
                                                                                                       `
                             : ''}
                                                                                             `
@@ -754,6 +938,8 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
                             .dateFormat}
                                                                                         .userLang=${this
                             .userLang}
+                                                                                        @filter-tab=${this
+                            .handleFilterTabNavigation}
                                                                                     ></filter-inputs>
                                                                                 </div>
                                                                             `
@@ -809,7 +995,6 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
             ? 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;
@@ -828,7 +1013,8 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
                 return row
                     ? html `
                                                     <tr
-                                                        class="${this.selectedRowId === row.id
+                                                        class="${this.selectedRowId === row.id ||
+                        this._rowSelection[row.id]
                         ? 'selected body'
                         : 'body'}"
                                                         data-index="${item.index}"
@@ -861,6 +1047,12 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
                             flexGrow: `${column.columnDef.size === undefined ? 1 : 'unset'}`,
                             background: this.getCellBackgroundColor(cell),
                             lineHeight: `${this.rowHeight}px`,
+                            padding: column.columnDef.type ===
+                                'actions' ||
+                                column.columnDef.type ===
+                                    'checkbox'
+                                ? '0'
+                                : '0px 14px',
                         };
                         return html `
                                                                     <td style="${styleMap(style)}">
@@ -916,9 +1108,17 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
                                                                                 `
                                 : cell.getIsPlaceholder()
                                     ? null
-                                    : flexRender(cell.column
+                                    : html `<lit-overflow-tooltip
+                                                                                      placement="right"
+                                                                                      label=${flexRender(cell
+                                        .column
                                         .columnDef
                                         .cell, cell.getContext())}
+                                                                                      >${flexRender(cell
+                                        .column
+                                        .columnDef
+                                        .cell, cell.getContext())}</lit-overflow-tooltip
+                                                                                  >`}
                                                                     </td>
                                                                 `;
                     })}
@@ -937,9 +1137,20 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
                         </tbody>
                     </table>
                     <div class="footer-container">
-                        <span class="numberCount">
+                        <div class="numberCount">
                             ${msg('Počet záznamů')}: ${this.table.getRowModel().rows.length}
-                        </span>
+                            <pre>/</pre>
+                            ${this.server
+            ? this.totalNumberRows
+                ? this.totalNumberRows
+                : html ` ?<lit-icon-button
+                                              icon="reload"
+                                              size="small"
+                                              variant="text"
+                                              @click="${() => this.handleGetTotalNumber()}"
+                                          ></lit-icon-button>`
+            : this.table.getRowModel().rows.length}
+                        </div>
                         <div class="right-actions">
                             <lit-data-grid-density-popover
                                 .density="${this.rowDensity}"
@@ -956,8 +1167,12 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
                             ${this.exportData
             ? html `
                                       <lit-data-grid-export-popover
-                                          .exportToCsv="${() => this.exportDataToCsv()}"
-                                          .exportToExcel="${() => this.exportDataToExcel()}"
+                                          .exportToCsv="${typeof this.exportExcelFn === 'function'
+                ? () => this.exportCsvFn && this.exportCsvFn()
+                : () => this.exportDataToCsv()}"
+                                          .exportToExcel="${typeof this.exportExcelFn === 'function'
+                ? () => this.exportExcelFn && this.exportExcelFn()
+                : () => this.exportDataToExcel()}"
                                           .disabledButtons="${this.isLoading}"
                                       >
                                       </lit-data-grid-export-popover>
@@ -1057,6 +1272,7 @@ LitDataGridTanstack.styles = [
                 width: 100%;
                 border-bottom: 1px solid var(--color-divider, #d0d3db);
                 display: flex;
+                overflow: visible;
             }
 
             tr.body:hover {
@@ -1070,7 +1286,7 @@ LitDataGridTanstack.styles = [
                 overflow: hidden;
                 padding: 0px 14px;
                 font-weight: 500;
-                font-size: 13px;
+                font-size: 12px;
                 color: var(--text-primary, #111827);
             }
 
@@ -1172,6 +1388,8 @@ LitDataGridTanstack.styles = [
                 font-size: 12px;
                 font-weight: 400;
                 color: var(--text-primary, #111827);
+                display: flex;
+                align-items: center;
             }
 
             .scroll-button {
@@ -1246,6 +1464,9 @@ __decorate([
 __decorate([
     property({ type: Object })
 ], LitDataGridTanstack.prototype, "initialColumnVisibility", void 0);
+__decorate([
+    property({ type: Object })
+], LitDataGridTanstack.prototype, "columnSizing", void 0);
 __decorate([
     property({ type: String })
 ], LitDataGridTanstack.prototype, "requestUrl", void 0);
@@ -1276,6 +1497,27 @@ __decorate([
 __decorate([
     property({ type: Function })
 ], LitDataGridTanstack.prototype, "onRowDoubleClick", void 0);
+__decorate([
+    property({ type: Function })
+], LitDataGridTanstack.prototype, "rowDensityChange", void 0);
+__decorate([
+    property({ type: Function })
+], LitDataGridTanstack.prototype, "onColumnResize", void 0);
+__decorate([
+    property({ type: Boolean })
+], LitDataGridTanstack.prototype, "onColumnFiltersChanged", void 0);
+__decorate([
+    property({ type: Boolean })
+], LitDataGridTanstack.prototype, "onColumnSortChanged", void 0);
+__decorate([
+    property({ type: Function })
+], LitDataGridTanstack.prototype, "onRowSelectionChanged", void 0);
+__decorate([
+    property({ type: Function })
+], LitDataGridTanstack.prototype, "exportExcelFn", void 0);
+__decorate([
+    property({ type: Function })
+], LitDataGridTanstack.prototype, "exportCsvFn", void 0);
 __decorate([
     property({ type: Boolean })
 ], LitDataGridTanstack.prototype, "enableRowSelectionOnClick", void 0);
@@ -1285,18 +1527,21 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], LitDataGridTanstack.prototype, "server", void 0);
-__decorate([
-    property({ type: Boolean })
-], LitDataGridTanstack.prototype, "onColumnFiltersChanged", void 0);
-__decorate([
-    property({ type: Boolean })
-], LitDataGridTanstack.prototype, "onColumnSortChanged", void 0);
 __decorate([
     property({ type: Number })
 ], LitDataGridTanstack.prototype, "scrollEndThreshold", void 0);
 __decorate([
     property({ type: String })
 ], LitDataGridTanstack.prototype, "rowDensity", void 0);
+__decorate([
+    property({ type: Boolean })
+], LitDataGridTanstack.prototype, "checkboxSelection", void 0);
+__decorate([
+    property({ type: Function })
+], LitDataGridTanstack.prototype, "getTotalNumberFn", void 0);
+__decorate([
+    property({ type: Number })
+], LitDataGridTanstack.prototype, "totalNumberRows", void 0);
 __decorate([
     state()
 ], LitDataGridTanstack.prototype, "rowsCount", void 0);
@@ -1324,6 +1569,12 @@ __decorate([
 __decorate([
     state()
 ], LitDataGridTanstack.prototype, "rowHeight", void 0);
+__decorate([
+    state()
+], LitDataGridTanstack.prototype, "_rowSelection", void 0);
+__decorate([
+    state()
+], LitDataGridTanstack.prototype, "_columnSizing", void 0);
 LitDataGridTanstack = __decorate([
     customElement('lit-data-grid-tanstack')
 ], LitDataGridTanstack);