@infineon/infineon-design-system-stencil 39.3.1--canary.2120.1c467763c53a3cb468accc942e4e88953b0b9626.0 → 39.3.1--canary.2118.a60360f4f6d6f0d6b993cc68d1be10f2536c481f.0

package/dist/collection/components/table-advanced-version/table.js

@@ -1,3 +1,15 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { h, Host } from "@stencil/core";
 import classNames from "classnames";
 import { trackComponent } from "../../global/utils/tracking";
@@ -5,6 +17,8 @@ import { isNestedInIfxComponent } from "../../global/utils/dom-utils";
 import { detectFramework } from "../../global/utils/framework-detection";
 import { createGrid } from "ag-grid-community";
 import { ButtonCellRenderer } from "./buttonCellRenderer";
+import { CheckboxCellRenderer } from "./checkboxCellRenderer";
+import { CheckboxHeaderRenderer } from "./checkboxHeaderRenderer";
 import { IconButtonCellRenderer } from "./iconButtonCellRenderer";
 import { LinkCellRenderer } from "./linkCellRenderer";
 import { StatusCellRenderer } from "./statusCellRenderer";
@@ -23,21 +37,64 @@ export class Table {
         this.pagination = true;
         this.paginationPageSize = 10;
         this.filterOrientation = 'sidebar';
-        this.headline = "";
+        this.headline = '';
         this.showSidebarFilters = true;
         this.matchingResultsCount = 0;
         this.variant = 'default';
         this.serverSidePagination = false;
+        this.enableSelection = false;
+        this.selectedRows = new Set();
+        this.selectAll = false;
         this.showLoading = false;
         this.originalRowData = [];
         this.internalItemsPerPage = JSON.stringify([
             { value: 10, label: '10', selected: true },
             { value: 20, label: '20', selected: false },
-            { value: 30, label: '30', selected: false }
+            { value: 30, label: '30', selected: false },
         ]);
+        this.handleSelectAll = (checked) => {
+            this.selectAll = checked;
+            if (checked) {
+                this.selectedRows = new Set(Array.from({ length: this.allRowData.length }, (_, i) => i));
+            }
+            else {
+                this.selectedRows = new Set();
+            }
+            this.updateCheckboxStates();
+            this.updateHeaderCheckboxState();
+            this.emitSelectionChange();
+        };
+        this.handleRowCheckboxClick = (params) => {
+            const clickedRowData = params.data;
+            const actualIndex = this.allRowData.findIndex(row => row.make === clickedRowData.make && row.model === clickedRowData.model && row.price === clickedRowData.price);
+            const newSelectedRows = new Set(this.selectedRows);
+            if (newSelectedRows.has(actualIndex)) {
+                newSelectedRows.delete(actualIndex);
+            }
+            else {
+                newSelectedRows.add(actualIndex);
+            }
+            this.selectedRows = newSelectedRows;
+            this.selectAll = newSelectedRows.size === this.allRowData.length;
+            this.updateCheckboxStates();
+            this.updateHeaderCheckboxState();
+            this.emitSelectionChange();
+        };
     }
     rowsChanged(_newVal) {
         const parsed = this.parseArrayInput(this.rows);
+        if (this.enableSelection) {
+            parsed.forEach((row, index) => {
+                var _a;
+                row.__checkbox = {
+                    disabled: false,
+                    checked: ((_a = this.selectedRows) === null || _a === void 0 ? void 0 : _a.has(index)) || false,
+                    size: 's',
+                    indeterminate: false,
+                    error: false,
+                };
+            });
+        }
         this.currentFilters = {};
         this.currentPage = 1;
         this.originalRowData = [...parsed];
@@ -96,6 +153,12 @@ export class Table {
             this.gridApi.setColumnDefs(this.colData);
         }
     }
