globuswebcomponents 2.8.12 → 2.9.0

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

@@ -11,14 +11,7 @@ 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: row => h("p", null, row.status),
+                render: row => (h("gb-badge", { color: row.status === 'Completed' ? 'success' : 'error', type: "badge_modern", size: "sm", icon: "dot" }, h("p", null, row.status))),
                 mobile: { position: 'bottom_right' },
             },
             // {
@@ -36,7 +29,16 @@ export class GbTable {
             // },
         ];
         this.data = [
-            { id: '#3001', date: 'Jan 1, 2022', name: 'Emma Johnson', role: 'Frontend Developer', level: 'Today', customer: 'John Doe', amount: '$120.00', status: 'Completed' },
+            {
+                id: '#3001',
+                date: 'Jan 1, 2022',
+                name: 'Emma Johnson',
+                role: 'Frontend Developer',
+                level: 'Today',
+                customer: 'John Doe',
+                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: '#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' },
@@ -76,33 +78,79 @@ export class GbTable {
             showSearch: true,
             showExport: true,
             showRefreshButton: true,
+            datePickerMode: 'single',
         };
         this.paginationConfig = {
+            paginationMode: 'internal',
             entriesDropdownMenuPosition: 'top',
+            currentPage: 1,
+            pageSize: 10,
+            totalItems: null,
+        };
+        this.emptyStateConfig = {
+            mainText: 'No data available',
+            supportingText: 'Try adjusting your filters or check back later.',
+            color: 'gray',
+            illustrationIcon: 'assets/alert-circle.svg',
+            theme: 'light',
         };
         this.showActionsColumn = true;
-        this.rowActions = [{ label: 'View', action: 'view', disabled: true }];
+        this.rowActions = [
+            { label: '', action: '', icon: 'assets/more-horizontal.svg', type: 'dropdown' },
+            // { label: 'View Details', action: 'view_details', icon: 'assets/view.svg', type: 'button' },
+            // { label: 'Edit', action: 'edit', icon: 'assets/pencil-edit-01.svg', type: 'button' },
+        ];
+        this.dropdownOptions = [
+            { label: 'View', action: 'view', icon: 'assets/view.svg', disabled: false },
+            { 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.actionsType = 'none';
-        this.showCheckbox = true;
-        this.paginationMode = 'internal';
-        this.currentPage = 1;
-        this.pageSize = 10;
+        this.showCheckbox = false;
+        // @Prop({ mutable: true }) currentPage?: number = 1;
+        // @Prop() pageSize: number = 10;
+        // @Prop() totalItems?: number;
         this.internalCurrentPage = 1;
+        this.internalPageSize = 10;
         this.openRowIndex = null;
         this.sortDirection = 'asc';
         this.selectedRowIds = new Set();
         this.breakpoint = 'desktop';
         this.isMobile = false;
+        this.isScrollable = false;
         this.actionButtonRefs = [];
+        this.handlePageChange = ({ detail }) => {
+            const { pageNumber, pageSize } = detail;
+            if (this.paginationConfig.paginationMode === 'internal') {
+                this.internalCurrentPage = pageNumber;
+                this.internalPageSize = pageSize;
+            }
+            else {
+                this.pageItemSelected.emit(detail);
+            }
+        };
     }
-    componentWillLoad() {
+    componentWillRender() {
         this.checkViewport();
-        window.addEventListener('resize', this.checkViewport);
+        window.addEventListener('resize', this.checkViewport.bind(this));
+    }
+    componentDidRender() {
+        requestAnimationFrame(() => this.checkScrollability());
     }
     checkViewport() {
         this.isMobile = window.innerWidth <= 768;
+        this.checkScrollability();
+    }
+    checkScrollability() {
+        if (!this.scrollContainer)
+            return;
+        const { scrollWidth, clientWidth } = this.scrollContainer;
+        const newScrollable = scrollWidth > clientWidth;
+        if (newScrollable !== this.isScrollable) {
+            this.isScrollable = newScrollable; // only update if different
+        }
     }
     handleAction(action, row) {
         this.rowActionClick.emit({ action, row });
@@ -212,21 +260,22 @@ export class GbTable {
         this.selectionChanged.emit(selected);
     }
     get displayedData() {
-        if (this.paginationMode === 'external') {
+        if (!this.paginationConfig) {
             return this.sortedData;
         }
-        const start = (this.currentPage - 1) * this.pageSize;
-        const end = start + this.pageSize;
+        if (this.paginationConfig.paginationMode === 'external') {
+            return this.sortedData; // parent already paginated it
+        }
+        const start = (this.internalCurrentPage - 1) * this.internalPageSize;
+        const end = start + this.internalPageSize;
         return this.sortedData.slice(start, end);
     }
-    handlePageChange({ detail }) {
-        if (this.paginationMode === 'internal') {
-            this.currentPage = detail.pageNumber;
-            this.pageSize = detail.pageSize;
-        }
-        else {
-            this.pageItemSelected.emit(detail);
-        }
+    get totalPages() {
+        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)
@@ -236,7 +285,7 @@ export class GbTable {
     onTotalItemsChange(newValue, _oldValue) {
         if (!newValue || newValue < 1)
             return;
-        this.totalItems = Number(newValue);
+        this.paginationConfig.totalItems = Number(newValue);
     }
     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: {
@@ -258,8 +307,8 @@ export class GbTable {
                 totalWidth += defaultColWidth;
             }
         });
-        const tableStyle = this.columns.length > 5 ? { minWidth: `${totalWidth}px` } : {};
-        return (h("div", { class: `table_scroll` }, h("table", { style: tableStyle }, h("thead", null, h("tr", { class: "table_head_row" }, this.showCheckbox && (h("th", { style: { width: '15px' }, class: {
+        // const tableStyle = this.columns.length > 5 ? { minWidth: `${totalWidth}px` } : {};
+        return (h("div", { class: `table_scroll`, ref: el => (this.scrollContainer = el) }, h("table", null, h("thead", null, h("tr", { class: "table_head_row" }, this.showCheckbox && (h("th", { style: { width: '15px' }, class: {
                 sticky_left: this.stickyFirstColumn,
             } }, h("gb-checkbox", { type: "checkbox", checked: this.allSelected, indeterminate: this.isIndeterminate, size: "sm", onClick: () => this.toggleAll() }))), this.columns.map((col, index) => {
             var _a;
@@ -268,13 +317,25 @@ export class GbTable {
                     table_header: true,
                     sticky_left: this.stickyFirstColumn && index === 0,
                     sortable: col.sortable,
+                    has_border: this.isScrollable,
                 } }, h("div", { class: `table_head_content align-${align}` }, align === 'right' && h("div", { class: "table_head_icons" }, this.renderHeaderIcons(col)), h("p", { class: `head_text text-xs-medium` }, col.label), align === 'left' && h("div", { class: "table_head_icons" }, this.renderHeaderIcons(col)))));
         }), this.showActionsColumn && (h("th", { class: {
+                actions_cell: true,
                 sticky_right: this.stickyLastColumn,
-            }, style: { width: '50px' } }, h("div", { class: "empty_div" }))))), h("tbody", null, this.displayedData.map((row, rowIndex) => (h("tr", { class: "table_body" }, h("td", { class: "table_detail", style: { width: '50px' } }, h("gb-checkbox", { type: "checkbox", checked: this.selectedRowIds.has(row.id), indeterminate: false, size: "sm", onClick: () => this.toggleRow(row) })), this.columns.map((col, index) => (h("td", { style: { textAlign: col.align || 'left' }, class: `table_detail ${this.stickyFirstColumn && index === 0 ? 'sticky_left' : ''}` }, this.renderCell(col, row)))), this.showActionsColumn && (h("td", { style: { width: '50px' }, class: `table_detail actions-cell ${this.stickyLastColumn ? 'sticky_right' : ''}` }, h(Fragment, null, h("gb-button", { id: `gb-table-trigger-${rowIndex}`, ref: el => (this.actionButtonRefs[rowIndex] = el), class: "dropdown_button", hierarchy: "tertiary_gray", size: "sm", icon: "only", iconLeading: true, iconLeadingSwap: "assets/more-horizontal.svg", onClick: () => this.toggleDropdown(rowIndex) }), this.openRowIndex === rowIndex && (h("gb-portal", { "anchor-id": `gb-table-trigger-${rowIndex}`, placement: "bottom-end", anchorEl: this.currentAnchorEl, open: true }, h("div", { class: "dropdown_wrapper" }, this.rowActions.map(action => (h("gb-input-dropdown-menu-item", { type: "default", state: action.disabled ? StateEnum.Disabled : StateEnum.Default, "icon-leading": action.icon ? true : false, "icon-leading-swap": action.icon, onClick: () => {
+                has_border: this.isScrollable,
+            } }, 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", style: { width: '50px' } }, h("gb-checkbox", { type: "checkbox", checked: this.selectedRowIds.has(row.id), indeterminate: false, size: "sm", onClick: () => this.toggleRow(row) }))), this.columns.map((col, index) => (h(Fragment, null, col.render ? (h("td", { style: { textAlign: col.align || 'left' }, class: `table_detail ${this.stickyFirstColumn && index === 0 ? 'sticky_left' : ''} ${this.isScrollable ? 'has_border' : ''}` }, col.render(row))) : (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: "sm", icon: "only", iconLeading: true, iconLeadingSwap: "assets/more-horizontal.svg", onClick: () => this.toggleDropdown(rowIndex) })) : (h("gb-button", { hierarchy: "tertiary_gray", size: "sm", icon: "only", 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: "bottom-end", anchorEl: this.currentAnchorEl, open: true }, h("div", { class: "dropdown_wrapper" }, this.dropdownOptions.map(action => (
+        // <gb-input-dropdown-menu-item
+        //   type="default"
+        //   state={action.disabled ? StateEnum.Disabled : StateEnum.Default}
+        //   icon-leading={action.icon ? true : false}
+        //   icon-leading-swap={action.icon}
+        // >
+        //   <p slot="name">{action.label}</p>
+        // </gb-input-dropdown-menu-item>
+        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);
                 this.openRowIndex = null;
-            } }, h("p", { slot: "name" }, action.label)))))))))))))))));
+            } })))))))))))))))));
     }
     validateMobilePositions() {
         const positions = this.columns.map(c => { var _a; return (_a = c.mobile) === null || _a === void 0 ? void 0 : _a.position; }).filter(Boolean);
@@ -289,18 +350,20 @@ export class GbTable {
             const topRight = this.columns.find(c => { var _a; return ((_a = c.mobile) === null || _a === void 0 ? void 0 : _a.position) === 'top_right'; });
             const bottomLeft = this.columns.find(c => { var _a; return ((_a = c.mobile) === null || _a === void 0 ? void 0 : _a.position) === 'bottom_left'; });
             const bottomRight = this.columns.find(c => { var _a; return ((_a = c.mobile) === null || _a === void 0 ? void 0 : _a.position) === 'bottom_right'; });
-            return (h("div", { class: "mobile-card" }, h("div", { class: "mobile-row mobile-top" }, h("div", { class: "mobile-cell" }, topLeft && this.renderCell(topLeft, row)), h("div", { class: "mobile-cell right" }, topRight && this.renderCell(topRight, row))), h("div", { class: "mobile-row mobile-bottom" }, h("div", { class: "mobile-cell" }, bottomLeft && this.renderCell(bottomLeft, row)), 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(row.id), indeterminate: false, size: "sm", onClick: () => this.toggleRow(row) })), h("div", { class: "mobile-card" }, h("div", { class: "mobile-row mobile-top" }, h("div", { class: "mobile-cell" }, h("p", { class: "top_left_text text-md-regular" }, topLeft && row[topLeft.key])), h("div", { class: "mobile-cell right" }, h("p", { class: "top_right_text text-md-semi-bold" }, topRight && row[topRight.key]))), h("div", { class: "mobile-row mobile-bottom" }, h("div", { class: "mobile-cell" }, h("p", { class: "bottom_left_text text-sm-regular" }, bottomLeft && row[bottomLeft.key])), h("div", { class: "mobile-cell right" }, bottomRight && this.renderCell(bottomRight, row))))));
         })));
     }
