@codeenvision/ui-webcomponents 1.0.0

package/dist/components/web-components/grid.js

@@ -0,0 +1,1332 @@
+import { defineComponentElement, } from "../../src/runtime/component-element.js";
+import { readDataAttr, shouldUseDomValue } from "./utils/hydration.js";
+import { computeVirtualRange } from "../../core/utils/virtualization.js";
+const DEFAULT_GRID_PROPS = {
+    columns: [],
+    rows: [],
+    page: 1,
+    pageSize: 10,
+    pageSizes: [10, 25, 50],
+    sortDirection: "asc",
+    searchTerm: "",
+    searchable: true,
+    sortable: true,
+    striped: true,
+    hoverable: true,
+    density: "comfortable",
+    theme: "light",
+    emptyLabel: "No rows matched your query",
+    loading: false,
+    loadingLabel: "Loading...",
+    error: false,
+    errorMessage: "Something went wrong",
+    searchPlaceholder: "Search rows",
+    showToolbar: true,
+    enableColumnFilters: false,
+    showColumnControls: false,
+    virtualized: false,
+    viewportHeight: 360,
+    rowHeight: 36,
+    overscan: 4,
+};
+const GRID_PROP_DEFINITIONS = [
+    { attribute: "columns", prop: "columns", type: "json" },
+    { attribute: "rows", prop: "rows", type: "json" },
+    { attribute: "page", prop: "page", type: "number" },
+    { attribute: "page-size", prop: "pageSize", type: "number" },
+    { attribute: "page-sizes", prop: "pageSizes", type: "json" },
+    { attribute: "sort-field", prop: "sortField" },
+    { attribute: "sort-direction", prop: "sortDirection" },
+    { attribute: "search-term", prop: "searchTerm" },
+    { attribute: "column-filters", prop: "columnFilters", type: "json" },
+    { attribute: "column-order", prop: "columnOrder", type: "json" },
+    { attribute: "searchable", prop: "searchable", type: "boolean" },
+    { attribute: "sortable", prop: "sortable", type: "boolean" },
+    { attribute: "striped", prop: "striped", type: "boolean" },
+    { attribute: "hoverable", prop: "hoverable", type: "boolean" },
+    { attribute: "density", prop: "density" },
+    { attribute: "theme", prop: "theme" },
+    { attribute: "empty-label", prop: "emptyLabel" },
+    { attribute: "loading", prop: "loading", type: "boolean" },
+    { attribute: "loading-label", prop: "loadingLabel" },
+    { attribute: "error", prop: "error", type: "boolean" },
+    { attribute: "error-message", prop: "errorMessage" },
+    { attribute: "search-placeholder", prop: "searchPlaceholder" },
+    { attribute: "show-toolbar", prop: "showToolbar", type: "boolean" },
+    { attribute: "enable-column-filters", prop: "enableColumnFilters", type: "boolean" },
+    { attribute: "show-column-controls", prop: "showColumnControls", type: "boolean" },
+    { attribute: "virtualized", prop: "virtualized", type: "boolean" },
+    { attribute: "viewport-height", prop: "viewportHeight", type: "number" },
+    { attribute: "row-height", prop: "rowHeight", type: "number" },
+    { attribute: "overscan", prop: "overscan", type: "number" },
+];
+const applyGridParts = (dom) => {
+    dom.container.setAttribute("data-ce-component", "grid");
+    dom.container.setAttribute("part", "base");
+    dom.toolbar.setAttribute("part", "toolbar");
+    dom.searchWrapper.setAttribute("part", "search");
+    dom.searchInput.setAttribute("part", "search-input");
+    dom.pageSizeWrapper.setAttribute("part", "page-size");
+    dom.pageSizeSelect.setAttribute("part", "page-size-select");
+    dom.columnControls.setAttribute("part", "column-controls");
+    dom.clearFiltersBtn.setAttribute("part", "clear-filters");
+    dom.tableWrapper.setAttribute("part", "table-wrapper");
+    dom.table.setAttribute("part", "table");
+    dom.thead.setAttribute("part", "thead");
+    dom.tbody.setAttribute("part", "tbody");
+    dom.empty.setAttribute("part", "empty");
+    dom.empty.setAttribute("data-ce-slot", "empty");
+    const emptyFallback = dom.container.getAttribute("data-empty-label") ?? dom.empty.textContent?.trim() ?? "";
+    if (emptyFallback.length > 0) {
+        dom.empty.setAttribute("data-ce-fallback", emptyFallback);
+    }
+    dom.loading.setAttribute("part", "loading");
+    dom.loading.setAttribute("data-ce-slot", "loading");
+    const loadingFallback = dom.container.getAttribute("data-loading-label") ?? dom.loading.textContent?.trim() ?? "";
+    if (loadingFallback.length > 0) {
+        dom.loading.setAttribute("data-ce-fallback", loadingFallback);
+    }
+    dom.error.setAttribute("part", "error");
+    dom.error.setAttribute("data-ce-slot", "error");
+    const errorFallback = dom.container.getAttribute("data-error-message") ?? dom.error.textContent?.trim() ?? "";
+    if (errorFallback.length > 0) {
+        dom.error.setAttribute("data-ce-fallback", errorFallback);
+    }
+    dom.pagination.setAttribute("part", "pagination");
+    dom.pageInfo.setAttribute("part", "page-info");
+    dom.prevButton.setAttribute("part", "page-button prev-button");
+    dom.nextButton.setAttribute("part", "page-button next-button");
+    dom.columnControls
+        .querySelectorAll(".ce-grid__column-controls-label")
+        .forEach((node) => node.setAttribute("part", "column-controls-label"));
+    dom.columnControls
+        .querySelectorAll(".ce-grid__column-toggle")
+        .forEach((node) => node.setAttribute("part", "column-toggle"));
+    dom.columnControls
+        .querySelectorAll(".ce-grid__column-toggle input[type='checkbox']")
+        .forEach((node) => node.setAttribute("part", "column-toggle-input"));
+    dom.columnControls
+        .querySelectorAll(".ce-grid__column-toggle span")
+        .forEach((node) => node.setAttribute("part", "column-toggle-label"));
+    dom.thead.querySelectorAll("tr").forEach((row) => {
+        if (row.querySelector(".ce-grid__filter-input")) {
+            row.setAttribute("part", "filter-row");
+        }
+        else {
+            row.setAttribute("part", "header-row");
+        }
+    });
+    dom.thead.querySelectorAll("th").forEach((node) => node.setAttribute("part", "header-cell"));
+    dom.thead
+        .querySelectorAll(".ce-grid__filter-input")
+        .forEach((node) => node.setAttribute("part", "filter-input"));
+    dom.tbody.querySelectorAll("tr").forEach((node) => node.setAttribute("part", "row"));
+    dom.tbody.querySelectorAll("td").forEach((node) => node.setAttribute("part", "cell"));
+};
+const gridComponent = {
+    mount({ target, props, on }) {
+        const host = target;
+        const { dom, hasExisting } = resolveDom(host);
+        let currentProps = { ...DEFAULT_GRID_PROPS, ...props };
+        if (hasExisting) {
+            const container = dom.container;
+            const columns = readDataAttr(container, "columns");
+            if (shouldUseDomValue(host, "columns", columns)) {
+                try {
+                    currentProps.columns = JSON.parse(columns ?? "[]");
+                }
+                catch {
+                    currentProps.columns = [];
+                }
+            }
+            const domColumns = readColumnsFromDom(dom.thead);
+            if (shouldUseDomValue(host, "columns", domColumns) && domColumns.length) {
+                currentProps.columns = domColumns;
+            }
+            const rows = readDataAttr(container, "rows");
+            if (shouldUseDomValue(host, "rows", rows)) {
+                try {
+                    currentProps.rows = JSON.parse(rows ?? "[]");
+                }
+                catch {
+                    currentProps.rows = [];
+                }
+            }
+            const domRows = readRowsFromDom(dom.tbody, currentProps.columns ?? []);
+            if (shouldUseDomValue(host, "rows", domRows) && domRows.length) {
+                currentProps.rows = domRows;
+            }
+            const columnFilters = readDataAttr(container, "column-filters");
+            if (shouldUseDomValue(host, "column-filters", columnFilters)) {
+                try {
+                    currentProps.columnFilters = JSON.parse(columnFilters ?? "{}");
+                }
+                catch {
+                    currentProps.columnFilters = {};
+                }
+            }
+            const columnOrder = readDataAttr(container, "column-order");
+            if (shouldUseDomValue(host, "column-order", columnOrder)) {
+                try {
+                    currentProps.columnOrder = JSON.parse(columnOrder ?? "[]");
+                }
+                catch {
+                    currentProps.columnOrder = [];
+                }
+            }
+            const page = readDataAttr(container, "page");
+            if (shouldUseDomValue(host, "page", page)) {
+                const parsed = page ? Number(page) : undefined;
+                if (Number.isFinite(parsed)) {
+                    currentProps.page = parsed;
+                }
+            }
+            const pageSize = readDataAttr(container, "page-size");
+            if (shouldUseDomValue(host, "page-size", pageSize)) {
+                const parsed = pageSize ? Number(pageSize) : undefined;
+                if (Number.isFinite(parsed)) {
+                    currentProps.pageSize = parsed;
+                }
+            }
+            const sortField = readDataAttr(container, "sort-field");
+            if (shouldUseDomValue(host, "sort-field", sortField)) {
+                currentProps.sortField = sortField ?? undefined;
+            }
+            const sortDirection = readDataAttr(container, "sort-direction");
+            if (shouldUseDomValue(host, "sort-direction", sortDirection)) {
+                currentProps.sortDirection = sortDirection;
+            }
+            const sortFromDom = readSortFromDom(dom.thead);
+            if (shouldUseDomValue(host, "sort-field", sortFromDom.sortField)) {
+                currentProps.sortField = sortFromDom.sortField;
+            }
+            if (shouldUseDomValue(host, "sort-direction", sortFromDom.sortDirection)) {
+                currentProps.sortDirection = sortFromDom.sortDirection;
+            }
+            const searchTerm = readDataAttr(container, "search-term");
+            if (shouldUseDomValue(host, "search-term", searchTerm)) {
+                currentProps.searchTerm = searchTerm ?? "";
+            }
+            const density = container.dataset.density;
+            if (shouldUseDomValue(host, "density", density)) {
+                currentProps.density = density;
+            }
+            const theme = container.dataset.theme;
+            if (shouldUseDomValue(host, "theme", theme)) {
+                currentProps.theme = theme;
+            }
+            const loading = readDataAttr(container, "loading");
+            if (shouldUseDomValue(host, "loading", loading)) {
+                currentProps.loading = loading === "true";
+            }
+            const loadingLabel = readDataAttr(container, "loading-label");
+            if (shouldUseDomValue(host, "loading-label", loadingLabel)) {
+                currentProps.loadingLabel = loadingLabel ?? DEFAULT_GRID_PROPS.loadingLabel;
+            }
+            const error = readDataAttr(container, "error");
+            if (shouldUseDomValue(host, "error", error)) {
+                currentProps.error = error === "true";
+            }
+            const errorMessage = readDataAttr(container, "error-message");
+            if (shouldUseDomValue(host, "error-message", errorMessage)) {
+                currentProps.errorMessage = errorMessage ?? DEFAULT_GRID_PROPS.errorMessage;
+            }
+            const virtualized = readDataAttr(container, "virtualized");
+            if (shouldUseDomValue(host, "virtualized", virtualized)) {
+                currentProps.virtualized = virtualized === "true";
+            }
+            const viewportHeight = readDataAttr(container, "viewport-height");
+            if (shouldUseDomValue(host, "viewport-height", viewportHeight)) {
+                const parsed = viewportHeight ? Number(viewportHeight) : undefined;
+                if (Number.isFinite(parsed)) {
+                    currentProps.viewportHeight = parsed;
+                }
+            }
+            const rowHeight = readDataAttr(container, "row-height");
+            if (shouldUseDomValue(host, "row-height", rowHeight)) {
+                const parsed = rowHeight ? Number(rowHeight) : undefined;
+                if (Number.isFinite(parsed)) {
+                    currentProps.rowHeight = parsed;
+                }
+            }
+            const overscan = readDataAttr(container, "overscan");
+            if (shouldUseDomValue(host, "overscan", overscan)) {
+                const parsed = overscan ? Number(overscan) : undefined;
+                if (Number.isFinite(parsed)) {
+                    currentProps.overscan = parsed;
+                }
+            }
+            if (shouldUseDomValue(host, "search-term", dom.searchInput.value)) {
+                currentProps.searchTerm = dom.searchInput.value;
+            }
+            if (shouldUseDomValue(host, "page-size", dom.pageSizeSelect.value)) {
+                const parsed = Number(dom.pageSizeSelect.value);
+                if (Number.isFinite(parsed)) {
+                    currentProps.pageSize = parsed;
+                }
+            }
+        }
+        let columns = normalizeColumns(currentProps.columns);
+        let visibleColumns = [];
+        let derivedRows = [];
+        let pageRows = [];
+        const state = {
+            page: normalizePage(currentProps.page),
+            pageSize: normalizePageSize(currentProps.pageSize),
+            sortField: currentProps.sortField,
+            sortDirection: normalizeSortDirection(currentProps.sortDirection),
+            searchTerm: currentProps.searchTerm ?? "",
+            columnFilters: { ...(currentProps.columnFilters ?? {}) },
+            columnOrder: Array.isArray(currentProps.columnOrder) ? [...currentProps.columnOrder] : [],
+        };
+        const notify = (type, row) => {
+            const detail = {
+                type,
+                row,
+                state: buildPublicState(state, derivedRows.length),
+            };
+            on?.change?.(detail);
+        };
+        const syncFromProps = (next) => {
+            if (typeof next.page === "number") {
+                state.page = normalizePage(next.page);
+            }
+            if (typeof next.pageSize === "number") {
+                state.pageSize = normalizePageSize(next.pageSize);
+            }
+            if (typeof next.sortField === "string" || next.sortField === null) {
+                state.sortField = next.sortField || undefined;
+            }
+            if (typeof next.sortDirection === "string") {
+                state.sortDirection = normalizeSortDirection(next.sortDirection);
+            }
+            if (typeof next.searchTerm === "string") {
+                state.searchTerm = next.searchTerm;
+            }
+            if (typeof next.columnFilters === "object" && next.columnFilters) {
+                state.columnFilters = { ...next.columnFilters };
+            }
+            if (Array.isArray(next.columnOrder)) {
+                state.columnOrder = [...next.columnOrder];
+            }
+        };
+        const applyProps = (fromHost = false) => {
+            columns = orderColumns(normalizeColumns(currentProps.columns), state.columnOrder);
+            if (fromHost) {
+                syncFromProps(currentProps);
+            }
+            const normalizedPageSize = ensurePageSizeOption(state.pageSize, currentProps.pageSizes);
+            state.pageSize = normalizedPageSize;
+            visibleColumns = columns.filter((col) => col.visible);
+            derivedRows = deriveRows(columns, currentProps.rows ?? [], state.searchTerm, Boolean(currentProps.searchable), state.columnFilters, Boolean(currentProps.enableColumnFilters));
+            const sorted = sortRows(derivedRows, visibleColumns, state.sortField, state.sortDirection, currentProps.sortable !== false);
+            const paginated = paginateRows(sorted, state.page, state.pageSize);
+            pageRows = paginated.rows;
+            state.page = paginated.page;
+            renderToolbar(dom, currentProps, state, columns);
+            renderHeader(dom, visibleColumns, currentProps, state);
+            if (currentProps.virtualized) {
+                dom.tableWrapper.style.maxHeight = `${currentProps.viewportHeight ?? DEFAULT_GRID_PROPS.viewportHeight}px`;
+                dom.tableWrapper.style.overflowY = "auto";
+                renderBodyVirtual(dom, visibleColumns, pageRows, currentProps);
+                if (!virtualScrollHandler) {
+                    virtualScrollHandler = () => renderBodyVirtual(dom, visibleColumns, pageRows, currentProps);
+                    dom.tableWrapper.addEventListener("scroll", virtualScrollHandler);
+                }
+            }
+            else {
+                dom.tableWrapper.style.removeProperty("max-height");
+                dom.tableWrapper.style.removeProperty("overflow-y");
+                if (virtualScrollHandler) {
+                    dom.tableWrapper.removeEventListener("scroll", virtualScrollHandler);
+                    virtualScrollHandler = undefined;
+                }
+                renderBody(dom, visibleColumns, pageRows);
+            }
+            renderEmpty(dom, pageRows.length === 0, currentProps.emptyLabel ?? DEFAULT_GRID_PROPS.emptyLabel);
+            renderState(dom, currentProps, pageRows.length === 0);
+            renderPagination(dom, currentProps, state, derivedRows.length);
+            applyGridParts(dom);
+            dom.container.className = buildGridClassNames(currentProps);
+            dom.container.dataset.density = currentProps.density ?? DEFAULT_GRID_PROPS.density ?? "comfortable";
+            dom.container.dataset.theme = currentProps.theme ?? "light";
+            dom.table.dataset.rowsTotal = derivedRows.length.toString();
+        };
+        const handleSearch = (term) => {
+            if (state.searchTerm === term) {
+                return;
+            }
+            state.searchTerm = term;
+            state.page = 1;
+            applyProps();
+            notify("search");
+        };
+        const handleHeaderClick = (field, sortable) => {
+            if (!sortable) {
+                return;
+            }
+            if (state.sortField === field) {
+                state.sortDirection = state.sortDirection === "asc" ? "desc" : "asc";
+            }
+            else {
+                state.sortField = field;
+                state.sortDirection = "asc";
+            }
+            applyProps();
+            notify("sort");
+        };
+        const handlePageChange = (delta) => {
+            const totalPages = Math.max(1, Math.ceil(derivedRows.length / state.pageSize));
+            const nextPage = clampValue(state.page + delta, 1, totalPages);
+            if (nextPage === state.page) {
+                return;
+            }
+            state.page = nextPage;
+            applyProps();
+            notify("page");
+        };
+        const handlePageSizeChange = (size) => {
+            if (size === state.pageSize) {
+                return;
+            }
+            state.pageSize = size;
+            state.page = 1;
+            applyProps();
+            notify("pageSize");
+        };
+        const handleRowClick = (rowIndex) => {
+            const row = pageRows[rowIndex];
+            if (!row) {
+                return;
+            }
+            notify("row", row.data);
+        };
+        const handleFilterChange = (field, value) => {
+            state.columnFilters = { ...state.columnFilters, [field]: value };
+            applyProps();
+            notify("filters");
+        };
+        const handleClearFilters = () => {
+            state.columnFilters = {};
+            applyProps();
+            notify("filters");
+        };
+        const handleColumnVisibility = (field, visible) => {
+            const next = (currentProps.columns ?? []).map((col) => col && col.field === field ? { ...col, visible } : col);
+            currentProps = { ...currentProps, columns: next };
+            applyProps();
+            notify("columns");
+        };
+        const reorderColumns = (sourceField, targetField) => {
+            if (!sourceField || !targetField || sourceField === targetField) {
+                return;
+            }
+            const currentOrder = state.columnOrder.length ? [...state.columnOrder] : columns.map((col) => col.field);
+            const filtered = currentOrder.filter((field) => columns.some((col) => col.field === field));
+            const withoutSource = filtered.filter((field) => field !== sourceField);
+            const targetIndex = withoutSource.indexOf(targetField);
+            if (targetIndex === -1) {
+                return;
+            }
+            withoutSource.splice(targetIndex, 0, sourceField);
+            state.columnOrder = withoutSource;
+            applyProps();
+            notify("columns");
+        };
+        let dragField = null;
+        let virtualScrollHandler;
+        dom.searchInput.addEventListener("input", (event) => {
+            const value = event.target.value;
+            handleSearch(value);
+        });
+        dom.pageSizeSelect.addEventListener("change", (event) => {
+            const value = Number(event.target.value);
+            handlePageSizeChange(normalizePageSize(value));
+        });
+        dom.prevButton.addEventListener("click", () => handlePageChange(-1));
+        dom.nextButton.addEventListener("click", () => handlePageChange(1));
+        dom.clearFiltersBtn.addEventListener("click", () => handleClearFilters());
+        dom.columnControls.addEventListener("change", (event) => {
+            const target = event.target;
+            if (target?.type !== "checkbox") {
+                return;
+            }
+            const field = target.dataset.field;
+            if (!field) {
+                return;
+            }
+            handleColumnVisibility(field, target.checked);
+        });
+        dom.thead.addEventListener("click", (event) => {
+            const target = event.target.closest("th[data-field]");
+            if (!target) {
+                return;
+            }
+            const field = target.dataset.field;
+            if (!field) {
+                return;
+            }
+            const column = columns.find((col) => col.field === field);
+            handleHeaderClick(field, Boolean(column?.sortable && currentProps.sortable !== false));
+        });
+        dom.thead.addEventListener("input", (event) => {
+            const target = event.target;
+            if (!target.classList.contains("ce-grid__filter-input")) {
+                return;
+            }
+            const field = target.dataset.field;
+            if (!field) {
+                return;
+            }
+            handleFilterChange(field, target.value);
+        });
+        dom.thead.addEventListener("dragstart", (event) => {
+            const target = event.target.closest("th[data-field]");
+            if (!target) {
+                return;
+            }
+            dragField = target.dataset.field ?? null;
+            if (dragField && event.dataTransfer) {
+                event.dataTransfer.effectAllowed = "move";
+                event.dataTransfer.setData("text/plain", dragField);
+            }
+        });
+        dom.thead.addEventListener("dragover", (event) => {
+            if (dragField) {
+                event.preventDefault();
+                event.dataTransfer.dropEffect = "move";
+            }
+        });
+        dom.thead.addEventListener("drop", (event) => {
+            if (!dragField) {
+                return;
+            }
+            const target = event.target.closest("th[data-field]");
+            if (!target) {
+                dragField = null;
+                return;
+            }
+            const targetField = target.dataset.field;
+            reorderColumns(dragField, targetField ?? "");
+            dragField = null;
+        });
+        dom.tbody.addEventListener("click", (event) => {
+            const target = event.target.closest("tr[data-row-index]");
+            if (!target) {
+                return;
+            }
+            const index = Number(target.dataset.rowIndex);
+            if (Number.isNaN(index)) {
+                return;
+            }
+            handleRowClick(index);
+        });
+        dom.tbody.addEventListener("focusin", (event) => {
+            const target = event.target.closest("tr[data-row-index]");
+            if (!target) {
+                return;
+            }
+            setRovingRowIndex(dom.tbody, target);
+        });
+        dom.tbody.addEventListener("keydown", (event) => {
+            const target = event.target.closest("tr[data-row-index]");
+            if (!target) {
+                return;
+            }
+            const rowIndex = Number(target.dataset.rowIndex ?? "-1");
+            if (Number.isNaN(rowIndex) || rowIndex < 0) {
+                return;
+            }
+            if (currentProps.virtualized) {
+                if (event.key === "ArrowDown") {
+                    event.preventDefault();
+                    focusVirtualRow(dom, currentProps, visibleColumns, pageRows, rowIndex + 1);
+                }
+                else if (event.key === "ArrowUp") {
+                    event.preventDefault();
+                    focusVirtualRow(dom, currentProps, visibleColumns, pageRows, rowIndex - 1);
+                }
+                else if (event.key === "Home") {
+                    event.preventDefault();
+                    focusVirtualRow(dom, currentProps, visibleColumns, pageRows, 0);
+                }
+                else if (event.key === "End") {
+                    event.preventDefault();
+                    focusVirtualRow(dom, currentProps, visibleColumns, pageRows, pageRows.length - 1);
+                }
+                else if (event.key === "Enter" || event.key === " ") {
+                    event.preventDefault();
+                    target.click();
+                }
+                return;
+            }
+            const rows = Array.from(dom.tbody.querySelectorAll("tr[data-row-index]"));
+            const index = rows.indexOf(target);
+            if (event.key === "ArrowDown") {
+                event.preventDefault();
+                rows[index + 1]?.focus();
+            }
+            else if (event.key === "ArrowUp") {
+                event.preventDefault();
+                rows[index - 1]?.focus();
+            }
+            else if (event.key === "Home") {
+                event.preventDefault();
+                rows[0]?.focus();
+            }
+            else if (event.key === "End") {
+                event.preventDefault();
+                rows[rows.length - 1]?.focus();
+            }
+            else if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                target.click();
+            }
+        });
+        applyProps(true);
+        return {
+            destroy() {
+                dom.searchInput.removeEventListener("input", () => undefined);
+                dom.pageSizeSelect.removeEventListener("change", () => undefined);
+                if (virtualScrollHandler) {
+                    dom.tableWrapper.removeEventListener("scroll", virtualScrollHandler);
+                    virtualScrollHandler = undefined;
+                }
+                if (!hasExisting) {
+                    host.innerHTML = "";
+                }
+            },
+            updateProps(partial) {
+                currentProps = { ...currentProps, ...partial };
+                applyProps(true);
+            },
+        };
+    },
+    renderToString(props) {
+        const merged = { ...DEFAULT_GRID_PROPS, ...props };
+        const orderedColumns = orderColumns(normalizeColumns(merged.columns), merged.columnOrder ?? []);
+        const visibleColumns = orderedColumns.filter((col) => col.visible);
+        const rows = deriveRows(orderedColumns, merged.rows ?? [], merged.searchTerm ?? "", Boolean(merged.searchable), merged.columnFilters ?? {}, Boolean(merged.enableColumnFilters));
+        const sorted = sortRows(rows, visibleColumns, merged.sortField, normalizeSortDirection(merged.sortDirection), merged.sortable !== false);
+        const pageSize = normalizePageSize(merged.pageSize);
+        const page = clampValue(normalizePage(merged.page), 1, Math.max(1, Math.ceil(sorted.length / pageSize)));
+        const slice = paginateRows(sorted, page, pageSize);
+        const bodyRows = slice.rows
+            .map((row, rowIndex) => `<tr data-row-index="${rowIndex}" part="row" tabindex="${rowIndex === 0 ? "0" : "-1"}">
+${visibleColumns
+            .map((col) => `  <td data-label="${escapeHtml(col.header)}" part="cell">${escapeHtml(row.values[col.field] ?? "")}</td>`)
+            .join("\n")}
+</tr>`)
+            .join("\n");
+        const header = visibleColumns
+            .map((col) => {
+            const sortable = Boolean(col.sortable && merged.sortable !== false);
+            const classes = ["ce-grid__header-cell"];
+            if (sortable) {
+                classes.push("sortable");
+                if (merged.sortField === col.field) {
+                    classes.push(merged.sortDirection === "desc" ? "sorted-desc" : "sorted-asc");
+                }
+            }
+            return `<th class="${classes.join(" ")}" data-field="${escapeHtml(col.field)}" draggable="true" part="header-cell">${escapeHtml(col.header)}</th>`;
+        })
+            .join("\n");
+        const filterRow = merged.enableColumnFilters === true
+            ? `<tr part="filter-row">
+${visibleColumns
+                .map((col) => `  <th part="header-cell">${col.filterable !== false ? `<input type="search" class="ce-grid__filter-input" part="filter-input" value="${escapeHtml(merged.columnFilters?.[col.field] ?? "")}" data-field="${escapeHtml(col.field)}" placeholder="Filter ${escapeHtml(col.header)}">` : ""}</th>`)
+                .join("\n")}
+        </tr>`
+            : "";
+        const dataColumns = escapeHtml(JSON.stringify(merged.columns ?? []));
+        const dataRows = escapeHtml(JSON.stringify(merged.rows ?? []));
+        const dataFilters = escapeHtml(JSON.stringify(merged.columnFilters ?? {}));
+        const dataOrder = escapeHtml(JSON.stringify(merged.columnOrder ?? []));
+        const totalPages = Math.max(1, Math.ceil(sorted.length / pageSize));
+        const showToolbar = merged.showToolbar !== false && (merged.searchable !== false || showPageSizeSelect(merged));
+        const showSearch = merged.searchable !== false;
+        const showPageSize = showPageSizeSelect(merged);
+        const showColumns = merged.showColumnControls !== false && orderedColumns.length > 0;
+        const options = ensurePageSizes(merged.pageSizes);
+        const pageSizeOptions = options
+            .map((size) => `<option value="${size}"${size === pageSize ? " selected" : ""}>${size} / page</option>`)
+            .join("");
+        const searchPlaceholder = escapeHtml(merged.searchPlaceholder ?? DEFAULT_GRID_PROPS.searchPlaceholder ?? "Search rows");
+        const searchValue = escapeHtml(merged.searchTerm ?? "");
+        const toolbar = `<div class="ce-grid__toolbar" part="toolbar"${showToolbar ? "" : " hidden"}><div class="ce-grid__search" part="search"${showSearch ? "" : " hidden"}><input type="search" class="ce-grid__search-input" part="search-input" placeholder="${searchPlaceholder}" value="${searchValue}" /></div><label class="ce-grid__page-size" part="page-size"${showPageSize ? "" : " hidden"}><select class="ce-grid__page-size-select" part="page-size-select">${pageSizeOptions}</select></label><div class="ce-grid__column-controls" part="column-controls"${showColumns ? "" : " hidden"}>${showColumns ? renderColumnControls(orderedColumns) : ""}</div><button type="button" class="ce-grid__clear-filters" part="clear-filters"${Object.values(merged.columnFilters ?? {}).some((value) => (value ?? "").toString().trim().length > 0)
+            ? ""
+            : " hidden"}>Clear filters</button></div>`;
+        const emptyRow = `        <tr part="row"><td colspan="${visibleColumns.length}" part="cell">${escapeHtml(merged.emptyLabel ?? DEFAULT_GRID_PROPS.emptyLabel)}</td></tr>`;
+        const empty = `<p class="ce-grid__empty" part="empty" data-ce-slot="empty" data-ce-fallback="${escapeHtml(merged.emptyLabel ?? DEFAULT_GRID_PROPS.emptyLabel)}"${bodyRows ? " hidden" : ""}>${escapeHtml(merged.emptyLabel ?? DEFAULT_GRID_PROPS.emptyLabel)}</p>`;
+        const loadingLabel = escapeHtml(merged.loadingLabel ?? DEFAULT_GRID_PROPS.loadingLabel ?? "Loading...");
+        const errorLabel = escapeHtml(merged.errorMessage ?? DEFAULT_GRID_PROPS.errorMessage ?? "Something went wrong");
+        const loading = `<p class="ce-grid__loading" part="loading" data-ce-slot="loading" data-ce-fallback="${loadingLabel}"${merged.loading ? "" : " hidden"}>${loadingLabel}</p>`;
+        const error = `<p class="ce-grid__error" part="error" data-ce-slot="error" data-ce-fallback="${errorLabel}"${merged.error ? "" : " hidden"}>${errorLabel}</p>`;
+        const paginationHidden = merged.loading || merged.error || totalPages <= 1;
+        const pagination = `<div class="ce-grid__pagination" part="pagination"${paginationHidden ? " hidden" : ""}><button type="button" class="ce-grid__page-btn" part="page-button prev-button"${page <= 1 ? " disabled" : ""}>Previous</button><span class="ce-grid__page-info" part="page-info">Page ${page} of ${totalPages}</span><button type="button" class="ce-grid__page-btn" part="page-button next-button"${page >= totalPages ? " disabled" : ""}>Next</button></div>`;
+        const state = merged.loading ? "loading" : merged.error ? "error" : bodyRows ? "ready" : "empty";
+        return `<div class="${buildGridClassNames(merged)}" data-ce-component="grid" part="base" data-state="${state}" data-density="${merged.density ?? "comfortable"}" data-theme="${merged.theme ?? "light"}" data-columns="${dataColumns}" data-rows="${dataRows}" data-column-filters="${dataFilters}" data-column-order="${dataOrder}" data-page="${page}" data-page-size="${pageSize}" data-sort-field="${merged.sortField ?? ""}" data-sort-direction="${normalizeSortDirection(merged.sortDirection)}" data-search-term="${escapeHtml(merged.searchTerm ?? "")}" data-loading="${String(merged.loading === true)}" data-loading-label="${loadingLabel}" data-error="${String(merged.error === true)}" data-error-message="${errorLabel}" data-virtualized="${String(merged.virtualized === true)}" data-viewport-height="${String(merged.viewportHeight ?? DEFAULT_GRID_PROPS.viewportHeight)}" data-row-height="${String(merged.rowHeight ?? DEFAULT_GRID_PROPS.rowHeight)}" data-overscan="${String(merged.overscan ?? DEFAULT_GRID_PROPS.overscan)}">
+  ${toolbar}
+  <div class="ce-grid__table-wrapper" part="table-wrapper"${merged.loading || merged.error ? " hidden" : ""}>
+    <table class="ce-grid__table" part="table">
+      <thead part="thead">
+        <tr part="header-row">
+${header}
+        </tr>
+${filterRow}
+      </thead>
+      <tbody part="tbody">
+${bodyRows || emptyRow}
+      </tbody>
+    </table>
+  </div>
+  ${empty}
+  ${loading}
+  ${error}
+  ${pagination}
+</div>`;
+    },
+};
+export function registerGridElement() {
+    return defineComponentElement({
+        tag: "ce-grid",
+        component: gridComponent,
+        props: GRID_PROP_DEFINITIONS,
+        defaultProps: DEFAULT_GRID_PROPS,
+        events: ["change"],
+        shadow: false,
+        preserveLightDom: true,
+    });
+}
+function resolveDom(host) {
+    const existingContainer = host.querySelector(".ce-grid");
+    if (existingContainer) {
+        return { dom: hydrateDom(host, existingContainer), hasExisting: true };
+    }
+    return { dom: createDom(host), hasExisting: false };
+}
+function hydrateDom(host, container) {
+    container.classList.add("ce-grid");
+    const toolbar = ensureElement(container, ".ce-grid__toolbar", "div", "ce-grid__toolbar", "top");
+    const searchWrapper = ensureElement(toolbar, ".ce-grid__search", "div", "ce-grid__search");
+    const searchInput = searchWrapper.querySelector(".ce-grid__search-input") ??
+        createInput(searchWrapper, "search", "ce-grid__search-input");
+    const pageSizeWrapper = toolbar.querySelector(".ce-grid__page-size") ?? createLabel(toolbar, "ce-grid__page-size");
+    const pageSizeSelect = pageSizeWrapper.querySelector(".ce-grid__page-size-select") ??
+        createSelect(pageSizeWrapper, "ce-grid__page-size-select");
+    const columnControls = ensureElement(toolbar, ".ce-grid__column-controls", "div", "ce-grid__column-controls");
+    const clearFiltersBtn = toolbar.querySelector(".ce-grid__clear-filters") ??
+        createButton(toolbar, "ce-grid__clear-filters", "Clear filters");
+    const tableWrapper = ensureElement(container, ".ce-grid__table-wrapper", "div", "ce-grid__table-wrapper");
+    const table = tableWrapper.querySelector(".ce-grid__table") ?? createTable(tableWrapper);
+    const thead = table.querySelector("thead") ?? table.appendChild(document.createElement("thead"));
+    const tbody = table.querySelector("tbody") ?? table.appendChild(document.createElement("tbody"));
+    const empty = ensureElement(container, ".ce-grid__empty", "p", "ce-grid__empty");
+    const loading = ensureElement(container, ".ce-grid__loading", "p", "ce-grid__loading");
+    const error = ensureElement(container, ".ce-grid__error", "p", "ce-grid__error");
+    const pagination = ensureElement(container, ".ce-grid__pagination", "div", "ce-grid__pagination");
+    const pageButtons = pagination.querySelectorAll(".ce-grid__page-btn");
+    const prevButton = pageButtons[0] ?? createButton(pagination, "ce-grid__page-btn", "Previous");
+    const pageInfo = pagination.querySelector(".ce-grid__page-info") ?? createSpan(pagination, "ce-grid__page-info");
+    const nextButton = pageButtons[1] ?? createButton(pagination, "ce-grid__page-btn", "Next");
+    if (container.parentElement !== host) {
+        host.appendChild(container);
+    }
+    return {
+        container,
+        toolbar,
+        searchWrapper,
+        searchInput,
+        pageSizeWrapper,
+        pageSizeSelect,
+        columnControls,
+        clearFiltersBtn,
+        tableWrapper,
+        table,
+        thead,
+        tbody,
+        empty,
+        loading,
+        error,
+        pagination,
+        pageInfo,
+        prevButton,
+        nextButton,
+    };
+}
+function ensureElement(root, selector, tag, className, position = "bottom") {
+    const existing = root.querySelector(selector);
+    if (existing) {
+        return existing;
+    }
+    const created = document.createElement(tag);
+    created.className = className;
+    if (position === "top") {
+        root.prepend(created);
+    }
+    else {
+        root.appendChild(created);
+    }
+    return created;
+}
+function createInput(parent, type, className) {
+    const input = document.createElement("input");
+    input.type = type;
+    input.className = className;
+    parent.appendChild(input);
+    return input;
+}
+function createSelect(parent, className) {
+    const select = document.createElement("select");
+    select.className = className;
+    parent.appendChild(select);
+    return select;
+}
+function createLabel(parent, className) {
+    const label = document.createElement("label");
+    label.className = className;
+    parent.appendChild(label);
+    return label;
+}
+function createButton(parent, className, text) {
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = className;
+    button.textContent = text;
+    parent.appendChild(button);
+    return button;
+}
+function createSpan(parent, className) {
+    const span = document.createElement("span");
+    span.className = className;
+    parent.appendChild(span);
+    return span;
+}
+function createTable(parent) {
+    const table = document.createElement("table");
+    table.className = "ce-grid__table";
+    parent.appendChild(table);
+    return table;
+}
+function createDom(host) {
+    const container = document.createElement("div");
+    container.className = "ce-grid";
+    const toolbar = document.createElement("div");
+    toolbar.className = "ce-grid__toolbar";
+    const searchWrapper = document.createElement("div");
+    searchWrapper.className = "ce-grid__search";
+    const searchInput = document.createElement("input");
+    searchInput.type = "search";
+    searchInput.className = "ce-grid__search-input";
+    searchInput.placeholder = DEFAULT_GRID_PROPS.searchPlaceholder ?? "Search";
+    searchWrapper.appendChild(searchInput);
+    const pageSizeWrapper = document.createElement("label");
+    pageSizeWrapper.className = "ce-grid__page-size";
+    const pageSizeSelect = document.createElement("select");
+    pageSizeSelect.className = "ce-grid__page-size-select";
+    pageSizeWrapper.append(pageSizeSelect);
+    const columnControls = document.createElement("div");
+    columnControls.className = "ce-grid__column-controls";
+    const clearFiltersBtn = document.createElement("button");
+    clearFiltersBtn.type = "button";
+    clearFiltersBtn.className = "ce-grid__clear-filters";
+    clearFiltersBtn.textContent = "Clear filters";
+    clearFiltersBtn.hidden = true;
+    toolbar.append(searchWrapper, pageSizeWrapper, columnControls, clearFiltersBtn);
+    const tableWrapper = document.createElement("div");
+    tableWrapper.className = "ce-grid__table-wrapper";
+    const table = document.createElement("table");
+    table.className = "ce-grid__table";
+    const thead = document.createElement("thead");
+    const tbody = document.createElement("tbody");
+    table.append(thead, tbody);
+    tableWrapper.appendChild(table);
+    const empty = document.createElement("p");
+    empty.className = "ce-grid__empty";
+    empty.hidden = true;
+    const loading = document.createElement("p");
+    loading.className = "ce-grid__loading";
+    loading.hidden = true;
+    loading.setAttribute("role", "status");
+    const error = document.createElement("p");
+    error.className = "ce-grid__error";
+    error.hidden = true;
+    error.setAttribute("role", "alert");
+    const pagination = document.createElement("div");
+    pagination.className = "ce-grid__pagination";
+    const prevButton = document.createElement("button");
+    prevButton.type = "button";
+    prevButton.className = "ce-grid__page-btn";
+    prevButton.textContent = "Previous";
+    const pageInfo = document.createElement("span");
+    pageInfo.className = "ce-grid__page-info";
+    const nextButton = document.createElement("button");
+    nextButton.type = "button";
+    nextButton.className = "ce-grid__page-btn";
+    nextButton.textContent = "Next";
+    pagination.append(prevButton, pageInfo, nextButton);
+    container.append(toolbar, tableWrapper, empty, loading, error, pagination);
+    host.append(container);
+    return {
+        container,
+        toolbar,
+        searchWrapper,
+        searchInput,
+        pageSizeWrapper,
+        pageSizeSelect,
+        columnControls,
+        clearFiltersBtn,
+        tableWrapper,
+        table,
+        thead,
+        tbody,
+        empty,
+        loading,
+        error,
+        pagination,
+        pageInfo,
+        prevButton,
+        nextButton,
+    };
+}
+function normalizeColumns(columns) {
+    if (!Array.isArray(columns)) {
+        return [];
+    }
+    return columns
+        .filter((column) => Boolean(column && column.field && column.header))
+        .map((column) => ({
+        ...column,
+        searchable: column.searchable !== false,
+        sortable: column.sortable !== false,
+        filterable: column.filterable !== false,
+        visible: column.visible !== false,
+        align: column.align ?? "start",
+        formatter: column.formatter ?? "text",
+    }));
+}
+function orderColumns(columns, order) {
+    if (!order || order.length === 0) {
+        return columns;
+    }
+    const rank = new Map(order.map((field, index) => [field, index]));
+    return [...columns].sort((a, b) => {
+        const ai = rank.has(a.field) ? rank.get(a.field) : Number.MAX_SAFE_INTEGER;
+        const bi = rank.has(b.field) ? rank.get(b.field) : Number.MAX_SAFE_INTEGER;
+        if (ai === bi) {
+            return a.header.localeCompare(b.header);
+        }
+        return ai - bi;
+    });
+}
+function deriveRows(columns, rows, searchTerm, searchable, columnFilters, enableColumnFilters) {
+    let normalized = (rows ?? []).map((row) => ({
+        data: row,
+        values: columns.reduce((acc, column) => {
+            const value = row[column.field];
+            acc[column.field] = formatCell(value, column.formatter);
+            return acc;
+        }, {}),
+    }));
+    if (!searchable || !searchTerm) {
+        // continue to column filters
+    }
+    else {
+        const needle = searchTerm.trim().toLowerCase();
+        if (needle) {
+            normalized = normalized.filter((row) => columns.some((column) => column.searchable !== false && (row.values[column.field] ?? "").toLowerCase().includes(needle)));
+        }
+    }
+    if (enableColumnFilters && columnFilters && Object.keys(columnFilters).length > 0) {
+        const filters = Object.entries(columnFilters)
+            .filter(([, value]) => value != null && String(value).trim().length > 0)
+            .map(([field, value]) => [field, String(value).toLowerCase()]);
+        if (filters.length === 0) {
+            return normalized;
+        }
+        return normalized.filter((row) => filters.every(([field, needle]) => (row.values[field] ?? "").toLowerCase().includes(needle)));
+    }
+    return normalized;
+}
+function sortRows(rows, columns, sortField, sortDirection, sortable) {
+    if (!sortable || !sortField) {
+        return rows;
+    }
+    const column = columns.find((col) => col.field === sortField);
+    if (!column || column.sortable === false) {
+        return rows;
+    }
+    const direction = sortDirection === "desc" ? -1 : 1;
+    return [...rows].sort((a, b) => {
+        const left = a.data[sortField];
+        const right = b.data[sortField];
+        return compareValues(left, right, column.formatter) * direction;
+    });
+}
+function paginateRows(rows, page, pageSize) {
+    const safePageSize = Math.max(1, pageSize);
+    const totalPages = Math.max(1, Math.ceil(rows.length / safePageSize));
+    const safePage = clampValue(page, 1, totalPages);
+    const start = (safePage - 1) * safePageSize;
+    return {
+        rows: rows.slice(start, start + safePageSize),
+        page: safePage,
+    };
+}
+function renderToolbar(dom, props, state, columns) {
+    const showToolbar = props.showToolbar !== false && (props.searchable !== false || showPageSizeSelect(props));
+    dom.toolbar.toggleAttribute("hidden", !showToolbar);
+    const showSearch = props.searchable !== false;
+    dom.searchWrapper.toggleAttribute("hidden", !showSearch);
+    dom.searchInput.value = state.searchTerm;
+    dom.searchInput.placeholder = props.searchPlaceholder ?? DEFAULT_GRID_PROPS.searchPlaceholder ?? "Search";
+    const showPageSize = showPageSizeSelect(props);
+    dom.pageSizeWrapper.toggleAttribute("hidden", !showPageSize);
+    if (showPageSize) {
+        const options = ensurePageSizes(props.pageSizes);
+        dom.pageSizeSelect.innerHTML = "";
+        options.forEach((size) => {
+            const option = document.createElement("option");
+            option.value = size.toString();
+            option.textContent = `${size} / page`;
+            option.selected = size === state.pageSize;
+            dom.pageSizeSelect.appendChild(option);
+        });
+    }
+    const hasFilters = Object.values(state.columnFilters ?? {}).some((value) => (value ?? "").toString().trim().length > 0);
+    dom.clearFiltersBtn.hidden = !hasFilters;
+    const showColumns = props.showColumnControls !== false && columns.length > 0;
+    dom.columnControls.toggleAttribute("hidden", !showColumns);
+    if (showColumns) {
+        dom.columnControls.innerHTML = "";
+        const label = document.createElement("span");
+        label.textContent = "Columns:";
+        label.className = "ce-grid__column-controls-label";
+        dom.columnControls.appendChild(label);
+        columns.forEach((column) => {
+            const wrapper = document.createElement("label");
+            wrapper.className = "ce-grid__column-toggle";
+            const checkbox = document.createElement("input");
+            checkbox.type = "checkbox";
+            checkbox.checked = column.visible;
+            checkbox.dataset.field = column.field;
+            const text = document.createElement("span");
+            text.textContent = column.header;
+            wrapper.append(checkbox, text);
+            dom.columnControls.appendChild(wrapper);
+        });
+    }
+}
+function renderHeader(dom, columns, props, state) {
+    const headerRow = document.createElement("tr");
+    columns.forEach((column) => {
+        const th = document.createElement("th");
+        th.textContent = column.header;
+        th.dataset.field = column.field;
+        th.className = "ce-grid__header-cell";
+        th.draggable = true;
+        if (column.width) {
+            th.style.width = column.width;
+        }
+        const sortable = column.sortable !== false && props.sortable !== false;
+        th.classList.toggle("sortable", sortable);
+        if (sortable && state.sortField === column.field) {
+            th.classList.add(state.sortDirection === "desc" ? "sorted-desc" : "sorted-asc");
+        }
+        headerRow.appendChild(th);
+    });
+    const filterRow = document.createElement("tr");
+    const showFilters = props.enableColumnFilters === true;
+    columns.forEach((column) => {
+        const th = document.createElement("th");
+        if (showFilters && column.filterable !== false) {
+            const input = document.createElement("input");
+            input.type = "search";
+            input.className = "ce-grid__filter-input";
+            input.placeholder = `Filter ${column.header}`;
+            input.value = state.columnFilters[column.field] ?? "";
+            input.dataset.field = column.field;
+            th.appendChild(input);
+        }
+        filterRow.appendChild(th);
+    });
+    dom.thead.innerHTML = "";
+    dom.thead.appendChild(headerRow);
+    if (showFilters) {
+        dom.thead.appendChild(filterRow);
+    }
+}
+function renderBody(dom, columns, rows) {
+    dom.tbody.innerHTML = "";
+    rows.forEach((row, rowIndex) => {
+        const tr = document.createElement("tr");
+        tr.dataset.rowIndex = rowIndex.toString();
+        tr.tabIndex = rowIndex === 0 ? 0 : -1;
+        columns.forEach((column) => {
+            const td = document.createElement("td");
+            td.dataset.label = column.header;
+            td.textContent = row.values[column.field] ?? "";
+            if (column.align !== "start") {
+                td.dataset.align = column.align;
+            }
+            tr.appendChild(td);
+        });
+        dom.tbody.appendChild(tr);
+    });
+}
+function renderBodyVirtual(dom, columns, rows, props) {
+    const rowHeight = props.rowHeight ?? DEFAULT_GRID_PROPS.rowHeight ?? 36;
+    const viewportHeight = dom.tableWrapper.clientHeight || props.viewportHeight || DEFAULT_GRID_PROPS.viewportHeight || 360;
+    const range = computeVirtualRange({
+        itemCount: rows.length,
+        itemHeight: rowHeight,
+        viewportHeight,
+        scrollTop: dom.tableWrapper.scrollTop,
+        overscan: props.overscan ?? DEFAULT_GRID_PROPS.overscan ?? 4,
+    });
+    dom.tbody.innerHTML = "";
+    if (!rows.length) {
+        return;
+    }
+    const colSpan = Math.max(1, columns.length);
+    if (range.offset > 0) {
+        const spacer = document.createElement("tr");
+        spacer.className = "ce-grid__spacer";
+        spacer.setAttribute("aria-hidden", "true");
+        const cell = document.createElement("td");
+        cell.colSpan = colSpan;
+        cell.style.height = `${range.offset}px`;
+        spacer.appendChild(cell);
+        dom.tbody.appendChild(spacer);
+    }
+    for (let i = range.start; i < range.end; i += 1) {
+        const row = rows[i];
+        if (!row)
+            continue;
+        const tr = document.createElement("tr");
+        tr.dataset.rowIndex = i.toString();
+        tr.tabIndex = i === range.start ? 0 : -1;
+        columns.forEach((column) => {
+            const td = document.createElement("td");
+            td.dataset.label = column.header;
+            td.textContent = row.values[column.field] ?? "";
+            if (column.align !== "start") {
+                td.dataset.align = column.align;
+            }
+            tr.appendChild(td);
+        });
+        dom.tbody.appendChild(tr);
+    }
+    const renderedHeight = (range.end - range.start) * rowHeight + range.offset;
+    const bottomHeight = Math.max(0, range.totalHeight - renderedHeight);
+    if (bottomHeight > 0) {
+        const spacer = document.createElement("tr");
+        spacer.className = "ce-grid__spacer";
+        spacer.setAttribute("aria-hidden", "true");
+        const cell = document.createElement("td");
+        cell.colSpan = colSpan;
+        cell.style.height = `${bottomHeight}px`;
+        spacer.appendChild(cell);
+        dom.tbody.appendChild(spacer);
+    }
+}
+function focusVirtualRow(dom, props, columns, rows, index) {
+    if (!rows.length) {
+        return;
+    }
+    const clamped = Math.max(0, Math.min(rows.length - 1, index));
+    const rowHeight = props.rowHeight ?? DEFAULT_GRID_PROPS.rowHeight ?? 36;
+    dom.tableWrapper.scrollTop = clamped * rowHeight;
+    renderBodyVirtual(dom, columns, rows, props);
+    const row = dom.tbody.querySelector(`tr[data-row-index="${clamped}"]`);
+    row?.focus();
+}
+function renderEmpty(dom, isEmpty, label) {
+    dom.empty.hidden = !isEmpty;
+    dom.empty.textContent = label;
+}
+function renderState(dom, props, isEmpty) {
+    const loading = Boolean(props.loading);
+    const error = Boolean(props.error);
+    const empty = !loading && !error && isEmpty;
+    dom.container.dataset.state = loading ? "loading" : error ? "error" : empty ? "empty" : "ready";
+    dom.container.setAttribute("aria-busy", loading ? "true" : "false");
+    dom.loading.hidden = !loading;
+    dom.error.hidden = !error;
+    if (loading) {
+        dom.loading.textContent = props.loadingLabel ?? DEFAULT_GRID_PROPS.loadingLabel ?? "Loading...";
+    }
+    if (error) {
+        dom.error.textContent = props.errorMessage ?? DEFAULT_GRID_PROPS.errorMessage ?? "Something went wrong";
+    }
+    dom.empty.hidden = !empty;
+    dom.tableWrapper.toggleAttribute("hidden", loading || error);
+}
+function renderPagination(dom, props, state, totalRows) {
+    const totalPages = Math.max(1, Math.ceil(totalRows / Math.max(1, state.pageSize)));
+    dom.pageInfo.textContent = `Page ${state.page} of ${totalPages}`;
+    dom.prevButton.disabled = state.page <= 1;
+    dom.nextButton.disabled = state.page >= totalPages;
+    const showPagination = totalPages > 1 && !props.loading && !props.error;
+    dom.pagination.toggleAttribute("hidden", !showPagination);
+}
+function ensurePageSizes(pageSizes) {
+    if (!Array.isArray(pageSizes) || pageSizes.length === 0) {
+        return [...(DEFAULT_GRID_PROPS.pageSizes ?? [10, 25, 50])];
+    }
+    return [...new Set(pageSizes.map((size) => normalizePageSize(size)))].sort((a, b) => a - b);
+}
+function ensurePageSizeOption(pageSize, pageSizes) {
+    const options = ensurePageSizes(pageSizes);
+    if (!options.includes(pageSize)) {
+        options.push(pageSize);
+    }
+    const sorted = options.sort((a, b) => a - b);
+    return sorted.includes(pageSize) ? pageSize : sorted[0];
+}
+function showPageSizeSelect(props) {
+    const sizes = ensurePageSizes(props.pageSizes);
+    return sizes.length > 1;
+}
+function buildPublicState(state, totalRows) {
+    const totalPages = Math.max(1, Math.ceil(totalRows / Math.max(1, state.pageSize)));
+    return {
+        page: state.page,
+        pageSize: state.pageSize,
+        totalRows,
+        totalPages,
+        sortField: state.sortField,
+        sortDirection: state.sortField ? state.sortDirection : undefined,
+        searchTerm: state.searchTerm || undefined,
+        columnFilters: Object.keys(state.columnFilters ?? {}).length ? { ...state.columnFilters } : undefined,
+        columnOrder: state.columnOrder.length ? [...state.columnOrder] : undefined,
+    };
+}
+function buildGridClassNames(props) {
+    const classes = ["ce-grid"];
+    if (props.striped) {
+        classes.push("ce-grid--striped");
+    }
+    if (props.hoverable) {
+        classes.push("ce-grid--hover");
+    }
+    if (props.theme === "dark") {
+        classes.push("ce-grid--dark");
+    }
+    if (props.density === "compact") {
+        classes.push("ce-grid--compact");
+    }
+    if (props.density === "dense") {
+        classes.push("ce-grid--dense");
+    }
+    return classes.join(" ");
+}
+function normalizePage(page) {
+    return clampValue(Number(page) || 1, 1, Number.MAX_SAFE_INTEGER);
+}
+function normalizePageSize(size) {
+    const value = Number(size) || (DEFAULT_GRID_PROPS.pageSize ?? 10);
+    return clampValue(value, 1, 1000);
+}
+function normalizeSortDirection(direction) {
+    return direction === "desc" ? "desc" : "asc";
+}
+function clampValue(value, min, max) {
+    return Math.max(min, Math.min(max, value));
+}
+function compareValues(a, b, formatter) {
+    const left = normalizeValue(a, formatter);
+    const right = normalizeValue(b, formatter);
+    if (left === right) {
+        return 0;
+    }
+    return left > right ? 1 : -1;
+}
+function normalizeValue(value, formatter) {
+    if (formatter === "number") {
+        const num = Number(value);
+        return Number.isNaN(num) ? 0 : num;
+    }
+    if (formatter === "date") {
+        const date = value instanceof Date ? value.getTime() : Date.parse(String(value ?? ""));
+        return Number.isNaN(date) ? 0 : date;
+    }
+    return String(value ?? "").toLowerCase();
+}
+function formatCell(value, formatter) {
+    if (value == null) {
+        return "";
+    }
+    if (formatter === "number") {
+        const num = Number(value);
+        if (Number.isNaN(num)) {
+            return String(value);
+        }
+        return new Intl.NumberFormat(undefined, { maximumFractionDigits: 2 }).format(num);
+    }
+    if (formatter === "date") {
+        const date = value instanceof Date ? value : new Date(value);
+        if (Number.isNaN(date.getTime())) {
+            return String(value);
+        }
+        return date.toLocaleDateString();
+    }
+    return String(value);
+}
+const HTML_ESCAPE_LOOKUP = {
+    "&": "&amp;",
+    '"': "&quot;",
+    "'": "&#39;",
+    "<": "&lt;",
+    ">": "&gt;",
+};
+function escapeHtml(value) {
+    return value.replace(/[&"'<>]/g, (char) => HTML_ESCAPE_LOOKUP[char] ?? char);
+}
+function renderColumnControls(columns) {
+    const label = '<span class="ce-grid__column-controls-label" part="column-controls-label">Columns:</span>';
+    const toggles = columns
+        .map((column) => `<label class="ce-grid__column-toggle" part="column-toggle"><input type="checkbox" data-field="${escapeHtml(column.field)}" part="column-toggle-input"${column.visible ? " checked" : ""} /><span part="column-toggle-label">${escapeHtml(column.header)}</span></label>`)
+        .join("");
+    return `${label}${toggles}`;
+}
+function setRovingRowIndex(tbody, active) {
+    tbody.querySelectorAll("tr[data-row-index]").forEach((row) => {
+        row.tabIndex = row === active ? 0 : -1;
+    });
+}
+function readColumnsFromDom(thead) {
+    const headers = Array.from(thead.querySelectorAll("th[data-field]"));
+    return headers.map((header) => ({
+        field: header.dataset.field ?? "",
+        header: header.textContent?.trim() ?? "",
+    }));
+}
+function readRowsFromDom(tbody, columns) {
+    if (!Array.isArray(columns) || columns.length === 0) {
+        return [];
+    }
+    const rows = [];
+    tbody.querySelectorAll("tr").forEach((row) => {
+        const cells = Array.from(row.querySelectorAll("td"));
+        const data = {};
+        columns.forEach((column, index) => {
+            const cell = cells[index];
+            data[column.field] = cell?.textContent?.trim() ?? "";
+        });
+        rows.push(data);
+    });
+    return rows;
+}
+function readSortFromDom(thead) {
+    const sortedAsc = thead.querySelector("th.sorted-asc[data-field]");
+    if (sortedAsc?.dataset.field) {
+        return { sortField: sortedAsc.dataset.field, sortDirection: "asc" };
+    }
+    const sortedDesc = thead.querySelector("th.sorted-desc[data-field]");
+    if (sortedDesc?.dataset.field) {
+        return { sortField: sortedDesc.dataset.field, sortDirection: "desc" };
+    }
+    return {};
+}
+//# sourceMappingURL=grid.js.map