@actabldesign/bellhop-core 0.0.8 → 0.0.12

package/dist/collection/components/bh-data-grid/bh-data-grid.js

@@ -1,4 +1,4 @@
-import { h, forceUpdate } from "@stencil/core";
+import { h, forceUpdate, } from "@stencil/core";
 import { createTable, getCoreRowModel, getSortedRowModel, getFilteredRowModel, getPaginationRowModel, getExpandedRowModel, getGroupedRowModel, } from "@tanstack/table-core";
 export class BhDataGrid {
     el;
@@ -153,7 +153,9 @@ export class BhDataGrid {
     handleSelectedRowIdsChange(newValue) {
         if (this.table) {
             const selection = {};
-            newValue.forEach(id => { selection[id] = true; });
+            newValue.forEach((id) => {
+                selection[id] = true;
+            });
             this.table.setRowSelection(selection);
         }
     }
@@ -168,7 +170,9 @@ export class BhDataGrid {
     handleExpandedRowIdsChange(newValue) {
         if (this.table) {
             const expanded = {};
-            newValue.forEach(id => { expanded[id] = true; });
+            newValue.forEach((id) => {
+                expanded[id] = true;
+            });
             this.table.setExpanded(expanded);
         }
     }
@@ -218,14 +222,24 @@ export class BhDataGrid {
             },
             getCoreRowModel: getCoreRowModel(),
             getSortedRowModel: this.enableSorting ? getSortedRowModel() : undefined,
-            getFilteredRowModel: this.enableFiltering || this.enableGlobalFilter ? getFilteredRowModel() : undefined,
-            getPaginationRowModel: this.enablePagination ? getPaginationRowModel() : undefined,
-            getExpandedRowModel: this.enableExpansion || this.enableGrouping ? getExpandedRowModel() : undefined,
-            getGroupedRowModel: this.enableGrouping ? getGroupedRowModel() : undefined,
-            getRowId: this.getRowId || ((row, index) => String(row.id ?? index)),
+            getFilteredRowModel: this.enableFiltering || this.enableGlobalFilter
+                ? getFilteredRowModel()
+                : undefined,
+            getPaginationRowModel: this.enablePagination
+                ? getPaginationRowModel()
+                : undefined,
+            getExpandedRowModel: this.enableExpansion || this.enableGrouping
+                ? getExpandedRowModel()
+                : undefined,
+            getGroupedRowModel: this.enableGrouping
+                ? getGroupedRowModel()
+                : undefined,
+            getRowId: this.getRowId ||
+                ((row, index) => String(row.id ?? index)),
             getSubRows: this.getSubRows,
             enableRowSelection: this.selectionMode !== 'none',
-            enableMultiRowSelection: this.selectionMode === 'multiple-click' || this.selectionMode === 'multiple-checkbox',
+            enableMultiRowSelection: this.selectionMode === 'multiple-click' ||
+                this.selectionMode === 'multiple-checkbox',
             enableSorting: this.enableSorting,
             enableFilters: this.enableFiltering || this.enableGlobalFilter,
             enableExpanding: this.enableExpansion || this.enableGrouping,
@@ -242,7 +256,7 @@ export class BhDataGrid {
         this.tableState = newState;
         // Update table options with new state
         if (this.table) {
-            this.table.setOptions(prev => ({
+            this.table.setOptions((prev) => ({
                 ...prev,
                 state: newState,
             }));
@@ -252,7 +266,8 @@ export class BhDataGrid {
             this.sortState = newState.sorting;
             this.bhSortChange.emit({ sorting: newState.sorting });
         }
-        if (JSON.stringify(oldState.columnFilters) !== JSON.stringify(newState.columnFilters) ||
+        if (JSON.stringify(oldState.columnFilters) !==
+            JSON.stringify(newState.columnFilters) ||
             oldState.globalFilter !== newState.globalFilter) {
             this.filterState = newState.columnFilters;
             this.globalFilter = newState.globalFilter;
@@ -261,10 +276,11 @@ export class BhDataGrid {
                 globalFilter: newState.globalFilter,
             });
         }
-        if (JSON.stringify(oldState.rowSelection) !== JSON.stringify(newState.rowSelection)) {
-            const selectedIds = Object.keys(newState.rowSelection).filter(id => newState.rowSelection[id]);
+        if (JSON.stringify(oldState.rowSelection) !==
+            JSON.stringify(newState.rowSelection)) {
+            const selectedIds = Object.keys(newState.rowSelection).filter((id) => newState.rowSelection[id]);
             this.selectedRowIds = selectedIds;
-            const selectedRows = this.table?.getSelectedRowModel().rows.map(r => r.original) ?? [];
+            const selectedRows = this.table?.getSelectedRowModel().rows.map((r) => r.original) ?? [];
             this.bhSelectionChange.emit({
                 selectedRowIds: selectedIds,
                 selectedRows,
@@ -284,19 +300,25 @@ export class BhDataGrid {
     }
     buildRowSelection() {
         const selection = {};
-        this.selectedRowIds.forEach(id => { selection[id] = true; });
+        this.selectedRowIds.forEach((id) => {
+            selection[id] = true;
+        });
         return selection;
     }
     buildExpanded() {
         const expanded = {};
-        this.expandedRowIds.forEach(id => { expanded[id] = true; });
+        this.expandedRowIds.forEach((id) => {
+            expanded[id] = true;
+        });
         return expanded;
     }
     buildColumnVisibility() {
         // Hide grouped columns
         const visibility = {};
         if (this.enableGrouping) {
-            this.groupBy.forEach(colId => { visibility[colId] = false; });
+            this.groupBy.forEach((colId) => {
+                visibility[colId] = false;
+            });
         }
         return visibility;
     }
@@ -376,10 +398,10 @@ export class BhDataGrid {
         if (!this.enableEditing)
             return;
         this.editingRowId = row.id;
-        this.editingColumnId = this.editMode === 'cell' ? (columnId || null) : null;
+        this.editingColumnId = this.editMode === 'cell' ? columnId || null : null;
         // Initialize editing values from current row
         const values = {};
-        this.columns.forEach(col => {
+        this.columns.forEach((col) => {
             const colId = col.accessorKey || col.id;
             if (colId) {
                 values[colId] = row.original[colId];
@@ -490,8 +512,8 @@ export class BhDataGrid {
         }
     };
     moveToNextEditableCell = (currentColumnId, reverse) => {
-        const editableColumns = this.columns.filter(col => col.meta?.editable !== false);
-        const currentIndex = editableColumns.findIndex(col => {
+        const editableColumns = this.columns.filter((col) => col.meta?.editable !== false);
+        const currentIndex = editableColumns.findIndex((col) => {
             const colId = col.accessorKey || col.id;
             return colId === currentColumnId;
         });
@@ -570,23 +592,30 @@ export class BhDataGrid {
         if (!this.table)
             return null;
         const headerGroups = this.table.getHeaderGroups();
-        return (h("div", { class: { 'data-grid-header': true, 'data-grid-header-sticky': this.stickyHeader } }, headerGroups.map(headerGroup => (h("div", { class: "data-grid-header-row", role: "row", key: headerGroup.id }, this.renderSelectionHeader(), this.enableExpansion && !this.enableGrouping && (h("div", { class: "data-grid-header-cell data-grid-cell-expand", role: "columnheader" })), headerGroup.headers.map(header => this.renderHeaderCell(header)), this.enableEditing && this.showEditActions && this.editMode === 'row' && (h("div", { class: "data-grid-header-cell data-grid-cell-actions", role: "columnheader" }))))), this.showFilterRow && this.renderFilterRow()));
+        return (h("thead", { class: {
+                'data-grid-header': true,
+                'data-grid-header-sticky': this.stickyHeader,
+            } }, headerGroups.map((headerGroup) => (h("tr", { class: "data-grid-header-row", role: "row", key: headerGroup.id }, this.renderSelectionHeader(), this.enableExpansion && !this.enableGrouping && (h("th", { class: "data-grid-header-cell data-grid-cell-expand", role: "columnheader" })), headerGroup.headers.map((header) => this.renderHeaderCell(header)), this.enableEditing &&
+            this.showEditActions &&
+            this.editMode === 'row' && (h("th", { class: "data-grid-header-cell data-grid-cell-actions", role: "columnheader", colSpan: 1 }))))), this.showFilterRow && this.renderFilterRow()));
     }
     renderSelectionHeader() {
-        if (this.selectionMode === 'none' || this.selectionMode === 'single-click' || this.selectionMode === 'multiple-click') {
+        if (this.selectionMode === 'none' ||
+            this.selectionMode === 'single-click' ||
+            this.selectionMode === 'multiple-click') {
             return null;
         }
         if (this.selectionMode === 'single-radio') {
-            return h("div", { class: "data-grid-header-cell data-grid-cell-select", role: "columnheader" });
+            return (h("th", { class: "data-grid-header-cell data-grid-cell-select", role: "columnheader", colSpan: 1 }));
         }
         // Multiple checkbox - show select all
         const isAllSelected = this.table?.getIsAllRowsSelected();
         const isSomeSelected = this.table?.getIsSomeRowsSelected();
-        return (h("div", { class: "data-grid-header-cell data-grid-cell-select", role: "columnheader" }, h("bh-checkbox", { size: "sm", checked: isAllSelected, indeterminate: isSomeSelected && !isAllSelected, onBhChange: () => this.table?.toggleAllRowsSelected() })));
+        return (h("th", { class: "data-grid-header-cell data-grid-cell-select", role: "columnheader", colSpan: 1 }, h("bh-checkbox", { size: "sm", checked: isAllSelected, indeterminate: isSomeSelected && !isAllSelected, onBhChange: () => this.table?.toggleAllRowsSelected() })));
     }
     renderHeaderCell(header) {
         if (header.isPlaceholder) {
-            return h("div", { class: "data-grid-header-cell", role: "columnheader", key: header.id });
+            return (h("th", { class: "data-grid-header-cell", role: "columnheader", key: header.id, colSpan: 1 }));
         }
         const canSort = header.column.getCanSort();
         const sortDirection = header.column.getIsSorted();
@@ -600,21 +629,32 @@ export class BhDataGrid {
         const style = header.column.getSize()
             ? { width: `${header.column.getSize()}px` }
             : {};
-        return (h("div", { class: cellClasses, style: style, role: "columnheader", "aria-sort": sortDirection === 'asc' ? 'ascending' : sortDirection === 'desc' ? 'descending' : 'none', onClick: () => canSort && this.handleHeaderClick(header), key: header.id }, h("span", { class: "data-grid-header-text" }, this.flexRender(header.column.columnDef.header, header.getContext())), canSort && sortDirection && (h("span", { class: "data-grid-sort-icon material-symbols-outlined" }, sortDirection === 'asc' ? 'arrow_upward' : 'arrow_downward'))));
+        return (h("th", { class: cellClasses, style: style, role: "columnheader", "aria-sort": sortDirection === 'asc'
+                ? 'ascending'
+                : sortDirection === 'desc'
+                    ? 'descending'
+                    : 'none', onClick: () => canSort && this.handleHeaderClick(header), key: header.id, colSpan: 1 }, h("span", { class: "data-grid-header-text" }, this.flexRender(header.column.columnDef.header, header.getContext())), canSort && sortDirection && (h("span", { class: "data-grid-sort-icon material-symbols-outlined" }, sortDirection === 'asc' ? 'north' : 'south'))));
     }
     renderFilterRow() {
         if (!this.table)
             return null;
         const headers = this.table.getHeaderGroups()[0]?.headers || [];
-        return (h("div", { class: "data-grid-filter-row", role: "row" }, (this.selectionMode === 'single-radio' || this.selectionMode === 'multiple-checkbox') && (h("div", { class: "data-grid-filter-cell data-grid-cell-select", role: "cell" })), this.enableExpansion && !this.enableGrouping && (h("div", { class: "data-grid-filter-cell data-grid-cell-expand", role: "cell" })), headers.map(header => {
+        return (h("tr", { class: "data-grid-filter-row", role: "row" }, (this.selectionMode === 'single-radio' ||
+            this.selectionMode === 'multiple-checkbox') && (h("td", { class: "data-grid-filter-cell data-grid-cell-select", role: "cell" })), this.enableExpansion && !this.enableGrouping && (h("td", { class: "data-grid-filter-cell data-grid-cell-expand", role: "cell" })), headers.map((header) => {
             const canFilter = header.column.getCanFilter();
             const meta = header.column.columnDef.meta;
             if (!canFilter || meta?.filterable === false) {
-                return h("div", { class: "data-grid-filter-cell", role: "cell", key: header.id });
+                return (h("div", { class: "data-grid-filter-cell", role: "cell", key: header.id }));
             }
             const filterValue = header.column.getFilterValue() ?? '';
-            return (h("div", { class: "data-grid-filter-cell", role: "cell", key: header.id }, h("input", { type: meta?.type === 'number' ? 'number' : meta?.type === 'date' ? 'date' : 'text', class: "data-grid-filter-input", placeholder: `Filter...`, value: filterValue, onInput: (e) => this.handleColumnFilterChange(header.column.id, e.target.value) })));
-        }), this.enableEditing && this.showEditActions && this.editMode === 'row' && (h("div", { class: "data-grid-filter-cell data-grid-cell-actions", role: "cell" }))));
+            return (h("td", { class: "data-grid-filter-cell", role: "cell", key: header.id }, h("span", { class: "data-grid-filter-icon material-symbols-outlined" }, "search"), h("input", { type: meta?.type === 'number'
+                    ? 'number'
+                    : meta?.type === 'date'
+                        ? 'date'
+                        : 'text', class: "data-grid-filter-input", placeholder: ``, value: filterValue, onInput: (e) => this.handleColumnFilterChange(header.column.id, e.target.value) })));
+        }), this.enableEditing &&
+            this.showEditActions &&
+            this.editMode === 'row' && (h("td", { class: "data-grid-filter-cell data-grid-cell-actions", role: "cell" }))));
     }
     renderBody() {
         if (!this.table)
@@ -628,7 +668,7 @@ export class BhDataGrid {
         if (rows.length === 0) {
             return this.renderEmptyState();
         }
-        return (h("div", { class: "data-grid-body", role: "rowgroup" }, rows.map(row => {
+        return (h("tbody", { class: "data-grid-body", role: "rowgroup" }, rows.map((row) => {
             if (row.getIsGrouped()) {
                 return this.renderGroupRow(row);
             }
@@ -646,27 +686,38 @@ export class BhDataGrid {
             'data-grid-row-editing': isRowEditing,
             'data-grid-row-hover': this.hoveredRowId === row.id,
             'data-grid-row-striped': this.striped && row.index % 2 === 1,
-            'data-grid-row-clickable': this.selectionMode === 'single-click' || this.selectionMode === 'multiple-click',
+            'data-grid-row-clickable': this.selectionMode === 'single-click' ||
+                this.selectionMode === 'multiple-click',
         };
         return [
-            h("div", { class: rowClasses, role: "row", "aria-selected": isSelected ? 'true' : 'false', key: row.id, onClick: () => this.handleRowClick(row), onMouseEnter: () => { this.hoveredRowId = row.id; }, onMouseLeave: () => { this.hoveredRowId = null; } }, this.renderSelectionCell(row), this.enableExpansion && !this.enableGrouping && (h("div", { class: "data-grid-cell data-grid-cell-expand", role: "cell", onClick: (e) => { e.stopPropagation(); } }, row.getCanExpand() && (h("button", { class: "data-grid-expand-btn", onClick: () => this.handleRowExpand(row), "aria-label": isExpanded ? 'Collapse row' : 'Expand row' }, h("span", { class: "material-symbols-outlined" }, isExpanded ? 'expand_more' : 'chevron_right'))))), row.getVisibleCells().map(cell => this.renderCell(row, cell)), this.enableEditing && this.showEditActions && this.editMode === 'row' && (h("div", { class: "data-grid-cell data-grid-cell-actions", role: "cell", onClick: (e) => e.stopPropagation() }, isRowEditing ? (h("div", { class: "data-grid-edit-actions" }, h("button", { class: "data-grid-action-btn", onClick: () => this.saveEditing(), title: "Save" }, h("span", { class: "material-symbols-outlined" }, "check")), h("button", { class: "data-grid-action-btn", onClick: () => this.cancelEditing(), title: "Cancel" }, h("span", { class: "material-symbols-outlined" }, "close")))) : (h("button", { class: "data-grid-action-btn", onClick: () => this.startEditing(row), title: "Edit" }, h("span", { class: "material-symbols-outlined" }, "edit")))))),
+            h("tr", { class: rowClasses, role: "row", "aria-selected": isSelected ? 'true' : 'false', key: row.id, onClick: () => this.handleRowClick(row), onMouseEnter: () => {
+                    this.hoveredRowId = row.id;
+                }, onMouseLeave: () => {
+                    this.hoveredRowId = null;
+                } }, this.renderSelectionCell(row), this.enableExpansion && !this.enableGrouping && (h("td", { class: "data-grid-cell data-grid-cell-expand", role: "cell", onClick: (e) => {
+                    e.stopPropagation();
+                } }, row.getCanExpand() && (h("button", { class: "data-grid-expand-btn", onClick: () => this.handleRowExpand(row), "aria-label": isExpanded ? 'Collapse row' : 'Expand row' }, h("span", { class: "material-symbols-outlined" }, isExpanded ? 'expand_more' : 'chevron_right'))))), row.getVisibleCells().map((cell) => this.renderCell(row, cell)), this.enableEditing &&
+                this.showEditActions &&
+                this.editMode === 'row' && (h("td", { class: "data-grid-cell data-grid-cell-actions", role: "cell", onClick: (e) => e.stopPropagation() }, isRowEditing ? (h("div", { class: "data-grid-edit-actions" }, h("bh-button", { hierarchy: "tertiary", kind: "success", size: "sm", icon: "only", iconName: "check", onClick: () => this.saveEditing(), title: "Save" }, "Save"), h("bh-button", { hierarchy: "tertiary", kind: "destructive", size: "sm", icon: "only", iconName: "close", onClick: () => this.cancelEditing(), title: "Cancel" }, "Cancel"))) : (h("bh-button", { hierarchy: "tertiary", size: "sm", icon: "only", iconName: "edit", onClick: () => this.startEditing(row), title: "Edit" }, h("span", { class: "material-symbols-outlined" }, "edit")))))),
             // Expanded content
             isExpanded && this.enableExpansion && !this.enableGrouping && (h("div", { class: "data-grid-row-expansion", key: `${row.id}-expansion` }, h("slot", { name: "expanded-row" }))),
         ];
     }
     renderSelectionCell(row) {
-        if (this.selectionMode === 'none' || this.selectionMode === 'single-click' || this.selectionMode === 'multiple-click') {
+        if (this.selectionMode === 'none' ||
+            this.selectionMode === 'single-click' ||
+            this.selectionMode === 'multiple-click') {
             return null;
         }
         const isSelected = row.getIsSelected();
         if (this.selectionMode === 'single-radio') {
-            return (h("div", { class: "data-grid-cell data-grid-cell-select", role: "cell", onClick: (e) => e.stopPropagation() }, h("bh-radio-button", { selected: isSelected, onBhChange: () => {
+            return (h("td", { class: "data-grid-cell data-grid-cell-select", role: "cell", onClick: (e) => e.stopPropagation() }, h("bh-radio-button", { selected: isSelected, onBhChange: () => {
                     this.table?.resetRowSelection();
                     row.toggleSelected(true);
                 } })));
         }
         // Multiple checkbox
-        return (h("div", { class: "data-grid-cell data-grid-cell-select", role: "cell", onClick: (e) => e.stopPropagation() }, h("bh-checkbox", { size: "sm", checked: isSelected, onBhChange: () => row.toggleSelected() })));
+        return (h("td", { class: "data-grid-cell data-grid-cell-select", role: "cell", onClick: (e) => e.stopPropagation() }, h("bh-checkbox", { size: "sm", checked: isSelected, onBhChange: () => row.toggleSelected() })));
     }
     renderCell(row, cell) {
         const meta = cell.column.columnDef.meta;
@@ -685,18 +736,22 @@ export class BhDataGrid {
         const style = cell.column.getSize()
             ? { width: `${cell.column.getSize()}px` }
             : {};
-        return (h("div", { class: cellClasses, style: style, role: "cell", key: cell.id, onClick: (e) => {
+        return (h("td", { class: cellClasses, style: style, role: "cell", key: cell.id, onClick: (e) => {
                 e.stopPropagation();
                 this.handleCellClick(row, cell);
             }, onDblClick: (e) => {
                 e.stopPropagation();
                 this.handleCellDoubleClick(row, cell);
-            } }, isCellEditing ? this.renderEditInput(cell) : this.renderCellContent(cell), hasError && (h("span", { class: "data-grid-cell-error-text" }, this.validationErrors[columnId]))));
+            } }, isCellEditing
+            ? this.renderEditInput(cell)
+            : this.renderCellContent(cell), hasError && (h("span", { class: "data-grid-cell-error-text" }, this.validationErrors[columnId]))));
     }
     renderCellContent(cell) {
         const rendered = this.flexRender(cell.column.columnDef.cell, cell.getContext());
         // If custom cell renderer returns something, use it
-        if (rendered !== undefined && rendered !== null && rendered !== cell.getValue()) {
+        if (rendered !== undefined &&
+            rendered !== null &&
+            rendered !== cell.getValue()) {
             return rendered;
         }
         // Default formatting
@@ -706,9 +761,12 @@ export class BhDataGrid {
         const columnId = cell.column.id;
         const meta = cell.column.columnDef.meta;
         const currentValue = this.editingValues[columnId] ?? cell.getValue();
-        const inputType = meta?.type === 'number' ? 'number'
-            : meta?.type === 'date' ? 'date'
-                : meta?.type === 'boolean' ? 'checkbox'
+        const inputType = meta?.type === 'number'
+            ? 'number'
+            : meta?.type === 'date'
+                ? 'date'
+                : meta?.type === 'boolean'
+                    ? 'checkbox'
                     : 'text';
         if (meta?.type === 'boolean') {
             return (h("bh-checkbox", { size: "sm", checked: Boolean(currentValue), onBhChange: (e) => this.handleEditValueChange(columnId, e.detail.checked) }));
@@ -725,36 +783,51 @@ export class BhDataGrid {
         const groupValue = row.groupingValue;
         const leafRows = row.getLeafRows();
         // Check if all leaf rows are selected for group selection
-        const allSelected = leafRows.every(r => r.getIsSelected());
-        const someSelected = leafRows.some(r => r.getIsSelected());
+        const allSelected = leafRows.every((r) => r.getIsSelected());
+        const someSelected = leafRows.some((r) => r.getIsSelected());
         const rowClasses = {
             'data-grid-row': true,
             'data-grid-row-group': true,
             'data-grid-row-group-expanded': isExpanded,
         };
         return [
-            h("div", { class: rowClasses, role: "row", "aria-expanded": isExpanded ? 'true' : 'false', key: row.id, onClick: () => this.handleGroupToggle(row) }, this.selectionMode === 'multiple-checkbox' && (h("div", { class: "data-grid-cell data-grid-cell-select", role: "cell", onClick: (e) => e.stopPropagation() }, h("bh-checkbox", { size: "sm", checked: allSelected, indeterminate: someSelected && !allSelected, onBhChange: () => {
-                    leafRows.forEach(r => r.toggleSelected(!allSelected));
+            h("tr", { class: rowClasses, role: "row", "aria-expanded": isExpanded ? 'true' : 'false', key: row.id, onClick: () => this.handleGroupToggle(row) }, this.selectionMode === 'multiple-checkbox' && (h("div", { class: "data-grid-cell data-grid-cell-select", role: "cell", onClick: (e) => e.stopPropagation() }, h("bh-checkbox", { size: "sm", checked: allSelected, indeterminate: someSelected && !allSelected, onBhChange: () => {
+                    leafRows.forEach((r) => r.toggleSelected(!allSelected));
                 } }))), h("div", { class: "data-grid-cell data-grid-cell-group-label", role: "cell" }, h("button", { class: "data-grid-group-toggle", "aria-label": isExpanded ? 'Collapse group' : 'Expand group' }, h("span", { class: "material-symbols-outlined" }, isExpanded ? 'expand_more' : 'chevron_right')), h("span", { class: "data-grid-group-label" }, h("span", { class: "data-grid-group-column" }, groupingColumnId, ": "), h("span", { class: "data-grid-group-value" }, String(groupValue))), h("span", { class: "data-grid-group-count" }, "(", leafRows.length, " ", leafRows.length === 1 ? 'item' : 'items', ")"))),
             // Render child rows if expanded
-            isExpanded && row.subRows.map(subRow => {
-                if (subRow.getIsGrouped()) {
-                    return this.renderGroupRow(subRow);
-                }
-                return this.renderDataRow(subRow);
-            }),
+            isExpanded &&
+                row.subRows.map((subRow) => {
+                    if (subRow.getIsGrouped()) {
+                        return this.renderGroupRow(subRow);
+                    }
+                    return this.renderDataRow(subRow);
+                }),
         ];
     }
     renderEmptyState() {
-        return (h("div", { class: "data-grid-empty" }, h("bh-empty-state", { emptyTitle: this.emptyTitle, description: this.emptyDescription })));
+        const columnCount = this.columns.length +
+            (this.selectionMode === 'single-radio' ||
+                this.selectionMode === 'multiple-checkbox'
+                ? 1
+                : 0) +
+            (this.enableExpansion && !this.enableGrouping ? 1 : 0) +
+            (this.enableEditing && this.showEditActions && this.editMode === 'row'
+                ? 1
+                : 0);
+        return (h("tbody", { class: "data-grid-body", role: "rowgroup" }, h("tr", { class: "data-grid-empty", role: "row" }, h("td", { role: "cell", colSpan: columnCount }, h("div", { class: "empty-state-wrapper" }, h("bh-empty-state", { emptyTitle: this.emptyTitle, description: this.emptyDescription }))))));
     }
     renderSkeleton() {
         const skeletonRows = Array.from({ length: this.skeletonRowCount }, (_, i) => i);
         const columnCount = this.columns.length +
-            (this.selectionMode === 'single-radio' || this.selectionMode === 'multiple-checkbox' ? 1 : 0) +
+            (this.selectionMode === 'single-radio' ||
+                this.selectionMode === 'multiple-checkbox'
+                ? 1
+                : 0) +
             (this.enableExpansion && !this.enableGrouping ? 1 : 0) +
-            (this.enableEditing && this.showEditActions && this.editMode === 'row' ? 1 : 0);
-        return (h("div", { class: "data-grid-body data-grid-skeleton", role: "rowgroup" }, skeletonRows.map(i => (h("div", { class: "data-grid-row data-grid-row-skeleton", role: "row", key: i }, Array.from({ length: columnCount }, (_, j) => (h("div", { class: "data-grid-cell", role: "cell", key: j }, h("bh-skeleton-loader", { width: "80%", height: "16px" })))))))));
+            (this.enableEditing && this.showEditActions && this.editMode === 'row'
+                ? 1
+                : 0);
+        return (h("div", { class: "data-grid-body data-grid-skeleton", role: "rowgroup" }, skeletonRows.map((i) => (h("div", { class: "data-grid-row data-grid-row-skeleton", role: "row", key: i }, Array.from({ length: columnCount }, (_, j) => (h("div", { class: "data-grid-cell", role: "cell", key: j }, h("bh-skeleton-loader", { width: "80%", height: "16px" })))))))));
     }
     renderLoadingOverlay() {
         if (!this.loading || this.loadingType !== 'spinner')
@@ -765,7 +838,7 @@ export class BhDataGrid {
         if (!this.enablePagination || !this.table)
             return null;
         const rowCount = this.table.getFilteredRowModel().rows.length;
-        return (h("bh-pagination", { page: this.page, totalItems: rowCount, pageSize: this.pageSize, pageSizeOptions: this.pageSizeOptions, onBhPageChange: this.handlePaginationChange, onBhPageSizeChange: this.handlePaginationChange }));
+        return (h("bh-pagination", { page: this.page, totalItems: rowCount, pageSize: this.pageSize, pageSizeOptions: this.pageSizeOptions, showItemCount: false, compact: true, onBhPageChange: this.handlePaginationChange, onBhPageSizeChange: this.handlePaginationChange }));
     }
     // ===========================================================================
     // Main Render
@@ -781,7 +854,7 @@ export class BhDataGrid {
         const containerStyle = this.maxHeight
             ? { maxHeight: this.maxHeight, overflowY: 'auto' }
             : {};
-        return (h("div", { key: 'aa7f1e09699fb99be7625f90b3b94fa9e6927498', class: gridClasses, role: "grid", "aria-busy": this.loading ? 'true' : 'false' }, this.captionPosition === 'top' && this.renderCaption(), this.renderGlobalFilter(), h("div", { key: '2929257ae04c88f8d225edac899fe7ec5f195fb2', class: "data-grid-container", style: containerStyle }, h("div", { key: '66bfba27da2199fbb1735229ea07e522b0f83dd1', class: "data-grid-table" }, this.renderHeader(), this.renderBody()), this.renderLoadingOverlay()), this.captionPosition === 'bottom' && this.renderCaption(), this.renderPagination()));
+        return (h("div", { key: '42e71a54dc147533e05938275bf747919b89aed6', class: gridClasses, role: "grid", "aria-busy": this.loading ? 'true' : 'false' }, this.captionPosition === 'top' && this.renderCaption(), this.renderGlobalFilter(), h("div", { key: 'f8aede627ce62a8195f439ff81aad478aa1544ba', class: "data-grid-container", style: containerStyle }, h("table", { key: '528f578c5a756960d139a5a1a5cd171961c97ceb', class: "data-grid-table" }, this.renderHeader(), this.renderBody()), this.renderLoadingOverlay()), this.captionPosition === 'bottom' && this.renderCaption(), this.renderPagination()));
     }
     static get is() { return "bh-data-grid"; }
     static get encapsulation() { return "shadow"; }