globuswebcomponents 2.16.6 → 2.16.8

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

@@ -29,14 +29,14 @@ export class GbTable {
         //   key: 'status',
         //   label: 'Status',
         //   cellComponent: 'gb-badge',
-        //   cellProps: row => ({ color: row.status === 'Completed' ? 'success' : 'error', type: 'badge_modern', size: 'sm', icon: 'dot' }),
-        //   cellSlots: {
-        //     default: {
-        //       tag: 'p',
-        //       content: row => row.status,
-        //     },
+        // cellProps: row => ({ color: row.status === 'Completed' ? 'success' : 'error', type: 'badge_modern', size: 'sm', icon: 'dot' }),
+        // cellSlots: {
+        //   default: {
+        //     tag: 'p',
+        //     content: row => row.status,
         //   },
         // },
+        // },
         ];
         this.data = [
         // {
@@ -430,44 +430,45 @@ export class GbTable {
             illustrationStyle: 'box',
             theme: 'light',
         };
-        // = {
-        // title: 'Filter',
-        // fields: [
-        //   {
-        //     tag: 'gb-date-picker',
-        //     label: 'Date',
-        //     columnKey: 'date',
-        //     key: { start: 'startDate', end: 'endDate' },
-        //     event: 'dateChange',
-        //   },
-        //   {
-        //     tag: 'gb-input-dropdown',
-        //     key: 'status',
-        //     event: 'dropdownItemSelected',
-        //     props: {
-        //       type: 'tags',
-        //       showLabel: true,
-        //       label: 'Status',
-        //       placeholder: 'Select a status',
-        //       items: ['Completed', 'Pending', 'Cancelled'],
-        //     },
-        //   },
-        //   {
-        //     tag: 'gb-slider',
-        //     key: 'amount',
-        //     event: 'thumbValueChanged',
-        //     props: {
-        //       showHeading: true,
-        //       heading: 'Amount range',
-        //       max: 600,
-        //     },
-        //   },
-        // ],
-        // initialValues: {
-        //   pageNumber: 0,
-        //   pageSize: 10,
-        // },
-        // };
+        this.filterConfig = {
+            mode: 'internal',
+            title: '',
+            fields: [
+            // {
+            //   tag: 'gb-date-picker',
+            //   label: 'Date',
+            //   columnKey: 'date',
+            //   key: { start: 'startDate', end: 'endDate' },
+            //   event: 'dateChange',
+            // },
+            // {
+            //   tag: 'gb-input-dropdown',
+            //   key: 'status',
+            //   event: 'dropdownItemSelected',
+            //   props: {
+            //     type: 'tags',
+            //     showLabel: true,
+            //     label: 'Status',
+            //     placeholder: 'Select a status',
+            //     items: ['Completed', 'Pending', 'Cancelled'],
+            //   },
+            // },
+            // {
+            //   tag: 'gb-slider',
+            //   key: 'amount',
+            //   event: 'thumbValueChanged',
+            //   props: {
+            //     showHeading: true,
+            //     heading: 'Amount range',
+            //     max: 600,
+            //   },
+            // },
+            ],
+            initialValues: {
+                pageNumber: 0,
+                pageSize: 10,
+            },
+        };
         this.showActionsColumn = true;
         this.rowActions = [
         // { label: 'View Details', action: 'view_details', icon: 'assets/view.svg', type: 'button' },
@@ -484,8 +485,7 @@ export class GbTable {
         this.showCheckbox = true;
         this.tableHeadColor = 'gray';
         this.rowKey = 'id';
-        this.filterMode = 'internal';
-        this.searchMode = 'internal';
+        this.tableHeaderType = 'default';
         this.slicedData = [];
         this.internalCurrentPage = 1;
         this.internalPageSize = 10;
@@ -873,10 +873,10 @@ export class GbTable {
                 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: (e) => {
+            .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: e => {
                 e.stopPropagation();
                 this.toggleDropdown(rowIndex);
-            } })) : (h("gb-button", { hierarchy: "tertiary_gray", size: "md", icon: "only", destructive: action.destructive, iconLeading: true, iconLeadingSwap: action.icon, onClick: (e) => {
+            } })) : (h("gb-button", { hierarchy: "tertiary_gray", size: "md", icon: "only", destructive: action.destructive, iconLeading: true, iconLeadingSwap: action.icon, onClick: e => {
                 e.stopPropagation();
                 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: () => {
@@ -907,7 +907,7 @@ export class GbTable {
         var _a, _b, _c;
         this.searchTerm = (_c = (_b = (_a = detail.detail) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : detail.detail) !== null && _c !== void 0 ? _c : '';
         this.internalCurrentPage = 1; // reset pagination on search
-        if (this.searchMode === 'external') {
+        if (this.tableHeaderConfig.searchMode === 'external') {
             console.log('Emitting search value:', this.searchTerm);
             this.inputValueChanged.emit(detail.detail);
         }
@@ -941,6 +941,9 @@ export class GbTable {
     switchTableLayout(layout) {
         this.currentTableLayout = layout.detail;
     }
+    emitTableContolClickedEvent(detail) {
+        this.tableControlClicked.emit(detail.detail);
+    }
     toggleColumn(event, columnKey) {
         const isVisible = event.detail;
         this.internalColumns = this.internalColumns.map(col => (col.key === columnKey ? Object.assign(Object.assign({}, col), { visible: isVisible }) : col));
@@ -961,7 +964,7 @@ export class GbTable {
         const { filters } = e.detail;
         this.appliedFilterValues = Object.assign(Object.assign({}, this.appliedFilterValues), filters);
         this.internalCurrentPage = 1; // ← reset pagination
-        if (this.filterMode === 'external') {
+        if (this.filterConfig.mode === 'external') {
             this.filterApplied.emit(this.appliedFilterValues);
         }
         this.showAndHideToast('Filter applied');
@@ -978,7 +981,7 @@ export class GbTable {
     }
     get filteredData() {
         var _a;
-        if (this.filterMode === 'external' || !((_a = this.filterConfig) === null || _a === void 0 ? void 0 : _a.fields) || Object.keys(this.appliedFilterValues).length === 0) {
+        if (this.filterConfig.mode === 'external' || !((_a = this.filterConfig) === null || _a === void 0 ? void 0 : _a.fields) || Object.keys(this.appliedFilterValues).length === 0) {
             return this.sortedData;
         }
         return this.sortedData.filter(row => {
@@ -1094,16 +1097,16 @@ export class GbTable {
         window.removeEventListener('resize', this.checkViewport);
     }
     render() {
-        return (h("div", { key: '8c3cba2765689df18f62edca0e2bd00bda2fe227', class: `table_wrapper ${this.currentTableLayout}` }, this.tableHeaderConfig && (h("div", { key: 'dfa9d88769fd1dc9d9ade600d27b5b7eaedd003c', class: `table-header ${this.currentTableLayout}` }, h("gb-table-header", { key: '6d537f0e314b60aa22d0bbbf536431773e13528a', 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": Object.keys(this.appliedFilterValues).length > 0 ? 'applied' : 'default', "filter-count": Object.keys(this.appliedFilterValues).length, "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(), onRefreshButtonClicked: () => this.onRefreshButtonClicked(), onLayoutButtonClicked: e => this.switchTableLayout(e) }))), this.showColumnsPanel && this.columns.length > 0 && (h("div", { key: 'e8dd67d56df88a93ad8cf8ade2a546fa046ca965', class: "dialog", style: {
+        return (h("div", { key: '08bed4790123cd14b04c9aeca1b17338a21d0378', class: `table_wrapper ${this.currentTableLayout}` }, this.tableHeaderConfig && (h("div", { key: 'f206fa57601e83520530a325186a774be25bec1c', class: `table-header ${this.currentTableLayout}` }, h("gb-table-header", { key: 'e020968dad30ed2c0db4ee96d1de181eb932b494', type: this.tableHeaderConfig.type, 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": Object.keys(this.appliedFilterValues).length > 0 ? 'applied' : 'default', "filter-count": Object.keys(this.appliedFilterValues).length, "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(), onRefreshButtonClicked: () => this.onRefreshButtonClicked(), onLayoutButtonClicked: e => this.switchTableLayout(e), onTableControlClicked: e => this.emitTableContolClickedEvent(e) }))), this.showColumnsPanel && this.columns.length > 0 && (h("div", { key: 'faaa2d3c8b31b00c4ede7731702127639ce6aab9', class: "dialog", style: {
                 transform: `translate(${this.modalPosition.x}px, ${this.modalPosition.y}px)`,
-            } }, h("div", { key: '31f0937714fb57abe41d4e66bb0bdd2e1b8725b0', class: "column-modal" }, h("div", { key: 'a0fca8102dee35ea3b7ac8efb0941a5c312c2c5a', class: "modal_header" }, h("div", { key: 'd6356dd8d814bd91ae81f0ef3ef2201ceea1aaab', class: "modal_header_content", onPointerDown: this.onModalPointerDown }, h("h4", { key: '6fb631d3b003a5a5bed625f105eae286e0831bff', class: "heading display-xs-semi-bold" }, "Column Options"), h("gb-button-close", { key: '6f33365afe0255b56c9ea1ba8368b005cd8fc5fc', class: "close_button", color: "gray", size: "sm", onClick: () => (this.showColumnsPanel = false) }))), h("div", { key: '7dd21f4e129b87e4d7b2c33624dcbf5f9e44e6fb', class: "content_wrapper" }, h("div", { key: '8798b367495cff483181f08715cd4f3c2812baca', 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: 'e98a9fcc41d9e7281a538361d4e7ddf1d2f182ea', class: "column-modal" }, h("div", { key: 'f754fb3b60ff7908fad8982157f05108e227f16f', class: "modal_header" }, h("div", { key: '68805a02141e44b3b077606fb01ea22805a2ec8a', class: "modal_header_content", onPointerDown: this.onModalPointerDown }, h("h4", { key: '2502833b479337b8c5a15d5a2467721567a01d93', class: "heading display-xs-semi-bold" }, "Column Options"), h("gb-button-close", { key: '259b8b1bfd01f7be00b2e4081148febcce67b151', class: "close_button", color: "gray", size: "sm", onClick: () => (this.showColumnsPanel = false) }))), h("div", { key: 'de725fb507605422d302f519e4d5edec51430d57', class: "content_wrapper" }, h("div", { key: 'a5e06ec2acd4d58910e19115bf8026bb27e35da0', 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: 'f071f30dff0f8dfd2f7d5b5e4059ad7b216619cf', class: "modal-actions" })))))), this.showFilterModalInternal && this.filterConfig && (h("div", { key: '8b89801f090b7f04d25b7fbdaf78f50db13c3623', class: `filter_modal_wrapper ${this.isFilterModalVisible ? 'open' : 'closing'}` }, h("gb-filter-modal", { key: '797ee2fc99de4820023f4d3b8fede528180baa6b', class: "filter_modal", filterConfig: this.mergedFilterConfig, onClose: e => {
+            } })))), h("div", { key: '7b4a2031677cff5feeb32fba5466a63087531cec', class: "modal-actions" })))))), this.showFilterModalInternal && this.filterConfig && (h("div", { key: '15113dbc0a79c6796b648b0fe45e4c450dd876a8', class: `filter_modal_wrapper ${this.isFilterModalVisible ? 'open' : 'closing'}` }, h("gb-filter-modal", { key: '4ec80231b62a65272d63131d6a1d1faa69d0c6a6', class: "filter_modal", filterConfig: this.mergedFilterConfig, onClose: e => {
                 e.stopPropagation();
                 this.closeFilterModal();
             }, onApplyFilters: e => this.onApplyFilters(e), onClearFilters: () => this.handleClearFilters() }))), this.internalLoading ? (
@@ -1150,7 +1153,7 @@ export class GbTable {
                 ? this.renderDesktopView()
                 : this.currentTableLayout === 'grid'
                     ? this.renderGridView()
-                    : null)), this.paginationConfig && (h("div", { key: '8ddb7adbeb1f6b50a121153e31b4b7ef1e101e95', class: `pagination ${this.currentTableLayout}` }, h("gb-pagination", { key: '6280128bc96b883f30f63fa915e38c3b4567ef0a', "entries-dropdown-menu-position": this.paginationConfig.entriesDropdownMenuPosition, "page-size": this.paginationConfig.paginationMode === 'internal' ? this.internalPageSize : this.paginationConfig.pageSize, "current-page": this.paginationConfig.paginationMode === 'internal' ? this.internalCurrentPage : this.paginationConfig.currentPage, "total-pages": this.totalPages, onPageItemSelected: this.handlePageChange.bind(this) }))), this.showToast && (h("gb-toast", { key: '6fac60f73e44b4cf021301b61e437aa5a8570da6', class: `toast ${this.toastVisible ? 'visible' : ''}`, color: "information", "main-text": this.filterMessage, breakpoint: "desktop", size: "floating", onClose: () => this.hideToast() }))));
+                    : null)), this.paginationConfig && (h("div", { key: '39767fe82ce88bcb4f1c570b9b3fd35b2e86ae43', class: `pagination ${this.currentTableLayout}` }, h("gb-pagination", { key: 'c76fc64fda5ebaf94122ca8a51f1addc754f63e3', "entries-dropdown-menu-position": this.paginationConfig.entriesDropdownMenuPosition, "page-size": this.paginationConfig.paginationMode === 'internal' ? this.internalPageSize : this.paginationConfig.pageSize, "current-page": this.paginationConfig.paginationMode === 'internal' ? this.internalCurrentPage : this.paginationConfig.currentPage, "total-pages": this.totalPages, onPageItemSelected: this.handlePageChange.bind(this) }))), this.showToast && (h("gb-toast", { key: 'b92a6728c7f97754cb350f049081af3f76868225', class: `toast ${this.toastVisible ? 'visible' : ''}`, color: "information", "main-text": this.filterMessage, breakpoint: "desktop", size: "floating", onClose: () => this.hideToast() }))));
     }
     static get is() { return "gb-table"; }
     static get encapsulation() { return "shadow"; }
@@ -1208,7 +1211,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', value: row => row.date.toLocaleString(), mobile: { position: 'bottom_left' } },\r\n    // {\r\n    //   key: 'name',\r\n    //   label: 'Name',\r\n    //   sortable: true,\r\n    //   sortType: 'string',\r\n    //   helpIcon: true,\r\n    //   searchable: true,\r\n    //   hasAvatar: true,\r\n    //   cellAvatar: {\r\n    //     // image: '',\r\n    //     slots: {\r\n    //       // initials: row => row.name.split(' ').map((nm: string) => nm.charAt(0)),\r\n    //       image: row => row.image,\r\n    //     },\r\n    //   },\r\n    //   mobile: { position: 'top_right' },\r\n    // },\r\n    // { key: 'role', label: 'Role', searchable: true },\r\n    // { key: 'amount', label: 'Amount', align: 'right', sortable: true, sortType: 'number', cellStyle: row => ({ color: row.amount > 200 ? 'green' : '' }) },\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  ]"
+                "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    // {\r\n    //   key: 'name',\r\n    //   label: 'Name',\r\n    //   sortable: true,\r\n    //   sortType: 'string',\r\n    //   helpIcon: true,\r\n    //   searchable: true,\r\n    //   hasAvatar: true,\r\n    //   cellAvatar: {\r\n    //     // image: '',\r\n    //     slots: {\r\n    //       // initials: row => row.name.split(' ').map((nm: string) => nm.charAt(0)),\r\n    //       image: row => row.image,\r\n    //     },\r\n    //   },\r\n    //   mobile: { position: 'top_right' },\r\n    // },\r\n    // { key: 'role', label: 'Role', searchable: true },\r\n    // { key: 'amount', label: 'Amount', align: 'right', sortable: true, sortType: 'number', cellStyle: row => ({ color: row.amount > 200 ? 'green' : '' }) },\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",
@@ -1249,8 +1252,8 @@ export class GbTable {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "{\r\n    tableHeading?: boolean;\r\n    tableHeadingLabel?: string;\r\n    showDateFilter?: boolean;\r\n    showFilter?: boolean;\r\n    showColumnOptions?: boolean;\r\n    showSearch?: boolean;\r\n    showExport?: boolean;\r\n    showRefreshButton?: boolean;\r\n    showEntireData?: boolean;\r\n    showLayoutToggle?: boolean;\r\n    filterState?: 'default' | 'applied';\r\n    filterCount?: number;\r\n    exportButtonState?: 'default' | 'disabled';\r\n    pdfState?: 'default' | 'disabled';\r\n    csvState?: 'default' | 'disabled';\r\n    datePickerMode?: 'single' | 'range';\r\n    inputPlaceholder?: string;\r\n    datePickerPlaceholder?: string;\r\n  }",
-                    "resolved": "{ tableHeading?: boolean; tableHeadingLabel?: string; showDateFilter?: boolean; showFilter?: boolean; showColumnOptions?: boolean; showSearch?: boolean; showExport?: boolean; showRefreshButton?: boolean; showEntireData?: boolean; showLayoutToggle?: boolean; filterState?: \"default\" | \"applied\"; filterCount?: number; exportButtonState?: \"disabled\" | \"default\"; pdfState?: \"disabled\" | \"default\"; csvState?: \"disabled\" | \"default\"; datePickerMode?: \"single\" | \"range\"; inputPlaceholder?: string; datePickerPlaceholder?: string; }",
+                    "original": "{\r\n    type: 'default' | 'table_control';\r\n    tableHeading?: boolean;\r\n    tableHeadingLabel?: string;\r\n    showDateFilter?: boolean;\r\n    showFilter?: boolean;\r\n    showColumnOptions?: boolean;\r\n    showSearch?: boolean;\r\n    showExport?: boolean;\r\n    showRefreshButton?: boolean;\r\n    showEntireData?: boolean;\r\n    showLayoutToggle?: boolean;\r\n    filterState?: 'default' | 'applied';\r\n    filterCount?: number;\r\n    exportButtonState?: 'default' | 'disabled';\r\n    pdfState?: 'default' | 'disabled';\r\n    csvState?: 'default' | 'disabled';\r\n    datePickerMode?: 'single' | 'range';\r\n    inputPlaceholder?: string;\r\n    datePickerPlaceholder?: string;\r\n    searchMode?: 'internal' | 'external';\r\n  }",
+                    "resolved": "{ type: \"default\" | \"table_control\"; tableHeading?: boolean; tableHeadingLabel?: string; showDateFilter?: boolean; showFilter?: boolean; showColumnOptions?: boolean; showSearch?: boolean; showExport?: boolean; showRefreshButton?: boolean; showEntireData?: boolean; showLayoutToggle?: boolean; filterState?: \"default\" | \"applied\"; filterCount?: number; exportButtonState?: \"disabled\" | \"default\"; pdfState?: \"disabled\" | \"default\"; csvState?: \"disabled\" | \"default\"; datePickerMode?: \"single\" | \"range\"; inputPlaceholder?: string; datePickerPlaceholder?: string; searchMode?: \"external\" | \"internal\"; }",
                     "references": {}
                 },
                 "required": false,
@@ -1354,7 +1357,8 @@ export class GbTable {
                     "text": ""
                 },
                 "getter": false,
-                "setter": false
+                "setter": false,
+                "defaultValue": "{\r\n    mode: 'internal',\r\n    title: '',\r\n    fields: [\r\n      // {\r\n      //   tag: 'gb-date-picker',\r\n      //   label: 'Date',\r\n      //   columnKey: 'date',\r\n      //   key: { start: 'startDate', end: 'endDate' },\r\n      //   event: 'dateChange',\r\n      // },\r\n      // {\r\n      //   tag: 'gb-input-dropdown',\r\n      //   key: 'status',\r\n      //   event: 'dropdownItemSelected',\r\n      //   props: {\r\n      //     type: 'tags',\r\n      //     showLabel: true,\r\n      //     label: 'Status',\r\n      //     placeholder: 'Select a status',\r\n      //     items: ['Completed', 'Pending', 'Cancelled'],\r\n      //   },\r\n      // },\r\n      // {\r\n      //   tag: 'gb-slider',\r\n      //   key: 'amount',\r\n      //   event: 'thumbValueChanged',\r\n      //   props: {\r\n      //     showHeading: true,\r\n      //     heading: 'Amount range',\r\n      //     max: 600,\r\n      //   },\r\n      // },\r\n    ],\r\n    initialValues: {\r\n      pageNumber: 0,\r\n      pageSize: 10,\r\n    },\r\n  }"
             },
             "showActionsColumn": {
                 "type": "boolean",
@@ -1524,32 +1528,12 @@ export class GbTable {
                 "attribute": "row-key",
                 "defaultValue": "'id'"
             },
-            "filterMode": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'internal' | 'external'",
-                    "resolved": "\"external\" | \"internal\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "filter-mode",
-                "defaultValue": "'internal'"
-            },
-            "searchMode": {
+            "tableHeaderType": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'internal' | 'external'",
-                    "resolved": "\"external\" | \"internal\"",
+                    "original": "'default' | 'table_control'",
+                    "resolved": "\"default\" | \"table_control\"",
                     "references": {}
                 },
                 "required": false,
@@ -1561,8 +1545,8 @@ export class GbTable {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "search-mode",
-                "defaultValue": "'internal'"
+                "attribute": "table-header-type",
+                "defaultValue": "'default'"
             }
         };
     }
@@ -1762,6 +1746,21 @@ export class GbTable {
                     "resolved": "void",
                     "references": {}
                 }
+            }, {
+                "method": "tableControlClicked",
+                "name": "tableControlClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
             }];
     }
     static get watchers() {