-    emitSearchValue({ detail }) {
-        this.inputValueChanged.emit(detail);
+    emitSearchValue(detail) {
+        this.inputValueChanged.emit(detail.detail);
+    }
+    emitDateChange(detail) {
+        this.dateChange.emit(detail.detail);
     }
     disconnectedCallback() {
         window.removeEventListener('resize', this.checkViewport);
     }
     render() {
-        const totalPages = this.paginationMode === 'internal' ? Math.ceil(this.sortedData.length / this.pageSize) : Math.ceil((this.totalItems || 0) / this.pageSize);
-        return (h("div", { key: '499bac31da3885b57d9469666f921c78978ec8ff', class: `table_wrapper` }, h("gb-table-header", { key: 'e629b21f83e27889f453f77cf0e2402eb5f552df', "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, onInputValueChanged: this.emitSearchValue.bind(this) }), h(Fragment, null, this.isMobile ? this.renderMobileView() : this.renderDesktopView()), h("gb-pagination", { key: 'e808a7c942fefd7b1c70707315a50926b841aee5', "entries-dropdown-menu-position": this.paginationConfig.entriesDropdownMenuPosition, "page-size": this.pageSize, "current-page": this.paginationMode === 'internal' ? this.internalCurrentPage : this.currentPage, "total-pages": totalPages, onPageItemSelected: this.handlePageChange.bind(this) })));
+        return (h("div", { key: 'd393c1812e06818c2a0dd266cfb8f1c849971b2c', class: `table_wrapper` }, h("gb-table-header", { key: '2398b782d79e6afccdd3047eb8b37cf23efbcbff', 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, onInputValueChanged: this.emitSearchValue.bind(this), onDateChange: this.emitDateChange.bind(this) }), this.data.length === 0 ? (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" }))) : (h(Fragment, null, this.isMobile ? this.renderMobileView() : this.renderDesktopView())), this.paginationConfig && this.data.length > 0 && (h("gb-pagination", { key: '67b71bebffe1f1563520dd5eaac8cf0ffac6368a', "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"; }
@@ -338,7 +401,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, 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 => ({\r\n        color: row.status === 'Completed' ? 'success' : 'error',\r\n        type: 'badge_modern',\r\n        size: 'sm',\r\n        icon: 'dot',\r\n      }),\r\n      cellSlots: row => <p>{row.status}</p>,\r\n      mobile: { position: 'bottom_right' },\r\n    },\r\n    // {\r\n    //   key: '',\r\n    //   label: '',\r\n    //   cellComponent: 'gb-button',\r\n    //   width: '50px',\r\n    //   cellProps: () => ({\r\n    //     hierarchy: 'tertiary_gray',\r\n    //     size: 'sm',\r\n    //     icon: 'only',\r\n    //     iconLeading: true,\r\n    //     iconLeadingSwap: 'assets/more-horizontal.svg',\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', mobile: { position: 'bottom_left' } },\r\n    { key: 'name', label: 'Name', sortable: true, sortType: 'string', helpIcon: true, 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      render: row => (\r\n        <gb-badge color={row.status === 'Completed' ? 'success' : 'error'} type=\"badge_modern\" size=\"sm\" icon=\"dot\">\r\n          <p>{row.status}</p>\r\n        </gb-badge>\r\n      ),\r\n      mobile: { position: 'bottom_right' },\r\n    },\r\n    // {\r\n    //   key: '',\r\n    //   label: '',\r\n    //   cellComponent: 'gb-button',\r\n    //   width: '50px',\r\n    //   cellProps: () => ({\r\n    //     hierarchy: 'tertiary_gray',\r\n    //     size: 'sm',\r\n    //     icon: 'only',\r\n    //     iconLeading: true,\r\n    //     iconLeadingSwap: 'assets/more-horizontal.svg',\r\n    //   }),\r\n    // },\r\n  ]"
             },
             "data": {
                 "type": "unknown",
@@ -356,14 +419,14 @@ export class GbTable {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "[\r\n    { id: '#3001', date: 'Jan 1, 2022', name: 'Emma Johnson', role: 'Frontend Developer', level: 'Today', customer: 'John Doe', amount: '$120.00', status: 'Completed' },\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: '#3001',\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  ]"
             },
             "tableHeaderConfig": {
                 "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  }",
-                    "resolved": "{ tableHeading: boolean; tableHeadingLabel: string; showDateFilter: boolean; showFilter: boolean; showColumnOptions: boolean; showSearch: boolean; showExport: boolean; showRefreshButton: boolean; }",
+                    "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    datePickerMode: 'single' | 'range';\r\n  }",
+                    "resolved": "{ tableHeading: boolean; tableHeadingLabel: string; showDateFilter: boolean; showFilter: boolean; showColumnOptions: boolean; showSearch: boolean; showExport: boolean; showRefreshButton: boolean; datePickerMode: \"single\" | \"range\"; }",
                     "references": {}
                 },
                 "required": false,
@@ -374,14 +437,14 @@ export class GbTable {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "{\r\n    tableHeading: false,\r\n    tableHeadingLabel: 'Suspicious outflows',\r\n    showDateFilter: true,\r\n    showFilter: true,\r\n    showColumnOptions: true,\r\n    showSearch: true,\r\n    showExport: true,\r\n    showRefreshButton: true,\r\n  }"
+                "defaultValue": "{\r\n    tableHeading: false,\r\n    tableHeadingLabel: 'Suspicious outflows',\r\n    showDateFilter: true,\r\n    showFilter: true,\r\n    showColumnOptions: true,\r\n    showSearch: true,\r\n    showExport: true,\r\n    showRefreshButton: true,\r\n    datePickerMode: 'single',\r\n  }"
             },
             "paginationConfig": {
-                "type": "any",
+                "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "any",
-                    "resolved": "any",
+                    "original": "{\r\n    paginationMode: 'internal' | 'external';\r\n    entriesDropdownMenuPosition: 'top' | 'bottom';\r\n    currentPage?: number;\r\n    pageSize?: number;\r\n    totalItems?: number;\r\n  }",
+                    "resolved": "{ paginationMode: \"external\" | \"internal\"; entriesDropdownMenuPosition: \"top\" | \"bottom\"; currentPage?: number; pageSize?: number; totalItems?: number; }",
                     "references": {}
                 },
                 "required": false,
@@ -392,9 +455,36 @@ export class GbTable {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
-                "attribute": "pagination-config",
-                "defaultValue": "{\r\n    entriesDropdownMenuPosition: 'top',\r\n  }"
+                "defaultValue": "{\r\n    paginationMode: 'internal',\r\n    entriesDropdownMenuPosition: 'top',\r\n    currentPage: 1,\r\n    pageSize: 10,\r\n    totalItems: null,\r\n  }"
+            },
+            "emptyStateConfig": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "{ mainText: string; supportingText?: string; color?: GeneralColors; illustrationIcon?: string; theme?: ThemeTypes; primaryButtonIcon?: string }",
+                    "resolved": "{ mainText: string; supportingText?: string; color?: GeneralColors; illustrationIcon?: string; theme?: ThemeTypes; primaryButtonIcon?: string; }",
+                    "references": {
+                        "GeneralColors": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::GeneralColors"
+                        },
+                        "ThemeTypes": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::ThemeTypes"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{\r\n    mainText: 'No data available',\r\n    supportingText: 'Try adjusting your filters or check back later.',\r\n    color: 'gray',\r\n    illustrationIcon: 'assets/alert-circle.svg',\r\n    theme: 'light',\r\n  }"
             },
             "showActionsColumn": {
                 "type": "boolean",
@@ -431,6 +521,30 @@ export class GbTable {
                     }
                 },
                 "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[\r\n    { label: '', action: '', icon: 'assets/more-horizontal.svg', type: 'dropdown' },\r\n    // { label: 'View Details', action: 'view_details', icon: 'assets/view.svg', type: 'button' },\r\n    // { label: 'Edit', action: 'edit', icon: 'assets/pencil-edit-01.svg', type: 'button' },\r\n  ]"
+            },
+            "dropdownOptions": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DropdownOption[]",
+                    "resolved": "DropdownOption[]",
+                    "references": {
+                        "DropdownOption": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::DropdownOption"
+                        }
+                    }
+                },
+                "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
@@ -438,7 +552,7 @@ export class GbTable {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "[{ label: 'View', action: 'view', disabled: true }]"
+                "defaultValue": "[\r\n    { label: 'View', action: 'view', icon: 'assets/view.svg', disabled: false },\r\n    { label: 'Edit', action: 'edit', icon: 'assets/pencil-edit-01.svg', disabled: false },\r\n    { label: 'Delete', action: 'delete', icon: 'assets/delete-02.svg', disabled: true },\r\n  ]"
             },
             "stickyFirstColumn": {
                 "type": "boolean",
@@ -518,98 +632,21 @@ export class GbTable {
                 "setter": false,
                 "reflect": false,
                 "attribute": "show-checkbox",
-                "defaultValue": "true"
-            },
-            "paginationMode": {
-                "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": "pagination-mode",
-                "defaultValue": "'internal'"
-            },
-            "currentPage": {
-                "type": "number",
-                "mutable": true,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "current-page",
-                "defaultValue": "1"
-            },
-            "pageSize": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "page-size",
-                "defaultValue": "10"
-            },
-            "totalItems": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "total-items"
+                "defaultValue": "false"
             }
         };
     }
     static get states() {
         return {
             "internalCurrentPage": {},
+            "internalPageSize": {},
             "openRowIndex": {},
             "sortKey": {},
             "sortDirection": {},
             "selectedRowIds": {},
             "breakpoint": {},
-            "isMobile": {}
+            "isMobile": {},
+            "isScrollable": {}
         };
     }
     static get events() {