overview-components 1.0.3 → 1.0.5

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

@@ -5,6 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { css, html, LitElement } from 'lit';
+import _ from 'lodash';
 import { msg } from '@lit/localize';
 import { customElement, property, state } from 'lit/decorators.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
@@ -31,7 +32,7 @@ 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';
+import { dateFilterFn, multiselectFilterFn, dateRangeFilterFn } from '../utils/custom-filters.js';
 import { setLocale, getLocale } from '../utils/localization.js';
 let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
     constructor() {
@@ -54,29 +55,30 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
         this.dateFormat = null;
         this.isLoading = false;
         this.onColumnResize = () => { };
-        this.onColumnFiltersChanged = (filterModel) => { };
+        this.onColumnFiltersChanged = (table, filterModel) => { };
         this.onColumnSortChanged = (table, sortModel) => { };
         this.onRowSelectionChanged = (table, selectedRows) => { };
-        this.enableRowSelectionOnClick = false;
+        this.enableRowSelection = false;
         this.initialFiltering = [];
         this.server = false;
         this.scrollEndThreshold = 100;
         this.rowDensity = 'standard';
-        this.checkboxSelection = false;
+        this.enableMultiRowSelection = false;
+        this.minFilterCharacters = 3;
+        this.localizeDate = true;
+        this.rowsSelected = {};
         this.rowsCount = 0;
-        this.selectedRowId = null;
         this.isScrollable = false;
         this.disableScrollLeft = true;
         this.disableScrollRight = false;
         this.filters = [];
         this.sorting = [];
         this.rowHeight = 31;
-        this._rowSelection = {};
-        this._columnSizing = {};
         this.scrollToEnd = false;
         this.tableContainerRef = createRef();
         this.scrollInterval = null;
         this.currentScrollTop = 0;
+        this.lastSelectedIndex = null;
         this.getCellBackgroundColor = (cell) => {
             if (cell.getIsGrouped()) {
                 return this.columnGroupedColor ?? `var(--color-primary-light, #f0fadf)`;
@@ -147,9 +149,6 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
             this.initTable();
             this.requestUpdate();
         }
-        if (changedProperties.has('columnSizing')) {
-            this._columnSizing = this.columnSizing;
-        }
     }
     firstUpdated() {
         const grid = this.tableContainerRef.value;
@@ -253,56 +252,26 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
     }
     // 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)
+        if (_.isEmpty(this.rowsSelected) && this.enableMultiRowSelection)
             return;
         const rows = this.table.getRowModel().rows;
-        const currentIndex = rows.findIndex((row) => row.id === this.selectedRowId);
+        const selectedRowId = Object.keys(this.rowsSelected).find((key) => this.rowsSelected[key]);
+        const currentIndex = selectedRowId
+            ? this.table.getSelectedRowModel().rowsById[selectedRowId].index
+            : {};
         if (event.key === 'ArrowDown') {
-            if (!this.selectedRowId) {
-                // this.selectedRowId = rows[0]?.id; // Select first row if none selected
-                return;
-            }
             const nextIndex = Math.min(currentIndex + 1, (rows.length ?? 0) - 1);
-            this.selectedRowId = rows[nextIndex].id;
+            this.rowsSelected = { [rows[nextIndex].id]: true };
+            this.lastSelectedIndex = nextIndex;
         }
         else if (event.key === 'ArrowUp') {
-            if (!this.selectedRowId) {
-                // this.selectedRowId = rows[0]?.id; // Select first row if none selected
-                return;
-            }
             const prevIndex = Math.max(currentIndex - 1, 0);
-            this.selectedRowId = rows[prevIndex].id;
+            this.rowsSelected = { [rows[prevIndex].id]: true };
+            this.lastSelectedIndex = prevIndex;
         }
-        else if (event.key === 'Enter' && this.selectedRowId) {
-            const selectedRow = rows.find((row) => row.id === this.selectedRowId);
-            if (selectedRow) {
-                this.handleRowDoubleClick(selectedRow);
+        else if (event.key === 'Enter' && this.rowsSelected) {
+            if (selectedRowId) {
+                this.handleRowDoubleClick(this.table.getSelectedRowModel().rowsById[selectedRowId].original);
             }
         }
     }
@@ -328,19 +297,33 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
             overscan: 5,
         });
     }