+    onCheckboxRendererOptionsChanged() {
+        this.colData = this.getColData();
+        if (this.gridApi) {
+            this.gridApi.setColumnDefs(this.colData);
+        }
+    }
     parseArrayInput(input) {
         if (typeof input === 'string') {
             try {
@@ -123,6 +186,20 @@ export class Table {
         }
         this.filterOptions = options;
     }
+    updateHeaderCheckboxState() {
+        if (this.gridApi && this.enableSelection) {
+            setTimeout(() => {
+                var _a;
+                const headerCheckbox = (_a = this.container) === null || _a === void 0 ? void 0 : _a.querySelector('.ag-header-cell[col-id="__checkbox"] ifx-checkbox');
+                if (headerCheckbox) {
+                    const allSelected = this.selectedRows.size === this.allRowData.length && this.allRowData.length > 0;
+                    const someSelected = this.selectedRows.size > 0 && this.selectedRows.size < this.allRowData.length;
+                    headerCheckbox.checked = allSelected;
+                    headerCheckbox.indeterminate = someSelected;
+                }
+            }, 0);
+        }
+    }
     handleSidebarFilterChange(event) {
         const filterGroups = event.detail;
         const updatedFilters = {};
@@ -222,14 +299,26 @@ export class Table {
         if (this.serverSidePagination && this.serverPageChangeHandler) {
             const { rows, total } = await this.serverPageChangeHandler({
                 page: this.currentPage,
-                pageSize: this.paginationPageSize
+                pageSize: this.paginationPageSize,
             });
+            if (this.enableSelection) {
+                rows.forEach((row, index) => {
+                    var _a;
+                    const globalIndex = (this.currentPage - 1) * this.paginationPageSize + index;
+                    row.__checkbox = {
+                        disabled: false,
+                        checked: ((_a = this.selectedRows) === null || _a === void 0 ? void 0 : _a.has(globalIndex)) || false,
+                        size: 's',
+                        indeterminate: false,
+                        error: false,
+                    };
+                });
+            }
             this.rowData = rows;
             this.matchingResultsCount = total;
             if (this.gridApi) {
                 this.gridApi.setGridOption('rowData', rows);
             }
-            // 👇 FIX: update pagination total
             const paginationElement = this.host.shadowRoot.querySelector('ifx-pagination');
             if (paginationElement) {
                 paginationElement.setAttribute('total', total.toString());
@@ -239,6 +328,24 @@ export class Table {
             const startIndex = (this.currentPage - 1) * this.paginationPageSize;
             const endIndex = startIndex + this.paginationPageSize;
             const visibleRowData = this.allRowData.slice(startIndex, endIndex);
+            if (this.enableSelection) {
+                visibleRowData.forEach((row, index) => {
+                    var _a, _b;
+                    const globalIndex = startIndex + index;
+                    if (!row.__checkbox) {
+                        row.__checkbox = {
+                            disabled: false,
+                            checked: ((_a = this.selectedRows) === null || _a === void 0 ? void 0 : _a.has(globalIndex)) || false,
+                            size: 's',
+                            indeterminate: false,
+                            error: false,
+                        };
+                    }
+                    else {
+                        row.__checkbox.checked = ((_b = this.selectedRows) === null || _b === void 0 ? void 0 : _b.has(globalIndex)) || false;
+                    }
+                });
+            }
             this.rowData = visibleRowData;
             this.matchingResultsCount = this.allRowData.length;
             if (this.gridApi) {
@@ -274,8 +381,15 @@ export class Table {
         this.colData = this.getColData();
         this.updateFilterOptions();
         this.gridOptions = {
+            suppressCellFocus: true,
             rowHeight: this.rowHeight === 'default' ? 40 : 32,
             headerHeight: 40,
+            components: {
+                checkboxCellRenderer: CheckboxCellRenderer,
+                checkboxHeaderRenderer: CheckboxHeaderRenderer,
+                customLoadingOverlay: CustomLoadingOverlay,
+                customNoRowsOverlay: CustomNoRowsOverlay,
+            },
             defaultColDef: {
                 resizable: true,
                 autoHeight: true,
@@ -288,23 +402,23 @@ export class Table {
             loadingOverlayComponent: CustomLoadingOverlay,
             noRowsOverlayComponent: CustomNoRowsOverlay,
             noRowsOverlayComponentParams: {
-                noRowsMessageFunc: () => 'No rows found' //at: ' + new Date().toLocaleTimeString(),
+                noRowsMessageFunc: () => 'No rows found', //at: ' + new Date().toLocaleTimeString(),
             },
             icons: {
                 sortAscending: '<ifx-icon icon="arrow-triangle-up-16"></ifx-icon>',
                 sortDescending: '<ifx-icon icon="arrow-triangle-down-16"></ifx-icon>',
-                sortUnSort: '<a class="unsort-icon-custom-color"><ifx-icon icon="arrow-triangle-vertikal-16"></ifx-icon></a>'
+                sortUnSort: '<a class="unsort-icon-custom-color"><ifx-icon icon="arrow-triangle-vertikal-16"></ifx-icon></a>',
             },
             rowDragManaged: this.colData.some(col => col.dndSource === true) ? true : false,
             animateRows: this.colData.some(col => col.dndSource === true) ? true : false,
-            navigateToNextCell: (params) => {
+            navigateToNextCell: params => {
                 return this.focusCellIfContainingButton(params.api, params.nextCellPosition);
             },
-            tabToNextCell: (params) => {
+            tabToNextCell: params => {
                 var _a;
                 // Returning null is deprecated so we return false if the result is null (browser handles tab behavior).
                 return (_a = this.focusCellIfContainingButton(params.api, params.nextCellPosition)) !== null && _a !== void 0 ? _a : false;
-            }
+            },
         };
     }
     focusCellIfContainingButton(api, cellPosition) {
@@ -320,7 +434,7 @@ export class Table {
             }
             const cellRenderers = api.getCellRendererInstances({
                 rowNodes: [rowNode],
-                columns: [cellPosition.column]
+                columns: [cellPosition.column],
             });
             if (cellRenderers.length > 0) {
                 const renderedContent = (_a = cellRenderers[0]) === null || _a === void 0 ? void 0 : _a.getGui();
@@ -329,8 +443,8 @@ export class Table {
                     if (button) {
                         setTimeout(() => {
                             var _a;
-                            // Just calling button.focus() will not work because the focus of <ifx-button> will not be 
-                            // forwared to its child <a>-element (containing the tabindex attribute) due to shadow root. 
+                            // Just calling button.focus() will not work because the focus of <ifx-button> will not be
+                            // forwared to its child <a>-element (containing the tabindex attribute) due to shadow root.
                             // We must therefore grab the <a>-element manually first and then call focus() on it.
                             const focusableChild = (_a = button.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('a[tabindex]');
                             focusableChild === null || focusableChild === void 0 ? void 0 : focusableChild.focus();
@@ -341,11 +455,6 @@ export class Table {
         }
         return cellPosition;
     }
-    componentDidRender() {
-        if (this.gridApi) {
-            this.gridApi.setGridOption('columnDefs', this.colData);
-        }
-    }
     async componentDidLoad() {
         if (this.container) {
             if (!isNestedInIfxComponent(this.host)) {
@@ -402,7 +511,7 @@ export class Table {
         if (this.serverSidePagination && this.serverPageChangeHandler) {
             const { rows, total } = await this.serverPageChangeHandler({
                 page: this.currentPage,
-                pageSize: this.paginationPageSize
+                pageSize: this.paginationPageSize,
             });
             this.rowData = rows;
             this.matchingResultsCount = total;
@@ -446,12 +555,52 @@ export class Table {
         else {
             console.error('Unexpected value for rows: ', this.rows);
         }
+        if (this.enableSelection) {
+            rows.forEach((row, index) => {
+                var _a;
+                row.__checkbox = {
+                    disabled: false,
+                    checked: ((_a = this.selectedRows) === null || _a === void 0 ? void 0 : _a.has(index)) || false,
+                    size: 's',
+                    indeterminate: false,
+                    error: false,
+                };
+            });
+        }
         this.allRowData = rows;
-        this.originalRowData = [...rows]; // Deep copy the original data
+        this.originalRowData = [...rows];
         this.matchingResultsCount = this.allRowData.length;
         return rows.slice(0, this.paginationPageSize);
     }
+    updateCheckboxStates() {
+        this.allRowData.forEach((row, index) => {
+            if (row.__checkbox) {
+                row.__checkbox.checked = this.selectedRows.has(index);
+            }
+        });
+        if (this.gridApi) {
+            this.gridApi.refreshCells({
+                columns: ['__checkbox'],
+                force: true,
+            });
+        }
+    }
+    emitSelectionChange() {
+        const selectedRowsData = Array.from(this.selectedRows).map(index => {
+            const _a = this.allRowData[index], { __checkbox } = _a, rowData = __rest(_a, ["__checkbox"]);
+            return rowData;
+        });
+        this.host.dispatchEvent(new CustomEvent('ifxSelectionChange', {
+            detail: {
+                selectedRows: selectedRowsData,
+                selectedCount: selectedRowsData.length,
+                isSelectAll: this.selectedRows.size === this.allRowData.length && this.allRowData.length > 0,
+            },
+            bubbles: true,
+        }));
+    }
     getColData() {
+        var _a, _b;
         let cols = [];
         if (this.cols === undefined || this.cols === null)
             return cols;
@@ -464,8 +613,30 @@ export class Table {
         else {
             console.error('Unexpected value for cols: ', this.cols);
         }
+        if (this.enableSelection) {
+            const checkboxColumn = {
+                headerName: '',
+                field: '__checkbox',
+                width: 50,
+                pinned: 'left',
+                cellRenderer: 'checkboxCellRenderer',
+                cellRendererParams: {
+                    onCheckboxClick: (_a = this.handleRowCheckboxClick) === null || _a === void 0 ? void 0 : _a.bind(this),
+                },
+                headerComponent: 'checkboxHeaderRenderer',
+                headerComponentParams: {
+                    onSelectAll: (_b = this.handleSelectAll) === null || _b === void 0 ? void 0 : _b.bind(this),
+                },
+                sortable: false,
+                filter: false,
+                resizable: false,
+                valueFormatter: undefined,
+                cellDataType: false,
+            };
+            cols.unshift(checkboxColumn);
+        }
         cols.forEach(column => {
-            var _a, _b, _c;
+            var _a, _b, _c, _d;
             const field = ((_a = column.field) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '';
             // --- Button columns ---
             if (field.startsWith('button')) {
@@ -474,18 +645,29 @@ export class Table {
                 column.cellDataType = false;
                 if ((_b = this.buttonRendererOptions) === null || _b === void 0 ? void 0 : _b.onButtonClick) {
                     column.cellRendererParams = {
-                        onButtonClick: this.buttonRendererOptions.onButtonClick
+                        onButtonClick: this.buttonRendererOptions.onButtonClick,
+                    };
+                }
+            }
+            // --- Checkbox columns ---
+            else if (field.startsWith('checkbox')) {
+                column.cellRenderer = CheckboxCellRenderer;
+                column.valueFormatter = undefined;
+                column.cellDataType = false;
+                if ((_c = this.checkboxRendererOptions) === null || _c === void 0 ? void 0 : _c.onCheckboxClick) {
+                    column.cellRendererParams = {
+                        onCheckboxClick: this.checkboxRendererOptions.onCheckboxClick,
                     };
                 }
             }
             // --- Icon Button columns ---
-            if (field.startsWith('iconbutton') || field === 'iconButton') {
+            else if (field.startsWith('iconbutton') || field === 'iconButton') {
                 column.cellRenderer = IconButtonCellRenderer;
                 column.valueFormatter = undefined;
                 column.cellDataType = false;
-                if ((_c = this.iconButtonRendererOptions) === null || _c === void 0 ? void 0 : _c.onIconButtonClick) {
+                if ((_d = this.iconButtonRendererOptions) === null || _d === void 0 ? void 0 : _d.onIconButtonClick) {
                     column.cellRendererParams = {
-                        onIconButtonClick: this.iconButtonRendererOptions.onIconButtonClick
+                        onIconButtonClick: this.iconButtonRendererOptions.onIconButtonClick,
                     };
                 }
             }
@@ -509,9 +691,9 @@ export class Table {
     }
     handleResetButtonClick() {
         const resetEvent = new CustomEvent('ifxResetFiltersEvent', { bubbles: true, composed: true });
-        window.dispatchEvent(resetEvent); // Dispatch from the window object
+        window.dispatchEvent(resetEvent);
         this.clearAllFilters();
-        this.updateTableView(); // Update table view with the original data
+        this.updateTableView();
     }
     disconnectedCallback() {
         if (this.pagination) {
@@ -532,18 +714,16 @@ export class Table {
         let style = {};
         if (this.tableHeight !== 'auto') {
             style = {
-                'height': this.tableHeight
+                height: this.tableHeight,
             };
         }
-        const filterClass = this.filterOrientation === 'topbar' ? 'topbar-layout'
-            : this.filterOrientation === 'none' ? ''
-                : 'sidebar-layout';
-        return (h(Host, { key: '27a6fc8d0aba55265ecb19b211ec2de90e2a2457' }, h("div", { key: '2c76156cdf069fb813e894a5d0b29191635d9918', class: "table-container" }, this.filterOrientation === 'sidebar' && (h("div", { key: '8dd9e8e3ee5c73d457eb41343c3fc8edd8a928e2', class: "sidebar-btn" }, h("ifx-button", { key: 'ac5c3d072a0cbe2ec2c4e87e5435341c7a87a18c', type: "button", disabled: false, variant: "secondary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.toggleSidebarFilters() }, h("ifx-icon", { key: '82f7f5927d83e559f3c37b4bbb1fa4343e705988', icon: "cross-16" }), this.showSidebarFilters ? 'Hide Filters' : 'Show Filters'))), h("div", { key: '49da17ae55641243e5406058412357d0ae671ed4', class: filterClass }, this.filterOrientation === 'sidebar' && this.showSidebarFilters && (h("div", { key: 'a9adedbc6ad9a36d801d443019e2ae69ac651173', class: "sidebar-container" }, h("div", { key: 'f7c3ecf64e5ad13f21f88db7aff3078147f17dc1', class: "filters-title-container" }, h("span", { key: 'f3fbc357e4121f41d265b49ce69c3f84ed51ac97', class: "filters-title" }, "Filters")), h("div", { key: 'fe269d6793a4694f8e7f398a2f96e91618d96307', class: "set-filter-wrapper-sidebar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (h("slot", { key: '11c69f58c3a62f82b6d9899c6904e20db45dc4d3', name: "sidebar-filter" }))))), this.filterOrientation !== 'none' && this.filterOrientation !== 'sidebar' && (h("div", { key: '4682c5cb399bf2d245e74ea605563cbeef96cd8f', class: "set-filter-wrapper-topbar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (h("slot", { key: 'f0632c6c3393d0226dcbbc87a886e1a611e11e3d', name: "topbar-filter" })))), h("div", { key: '34e72dd985a10b907dd549473539f2df626f115d', class: "table-pagination-wrapper" }, this.filterOrientation !== 'none' && this.filterOrientation !== 'topbar' && this.showSidebarFilters && (h("div", { key: 'cacf8434df1beb42c27f20837cb4a4e64e49a368', class: "filter-chips" }, Object.keys(this.currentFilters).map(name => {
+        const filterClass = this.filterOrientation === 'topbar' ? 'topbar-layout' : this.filterOrientation === 'none' ? '' : 'sidebar-layout';
+        return (h(Host, { key: 'e0098dd02b4af0e5793c8550f226e2b7e5521be9' }, h("div", { key: 'a90150e2f63203a218f3d5fc6bdc3cc7eedf9f7a', class: "table-container" }, this.filterOrientation === 'sidebar' && (h("div", { key: '774bfbd668bbd061b9d5f04ad037aa907b5d0e80', class: "sidebar-btn" }, h("ifx-button", { key: 'c29740ffb2524e2b4ffb8e53fc4084174f399f61', type: "button", disabled: false, variant: "secondary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.toggleSidebarFilters() }, h("ifx-icon", { key: 'd454fd01ba96c842038a74eeac5d5a7439b1c39e', icon: "cross-16" }), this.showSidebarFilters ? 'Hide Filters' : 'Show Filters'))), h("div", { key: 'b2396efa47d38e773c533a59b63972e4f3888b12', class: filterClass }, this.filterOrientation === 'sidebar' && this.showSidebarFilters && (h("div", { key: '45e8b1c6024d9b9667954bc9045a9a521fa4a63c', class: "sidebar-container" }, h("div", { key: 'bb4b2c88a631dab51d12c104c4946696111ba5d1', class: "filters-title-container" }, h("span", { key: '38b9ef0e78df7b9d373cbf11988f308aac05aa25', class: "filters-title" }, "Filters")), h("div", { key: '83c0c0baf222e4c9e1fa10414e82754d918548e6', class: "set-filter-wrapper-sidebar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && h("slot", { key: '2b5f82f1cfc8ddeaa451fee5e47a1e15883a63f9', name: "sidebar-filter" })))), this.filterOrientation !== 'none' && this.filterOrientation !== 'sidebar' && (h("div", { key: 'c0357801bb213e056f9f286224e24b741964e926', class: "set-filter-wrapper-topbar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && h("slot", { key: '32b9c54a631062e3adaf5b0652b62de766f7b7fe', name: "topbar-filter" }))), h("div", { key: '108b83b06dfa9eabb53080422da6bb47631b3d21', class: "table-pagination-wrapper" }, this.filterOrientation !== 'none' && this.filterOrientation !== 'topbar' && this.showSidebarFilters && (h("div", { key: '1f81e356264ef25682bdf90506d3ea4218924952', class: "filter-chips" }, Object.keys(this.currentFilters).map(name => {
             const filter = this.currentFilters[name];
             const filterValues = filter.filterValues;
             const isMultiSelect = filter.type !== 'text';
-            return filterValues.length > 0 ? (h("ifx-chip", { placeholder: name, size: "large", variant: isMultiSelect ? "multi" : "single", readOnly: true, value: filterValues, key: name }, filterValues.map(filterValue => (h("ifx-chip-item", { value: filterValue, selected: true, key: filterValue }, filterValue))))) : null;
-        }))), h("div", { key: '14317c57593e26c7927f63ef8cf7bb1635f17d67', class: "headline-wrapper" }, this.filterOrientation !== 'none' && this.headline && (h("div", { key: '12e2ea5bc9a778955ce022ae807f6fda80dde0a0', class: "matching-results-container" }, h("span", { key: '99ecd580bff93a4f7f6711812b87d53b619d6b98', class: "matching-results-count" }, "(", this.matchingResultsCount, ")"), h("span", { key: '4a50a8783286c8320a2e4681df89c45d7e01a3ea', class: "matching-results-text" }, this.headline))), h("div", { key: '3a65a98fc3bcc23d1d963c2fdcd400334b86213b', class: "inner-buttons-wrapper" }, h("slot", { key: '4506a99c0eb657463aadaee87b6a454778a18671', name: 'inner-button' }))), h("div", { key: '1af7bca241e3f9b349fb1a8e3029598799a05335', id: "table-wrapper", class: this.getTableClassNames() }, h("div", { key: '0be595dd5bd835c089c5b09fd4d98612e7bc4043', id: `ifxTable-${this.uniqueKey}`, class: `ifx-ag-grid ${this.variant === 'zebra' ? 'zebra' : ""}`, style: style, ref: (el) => this.container = el })), h("div", { key: 'f955cecdda7e95f66a7e0dc45d639c56e3b1cdce', class: "pagination-wrapper" }, this.pagination ? h("ifx-pagination", { total: this.serverSidePagination ? this.matchingResultsCount : this.allRowData.length, "current-page": this.currentPage, "items-per-page": this.internalItemsPerPage }) : null))))));
+            return filterValues.length > 0 ? (h("ifx-chip", { placeholder: name, size: "large", variant: isMultiSelect ? 'multi' : 'single', readOnly: true, value: filterValues, key: name }, filterValues.map(filterValue => (h("ifx-chip-item", { value: filterValue, selected: true, key: filterValue }, filterValue))))) : null;
+        }))), h("div", { key: 'db3c92441413cf078fb2f7e3c164bcb6decc007e', class: "headline-wrapper" }, this.filterOrientation !== 'none' && this.headline && (h("div", { key: '22b7297f3e04fe372078ee7f8f7b734b91a8d867', class: "matching-results-container" }, h("span", { key: '303551b7a0e3fe629cca298e5769cbb0757e58f5', class: "matching-results-count" }, "(", this.matchingResultsCount, ")"), h("span", { key: '3fde248cc0c6e94b7ffe0cdab8e8129894c6145f', class: "matching-results-text" }, this.headline))), h("div", { key: '44ddfb0a8164ea5af8e7b1e1ae752337b75f5c04', class: "inner-buttons-wrapper" }, h("slot", { key: '4f94415ce3120732af9bff89d2987685bb1bfb24', name: "inner-button" }))), h("div", { key: 'baef68e56cc37873f2f8e6b6c9087d02c69e4e21', id: "table-wrapper", class: this.getTableClassNames() }, h("div", { key: 'f14aa21f5885a30044b631fd23de7ed0bc9282ca', id: `ifxTable-${this.uniqueKey}`, class: `ifx-ag-grid ${this.variant === 'zebra' ? 'zebra' : ''}`, style: style, ref: el => (this.container = el) })), h("div", { key: 'dbc3f04ad00e4f18918a9e4f19bf51706bba4b5f', class: "pagination-wrapper" }, this.pagination ? (h("ifx-pagination", { total: this.serverSidePagination ? this.matchingResultsCount : this.allRowData.length, "current-page": this.currentPage, "items-per-page": this.internalItemsPerPage })) : null))))));
     }
     hasButtonCol() {
         return this.getColData().some(column => column.field === 'button');
@@ -621,7 +801,7 @@ export class Table {
                 "attribute": "button-renderer-options",
                 "mutable": false,
                 "complexType": {
-                    "original": "{ onButtonClick?: (params: any, event: Event) => void;}",
+                    "original": "{ onButtonClick?: (params: any, event: Event) => void }",
                     "resolved": "{ onButtonClick?: (params: any, event: Event) => void; }",
                     "references": {
                         "Event": {
@@ -644,7 +824,7 @@ export class Table {
                 "attribute": "icon-button-renderer-options",
                 "mutable": false,
                 "complexType": {
-                    "original": "{ onIconButtonClick?: (params: any, event: Event) => void;}",
+                    "original": "{ onIconButtonClick?: (params: any, event: Event) => void }",
                     "resolved": "{ onIconButtonClick?: (params: any, event: Event) => void; }",
                     "references": {
                         "Event": {
@@ -662,6 +842,29 @@ export class Table {
                 "getter": false,
                 "setter": false
             },
+            "checkboxRendererOptions": {
+                "type": "unknown",
+                "attribute": "checkbox-renderer-options",
+                "mutable": false,
+                "complexType": {
+                    "original": "{ onCheckboxClick?: (params: any, event: Event) => void }",
+                    "resolved": "{ onCheckboxClick?: (params: any, event: Event) => void; }",
+                    "references": {
+                        "Event": {
+                            "location": "global",
+                            "id": "global::Event"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
             "rowHeight": {
                 "type": "string",
                 "attribute": "row-height",
@@ -779,7 +982,7 @@ export class Table {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "defaultValue": "\"\""
+                "defaultValue": "''"
             },
             "variant": {
                 "type": "string",
@@ -826,7 +1029,7 @@ export class Table {
                 "attribute": "server-page-change-handler",
                 "mutable": false,
                 "complexType": {
-                    "original": "(params: { page: number, pageSize: number }) => Promise<{ rows: any[], total: number }>",
+                    "original": "(params: { page: number; pageSize: number }) => Promise<{ rows: any[]; total: number }>",
                     "resolved": "(params: { page: number; pageSize: number; }) => Promise<{ rows: any[]; total: number; }>",
                     "references": {
                         "Promise": {
@@ -844,6 +1047,26 @@ export class Table {
                 "getter": false,
                 "setter": false
             },
+            "enableSelection": {
+                "type": "boolean",
+                "attribute": "enable-selection",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "showLoading": {
                 "type": "boolean",
                 "attribute": "show-loading",
@@ -876,7 +1099,9 @@ export class Table {
             "uniqueKey": {},
             "paginationPageSize": {},
             "showSidebarFilters": {},
-            "matchingResultsCount": {}
+            "matchingResultsCount": {},
+            "selectedRows": {},
+            "selectAll": {}
         };
     }
     static get methods() {
@@ -914,6 +1139,9 @@ export class Table {
             }, {
                 "propName": "iconButtonRendererOptions",
                 "methodName": "onIconButtonRendererOptionsChanged"
+            }, {
+                "propName": "checkboxRendererOptions",
+                "methodName": "onCheckboxRendererOptionsChanged"
             }];
     }
     static get listeners() {