@tipolox/litgrid-web 1.0.3 → 1.2.0

package/dist/components/DataGrid.js

@@ -61,6 +61,7 @@ export class DataGrid extends LitElement {
         this.scrollbarWidth = 0;
         this.columnDefs = [];
         this.sourceColumnDefs = [];
+        this._inferColumns = true;
         this.columnWidths = new Map();
         this.hiddenColumnKeys = new Set();
         this._columnStateStorageKey = null;
@@ -73,6 +74,7 @@ export class DataGrid extends LitElement {
         this.previousBodyCursor = '';
         this.previousBodyUserSelect = '';
         this.activeHeaderMenu = null;
+        this.headerMenuCapabilities = { sortable: true, filterable: true };
         this.columnChooserOpen = false;
         this.columnChooserPosition = null;
         this.quickSearchVisible = false;
@@ -99,6 +101,7 @@ export class DataGrid extends LitElement {
         this.shouldRestoreHeaderMenuFocus = false;
         this.screenReaderMessage = '';
         this.lastScreenReaderAnnouncement = '';
+        this.paginationFocusTarget = null;
         // Use a larger cap (2^26) to avoid hitting browser element-height limits.
         this.maxScrollableHeight = 67108864;
         this.lastTotalSize = 0;
@@ -149,22 +152,7 @@ export class DataGrid extends LitElement {
             this.requestUpdate();
         };
         this.stopColumnReorder = () => {
-            const state = this.columnReorderState;
-            if (!state)
-                return;
-            this.columnReorderState = null;
-            window.removeEventListener('pointermove', this.handleColumnReorder);
-            window.removeEventListener('pointerup', this.stopColumnReorder);
-            window.removeEventListener('pointercancel', this.stopColumnReorder);
-            this.removeColumnDragPreview();
-            if (state.hasMoved)
-                this.stopBodyResize();
-            if (state.hasMoved && state.sourceIndex !== state.targetIndex) {
-                this.moveColumn(state.columnKey, state.targetIndex);
-            }
-            else {
-                this.requestUpdate();
-            }
+            this.finishColumnReorder();
         };
         this.handleColumnResize = (event) => {
             if (!this.columnResizeState) {
@@ -175,14 +163,7 @@ export class DataGrid extends LitElement {
             this.requestUpdate();
         };
         this.stopColumnResize = () => {
-            if (!this.columnResizeState) {
-                return;
-            }
-            this.columnResizeState = null;
-            this.commitColumnState('resize');
-            this.stopBodyResize();
-            window.removeEventListener('pointermove', this.handleColumnResize);
-            window.removeEventListener('pointerup', this.stopColumnResize);
+            this.finishColumnResize();
         };
         this.handleRowResize = (event) => {
             if (!this.rowResizeState) {
@@ -243,6 +224,21 @@ export class DataGrid extends LitElement {
         this.ariaLabel = 'Data grid';
         this.ariaDescription = '';
         this.screenReaderAnnouncements = true;
+        this.engine.onSelectionChange(detail => {
+            this.requestUpdate();
+            this.dispatchEvent(new CustomEvent('selection-change', {
+                detail, bubbles: true, composed: true
+            }));
+        });
+        this.engine.onQueryChange(detail => {
+            this.quickSearchDraft = detail.query.search;
+            this.clearBestFitWidths();
+            this.resetVerticalScroll();
+            this.requestUpdate();
+            this.dispatchEvent(new CustomEvent('query-change', {
+                detail, bubbles: true, composed: true
+            }));
+        });
     }
     static { this.styles = [lightThemeStyles, darkThemeStyles, css `
     :host {
@@ -770,7 +766,16 @@ export class DataGrid extends LitElement {
     firstUpdated() {
         this.updateScrollbarWidth();
     }
+    willUpdate() {
+        // Reconcile after schema and persisted visibility settle, before triggers disappear.
+        this.reconcileHeaderMenuCapabilities();
+    }
     updated() {
+        const paginationTarget = this.paginationFocusTarget;
+        this.paginationFocusTarget = null;
+        if (paginationTarget?.isConnected && paginationTarget.disabled) {
+            this.renderRoot.querySelector('.pagination button:not([disabled]), .pagination select')?.focus();
+        }
         this.updateScrollbarWidth();
         if (this.shouldFocusViewport) {
             this.shouldFocusViewport = false;
@@ -852,7 +857,7 @@ export class DataGrid extends LitElement {
         }
     }
     getResolvedColumns() {
-        if (this.columnDefs.length > 0) {
+        if (this.columnDefs.length > 0 || !this._inferColumns) {
             return this.columnDefs;
         }
         const firstRow = this.engine.getRows()[0];
@@ -1084,7 +1089,7 @@ export class DataGrid extends LitElement {
             return null;
         }
     }
-    restorePersistedColumnState() {
+    restorePersistedColumnState(notify = true) {
         if (!this._columnStateStorageKey || this.sourceColumnDefs.length === 0)
             return;
         const storage = this.getColumnStateStorage();
@@ -1100,7 +1105,8 @@ export class DataGrid extends LitElement {
             this.hiddenColumnKeys = resolvedState.hiddenKeys;
             this.activeCell = null;
             this.requestUpdate();
-            this.dispatchColumnStateChange('restore');
+            if (notify)
+                this.dispatchColumnStateChange('restore');
         }
         catch {
             // Storage may be unavailable or blocked by browser privacy settings.
@@ -1162,6 +1168,7 @@ export class DataGrid extends LitElement {
             });
         }
         const isOpening = this.activeHeaderMenu !== columnKey;
+        this.headerMenuCapabilities = this.getColumnCapabilities(columnKey);
         this.activeHeaderMenu = isOpening ? columnKey : null;
         this.headerMenuTrigger = isOpening && event.currentTarget instanceof HTMLButtonElement
             ? event.currentTarget
@@ -1169,6 +1176,19 @@ export class DataGrid extends LitElement {
         this.shouldFocusHeaderMenu = isOpening;
         this.requestUpdate();
     }
+    getColumnCapabilities(columnKey) {
+        const column = this.getResolvedColumns().find(column => column.key === columnKey);
+        return { sortable: !!column && column.sortable !== false, filterable: !!column && column.filterable !== false };
+    }
+    reconcileHeaderMenuCapabilities() {
+        if (this.activeHeaderMenu === null)
+            return;
+        const next = this.getColumnCapabilities(this.activeHeaderMenu);
+        if (!this.isColumnVisible(this.activeHeaderMenu)
+            || next.sortable !== this.headerMenuCapabilities.sortable || next.filterable !== this.headerMenuCapabilities.filterable) {
+            this.closeHeaderMenu(true);
+        }
+    }
     closeHeaderMenu(restoreFocus = false) {
         if (this.activeHeaderMenu === null && !this.columnChooserOpen)
             return;
@@ -1300,6 +1320,10 @@ export class DataGrid extends LitElement {
     }
     announceRowSelection(rowIndex, intent = 'replace') {
         const anchor = this.engine.getSelection().anchorRowIndex ?? rowIndex;
+        if (intent === 'range' && this.engine.getConfig().selection.rowKey !== undefined) {
+            this.announceScreenReader(`${this.getDisplayedSelectedRowCount()} displayed rows selected.`);
+            return;
+        }
         this.announceScreenReader(intent === 'range' && anchor !== rowIndex
             ? `Rows ${Math.min(anchor, rowIndex) + 1} through ${Math.max(anchor, rowIndex) + 1} selected.`
             : `Row ${rowIndex + 1} ${this.engine.isRowSelected(rowIndex) ? 'selected' : 'deselected'}.`);
@@ -1308,24 +1332,34 @@ export class DataGrid extends LitElement {
         this.announceScreenReader(`${this.getColumnLabel(columnKey)}, row ${rowIndex + 1} ${this.engine.isCellSelected(rowIndex, columnKey) ? 'selected' : 'deselected'}.`);
     }
     announceVisibleRowCount(context) {
+        if (this.engine.getConfig().queryMode === 'external') {
+            this.announceScreenReader(`${context}. Server query requested.`);
+            return;
+        }
         const rowCount = this.engine.getRowCount();
         this.announceScreenReader(rowCount === 0 ? `${context}. No matching rows.` : `${context}. ${rowCount} ${rowCount === 1 ? 'row' : 'rows'} shown.`);
     }
     handleSortAscending(columnKey) {
+        if (!this.getColumnCapabilities(columnKey).sortable)
+            return;
         this.engine.sortBy(columnKey, 'asc');
-        this.announceScreenReader(`${this.getColumnLabel(columnKey)} sorted ascending.`);
+        this.announceScreenReader(`${this.getColumnLabel(columnKey)} ${this.engine.getConfig().queryMode === 'external' ? 'ascending sort requested' : 'sorted ascending'}.`);
         this.requestUpdate();
         this.closeHeaderMenu(true);
     }
     handleSortDescending(columnKey) {
+        if (!this.getColumnCapabilities(columnKey).sortable)
+            return;
         this.engine.sortBy(columnKey, 'desc');
-        this.announceScreenReader(`${this.getColumnLabel(columnKey)} sorted descending.`);
+        this.announceScreenReader(`${this.getColumnLabel(columnKey)} ${this.engine.getConfig().queryMode === 'external' ? 'descending sort requested' : 'sorted descending'}.`);
         this.requestUpdate();
         this.closeHeaderMenu(true);
     }
-    handleClearSort() {
+    handleClearSort(columnKey) {
+        if (!this.getColumnCapabilities(columnKey).sortable)
+            return;
         this.engine.clearSort();
-        this.announceScreenReader('Sorting cleared.');
+        this.announceScreenReader(this.engine.getConfig().queryMode === 'external' ? 'Clear sorting requested.' : 'Sorting cleared.');
         this.requestUpdate();
         this.closeHeaderMenu(true);
     }
@@ -1498,7 +1532,8 @@ export class DataGrid extends LitElement {
         this.clearQuickSearchDebounce();
         const threshold = Math.max(0, Math.floor(this.quickSearchDebounceThreshold));
         const debounceMs = Math.max(0, Math.floor(this.quickSearchDebounceMs));
-        if (this.sourceRowCount < threshold || debounceMs === 0) {
+        const external = this.engine.getConfig().queryMode === 'external';
+        if (debounceMs === 0 || (!external && this.sourceRowCount < threshold)) {
             this.applyQuickSearch(query);
             return;
         }
@@ -1530,23 +1565,65 @@ export class DataGrid extends LitElement {
     getFilters() {
         return this.engine.getFilters();
     }
+    sortBy(columnKey, direction) {
+        this.engine.sortBy(columnKey, direction);
+        this.resetVerticalScroll();
+        this.requestUpdate();
+    }
+    clearSort() {
+        this.engine.clearSort();
+        this.resetVerticalScroll();
+        this.requestUpdate();
+    }
+    getQuery() { return this.engine.getQuery(); }
+    refreshQuery() { this.engine.refreshQuery(); }
+    get externalState() { return this.engine.getExternalState(); }
+    set externalState(value) {
+        if (value)
+            this.setExternalState(value);
+    }
+    setExternalState(value) {
+        if (!this.engine.setExternalState(value))
+            return false;
+        this.clearQuickSearchDebounce();
+        this.quickSearchDraft = this.engine.getQuickSearch();
+        this.filterDrafts = new Map(this.engine.getFilters().map(filter => [filter.columnKey, filter]));
+        this.sourceRowCount = this.engine.getRowCount();
+        this.clearBestFitWidths();
+        this.requestUpdate();
+        return true;
+    }
+    getPageLabel() {
+        const pagination = this.engine.getPagination();
+        if (this.engine.getConfig().queryMode === 'external' && pagination.totalKnown && pagination.pageIndex > 0 && pagination.pageIndex >= pagination.pageCount)
+            return `Page ${pagination.pageIndex + 1} (out of range)`;
+        return pagination.totalKnown === false ? `Page ${pagination.pageIndex + 1}`
+            : `Page ${pagination.pageCount === 0 ? 0 : pagination.pageIndex + 1} of ${pagination.pageCount}`;
+    }
     setPage(pageIndex) {
+        this.rememberPaginationFocus();
         this.engine.setPage(pageIndex);
         this.resetVerticalScroll();
         const pagination = this.engine.getPagination();
-        this.announceScreenReader(`Page ${pagination.pageCount === 0 ? 0 : pagination.pageIndex + 1} of ${pagination.pageCount}.`);
+        this.announceScreenReader(`${this.getPageLabel()}.`);
         this.requestUpdate();
     }
     setPageSize(pageSize) {
+        this.rememberPaginationFocus();
         this.engine.setPageSize(pageSize);
         this.resetVerticalScroll();
         const pagination = this.engine.getPagination();
-        this.announceScreenReader(`${pagination.pageSize} rows per page. Page ${pagination.pageCount === 0 ? 0 : pagination.pageIndex + 1} of ${pagination.pageCount}.`);
+        this.announceScreenReader(`${pagination.pageSize} rows per page. ${this.getPageLabel()}.`);
         this.requestUpdate();
     }
     getPagination() {
         return this.engine.getPagination();
     }
+    rememberPaginationFocus() {
+        const active = this.shadowRoot?.activeElement;
+        if (active instanceof HTMLButtonElement && active.closest('.pagination'))
+            this.paginationFocusTarget = active;
+    }
     getTotalRowCount() {
         return this.engine.getTotalRowCount();
     }
@@ -1565,13 +1642,18 @@ export class DataGrid extends LitElement {
             this.announceRowSelection(rowIndex, effectiveIntent);
         this.requestUpdate();
     }
+    announceAllRowsSelected() {
+        const count = this.engine.getSelectableRowCount();
+        const qualifier = count === this.engine.getRowCount() ? '' : 'selectable ';
+        this.announceScreenReader(`All ${count} ${qualifier}displayed rows selected.`);
+    }
     selectAllRows() {
-        if (this.engine.getConfig().selection.mode !== 'multi-row' || this.engine.getRowCount() === 0)
+        if (this.engine.getConfig().selection.mode !== 'multi-row' || this.engine.getSelectableRowCount() === 0)
             return;
-        const unchanged = this.engine.getSelection().rowIndexes.size === this.engine.getRowCount();
+        const unchanged = this.engine.getSelection().rowIndexes.size === this.engine.getSelectableRowCount();
         this.engine.selectAllRows();
         if (!unchanged)
-            this.announceScreenReader(`All ${this.engine.getRowCount()} displayed rows selected.`);
+            this.announceAllRowsSelected();
         this.requestUpdate();
     }
     clearSelection() {
@@ -1585,6 +1667,21 @@ export class DataGrid extends LitElement {
     getSelection() {
         return this.engine.getSelection();
     }
+    getSelectionSnapshot() {
+        return this.engine.getSelectionSnapshot();
+    }
+    selectRowByKey(key, intent) {
+        const previous = this.engine.getSelectionSnapshot();
+        const selected = this.engine.selectRowByKey(key, intent);
+        const next = this.engine.getSelectionSnapshot();
+        if (selected && next !== previous) {
+            const index = next.rows.find(row => row.key === key)?.rowIndex
+                ?? previous.rows.find(row => row.key === key)?.rowIndex;
+            if (index !== undefined)
+                this.announceRowSelection(index, intent);
+        }
+        return selected;
+    }
     isRowSelected(rowIndex) {
         return this.engine.isRowSelected(rowIndex);
     }
@@ -1636,6 +1733,8 @@ export class DataGrid extends LitElement {
         }
     }
     applyHeaderFilter(columnKey) {
+        if (!this.getColumnCapabilities(columnKey).filterable)
+            return;
         const filter = this.getFilterDraft(columnKey);
         this.setFilter({
             ...filter,
@@ -1644,6 +1743,8 @@ export class DataGrid extends LitElement {
         this.closeHeaderMenu(true);
     }
     clearHeaderFilter(columnKey) {
+        if (!this.getColumnCapabilities(columnKey).filterable)
+            return;
         this.clearFilter(columnKey);
         this.closeHeaderMenu(true);
     }
@@ -1743,6 +1844,24 @@ export class DataGrid extends LitElement {
         this.columnDragPreview?.remove();
         this.columnDragPreview = null;
     }
+    finishColumnReorder(commit = true) {
+        const state = this.columnReorderState;
+        if (!state)
+            return;
+        this.columnReorderState = null;
+        window.removeEventListener('pointermove', this.handleColumnReorder);
+        window.removeEventListener('pointerup', this.stopColumnReorder);
+        window.removeEventListener('pointercancel', this.stopColumnReorder);
+        this.removeColumnDragPreview();
+        if (state.hasMoved)
+            this.stopBodyResize();
+        if (commit && state.hasMoved && state.sourceIndex !== state.targetIndex) {
+            this.moveColumn(state.columnKey, state.targetIndex);
+        }
+        else {
+            this.requestUpdate();
+        }
+    }
     getGridCellId(rowIndex, columnIndex) {
         return `${this.gridId}-cell-${rowIndex}-${columnIndex}`;
     }
@@ -1789,6 +1908,17 @@ export class DataGrid extends LitElement {
         window.addEventListener('pointermove', this.handleColumnResize);
         window.addEventListener('pointerup', this.stopColumnResize);
     }
+    finishColumnResize(commit = true) {
+        if (!this.columnResizeState) {
+            return;
+        }
+        this.columnResizeState = null;
+        if (commit)
+            this.commitColumnState('resize');
+        this.stopBodyResize();
+        window.removeEventListener('pointermove', this.handleColumnResize);
+        window.removeEventListener('pointerup', this.stopColumnResize);
+    }
     startRowResize(event, rowIndex) {
         event.preventDefault();
         event.stopPropagation();
@@ -2244,6 +2374,8 @@ export class DataGrid extends LitElement {
     `;
     }
     set data(value) {
+        if (this.engine.getConfig().queryMode === 'external')
+            return;
         this.clearQuickSearchDebounce();
         this.sourceRowCount = Array.isArray(value) ? value.length : 0;
         this.engine.setData(value ?? []);
@@ -2256,22 +2388,15 @@ export class DataGrid extends LitElement {
         this.selectRow(rowIndex, 'toggle');
     }
     getDisplayedSelectedRowCount() {
-        const rowCount = this.engine.getRowCount();
-        let selectedCount = 0;
-        for (let rowIndex = 0; rowIndex < rowCount; rowIndex += 1) {
-            if (this.engine.isRowSelected(rowIndex)) {
-                selectedCount += 1;
-            }
-        }
-        return selectedCount;
+        return this.engine.getSelectionSnapshot().rowIndexes.length;
     }
     areAllDisplayedRowsSelected() {
-        const rowCount = this.engine.getRowCount();
+        const rowCount = this.engine.getSelectableRowCount();
         return rowCount > 0 && this.getDisplayedSelectedRowCount() === rowCount;
     }
     hasPartiallySelectedDisplayedRows() {
         const selectedCount = this.getDisplayedSelectedRowCount();
-        return selectedCount > 0 && selectedCount < this.engine.getRowCount();
+        return selectedCount > 0 && selectedCount < this.engine.getSelectableRowCount();
     }
     handleSelectAllRows() {
         if (this.areAllDisplayedRowsSelected()) {
@@ -2280,7 +2405,80 @@ export class DataGrid extends LitElement {
         }
         else {
             this.engine.selectAllRows();
-            this.announceScreenReader(`All ${this.engine.getRowCount()} displayed rows selected.`);
+            this.announceAllRowsSelected();
+        }
+        this.requestUpdate();
+    }
+    get inferColumns() {
+        return this._inferColumns;
+    }
+    set inferColumns(value) {
+        if (this._inferColumns === value)
+            return;
+        this._inferColumns = value;
+        this.requestUpdate();
+    }
+    /** Reconcile an explicit schema, optionally switching its persistence namespace atomically. */
+    updateColumnSchema(value, applyOrder = false, storageKey = this._columnStateStorageKey) {
+        const columns = value.map(column => ({ ...column }));
+        const nextByKey = new Map(columns.map(column => [column.key, column]));
+        if (nextByKey.size !== columns.length)
+            throw new Error('Duplicate column schema keys.');
+        const previousByKey = new Map(this.sourceColumnDefs.map(column => [column.key, column]));
+        const activeCell = this.activeCell;
+        const activeColumnKey = activeCell
+            ? this.getVisibleColumns()[activeCell.columnIndex]?.key
+            : undefined;
+        const nextStorageKey = typeof storageKey === 'string' && storageKey.trim() ? storageKey : null;
+        const storageChanged = nextStorageKey !== this._columnStateStorageKey;
+        this.finishColumnResize(false);
+        this.finishColumnReorder(false);
+        if (storageChanged) {
+            // Install the target schema and defaults before restoring its namespace.
+            // Do not reconcile/persist the outgoing view, or carry its customization
+            // into an unsaved target. A namespace switch itself performs no writes.
+            this._columnStateStorageKey = nextStorageKey;
+            this.sourceColumnDefs = columns;
+            this.columnDefs = [...columns];
+            this.columnWidths.clear();
+            this.hiddenColumnKeys = new Set(columns.filter(column => column.hidden).map(column => column.key));
+            this.restorePersistedColumnState(false);
+        }
+        else {
+            for (const key of this.columnWidths.keys()) {
+                if (!nextByKey.has(key))
+                    this.columnWidths.delete(key);
+            }
+            for (const key of this.hiddenColumnKeys) {
+                if (!nextByKey.has(key))
+                    this.hiddenColumnKeys.delete(key);
+            }
+            for (const column of columns) {
+                const previous = previousByKey.get(column.key);
+                if (!previous || previous.width !== column.width)
+                    this.columnWidths.delete(column.key);
+                if (!previous || previous.hidden !== column.hidden) {
+                    if (column.hidden)
+                        this.hiddenColumnKeys.add(column.key);
+                    else
+                        this.hiddenColumnKeys.delete(column.key);
+                }
+            }
+            // Surviving columns keep user order; newly registered columns follow them.
+            // An explicit Order change reapplies the complete deterministic schema order.
+            const retained = this.columnDefs.filter(column => nextByKey.has(column.key))
+                .map(column => nextByKey.get(column.key));
+            const retainedKeys = new Set(retained.map(column => column.key));
+            this.columnDefs = applyOrder ? columns : [
+                ...retained, ...columns.filter(column => !retainedKeys.has(column.key))
+            ];
+            this.sourceColumnDefs = columns;
+            this.persistColumnState();
+        }
+        this.clearBestFitWidths();
+        if (activeCell) {
+            const columnIndex = this.getVisibleColumns().findIndex(column => column.key === activeColumnKey);
+            this.activeCell = columnIndex < 0 ? null : { ...activeCell, columnIndex };
         }
         this.requestUpdate();
     }
@@ -2333,6 +2531,12 @@ export class DataGrid extends LitElement {
     render() {
         const count = this.engine.getRowCount();
         const pagination = this.engine.getPagination();
+        const external = this.engine.getConfig().queryMode === 'external';
+        const externalState = external ? this.engine.getExternalState() : null;
+        const outOfRange = external && pagination.totalKnown && pagination.pageIndex > 0 && pagination.pageIndex >= pagination.pageCount;
+        const externalStatus = externalState?.loading ? 'Loading results.' : externalState?.error
+            ? externalState.error : outOfRange ? 'Requested page is out of range. Choose a previous page.'
+            : count === 0 ? (pagination.totalRows === 0 ? 'No results.' : 'No rows on this page.') : '';
         const pageSizeOptions = [25, 50, 100].includes(pagination.pageSize)
             ? [25, 50, 100]
             : [pagination.pageSize, 25, 50, 100].sort((left, right) => left - right);
@@ -2448,14 +2652,16 @@ export class DataGrid extends LitElement {
         return html `
             <div
         class="shell"
+        aria-busy=${external ? String(!!externalState?.loading) : nothing}
         style=${`--virtual-grid-template: ${gridTemplate}; --total-column-width: ${totalColumnWidth}px; --total-row-width: ${totalRowWidth}px; --row-header-width: ${rowHeaderWidth}px; --header-grid-template: ${headerGridTemplate}; --scrollbar-width: ${this.scrollbarWidth}px;`}
         @keydown=${this.handleShellKeyDown}
         >
         <p id=${`${this.gridId}-description`} class="screen-reader-only">${this.getScreenReaderDescription()}</p>
+        ${external && externalStatus ? html `<div class="external-status" role=${externalState?.error ? 'alert' : 'status'}>${externalStatus}</div>` : nothing}
         ${this.screenReaderAnnouncements
             ? html `<div class="screen-reader-only" role="status" aria-live="polite" aria-atomic="true">${this.screenReaderMessage}</div>`
             : ''}
-        ${this.quickSearchVisible
+        ${this.quickSearchVisible || external
             ? html `
               <div class="quick-search" role="search">
                 <input
@@ -2501,7 +2707,7 @@ export class DataGrid extends LitElement {
                         aria-label="Select all displayed rows"
                         .checked=${this.areAllDisplayedRowsSelected()}
                         .indeterminate=${this.hasPartiallySelectedDisplayedRows()}
-                        ?disabled=${this.engine.getRowCount() === 0}
+                        ?disabled=${this.engine.getSelectableRowCount() === 0}
                         @change=${() => this.handleSelectAllRows()}
                       />`
                 : html `<span>#</span>`}
@@ -2565,19 +2771,23 @@ export class DataGrid extends LitElement {
                                 ${this.quickSearchVisible ? 'Hide Quick Search' : 'Show Quick Search'}
                               </button>
                               <hr class="header-menu-divider" />
-                              <button type="button" @click=${() => this.handleSortAscending(column.key)}>
-                                Sort Asc
-                              </button>
-                              <button type="button" @click=${() => this.handleSortDescending(column.key)}>
-                                Sort Desc
-                              </button>
-                                                            <button type="button" @click=${() => this.handleClearSort()}>
-                                                              Clear Sort
-                                                            </button>
+                              ${column.sortable === false ? '' : html `
+                                <button type="button" @click=${() => this.handleSortAscending(column.key)}>
+                                  Sort Asc
+                                </button>
+                                <button type="button" @click=${() => this.handleSortDescending(column.key)}>
+                                  Sort Desc
+                                </button>
+                                <button type="button" @click=${() => this.handleClearSort(column.key)}>
+                                  Clear Sort
+                                </button>
+                              `}
                                                             <button type="button" @click=${(event) => this.toggleColumnChooser(event)}>
                                                               Columns
                                                             </button>
                               ${(() => {
+                    if (column.filterable === false)
+                        return '';
                     const draft = this.getFilterDraft(column.key);
                     const valueFree = this.isValueFreeFilter(draft.operator);
                     return html `
@@ -2692,7 +2902,7 @@ export class DataGrid extends LitElement {
             ? html `
               <div class="pagination" role="navigation" aria-label="Pagination">
                 <div class="pagination-summary">
-                  <span>${pagination.totalRows} rows</span>
+                  <span>${pagination.totalKnown === false ? 'Total unknown' : `${pagination.totalRows} rows`}</span>
                   <label>
                     Rows per page
                     <select
@@ -2708,7 +2918,7 @@ export class DataGrid extends LitElement {
                   </label>
                 </div>
                 <div class="pagination-navigation">
-                  <span>Page ${pagination.pageCount === 0 ? 0 : pagination.pageIndex + 1} of ${pagination.pageCount}</span>
+                  <span>${this.getPageLabel()}</span>
                   <button
                     type="button"
                     ?disabled=${pagination.pageIndex === 0}
@@ -2716,7 +2926,7 @@ export class DataGrid extends LitElement {
                   >Previous</button>
                   <button
                     type="button"
-                    ?disabled=${pagination.pageCount === 0 || pagination.pageIndex >= pagination.pageCount - 1}
+                    ?disabled=${pagination.totalKnown === false ? !pagination.hasMore : pagination.pageCount === 0 || pagination.pageIndex >= pagination.pageCount - 1}
                     @click=${() => this.setPage(pagination.pageIndex + 1)}
                   >Next</button>
                 </div>