globuswebcomponents 2.9.2 → 2.10.1

package/dist/collection/components/gb-table/gb-table.js

@@ -5,7 +5,7 @@ export class GbTable {
         this.loading = false;
         this.columns = [
             { key: 'id', label: '#', width: '70px', sortable: true, sortType: 'string', mobile: { position: 'top_left' } },
-            { key: 'date', label: 'Date', mobile: { position: 'bottom_left' } },
+            { key: 'date', label: 'Date', value: row => row.date.toLocaleString(), mobile: { position: 'bottom_left' } },
             { key: 'name', label: 'Name', sortable: true, sortType: 'string', helpIcon: true, supportingText: row => row.role, mobile: { position: 'top_right' } },
             { key: 'role', label: 'Role' },
             { key: 'amount', label: 'Amount', align: 'right', sortable: true, sortType: 'number' },
@@ -17,7 +17,7 @@ export class GbTable {
                 cellSlots: {
                     default: {
                         tag: 'p',
-                        content: row => row.status, // Get status value from row
+                        content: row => row.status,
                     },
                 },
             },
@@ -33,7 +33,11 @@ export class GbTable {
             //   amount: '$120.00',
             //   status: 'Completed',
             // },
-            { id: '#3002', date: 'Jan 2, 2022', name: 'Liam Smith', role: 'Backend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },
+            // { id: '#3002', date: new Date(), name: 'Liam Smith', role: 'Backend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },
+            // { id: '#3003', date: new Date(), name: 'Liam Smith', role: 'Frontend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },
+            // { id: '#3004', date: new Date(), name: 'Liam Smith', role: 'Backend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },
+            // { id: '#3005', date: new Date(), name: 'Liam Smith', role: 'Backend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },
+            // { id: '#3006', date: new Date(), name: 'Liam Smith', role: 'Backend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },
             { id: '#3003', date: 'Jan 3, 2022', name: 'Olivia Brown', role: 'UI Designer', level: 'Today', customer: 'Michael Lee', amount: '$230.75', status: 'Cancelled' },
             { id: '#3004', date: 'Jan 4, 2022', name: 'Noah Davis', role: 'DevOps Engineer', level: 'Today', customer: 'Emily Clark', amount: '$59.99', status: 'Completed' },
             { id: '#3005', date: 'Jan 5, 2022', name: 'Ava Martinez', role: 'Product Manager', level: 'Today', customer: 'Daniel Harris', amount: '$410.00', status: 'Pending' },
@@ -165,11 +169,12 @@ export class GbTable {
             { label: 'Edit', action: 'edit', icon: 'assets/pencil-edit-01.svg', disabled: false },
             { label: 'Delete', action: 'delete', icon: 'assets/delete-02.svg', disabled: true },
         ];
-        this.stickyFirstColumn = true;
-        this.stickyLastColumn = true;
+        this.stickyFirstColumn = false;
+        this.stickyLastColumn = false;
         this.actionsType = 'none';
-        this.showCheckbox = true;
+        this.showCheckbox = false;
         this.tableHeadColor = 'gray';
+        this.rowKey = 'id';
         this.internalCurrentPage = 1;
         this.internalPageSize = 10;
         this.openRowIndex = null;
@@ -183,6 +188,7 @@ export class GbTable {
         this.showFilterModal = false;
         this.modalPosition = { x: 0, y: 0 };
         this.showFilterModalInternal = false;
+        this.isFilterModalVisible = false;
         this.internalLoading = false;
         this.isDraggingModal = false;
         this.dragOffset = { x: 0, y: 0 };
@@ -233,7 +239,7 @@ export class GbTable {
         requestAnimationFrame(() => this.checkScrollability());
     }
     checkViewport() {
-        this.isMobile = window.innerWidth <= 768;
+        this.isMobile = window.innerWidth <= 900;
         this.checkScrollability();
     }
     checkScrollability() {
@@ -246,7 +252,7 @@ export class GbTable {
         }
     }
     handleAction(action, row) {
-        this.rowActionClick.emit({ action, row });
+        this.rowActionClicked.emit({ action, row });
     }
     renderCell(col, row) {
         var _a, _b, _c;
@@ -279,6 +285,13 @@ export class GbTable {
             const supporting = typeof col.supportingText === 'function' ? col.supportingText(row) : col.supportingText ? row[col.supportingText] : undefined;
             return (h("div", { class: "text_and_supporting_text" }, h("div", { class: "primary" }, h("p", { class: "text-sm-medium" }, primary)), supporting && (h("div", { class: "supporting" }, h("p", { class: "text-xs-regular" }, supporting)))));
         }
+        const value = this.getCellValue(col, row);
+        return h("p", { class: "body_text text-sm-regular" }, value);
+    }
+    getCellValue(col, row) {
+        if (col.value) {
+            return col.value(row);
+        }
         return h("p", { class: "body_text text-sm-regular" }, row[col.key]);
     }
     emitPaginationDetails({ detail }) {
@@ -330,8 +343,8 @@ export class GbTable {
         if (!col)
             return this.data;
         return [...this.data].sort((a, b) => {
-            let valA = a[this.sortKey];
-            let valB = b[this.sortKey];
+            let valA = col.value ? col.value(a) : a[this.sortKey];
+            let valB = col.value ? col.value(b) : b[this.sortKey];
             // Null safety
             if (valA == null)
                 return 1;
@@ -368,28 +381,34 @@ export class GbTable {
     get isIndeterminate() {
         return this.selectedRowIds.size > 0 && this.selectedRowIds.size < this.sortedData.length;
     }
+    getRowId(row) {
+        if (typeof this.rowKey === 'function') {
+            return this.rowKey(row);
+        }
+        return row[this.rowKey];
+    }
     toggleAll() {
         if (this.allSelected) {
             this.selectedRowIds = new Set();
         }
         else {
-            this.selectedRowIds = new Set(this.sortedData.map(row => row.id));
+            this.selectedRowIds = new Set(this.sortedData.map(row => this.getRowId(row)));
         }
         this.emitSelection();
     }
     toggleRow(row) {
         const updated = new Set(this.selectedRowIds);
-        if (updated.has(row.id)) {
-            updated.delete(row.id);
+        if (updated.has(this.getRowId(row))) {
+            updated.delete(this.getRowId(row));
         }
         else {
-            updated.add(row.id);
+            updated.add(this.getRowId(row));
         }
         this.selectedRowIds = updated;
         this.emitSelection();
     }
     emitSelection() {
-        const selected = this.sortedData.filter(row => this.selectedRowIds.has(row.id));
+        const selected = this.sortedData.filter(row => this.selectedRowIds.has(this.getRowId(row)));
         this.selectionChanged.emit(selected);
     }
     get displayedData() {
@@ -397,28 +416,28 @@ export class GbTable {
             return this.sortedData;
         }
         if (this.paginationConfig.paginationMode === 'external') {
-            return this.sortedData; // parent already paginated it
+            return this.sortedData;
         }
         const start = (this.internalCurrentPage - 1) * this.internalPageSize;
         const end = start + this.internalPageSize;
         return this.sortedData.slice(start, end);
     }
     get totalPages() {
+        var _a;
         if (!this.paginationConfig)
             return 1;
-        const pageSize = this.paginationConfig.paginationMode === 'internal' ? this.internalPageSize : this.paginationConfig.pageSize;
-        const totalItems = this.paginationConfig.paginationMode === 'external' ? this.paginationConfig.totalItems : this.sortedData.length;
-        return Math.ceil(totalItems / pageSize);
-    }
-    onDataChange(newValue, _oldValue) {
-        if (!newValue)
-            return;
-        this.data = newValue;
+        const pageSize = this.internalPageSize || 1;
+        if (this.paginationConfig.paginationMode === 'external') {
+            const totalItems = (_a = this.paginationConfig.totalItems) !== null && _a !== void 0 ? _a : 0;
+            return Math.max(1, Math.ceil(totalItems / pageSize));
+        }
+        const totalItems = this.sortedData.length;
+        return Math.max(1, Math.ceil(totalItems / pageSize));
     }
-    onTotalItemsChange(newValue, _oldValue) {
-        if (!newValue || newValue < 1)
-            return;
-        this.paginationConfig.totalItems = Number(newValue);
+    onDataChange() {
+        // if (!newValue) return;
+        // this.data = newValue;
+        this.internalCurrentPage = 1;
     }
     onLoadingChange(newValue, _oldValue) {
         this.internalLoading = newValue;
@@ -426,9 +445,8 @@ export class GbTable {
     renderHeaderIcons(col) {
         return (h(Fragment, null, col.sortable && (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", style: {
                 transform: this.sortKey === col.key && this.sortDirection === 'desc' ? 'rotate(180deg)' : 'rotate(0deg)',
-                opacity: this.sortKey === col.key ? '1' : '0.4',
                 transition: 'transform 0.2s ease',
-            } }, h("path", { d: "M7.99998 13.3332V2.6665M7.99998 13.3332C8.87837 13.3332 11.3333 9.99993 11.3333 9.99993M7.99998 13.3332C7.12158 13.3332 4.66663 9.9999 4.66663 9.9999", stroke: "var(--color-icon, #4B5565)", "stroke-linecap": "round", "stroke-linejoin": "round" }))), col.helpIcon && (h("gb-help-tooltip", { "show-supporting-text": "true" }, h("p", { slot: "label" }, "This is a label"), h("p", { slot: "supporting_text" }, "This is a supporting text")))));
+            } }, h("path", { d: "M7.99998 13.3332V2.6665M7.99998 13.3332C8.87837 13.3332 11.3333 9.99993 11.3333 9.99993M7.99998 13.3332C7.12158 13.3332 4.66663 9.9999 4.66663 9.9999", stroke: this.sortKey === col.key ? 'var(--color-icon, #4B5565)' : 'var(--color-icon-disabled, #808c9e)', "stroke-linecap": "round", "stroke-linejoin": "round" }))), col.helpIcon && (h("gb-help-tooltip", { "show-supporting-text": "true" }, h("p", { slot: "label" }, "This is a label"), h("p", { slot: "supporting_text" }, "This is a supporting text")))));
     }
     renderDesktopView() {
         // compute table min-width to force horizontal scroll when > 5 columns
@@ -465,7 +483,7 @@ export class GbTable {
                 sticky_right: this.stickyLastColumn,
                 has_border: this.isScrollable,
                 [`table_header_${this.tableHeadColor}`]: true,
-            } }, h("div", { class: "empty_div" }))))), h("tbody", null, this.displayedData.map((row, rowIndex) => (h("tr", { class: "table_body" }, this.showCheckbox && (h("td", { class: `table_detail ${this.showCheckbox ? 'checkbox' : ''}` }, h("gb-checkbox", { type: "checkbox", checked: this.selectedRowIds.has(row.id), indeterminate: false, size: "sm", onClick: () => this.toggleRow(row) }))), this.internalColumns
+            } }, h("div", { class: "empty_div" }))))), h("tbody", null, this.displayedData.map((row, rowIndex) => (h("tr", { class: "table_body" }, this.showCheckbox && (h("td", { class: `table_detail ${this.showCheckbox ? 'checkbox' : ''}` }, h("gb-checkbox", { type: "checkbox", checked: this.selectedRowIds.has(this.getRowId(row)), indeterminate: false, size: "sm", onClick: () => this.toggleRow(row) }))), this.internalColumns
             .filter(col => col.visible)
             .map((col, index) => (h(Fragment, null, h("td", { style: { textAlign: col.align || 'left' }, class: `table_detail ${this.stickyFirstColumn && index === 0 ? 'sticky_left' : ''} ${this.isScrollable ? 'has_border' : ''}` }, this.renderCell(col, row))))), this.showActionsColumn && (h("td", { class: { table_detail: true, actions_cell: true, sticky_right: this.stickyLastColumn, has_border: this.isScrollable }, style: { width: '50px' } }, h(Fragment, null, h("div", { class: "action_buttons" }, this.rowActions.map(action => (h(Fragment, null, action.type === 'dropdown' ? (h("gb-button", { id: `gb-table-trigger-${rowIndex}`, ref: el => (this.actionButtonRefs[rowIndex] = el), class: "dropdown_button", hierarchy: "tertiary_gray", size: "md", icon: "only", iconLeading: true, iconLeadingSwap: "assets/more-horizontal.svg", onClick: () => this.toggleDropdown(rowIndex) })) : (h("gb-button", { hierarchy: "tertiary_gray", size: "md", icon: "only", destructive: action.destructive, iconLeading: true, iconLeadingSwap: action.icon, onClick: () => this.handleAction(action.action, row) })))))), h(Fragment, null, this.openRowIndex === rowIndex && (h("gb-portal", { "anchor-id": `gb-table-trigger-${rowIndex}`, placement: this.dropdownPlacement, anchorEl: this.currentAnchorEl, boundaryEl: this.scrollContainer, dropdownHeight: requestAnimationFrame(() => this.dropdownRef.scrollHeight), open: true }, h("div", { class: "portal_dropdown_wrapper", ref: el => (this.dropdownRef = el) }, this.dropdownOptions.map(action => (h("gb-dropdown-items-with-shortcut", { icon: action.icon ? true : false, state: action.disabled ? StateEnum.Disabled : StateEnum.Default, label: action.label, "icon-src": action.icon, onClick: () => {
                 this.handleAction(action.action, row);
@@ -489,7 +507,7 @@ export class GbTable {
             const topRight = this.internalColumns.find(c => { var _a; return ((_a = c.mobile) === null || _a === void 0 ? void 0 : _a.position) === 'top_right'; });
             const bottomLeft = this.internalColumns.find(c => { var _a; return ((_a = c.mobile) === null || _a === void 0 ? void 0 : _a.position) === 'bottom_left'; });
             const bottomRight = this.internalColumns.find(c => { var _a; return ((_a = c.mobile) === null || _a === void 0 ? void 0 : _a.position) === 'bottom_right'; });
-            return (h("div", { class: "mobile_card_wrapper", style: { paddingLeft: this.showCheckbox ? 'var(--spacing-4)' : '' } }, this.showCheckbox && (h("gb-checkbox", { style: { paddingTop: 'var(--spacing-6)' }, type: "checkbox", checked: this.selectedRowIds.has(row.id), indeterminate: false, size: "sm", onClick: () => this.toggleRow(row) })), h("div", { class: "mobile-card", onClick: () => this.emitRowData(row) }, h("div", { class: "mobile-row left" }, h("div", { class: "mobile-cell" }, h("p", { class: "top_left_text text-md-regular" }, topLeft && row[topLeft.key])), h("div", { class: "mobile-cell" }, h("p", { class: "bottom_left_text text-sm-regular" }, bottomLeft && row[bottomLeft.key]))), h("div", { class: "mobile-row right" }, h("div", { class: "mobile-cell right" }, h("p", { class: "top_right_text text-md-semi-bold" }, topRight && row[topRight.key])), h("div", { class: "mobile-cell right" }, bottomRight && this.renderCell(bottomRight, row))))));
+            return (h("div", { class: "mobile_card_wrapper", style: { paddingLeft: this.showCheckbox ? 'var(--spacing-4)' : '' } }, this.showCheckbox && (h("gb-checkbox", { style: { paddingTop: 'var(--spacing-6)' }, type: "checkbox", checked: this.selectedRowIds.has(this.getRowId(row)), indeterminate: false, size: "sm", onClick: () => this.toggleRow(row) })), h("div", { class: "mobile-card", onClick: () => this.emitRowData(row) }, h("div", { class: "mobile-row left" }, h("div", { class: "mobile-cell" }, h("p", { class: "top_left_text text-md-regular" }, topLeft && row[topLeft.key])), h("div", { class: "mobile-cell" }, h("p", { class: "bottom_left_text text-sm-regular" }, bottomLeft && row[bottomLeft.key]))), h("div", { class: "mobile-row right" }, h("div", { class: "mobile-cell right" }, h("p", { class: "top_right_text text-md-semi-bold" }, topRight && row[topRight.key])), h("div", { class: "mobile-cell right" }, bottomRight && this.renderCell(bottomRight, row))))));
         })));
     }
     emitSearchValue(detail) {
@@ -524,31 +542,38 @@ export class GbTable {
     }
     openFilterModal() {
         this.showFilterModalInternal = true;
+        requestAnimationFrame(() => {
+            this.isFilterModalVisible = true;
+        });
     }
     closeFilterModal() {
-        const modal = document.querySelector('gb-filter-modal');
-        if (modal) {
-            modal.style.transform = 'translateX(100%)';
-            setTimeout(() => (this.showFilterModalInternal = false), 300); // wait for animation
-        }
+        this.isFilterModalVisible = false;
+        setTimeout(() => {
+            this.showFilterModalInternal = false;
+        }, 300); // match CSS duration
+    }
+    onApplyFilters(detail) {
+        console.log(detail.detail);
+        this.applyFilters.emit(detail.detail);
+        this.showFilterModalInternal = false;
     }
     disconnectedCallback() {
         window.removeEventListener('resize', this.checkViewport);
     }
     render() {
-        return (h("div", { key: '8c704032c0e5de1ad131b12add51394fd4350614', class: `table_wrapper` }, h("gb-table-header", { key: '41b07ae46a5a83310a62b7304108aaa5e2d40bc2', mode: this.tableHeaderConfig.datePickerMode, "table-heading": this.tableHeaderConfig.tableHeading, "table-heading-label": this.tableHeaderConfig.tableHeadingLabel, "show-search": this.tableHeaderConfig.showSearch, "show-date-filter": this.tableHeaderConfig.showDateFilter, "show-filter": this.tableHeaderConfig.showFilter, "show-export": this.tableHeaderConfig.showExport, "show-column-options": this.tableHeaderConfig.showColumnOptions, "show-refresh-button": this.tableHeaderConfig.showRefreshButton, "input-placeholder": this.tableHeaderConfig.inputPlaceholder, "date-picker-placeholder": this.tableHeaderConfig.datePickerPlaceholder, "show-entire-data": this.tableHeaderConfig.showEntireData, "show-layout-toggle": this.tableHeaderConfig.showLayoutToggle, "filter-state": this.tableHeaderConfig.filterState, "filter-count": this.tableHeaderConfig.filterCount, "export-button-state": this.tableHeaderConfig.exportButtonState, "pdf-state": this.tableHeaderConfig.pdfState, "csv-state": this.tableHeaderConfig.csvState, onInputValueChanged: this.emitSearchValue.bind(this), onDateChange: this.emitDateChange.bind(this), onColumnOptionsButtonClicked: this.columnOptionsButtonClicked(), onExportClicked: e => this.exportButtonClicked(e), onFilterButtonClicked: () => this.openFilterModal() }), this.showColumnsPanel && (h("div", { key: '8cb944829c852befab49270aa6fdc2040cfc601f', class: "dialog", style: {
+        return (h("div", { key: '8bf218dd383ce4c55691dc04d254e6636d6ff0ff', class: `table_wrapper` }, h("gb-table-header", { key: '0a863522b02e72a3fb7e5679077e652e8884e9e7', mode: this.tableHeaderConfig.datePickerMode, "table-heading": this.tableHeaderConfig.tableHeading, "table-heading-label": this.tableHeaderConfig.tableHeadingLabel, "show-search": this.tableHeaderConfig.showSearch, "show-date-filter": this.tableHeaderConfig.showDateFilter, "show-filter": this.tableHeaderConfig.showFilter, "show-export": this.tableHeaderConfig.showExport, "show-column-options": this.tableHeaderConfig.showColumnOptions, "show-refresh-button": this.tableHeaderConfig.showRefreshButton, "input-placeholder": this.tableHeaderConfig.inputPlaceholder, "date-picker-placeholder": this.tableHeaderConfig.datePickerPlaceholder, "show-entire-data": this.tableHeaderConfig.showEntireData, "show-layout-toggle": this.tableHeaderConfig.showLayoutToggle, "filter-state": this.tableHeaderConfig.filterState, "filter-count": this.tableHeaderConfig.filterCount, "export-button-state": this.tableHeaderConfig.exportButtonState, "pdf-state": this.tableHeaderConfig.pdfState, "csv-state": this.tableHeaderConfig.csvState, onInputValueChanged: this.emitSearchValue.bind(this), onDateChange: this.emitDateChange.bind(this), onColumnOptionsButtonClicked: this.columnOptionsButtonClicked(), onExportClicked: e => this.exportButtonClicked(e), onFilterButtonClicked: () => this.openFilterModal() }), this.showColumnsPanel && (h("div", { key: 'df924de56e4a460fe547761feac86a7bbb201685', class: "dialog", style: {
                 transform: `translate(${this.modalPosition.x}px, ${this.modalPosition.y}px)`,
-            } }, h("div", { key: '20dd4d06becfc9be8f528d3d271c1e41f65157f9', class: "column-modal" }, h("div", { key: '170da4efe28286fca14d0a3207b5a342f5192e7c', class: "modal_header" }, h("div", { key: '49e3ed7773f1781febca2b5a4788161524cca34b', class: "modal_header_content", onPointerDown: this.onModalPointerDown }, h("h4", { key: '0d28d66140b1678d26faf204ffc873d5bccceea9', class: "heading display-xs-semi-bold" }, "Column Options"), h("gb-button-close", { key: '743960423de46576559642d2524763d233f87be8', class: "close_button", color: "gray", size: "sm", onClick: () => (this.showColumnsPanel = false) }))), h("div", { key: '8ea98b473ac98eed5adb0bbdf1228af3b0c5e885', class: "content_wrapper" }, h("div", { key: 'cc17f4838c7d3653efc3764dbed5572c2f35b44c', class: "modal_content" }, this.internalColumns.map((col, index) => (h("div", { class: "column_option", draggable: true, onDragStart: () => (this.draggedIndex = index), onDragOver: e => e.preventDefault(), onDrop: () => {
+            } }, h("div", { key: 'bb235311181d9fa10c220a9ad5d167f7b2d6b7ba', class: "column-modal" }, h("div", { key: '6737e80a35ce7715725c8db11d8dcf5b6de02abd', class: "modal_header" }, h("div", { key: 'fa7b2231bc818067836c432dc476d68d3a2c3c38', class: "modal_header_content", onPointerDown: this.onModalPointerDown }, h("h4", { key: 'fc61b141f020f4f011ccd10595cf086bebee0961', class: "heading display-xs-semi-bold" }, "Column Options"), h("gb-button-close", { key: '9f5c1e85d466c1cfc09f0318aaadf69cd9494522', class: "close_button", color: "gray", size: "sm", onClick: () => (this.showColumnsPanel = false) }))), h("div", { key: '810d309d91ae854d4e56e7ca83377df317e635cb', class: "content_wrapper" }, h("div", { key: 'a02769c1a276f534371a0340f602fa9e48e6c0be', class: "modal_content" }, this.internalColumns.map((col, index) => (h("div", { class: "column_option", draggable: true, onDragStart: () => (this.draggedIndex = index), onDragOver: e => e.preventDefault(), onDrop: () => {
                 if (this.draggedIndex !== null && this.draggedIndex !== index) {
                     this.reorderColumns(this.draggedIndex, index);
                 }
                 this.draggedIndex = null;
             } }, h("div", { class: "label_and_dragger" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { d: "M8 6H8.00635M8 12H8.00635M8 18H8.00635M15.9937 6H16M15.9937 12H16M15.9937 18H16", stroke: "var(--color-icon, #4B5565)", "stroke-width": "2.5", "stroke-linecap": "round", "stroke-linejoin": "round" })), h("p", { class: "label text-md-regular" }, col.label)), h("gb-toggle", { size: "sm", state: StateEnum.Default, position: "right", pressed: col.visible, text: false, onToggleClicked: e => {
                 this.toggleColumn(e, col.key);
-            } })))), h("div", { key: 'ea602fa726402490c21e8dfe6a3b2f2dc9896a0b', class: "modal-actions" })))))), this.showFilterModalInternal && (h("div", { key: '3c5ebf388d41545f5c395d160caea608cf218441', class: "filter_modal_overlay" }, h("gb-filter-modal", { key: '42313e94129268a5cb1b7c0338b443fba3e9b2be', class: "filter_modal", onClose: e => {
+            } })))), h("div", { key: 'fdc109263cb77b272114672fa9f6a4a9999cbf66', class: "modal-actions" })))))), this.showFilterModalInternal && (h("div", { key: 'aec360cebfdab526ae3efd0818ab4fc56910311d', class: `filter_modal_wrapper ${this.isFilterModalVisible ? 'open' : 'closing'}` }, h("gb-filter-modal", { key: 'b465d2cbfd2e98a827226ee9c0ced68b176507cc', class: "filter_modal", filterConfig: this.filterConfig, onClose: e => {
                 e.stopPropagation();
                 this.closeFilterModal();
-            } }))), this.internalLoading ? (
+            }, onApplyFilters: e => this.onApplyFilters(e) }))), this.internalLoading ? (
         // ✅ ALWAYS show loading when loading = true
         h("table", null, h("thead", null, h("tr", { class: "table_head_row" }, this.showCheckbox && (h("th", { class: {
                 checkbox: true,
@@ -573,7 +598,7 @@ export class GbTable {
                 sticky_right: this.stickyLastColumn,
                 has_border: this.isScrollable,
                 [`table_header_${this.tableHeadColor}`]: true,
-            } }, h("div", { class: "empty_div" }))))), h("tbody", null, Array.from({ length: 5 }).map((_) => (h("tr", { class: "table_body" }, this.showCheckbox && (h("td", { class: "table_detail checkbox" }, h("gb-checkbox", { type: "checkbox", checked: this.allSelected, indeterminate: this.isIndeterminate, size: "sm", onClick: () => this.toggleAll() }))), this.internalColumns
+            } }, h("div", { class: "empty_div" }))))), h("tbody", null, Array.from({ length: 5 }).map(_ => (h("tr", { class: "table_body" }, this.showCheckbox && (h("td", { class: "table_detail checkbox" }, h("gb-checkbox", { type: "checkbox", checked: this.allSelected, indeterminate: this.isIndeterminate, size: "sm", onClick: () => this.toggleAll() }))), this.internalColumns
             .filter(col => col.visible)
             .map((_col, index) => (h("td", { class: `table_detail ${this.stickyFirstColumn && index === 0 ? 'sticky_left' : ''} ${this.isScrollable ? 'has_border' : ''}` }, h("div", { class: "loader" }, h("div", { class: "skeleton skeleton-text" }))))), this.showActionsColumn && (h("td", { class: {
                 table_detail: true,
@@ -584,7 +609,7 @@ export class GbTable {
         // ✅ No loading + no data = empty state
         h("div", { class: "empty_state_wrapper" }, h("gb-empty-state", { size: "sm", "main-text": this.emptyStateConfig.mainText, "supporting-text": this.emptyStateConfig.supportingText, color: this.emptyStateConfig.color, theme: this.emptyStateConfig.theme, "primary-button-icon-leading-swap": "assets/plus.svg", "illustration-icon": this.emptyStateConfig.illustrationIcon, background: true, "background-type": "grid", icon: "illustration", "illustration-style": "cloud" }))) : (
         // ✅ Has data + not loading
-        h(Fragment, null, this.isMobile ? this.renderMobileView() : this.renderDesktopView())), this.paginationConfig && this.data.length > 0 && (h("gb-pagination", { key: 'fc7e644c9ae7d77e88b7458d93a87db6aa47056f', "entries-dropdown-menu-position": this.paginationConfig.entriesDropdownMenuPosition, "page-size": this.paginationConfig.pageSize, "current-page": this.paginationConfig.paginationMode === 'internal' ? this.internalCurrentPage : this.paginationConfig.currentPage, "total-pages": this.totalPages, onPageItemSelected: this.handlePageChange.bind(this) }))));
+        h(Fragment, null, this.isMobile ? this.renderMobileView() : this.renderDesktopView())), this.paginationConfig && this.data.length > 0 && (h("gb-pagination", { key: 'a1ff95791946be630b863dbfc6745ad68a2034ed', "entries-dropdown-menu-position": this.paginationConfig.entriesDropdownMenuPosition, "page-size": this.paginationConfig.pageSize, "current-page": this.paginationConfig.paginationMode === 'internal' ? this.internalCurrentPage : this.paginationConfig.currentPage, "total-pages": this.totalPages, onPageItemSelected: this.handlePageChange.bind(this) }))));
     }
     static get is() { return "gb-table"; }
     static get encapsulation() { return "shadow"; }
@@ -642,7 +667,7 @@ export class GbTable {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "[\r\n    { key: 'id', label: '#', width: '70px', sortable: true, sortType: 'string', mobile: { position: 'top_left' } },\r\n    { key: 'date', label: 'Date', mobile: { position: 'bottom_left' } },\r\n    { key: 'name', label: 'Name', sortable: true, sortType: 'string', helpIcon: true, supportingText: row => row.role, mobile: { position: 'top_right' } },\r\n    { key: 'role', label: 'Role' },\r\n    { key: 'amount', label: 'Amount', align: 'right', sortable: true, sortType: 'number' },\r\n    {\r\n      key: 'status',\r\n      label: 'Status',\r\n      cellComponent: 'gb-badge',\r\n      cellProps: row => ({ color: row.status === 'Completed' ? 'success' : 'error', type: 'badge_modern', size: 'sm', icon: 'dot' }),\r\n      cellSlots: {\r\n        default: {\r\n          tag: 'p',\r\n          content: row => row.status, // Get status value from row\r\n        },\r\n      },\r\n    },\r\n  ]"
+                "defaultValue": "[\r\n    { key: 'id', label: '#', width: '70px', sortable: true, sortType: 'string', mobile: { position: 'top_left' } },\r\n    { key: 'date', label: 'Date', value: row => row.date.toLocaleString(), mobile: { position: 'bottom_left' } },\r\n    { key: 'name', label: 'Name', sortable: true, sortType: 'string', helpIcon: true, supportingText: row => row.role, mobile: { position: 'top_right' } },\r\n    { key: 'role', label: 'Role' },\r\n    { key: 'amount', label: 'Amount', align: 'right', sortable: true, sortType: 'number' },\r\n    {\r\n      key: 'status',\r\n      label: 'Status',\r\n      cellComponent: 'gb-badge',\r\n      cellProps: row => ({ color: row.status === 'Completed' ? 'success' : 'error', type: 'badge_modern', size: 'sm', icon: 'dot' }),\r\n      cellSlots: {\r\n        default: {\r\n          tag: 'p',\r\n          content: row => row.status,\r\n        },\r\n      },\r\n    },\r\n  ]"
             },
             "data": {
                 "type": "unknown",
@@ -660,7 +685,7 @@ export class GbTable {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "[\r\n    // {\r\n    //   id: '#30011111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111',\r\n    //   date: 'Jan 1, 2022',\r\n    //   name: 'Emma Johnson',\r\n    //   role: 'Frontend Developer',\r\n    //   level: 'Today',\r\n    //   customer: 'John Doe',\r\n    //   amount: '$120.00',\r\n    //   status: 'Completed',\r\n    // },\r\n    { id: '#3002', date: 'Jan 2, 2022', name: 'Liam Smith', role: 'Backend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },\r\n    { id: '#3003', date: 'Jan 3, 2022', name: 'Olivia Brown', role: 'UI Designer', level: 'Today', customer: 'Michael Lee', amount: '$230.75', status: 'Cancelled' },\r\n    { id: '#3004', date: 'Jan 4, 2022', name: 'Noah Davis', role: 'DevOps Engineer', level: 'Today', customer: 'Emily Clark', amount: '$59.99', status: 'Completed' },\r\n    { id: '#3005', date: 'Jan 5, 2022', name: 'Ava Martinez', role: 'Product Manager', level: 'Today', customer: 'Daniel Harris', amount: '$410.00', status: 'Pending' },\r\n    { id: '#3006', date: 'Jan 6, 2022', name: 'William Garcia', role: 'QA Engineer', level: 'Today', customer: 'Sophia Lewis', amount: '$150.20', status: 'Completed' },\r\n    { id: '#3007', date: 'Jan 7, 2022', name: 'Isabella Rodriguez', role: 'Business Analyst', level: 'Today', customer: 'James Walker', amount: '$78.40', status: 'Pending' },\r\n    { id: '#3008', date: 'Jan 8, 2022', name: 'James Wilson', role: 'Fullstack Developer', level: 'Today', customer: 'Mia Hall', amount: '$300.00', status: 'Completed' },\r\n    { id: '#3009', date: 'Jan 9, 2022', name: 'Sophia Anderson', role: 'UX Researcher', level: 'Today', customer: 'Benjamin Allen', amount: '$95.60', status: 'Cancelled' },\r\n    { id: '#3010', date: 'Jan 10, 2022', name: 'Benjamin Thomas', role: 'Mobile Developer', level: 'Today', customer: 'Charlotte Young', amount: '$210.10', status: 'Completed' },\r\n    { id: '#3011', date: 'Jan 11, 2022', name: 'Mia Taylor', role: 'Data Analyst', level: 'Today', customer: 'Lucas King', amount: '$180.00', status: 'Pending' },\r\n    { id: '#3012', date: 'Jan 12, 2022', name: 'Lucas Moore', role: 'Cloud Engineer', level: 'Today', customer: 'Amelia Scott', amount: '$420.75', status: 'Completed' },\r\n    { id: '#3013', date: 'Jan 13, 2022', name: 'Charlotte Jackson', role: 'Security Engineer', level: 'Today', customer: 'Elijah Green', amount: '$65.90', status: 'Cancelled' },\r\n    { id: '#3014', date: 'Jan 14, 2022', name: 'Elijah Martin', role: 'Technical Lead', level: 'Today', customer: 'Harper Adams', amount: '$510.30', status: 'Completed' },\r\n    { id: '#3015', date: 'Jan 15, 2022', name: 'Amelia Lee', role: 'Scrum Master', level: 'Today', customer: 'Alexander Baker', amount: '$99.99', status: 'Pending' },\r\n    { id: '#3016', date: 'Jan 16, 2022', name: 'Harper Perez', role: 'Frontend Developer', level: 'Today', customer: 'Ella Nelson', amount: '$275.45', status: 'Completed' },\r\n    { id: '#3017', date: 'Jan 17, 2022', name: 'Alexander White', role: 'Backend Developer', level: 'Today', customer: 'Matthew Carter', amount: '$340.00', status: 'Pending' },\r\n    { id: '#3018', date: 'Jan 18, 2022', name: 'Ella Harris', role: 'UI Designer', level: 'Today', customer: 'Avery Mitchell', amount: '$88.80', status: 'Completed' },\r\n    { id: '#3019', date: 'Jan 19, 2022', name: 'Matthew Clark', role: 'DevOps Engineer', level: 'Today', customer: 'Evelyn Perez', amount: '$190.25', status: 'Cancelled' },\r\n    { id: '#3020', date: 'Jan 20, 2022', name: 'Avery Lewis', role: 'Product Manager', level: 'Today', customer: 'Henry Roberts', amount: '$600.00', status: 'Completed' },\r\n    { id: '#3021', date: 'Jan 21, 2022', name: 'Evelyn Walker', role: 'QA Engineer', level: 'Today', customer: 'Luna Turner', amount: '$72.30', status: 'Pending' },\r\n    { id: '#3022', date: 'Jan 22, 2022', name: 'Henry Hall', role: 'Business Analyst', level: 'Today', customer: 'Jack Phillips', amount: '$310.40', status: 'Completed' },\r\n    { id: '#3023', date: 'Jan 23, 2022', name: 'Luna Allen', role: 'Fullstack Developer', level: 'Today', customer: 'Sofia Campbell', amount: '$145.00', status: 'Cancelled' },\r\n    { id: '#3024', date: 'Jan 24, 2022', name: 'Jack Young', role: 'UX Researcher', level: 'Today', customer: 'David Parker', amount: '$260.70', status: 'Completed' },\r\n    { id: '#3025', date: 'Jan 25, 2022', name: 'Sofia Hernandez', role: 'Mobile Developer', level: 'Today', customer: 'Grace Evans', amount: '$89.10', status: 'Pending' },\r\n    { id: '#3026', date: 'Jan 26, 2022', name: 'David King', role: 'Data Analyst', level: 'Today', customer: 'Samuel Edwards', amount: '$410.90', status: 'Completed' },\r\n    { id: '#3027', date: 'Jan 27, 2022', name: 'Grace Wright', role: 'Cloud Engineer', level: 'Today', customer: 'Chloe Collins', amount: '$130.55', status: 'Cancelled' },\r\n    { id: '#3028', date: 'Jan 28, 2022', name: 'Samuel Scott', role: 'Security Engineer', level: 'Today', customer: 'Victoria Stewart', amount: '$555.00', status: 'Completed' },\r\n    { id: '#3029', date: 'Jan 29, 2022', name: 'Chloe Green', role: 'Technical Lead', level: 'Today', customer: 'Nathan Morris', amount: '$205.25', status: 'Pending' },\r\n    { id: '#3030', date: 'Jan 30, 2022', name: 'Nathan Adams', role: 'Scrum Master', level: 'Today', customer: 'Zoe Rogers', amount: '$320.80', status: 'Completed' },\r\n  ]"
+                "defaultValue": "[\r\n    // {\r\n    //   id: '#30011111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111',\r\n    //   date: 'Jan 1, 2022',\r\n    //   name: 'Emma Johnson',\r\n    //   role: 'Frontend Developer',\r\n    //   level: 'Today',\r\n    //   customer: 'John Doe',\r\n    //   amount: '$120.00',\r\n    //   status: 'Completed',\r\n    // },\r\n    // { id: '#3002', date: new Date(), name: 'Liam Smith', role: 'Backend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },\r\n    // { id: '#3003', date: new Date(), name: 'Liam Smith', role: 'Frontend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },\r\n    // { id: '#3004', date: new Date(), name: 'Liam Smith', role: 'Backend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },\r\n    // { id: '#3005', date: new Date(), name: 'Liam Smith', role: 'Backend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },\r\n    // { id: '#3006', date: new Date(), name: 'Liam Smith', role: 'Backend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },\r\n    { id: '#3003', date: 'Jan 3, 2022', name: 'Olivia Brown', role: 'UI Designer', level: 'Today', customer: 'Michael Lee', amount: '$230.75', status: 'Cancelled' },\r\n    { id: '#3004', date: 'Jan 4, 2022', name: 'Noah Davis', role: 'DevOps Engineer', level: 'Today', customer: 'Emily Clark', amount: '$59.99', status: 'Completed' },\r\n    { id: '#3005', date: 'Jan 5, 2022', name: 'Ava Martinez', role: 'Product Manager', level: 'Today', customer: 'Daniel Harris', amount: '$410.00', status: 'Pending' },\r\n    { id: '#3006', date: 'Jan 6, 2022', name: 'William Garcia', role: 'QA Engineer', level: 'Today', customer: 'Sophia Lewis', amount: '$150.20', status: 'Completed' },\r\n    { id: '#3007', date: 'Jan 7, 2022', name: 'Isabella Rodriguez', role: 'Business Analyst', level: 'Today', customer: 'James Walker', amount: '$78.40', status: 'Pending' },\r\n    { id: '#3008', date: 'Jan 8, 2022', name: 'James Wilson', role: 'Fullstack Developer', level: 'Today', customer: 'Mia Hall', amount: '$300.00', status: 'Completed' },\r\n    { id: '#3009', date: 'Jan 9, 2022', name: 'Sophia Anderson', role: 'UX Researcher', level: 'Today', customer: 'Benjamin Allen', amount: '$95.60', status: 'Cancelled' },\r\n    { id: '#3010', date: 'Jan 10, 2022', name: 'Benjamin Thomas', role: 'Mobile Developer', level: 'Today', customer: 'Charlotte Young', amount: '$210.10', status: 'Completed' },\r\n    { id: '#3011', date: 'Jan 11, 2022', name: 'Mia Taylor', role: 'Data Analyst', level: 'Today', customer: 'Lucas King', amount: '$180.00', status: 'Pending' },\r\n    { id: '#3012', date: 'Jan 12, 2022', name: 'Lucas Moore', role: 'Cloud Engineer', level: 'Today', customer: 'Amelia Scott', amount: '$420.75', status: 'Completed' },\r\n    { id: '#3013', date: 'Jan 13, 2022', name: 'Charlotte Jackson', role: 'Security Engineer', level: 'Today', customer: 'Elijah Green', amount: '$65.90', status: 'Cancelled' },\r\n    { id: '#3014', date: 'Jan 14, 2022', name: 'Elijah Martin', role: 'Technical Lead', level: 'Today', customer: 'Harper Adams', amount: '$510.30', status: 'Completed' },\r\n    { id: '#3015', date: 'Jan 15, 2022', name: 'Amelia Lee', role: 'Scrum Master', level: 'Today', customer: 'Alexander Baker', amount: '$99.99', status: 'Pending' },\r\n    { id: '#3016', date: 'Jan 16, 2022', name: 'Harper Perez', role: 'Frontend Developer', level: 'Today', customer: 'Ella Nelson', amount: '$275.45', status: 'Completed' },\r\n    { id: '#3017', date: 'Jan 17, 2022', name: 'Alexander White', role: 'Backend Developer', level: 'Today', customer: 'Matthew Carter', amount: '$340.00', status: 'Pending' },\r\n    { id: '#3018', date: 'Jan 18, 2022', name: 'Ella Harris', role: 'UI Designer', level: 'Today', customer: 'Avery Mitchell', amount: '$88.80', status: 'Completed' },\r\n    { id: '#3019', date: 'Jan 19, 2022', name: 'Matthew Clark', role: 'DevOps Engineer', level: 'Today', customer: 'Evelyn Perez', amount: '$190.25', status: 'Cancelled' },\r\n    { id: '#3020', date: 'Jan 20, 2022', name: 'Avery Lewis', role: 'Product Manager', level: 'Today', customer: 'Henry Roberts', amount: '$600.00', status: 'Completed' },\r\n    { id: '#3021', date: 'Jan 21, 2022', name: 'Evelyn Walker', role: 'QA Engineer', level: 'Today', customer: 'Luna Turner', amount: '$72.30', status: 'Pending' },\r\n    { id: '#3022', date: 'Jan 22, 2022', name: 'Henry Hall', role: 'Business Analyst', level: 'Today', customer: 'Jack Phillips', amount: '$310.40', status: 'Completed' },\r\n    { id: '#3023', date: 'Jan 23, 2022', name: 'Luna Allen', role: 'Fullstack Developer', level: 'Today', customer: 'Sofia Campbell', amount: '$145.00', status: 'Cancelled' },\r\n    { id: '#3024', date: 'Jan 24, 2022', name: 'Jack Young', role: 'UX Researcher', level: 'Today', customer: 'David Parker', amount: '$260.70', status: 'Completed' },\r\n    { id: '#3025', date: 'Jan 25, 2022', name: 'Sofia Hernandez', role: 'Mobile Developer', level: 'Today', customer: 'Grace Evans', amount: '$89.10', status: 'Pending' },\r\n    { id: '#3026', date: 'Jan 26, 2022', name: 'David King', role: 'Data Analyst', level: 'Today', customer: 'Samuel Edwards', amount: '$410.90', status: 'Completed' },\r\n    { id: '#3027', date: 'Jan 27, 2022', name: 'Grace Wright', role: 'Cloud Engineer', level: 'Today', customer: 'Chloe Collins', amount: '$130.55', status: 'Cancelled' },\r\n    { id: '#3028', date: 'Jan 28, 2022', name: 'Samuel Scott', role: 'Security Engineer', level: 'Today', customer: 'Victoria Stewart', amount: '$555.00', status: 'Completed' },\r\n    { id: '#3029', date: 'Jan 29, 2022', name: 'Chloe Green', role: 'Technical Lead', level: 'Today', customer: 'Nathan Morris', amount: '$205.25', status: 'Pending' },\r\n    { id: '#3030', date: 'Jan 30, 2022', name: 'Nathan Adams', role: 'Scrum Master', level: 'Today', customer: 'Zoe Rogers', amount: '$320.80', status: 'Completed' },\r\n  ]"
             },
             "tableHeaderConfig": {
                 "type": "unknown",
@@ -862,7 +887,7 @@ export class GbTable {
                 "setter": false,
                 "reflect": false,
                 "attribute": "sticky-first-column",
-                "defaultValue": "true"
+                "defaultValue": "false"
             },
             "stickyLastColumn": {
                 "type": "boolean",
@@ -882,7 +907,7 @@ export class GbTable {
                 "setter": false,
                 "reflect": false,
                 "attribute": "sticky-last-column",
-                "defaultValue": "true"
+                "defaultValue": "false"
             },
             "actionsType": {
                 "type": "string",
@@ -922,7 +947,7 @@ export class GbTable {
                 "setter": false,
                 "reflect": false,
                 "attribute": "show-checkbox",
-                "defaultValue": "true"
+                "defaultValue": "false"
             },
             "tableHeadColor": {
                 "type": "string",
@@ -943,6 +968,26 @@ export class GbTable {
                 "reflect": false,
                 "attribute": "table-head-color",
                 "defaultValue": "'gray'"
+            },
+            "rowKey": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | ((row: any) => string)",
+                    "resolved": "((row: any) => string) | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "row-key",
+                "defaultValue": "'id'"
             }
         };
     }
@@ -963,13 +1008,14 @@ export class GbTable {
             "internalColumns": {},
             "modalPosition": {},
             "showFilterModalInternal": {},
+            "isFilterModalVisible": {},
             "internalLoading": {}
         };
     }
     static get events() {
         return [{
-                "method": "rowActionClick",
-                "name": "rowActionClick",
+                "method": "rowActionClicked",
+                "name": "rowActionClicked",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -1072,15 +1118,27 @@ export class GbTable {
                     "resolved": "{ row: any; }",
                     "references": {}
                 }
+            }, {
+                "method": "applyFilters",
+                "name": "applyFilters",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{\r\n    filters: any;\r\n    pagination: any;\r\n  }",
+                    "resolved": "{ filters: any; pagination: any; }",
+                    "references": {}
+                }
             }];
     }
     static get watchers() {
         return [{
                 "propName": "data",
                 "methodName": "onDataChange"
-            }, {
-                "propName": "totalItems",
-                "methodName": "onTotalItemsChange"
             }, {
                 "propName": "loading",
                 "methodName": "onLoadingChange"