-    handleRowClick(row) {
-        if (this.onRowClick && !this.checkboxSelection) {
+    handleRowClick(event, row) {
+        const isShiftPressed = event.shiftKey;
+        if (this.onRowClick) {
             this.onRowClick(this.table, row);
         }
-        if (this.enableRowSelectionOnClick && !this.checkboxSelection) {
-            this.selectedRowId = row.id;
+        if (this.enableRowSelection && !this.enableMultiRowSelection) {
+            this.rowsSelected = { [row.id]: true };
         }
-        if (this.checkboxSelection) {
-            row.toggleSelected();
+        if (this.enableMultiRowSelection && this.enableRowSelection) {
+            if (isShiftPressed && this.lastSelectedIndex !== null) {
+                const selectedRows = this.table
+                    .getRowModel()
+                    .rows.slice(Math.min(this.lastSelectedIndex, row.index), Math.max(this.lastSelectedIndex, row.index) + 1);
+                const selectedRowsIds = selectedRows.map((r) => r.id);
+                this.rowsSelected = {
+                    ...this.rowsSelected,
+                    ...selectedRowsIds.reduce((acc, id) => ({ ...acc, [id]: true }), {}),
+                };
+            }
+            else {
+                row.toggleSelected();
+                this.lastSelectedIndex = row.index;
+            }
         }
     }
     handleRowDoubleClick(row) {
-        if (this.onRowDoubleClick && !this.checkboxSelection) {
+        if (this.onRowDoubleClick) {
             this.onRowDoubleClick(this.table, row);
         }
     }
@@ -349,31 +332,25 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
             return {
                 id: column.field,
                 accessorKey: column.field,
-                accessorFn: column.accessorFn ?? ((originalRow) => originalRow[column.field]),
+                accessorFn: (originalRow) => (column.type === 'date' ||
+                    column.type === 'dateTime' ||
+                    column.type === 'dateTimeRange' ||
+                    column.type === 'dateRange') &&
+                    this.localizeDate
+                    ? column.accessorFn
+                        ? formatDate(column.accessorFn(originalRow), this.userLang || 'cs', column.type === 'date' || column.type === 'dateRange'
+                            ? undefined
+                            : true, this.dateFormat)
+                        : formatDate(originalRow[column.field], this.userLang || 'cs', column.type === 'date' || column.type === 'dateRange'
+                            ? undefined
+                            : true, this.dateFormat)
+                    : column.accessorFn
+                        ? column.accessorFn(originalRow)
+                        : originalRow[column.field],
                 type: column.type,
                 header: column.headerName,
                 cell: (props) => {
                     const value = props.getValue();
-                    const isGrouped = props.row.getIsGrouped?.();
-                    const isAggregated = props.row.getIsAggregated?.();
-                    if (isGrouped) {
-                        if (column.type === 'date' && !this.server) {
-                            return formatDate(value, this.userLang || 'cs', undefined, this.dateFormat);
-                        }
-                        if (column.type === 'dateTime' && !this.server) {
-                            return formatDate(value, this.userLang || 'cs', true, this.dateFormat);
-                        }
-                        return value;
-                    }
-                    if (isAggregated) {
-                        return value;
-                    }
-                    if (column.type === 'date' && value && !this.server) {
-                        return formatDate(value, this.userLang || 'cs', undefined, this.dateFormat);
-                    }
-                    if (column.type === 'dateTime' && value && !this.server) {
-                        return formatDate(value, this.userLang || 'cs', true, this.dateFormat);
-                    }
                     if (column.type === 'actions') {
                         return html `
                             <lit-data-grid-row-actions
@@ -385,7 +362,7 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
                 },
                 filterFn: (() => {
                     switch (column.type) {
-                        case 'range':
+                        case 'numberRange':
                             return filterFns.inNumberRange;
                         case 'select':
                             return filterFns.weakEquals;
@@ -393,6 +370,9 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
                             return multiselectFilterFn;
                         case 'number':
                             return filterFns.weakEquals;
+                        case 'dateRange':
+                        case 'dateTimeRange':
+                            return dateRangeFilterFn;
                         case 'date':
                         case 'dateTime':
                             return dateFilterFn;
@@ -401,12 +381,14 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
                             return filterFns.includesString;
                     }
                 })(),
+                enableSorting: column.enableSorting ?? true,
                 enableColumnFilter: this.enableFiltering && (column.enableFilter ?? true),
                 size: column.size || this.columnDefaultSize || undefined,
                 maxSize: column.maxSize || this.columnDefaultMaxSize || 500,
                 minSize: column.minSize || this.columnDefaultMinSize || 100,
                 meta: {
                     filterVariant: column.type ?? 'string',
+                    valueOptions: column.valueOptions,
                 },
                 aggregationFn: column.columnAggregation ?? undefined,
                 enableGrouping: column.enableGrouping ?? true,
@@ -464,7 +446,7 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
                     }
                     return ''; // Ostatné stĺpce v skupinovom riadku prázdne
                 }
-                const value = accessor ? row.original?.[accessor] || '' : ''; // Získanie hodnoty pre normálny riadok
+                const value = row.getValue?.(accessor) || ''; // Získanie hodnoty pre normálny riadok
                 return typeof value === 'string'
                     ? `"${value.replace(/"/g, '""')}"` // Ošetrenie dvojitých úvodzoviek
                     : value;
@@ -512,8 +494,7 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
                 }
                 else if (accessor) {
                     // Normálny riadok
-                    formattedRow[columnName] =
-                        row.original?.[accessor] || row.getValue?.(accessor) || '';
+                    formattedRow[columnName] = row.getValue?.(accessor) || '';
                 }
             });
             return formattedRow;
@@ -582,7 +563,7 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
         }
     }
     render() {
-        const checkboxColumn = this.checkboxSelection
+        const checkboxColumn = this.enableMultiRowSelection
             ? [
                 {
                     id: 'checkbox',
@@ -602,13 +583,15 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
                           </div>
                       `,
                     cell: ({ row }) => html `
-                          <lit-checkbox
-                              type="checkbox"
-                              .onChange="${row.getToggleSelectedHandler()}"
-                              .checked="${row.getIsSelected()}"
-                              ?disabled="${!row.getCanSelect()}"
-                              .indeterminate="${row.getIsSomeSelected()}"
-                          ></lit-checkbox>
+                          <div style="padding: 0.1875rem 0px 0px 0px">
+                              <lit-checkbox
+                                  type="checkbox"
+                                  .onChange="${row.getToggleSelectedHandler()}"
+                                  .checked="${row.getIsSelected()}"
+                                  ?disabled="${!row.getCanSelect()}"
+                                  .indeterminate="${row.getIsSomeSelected()}"
+                              ></lit-checkbox>
+                          </div>
                       `,
                 },
             ]
@@ -639,20 +622,22 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
             state: {
                 columnFilters: this.filters,
                 sorting: this.sorting,
-                rowSelection: this._rowSelection,
-                columnSizing: this._columnSizing,
+                rowSelection: this.rowsSelected,
+                columnSizing: this.columnSizing,
             },
             filterFns: {
+                dateRangeFilterFn: dateRangeFilterFn,
                 dateFilterFn: dateFilterFn,
                 multiselectFilterFn: multiselectFilterFn,
             },
             // debugTable: true,
-            enableRowSelection: this.checkboxSelection,
+            enableRowSelection: this.enableRowSelection,
+            enableMultiRowSelection: this.enableMultiRowSelection,
             enableColumnPinning: this.enableColumnPinning,
             enableGrouping: this.enableGrouping,
             manualFiltering: this.server,
             manualSorting: this.server,
-            getRowId: (row, index) => index.toString(),
+            getRowId: (row, index) => this.getRowId ? this.getRowId(row, index) : index.toString(),
             // groupedColumnMode: 'reorder',
             getCoreRowModel: getCoreRowModel(),
             getSortedRowModel: getSortedRowModel(),
@@ -690,10 +675,12 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
                 }
             },
             onRowSelectionChange: (updaterOrValue) => {
-                const rowSelection = typeof updaterOrValue === 'function'
-                    ? updaterOrValue(this._rowSelection)
-                    : updaterOrValue;
-                this._rowSelection = rowSelection;
+                const rowSelection = this.enableRowSelection && this.enableMultiRowSelection
+                    ? typeof updaterOrValue === 'function'
+                        ? updaterOrValue(this.rowsSelected)
+                        : updaterOrValue
+                    : this.rowsSelected;
+                this.rowsSelected = rowSelection;
                 if (this.onRowSelectionChanged) {
                     this.onRowSelectionChanged(this.table, rowSelection);
                 }
@@ -702,7 +689,7 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
                 const columnSizingState = typeof updaterOrValue === 'function'
                     ? updaterOrValue(this.table.getState().columnSizing)
                     : updaterOrValue;
-                this._columnSizing = columnSizingState;
+                this.columnSizing = columnSizingState;
                 if (this.onColumnResize) {
                     this.onColumnResize(this.table, columnSizingState);
                 }
@@ -832,9 +819,7 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
                                 0)}px)`
                         : ''}"
                                                                       >
-                                                                          <div
-                                                                              style="display: flex; align-items: center; height: 100%;"
-                                                                          >
+                                                                          <div class="header">
                                                                               <div
                                                                                   class="column-header"
                                                                                   @click=${header.column.getToggleSortingHandler()}
@@ -855,24 +840,36 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
                                                                               <div
                                                                                   class="icons-group-pin"
                                                                               >
-                                                                                  ${header.column.getIsSorted()
-                        ? header.column.getIsSorted() ===
-                            'asc'
-                            ? html `<slot
-                                                                                                name="iconSortUp"
-                                                                                                ><lit-icon
-                                                                                                    size="0.75rem"
-                                                                                                    icon="chevronUpFilled"
-                                                                                                ></lit-icon
-                                                                                            ></slot>`
-                            : html `<slothea
-                                                                                                name="iconSortDown"
+                                                                                  ${header.column.getCanSort()
+                        ? header.column.getIsSorted()
+                            ? header.column.getIsSorted() ===
+                                'asc'
+                                ? html `<slot
+                                                                                                    name="iconSortUp"
+                                                                                                    ><lit-icon
+                                                                                                        @click=${header.column.getToggleSortingHandler()}
+                                                                                                        size="0.75rem"
+                                                                                                        icon="chevronUpFilled"
+                                                                                                    ></lit-icon
+                                                                                                ></slot>`
+                                : html `<slot
+                                                                                                    name="iconSortDown"
+                                                                                                >
+                                                                                                    <lit-icon
+                                                                                                        @click=${header.column.getToggleSortingHandler()}
+                                                                                                        size="0.75rem"
+                                                                                                        icon="chevronDownFilled"
+                                                                                                    ></lit-icon>
+                                                                                                </slot>`
+                            : html `<div
+                                                                                                class="sortFilled"
                                                                                             >
                                                                                                 <lit-icon
+                                                                                                    @click=${header.column.getToggleSortingHandler()}
                                                                                                     size="0.75rem"
-                                                                                                    icon="chevronDownFilled"
+                                                                                                    icon="sortFilled"
                                                                                                 ></lit-icon>
-                                                                                            </slothea>`
+                                                                                            </div>`
                         : html `<div></div>`}
                                                                                   <div class="flex">
                                                                                       ${!this
@@ -933,6 +930,8 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
                         ? html `
                                                                                 <div>
                                                                                     <filter-inputs
+                                                                                        .minFilterCharacters=${this
+                            .minFilterCharacters}
                                                                                         .column=${header.column}
                                                                                         .dateFormat=${this
                             .dateFormat}
@@ -940,6 +939,8 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
                             .userLang}
                                                                                         @filter-tab=${this
                             .handleFilterTabNavigation}
+                                                                                        .server=${this
+                            .server}
                                                                                     ></filter-inputs>
                                                                                 </div>
                                                                             `
@@ -1013,13 +1014,14 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
                 return row
                     ? html `
                                                     <tr
-                                                        class="${this.selectedRowId === row.id ||
-                        this._rowSelection[row.id]
+                                                        class="${this.rowsSelected[row.id]
                         ? 'selected body'
                         : 'body'}"
                                                         data-index="${item.index}"
-                                                        @click="${() => this.handleRowClick(row)}"
-                                                        @dblclick="${() => this.handleRowDoubleClick(row)}"
+                                                        @click="${row.getIsGrouped()
+                        ? row.getToggleExpandedHandler()
+                        : (e) => this.handleRowClick(e, row)}"
+                                                        @dblclick="${() => this.handleRowDoubleClick(row.original)}"
                                                         style="${styleMap(rowStyle)}"
                                                         ${ref((node) => {
                         if (node &&
@@ -1057,40 +1059,33 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
                         return html `
                                                                     <td style="${styleMap(style)}">
                                                                         ${cell.getIsGrouped()
-                            ? html `
-                                                                                  <lit-button
-                                                                                      @click="${row.getToggleExpandedHandler()}"
-                                                                                      variant="inherit"
-                                                                                      size="${buttonSize}"
-                                                                                      count="${row
-                                .subRows
-                                .length}"
-                                                                                      label="${flexRender(cell
-                                .column
-                                .columnDef
-                                .cell, cell.getContext())}"
+                            ? html `<div
+                                                                                  class="grouped-column"
+                                                                              >
+                                                                                  <lit-icon
+                                                                                      class="grouped-column--icon-button"
+                                                                                      size="1.25rem"
                                                                                       icon="${row.getIsExpanded()
                                 ? 'chevronDownFilled'
                                 : 'chevron'}"
+                                                                                  ></lit-icon>
+                                                                                  <div
+                                                                                      class="grouped-column--label"
                                                                                   >
-                                                                                      <!-- ${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>
-                                                                              `
+                                                                                      <lit-overflow-tooltip
+                                                                                          label=${cell.getValue()}
+                                                                                      >
+                                                                                          ${cell.getValue()}
+                                                                                      </lit-overflow-tooltip>
+                                                                                  </div>
+                                                                                  <lit-pill
+                                                                                      class="grouped-column--pill"
+                                                                                      style="margin-left: 0.5rem"
+                                                                                      count="${row
+                                .subRows
+                                .length}"
+                                                                                  ></lit-pill>
+                                                                              </div> `
                             : cell.getIsAggregated()
                                 ? html `
                                                                                     <div
@@ -1110,10 +1105,7 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
                                     ? null
                                     : html `<lit-overflow-tooltip
                                                                                       placement="right"
-                                                                                      label=${flexRender(cell
-                                        .column
-                                        .columnDef
-                                        .cell, cell.getContext())}
+                                                                                      label=${cell.getValue()}
                                                                                       >${flexRender(cell
                                         .column
                                         .columnDef
@@ -1143,13 +1135,15 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
                             ${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}
+                            ${this.server &&
+            html `<lit-icon-button
+                                icon="reload"
+                                size="small"
+                                variant="text"
+                                @click="${() => this.handleGetTotalNumber()}"
+                            ></lit-icon-button>`}
                         </div>
                         <div class="right-actions">
                             <lit-data-grid-density-popover
@@ -1288,6 +1282,8 @@ LitDataGridTanstack.styles = [
                 font-weight: 500;
                 font-size: 12px;
                 color: var(--text-primary, #111827);
+                display: flex;
+                align-items: center;
             }
 
             .column-header {
@@ -1411,6 +1407,40 @@ LitDataGridTanstack.styles = [
             .selected {
                 background-color: var(--color-primary-light, #f0fadf);
             }
+
+            .sortFilled {
+                visibility: hidden;
+            }
+            .header {
+                display: flex;
+                align-items: center;
+                height: 100%;
+            }
+            .header:hover .sortFilled {
+                visibility: visible;
+            }
+            .grouped-column {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                width: 100%;
+                gap: 0.25rem;
+            }
+            .grouped-column--icon-button {
+                display: flex;
+                align-items: center;
+                position: relative;
+                top: -1.5px;
+            }
+            .grouped-column--label {
+                display: flex;
+                align-items: center;
+                overflow: hidden;
+                flex-grow: 1;
+            }
+            .grouped-column--pill {
+                margin-left: 0.5rem;
+            }
         `,
 ];
 __decorate([
@@ -1520,7 +1550,7 @@ __decorate([
 ], LitDataGridTanstack.prototype, "exportCsvFn", void 0);
 __decorate([
     property({ type: Boolean })
-], LitDataGridTanstack.prototype, "enableRowSelectionOnClick", void 0);
+], LitDataGridTanstack.prototype, "enableRowSelection", void 0);
 __decorate([
     property({ type: Array })
 ], LitDataGridTanstack.prototype, "initialFiltering", void 0);
@@ -1535,7 +1565,7 @@ __decorate([
 ], LitDataGridTanstack.prototype, "rowDensity", void 0);
 __decorate([
     property({ type: Boolean })
-], LitDataGridTanstack.prototype, "checkboxSelection", void 0);
+], LitDataGridTanstack.prototype, "enableMultiRowSelection", void 0);
 __decorate([
     property({ type: Function })
 ], LitDataGridTanstack.prototype, "getTotalNumberFn", void 0);
@@ -1543,11 +1573,20 @@ __decorate([
     property({ type: Number })
 ], LitDataGridTanstack.prototype, "totalNumberRows", void 0);
 __decorate([
-    state()
-], LitDataGridTanstack.prototype, "rowsCount", void 0);
+    property({ type: Number })
+], LitDataGridTanstack.prototype, "minFilterCharacters", void 0);
+__decorate([
+    property({ type: Boolean })
+], LitDataGridTanstack.prototype, "localizeDate", void 0);
+__decorate([
+    property({ type: Boolean })
+], LitDataGridTanstack.prototype, "rowsSelected", void 0);
+__decorate([
+    property({ type: Function })
+], LitDataGridTanstack.prototype, "getRowId", void 0);
 __decorate([
     state()
-], LitDataGridTanstack.prototype, "selectedRowId", void 0);
+], LitDataGridTanstack.prototype, "rowsCount", void 0);
 __decorate([
     state()
 ], LitDataGridTanstack.prototype, "isScrollable", void 0);
@@ -1569,12 +1608,6 @@ __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);