@ornery/ui-grid-react 0.1.9 → 1.0.0

package/dist/index.mjs

@@ -1,2100 +1,158 @@
 // src/UiGrid.tsx
 import React from "react";
-
-// src/useGridState.ts
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-
-// src/gridStateMath.ts
-import { gridColumnWidth } from "@ornery/ui-grid-core";
-function orderVisibleColumns(columns, order) {
-  return [...columns].filter((column) => column.visible !== false).sort((left, right) => order.indexOf(left.name) - order.indexOf(right.name));
-}
-function buildGridTemplateColumns(columns) {
-  return columns.map((column) => gridColumnWidth(column)).join(" ");
-}
-function resolveBenchmarkIterations(iterations, configuredIterations) {
-  return Math.max(1, iterations ?? configuredIterations ?? 25);
-}
-function formatPaginationSummary(totalItems, firstRowIndex, lastRowIndex) {
-  if (totalItems === 0) {
-    return "0-0 of 0";
-  }
-  return `${firstRowIndex + 1}-${lastRowIndex + 1} of ${totalItems}`;
-}
-function computeViewportHeightPx(viewportHeight, autoViewportHeight) {
-  return `${viewportHeight ?? autoViewportHeight ?? 560}px`;
-}
-function computeViewportRows(viewportHeight, rowHeight) {
-  return Math.max(1, Math.ceil((viewportHeight ?? 560) / (rowHeight ?? 44)));
-}
-
-// src/useGridState.ts
-import {
-  createGridApi,
-  getCellValue,
-  setPathValue,
-  SORT_DIRECTIONS,
-  defaultGridEngine,
-  resolveGridLabels,
-  gridColumnWidth as gridColumnWidth2,
-  headerLabel as coreHeaderLabel,
-  gridSortButtonLabel,
-  gridSortAriaSort,
-  gridGroupingButtonLabel,
-  gridFilterPlaceholder,
-  gridGroupDisclosureLabel,
-  gridEditorInputType,
-  gridCellIndent,
-  gridTreeToggleLabelForRow,
-  gridExpandToggleLabelForRow,
-  isGridTreeRowExpanded,
-  isGridColumnSortable,
-  isGridColumnFilterable,
-  isGridColumnGrouped,
-  isGridGroupingEnabled,
-  isGridFilteringEnabled,
-  shouldShowGridTreeToggle,
-  shouldShowGridExpandToggle,
-  shouldShowGridPaginationControls,
-  buildGridCellContext,
-  formatGridCellDisplayValue,
-  buildGridFocusCellResult,
-  findNextGridCell,
-  isPrintableGridKey,
-  isGridCellPosition,
-  exportCsvRows,
-  buildGridRows,
-  resolveGridRowId as coreResolveGridRowId,
-  findGridRowById as coreFindGridRowById,
-  getEffectivePageSize as coreGetEffectivePageSize,
-  getCurrentPageValue as coreGetCurrentPageValue,
-  getTotalPagesValue as coreGetTotalPagesValue,
-  getFirstRowIndexValue as coreGetFirstRowIndexValue,
-  getLastRowIndexValue as coreGetLastRowIndexValue,
-  buildGridSavedState,
-  sanitizeDownloadFilename,
-  parseGridEditedValue,
-  canGridExpandRows,
-  areAllGridRowsExpanded,
-  addGridRowInvisibleReason,
-  clearGridRowInvisibleReason,
-  FEATURE_SORTING,
-  FEATURE_FILTERING,
-  FEATURE_GROUPING,
-  FEATURE_PAGINATION,
-  FEATURE_CELL_EDIT,
-  FEATURE_EXPANDABLE,
-  FEATURE_TREE_VIEW,
-  FEATURE_INFINITE_SCROLL,
-  FEATURE_COLUMN_MOVING,
-  FEATURE_CSV_EXPORT,
-  FEATURE_AUTO_RESIZE,
-  FEATURE_PINNING,
-  buildInitialPinnedState,
-  computePinnedOffset,
-  isColumnPinnable,
-  isPinningEnabled,
-  applyGridSortStateCommand,
-  updateGridFilterCommand,
-  clearGridFiltersCommand,
-  clearGridGroupingCommand,
-  moveGridColumnCommand,
-  moveGridVisibleColumnCommand,
-  seekGridPaginationCommand,
-  setGridPaginationPageSizeCommand,
-  sortGridColumnCommand,
-  toggleGridRowExpansionCommand,
-  expandAllGridRowsCommand,
-  collapseAllGridRowsCommand,
-  toggleGridTreeRowCommand,
-  setGridTreeRowExpandedCommand,
-  expandAllGridTreeRowsCommand,
-  collapseAllGridTreeRowsCommand,
-  beginGridCellEditCommand,
-  commitGridCellEditCommand,
-  cancelGridCellEditCommand,
-  maybeRequestInfiniteScrollCommand,
-  completeGridInfiniteScrollDataLoadCommand,
-  resetGridInfiniteScrollCommand,
-  saveGridInfiniteScrollPercentageCommand,
-  setGridInfiniteScrollDirectionsCommand,
-  restoreGridStateCommand,
-  pinGridColumnCommand,
-  raiseGridRenderingComplete,
-  raiseGridRowsRendered,
-  raiseGridRowsVisibleChanged,
-  raiseGridCanvasHeightChanged,
-  raiseGridDimensionChanged,
-  raiseGridScrollBegin,
-  raiseGridScrollEnd,
-  raiseGridBenchmarkComplete,
-  downloadGridCsvFile,
-  observeGridHostSize
-} from "@ornery/ui-grid-core";
-function escapeCssSelectorValue(value) {
-  const nativeEscape = globalThis.CSS?.escape;
-  if (typeof nativeEscape === "function") {
-    return nativeEscape(value);
-  }
-  let output = "";
-  for (let index = 0; index < value.length; index += 1) {
-    const codePoint = value.charCodeAt(index);
-    const character = value.charAt(index);
-    if (codePoint === 0) {
-      output += "\uFFFD";
-      continue;
-    }
-    const isControlCharacter = codePoint >= 1 && codePoint <= 31 || codePoint === 127;
-    const startsWithDigit = index === 0 && codePoint >= 48 && codePoint <= 57;
-    const secondCharDigitAfterHyphen = index === 1 && codePoint >= 48 && codePoint <= 57 && value.charCodeAt(0) === 45;
-    if (isControlCharacter || startsWithDigit || secondCharDigitAfterHyphen) {
-      output += `\\${codePoint.toString(16)} `;
-      continue;
-    }
-    if (index === 0 && value.length === 1 && codePoint === 45) {
-      output += `\\${character}`;
-      continue;
-    }
-    const isSafeCharacter = codePoint >= 128 || codePoint === 45 || codePoint === 95 || codePoint >= 48 && codePoint <= 57 || codePoint >= 65 && codePoint <= 90 || codePoint >= 97 && codePoint <= 122;
-    output += isSafeCharacter ? character : `\\${character}`;
-  }
-  return output;
-}
-function useGridState(options, onRegisterApi) {
-  const [activeFilters, setActiveFilters] = useState({});
-  const [groupByColumns, setGroupByColumns] = useState([]);
-  const [collapsedGroups, setCollapsedGroups] = useState({});
-  const [columnOrder, setColumnOrder] = useState([]);
-  const [hiddenRowReasons, setHiddenRowReasons] = useState({});
-  const [sortState, setSortState] = useState({
-    columnName: null,
-    direction: SORT_DIRECTIONS.none
-  });
-  const [focusedCell, setFocusedCell] = useState(null);
-  const [editingCell, setEditingCell] = useState(null);
-  const [editingValue, setEditingValue] = useState("");
-  const [expandedRows, setExpandedRows] = useState({});
-  const [expandedTreeRows, setExpandedTreeRows] = useState({});
-  const [currentPage, setCurrentPage] = useState(1);
-  const [pageSize, setPageSize] = useState(0);
-  const [benchmarkResult, setBenchmarkResult] = useState(null);
-  const [infiniteScrollState, setInfiniteScrollState] = useState({
-    scrollUp: false,
-    scrollDown: true,
-    dataLoading: false,
-    previousVisibleRows: 0
-  });
-  const [autoViewportHeight, setAutoViewportHeight] = useState(null);
-  const [pinnedColumns, setPinnedColumns] = useState({});
-  const gridContainerRef = useRef(null);
-  const initializedGridIdRef = useRef(null);
-  const lastCanvasHeightRef = useRef(0);
-  const lastGridHeightRef = useRef(0);
-  const lastGridWidthRef = useRef(0);
-  const scrollEndHandleRef = useRef(void 0);
-  const scrollingRef = useRef(false);
-  const editorFocusTokenRef = useRef(0);
-  const renderedCellFocusTokenRef = useRef(0);
-  const activeFiltersRef = useRef(activeFilters);
-  activeFiltersRef.current = activeFilters;
-  const groupByColumnsRef = useRef(groupByColumns);
-  groupByColumnsRef.current = groupByColumns;
-  const collapsedGroupsRef = useRef(collapsedGroups);
-  collapsedGroupsRef.current = collapsedGroups;
-  const columnOrderRef = useRef(columnOrder);
-  columnOrderRef.current = columnOrder;
-  const hiddenRowReasonsRef = useRef(hiddenRowReasons);
-  hiddenRowReasonsRef.current = hiddenRowReasons;
-  const sortStateRef = useRef(sortState);
-  sortStateRef.current = sortState;
-  const focusedCellRef = useRef(focusedCell);
-  focusedCellRef.current = focusedCell;
-  const editingCellRef = useRef(editingCell);
-  editingCellRef.current = editingCell;
-  const editingValueRef = useRef(editingValue);
-  editingValueRef.current = editingValue;
-  const expandedRowsRef = useRef(expandedRows);
-  expandedRowsRef.current = expandedRows;
-  const expandedTreeRowsRef = useRef(expandedTreeRows);
-  expandedTreeRowsRef.current = expandedTreeRows;
-  const pinnedColumnsRef = useRef(pinnedColumns);
-  pinnedColumnsRef.current = pinnedColumns;
-  const currentPageRef = useRef(currentPage);
-  currentPageRef.current = currentPage;
-  const pageSizeRef = useRef(pageSize);
-  pageSizeRef.current = pageSize;
-  const infiniteScrollStateRef = useRef(infiniteScrollState);
-  infiniteScrollStateRef.current = infiniteScrollState;
-  const optionsRef = useRef(options);
+import { createPortal } from "react-dom";
+import { defineStandaloneUiGridElement } from "@ornery/ui-grid-vanilla";
+import { jsx } from "react/jsx-runtime";
+var TAG_NAME = "ui-grid-element";
+var definePromise = null;
+function UiGrid({ options, onRegisterApi, cellRenderers, className }) {
+  const containerRef = React.useRef(null);
+  const elementRef = React.useRef(null);
+  const [slots, setSlots] = React.useState(/* @__PURE__ */ new Map());
+  const cellRenderersRef = React.useRef(cellRenderers);
+  cellRenderersRef.current = cellRenderers;
+  const onRegisterApiRef = React.useRef(onRegisterApi);
+  onRegisterApiRef.current = onRegisterApi;
+  const optionsRef = React.useRef(options);
   optionsRef.current = options;
-  const rowSize = options.rowHeight ?? 44;
-  const visibleColumns = useMemo(() => {
-    const orderedColumns = orderVisibleColumns(options.columnDefs, columnOrder);
-    const pinnedEntries = Object.entries(pinnedColumns);
-    if (pinnedEntries.length === 0) {
-      return orderedColumns;
-    }
-    const columnByName = new Map(orderedColumns.map((column) => [column.name, column]));
-    const pinnedLeft = pinnedEntries.filter(([, direction]) => direction === "left").map(([columnName]) => columnByName.get(columnName)).filter((column) => column !== void 0);
-    const pinnedRight = pinnedEntries.filter(([, direction]) => direction === "right").map(([columnName]) => columnByName.get(columnName)).filter((column) => column !== void 0);
-    const centerColumns = orderedColumns.filter(
-      (column) => pinnedColumns[column.name] === void 0
-    );
-    return [...pinnedLeft, ...centerColumns, ...pinnedRight];
-  }, [options.columnDefs, columnOrder, pinnedColumns]);
-  const visibleColumnsRef = useRef(visibleColumns);
-  visibleColumnsRef.current = visibleColumns;
-  const pipeline = useMemo(() => {
-    return defaultGridEngine.buildPipeline({
-      options,
-      columns: visibleColumns,
-      activeFilters,
-      sortState,
-      groupByColumns,
-      collapsedGroups,
-      hiddenRowReasons,
-      expandedRows,
-      expandedTreeRows,
-      currentPage,
-      pageSize,
-      rowSize
-    });
-  }, [
-    options,
-    visibleColumns,
-    activeFilters,
-    sortState,
-    groupByColumns,
-    collapsedGroups,
-    hiddenRowReasons,
-    expandedRows,
-    expandedTreeRows,
-    currentPage,
-    pageSize,
-    rowSize
-  ]);
-  const pipelineRef = useRef(pipeline);
-  pipelineRef.current = pipeline;
-  const labels = useMemo(() => resolveGridLabels(options.labels), [options.labels]);
-  const gridTemplateColumns = useMemo(
-    () => buildGridTemplateColumns(visibleColumns),
-    [visibleColumns]
-  );
-  const isPinningEnabledFn = useCallback(() => {
-    return isPinningEnabled(optionsRef.current);
-  }, []);
-  const isColumnPinnableFn = useCallback((column) => {
-    return isColumnPinnable(optionsRef.current, column);
-  }, []);
-  const isPinnedFn = useCallback((column) => {
-    return pinnedColumnsRef.current[column.name] !== void 0;
-  }, []);
-  const pinnedOffsetFn = useCallback((column) => {
-    return computePinnedOffset(visibleColumnsRef.current, pinnedColumnsRef.current, column);
-  }, []);
-  const resolveRowId = useCallback((row) => {
-    return coreResolveGridRowId(optionsRef.current, row);
-  }, []);
-  const buildRowsFromData = useCallback((data) => {
-    return buildGridRows(
-      { ...optionsRef.current, data },
-      optionsRef.current.rowHeight ?? 44,
-      hiddenRowReasonsRef.current,
-      expandedRowsRef.current
-    );
-  }, []);
-  const findRowById = useCallback(
-    (rowId) => {
-      return coreFindGridRowById(buildRowsFromData(optionsRef.current.data), rowId);
-    },
-    [buildRowsFromData]
-  );
-  const canExpandRowsFn = useCallback(() => {
-    return FEATURE_EXPANDABLE && canGridExpandRows(optionsRef.current);
-  }, []);
-  const effectivePageSizeFn = useCallback((totalItems) => {
-    return coreGetEffectivePageSize(optionsRef.current, pageSizeRef.current, totalItems);
-  }, []);
-  const getCurrentPageValueFn = useCallback((totalItems) => {
-    const ti = totalItems ?? pipelineRef.current.totalItems;
-    return coreGetCurrentPageValue(
-      optionsRef.current,
-      currentPageRef.current,
-      ti,
-      pageSizeRef.current
-    );
-  }, []);
-  const getTotalPagesValueFn = useCallback((totalItems) => {
-    const ti = totalItems ?? pipelineRef.current.totalItems;
-    return coreGetTotalPagesValue(optionsRef.current, ti, pageSizeRef.current);
-  }, []);
-  const getFirstRowIndexValueFn = useCallback((totalItems) => {
-    const ti = totalItems ?? pipelineRef.current.totalItems;
-    return coreGetFirstRowIndexValue(
-      optionsRef.current,
-      currentPageRef.current,
-      ti,
-      pageSizeRef.current
-    );
-  }, []);
-  const getLastRowIndexValueFn = useCallback((totalItems) => {
-    const ti = totalItems ?? pipelineRef.current.totalItems;
-    return coreGetLastRowIndexValue(
-      optionsRef.current,
-      currentPageRef.current,
-      ti,
-      pageSizeRef.current
-    );
-  }, []);
-  const isCellEditable = useCallback(
-    (row, column, triggerEvent) => {
-      if (!FEATURE_CELL_EDIT) return false;
-      const editable = column.enableCellEdit ?? optionsRef.current.enableCellEdit ?? false;
-      if (!editable) return false;
-      const condition = column.cellEditableCondition ?? optionsRef.current.cellEditableCondition ?? true;
-      if (typeof condition === "boolean") return condition;
-      const context = {
-        row: row.entity,
-        column,
-        rowIndex: row.index,
-        triggerEvent
-      };
-      return condition(context);
-    },
-    []
-  );
-  const shouldEditOnFocusFn = useCallback((column) => {
-    return column.enableCellEditOnFocus ?? optionsRef.current.enableCellEditOnFocus ?? false;
-  }, []);
-  const focusRenderedCell = useCallback((position) => {
-    const focusToken = ++renderedCellFocusTokenRef.current;
-    const selector = `.body-cell[data-row-id="${escapeCssSelectorValue(position.rowId)}"][data-col-name="${escapeCssSelectorValue(position.columnName)}"]`;
-    const doFocus = (retry = true) => {
-      if (focusToken !== renderedCellFocusTokenRef.current) return;
-      const container = gridContainerRef.current;
-      if (!container) return;
-      const target = container.querySelector(selector);
-      if (!target) {
-        if (retry) requestAnimationFrame(() => doFocus(false));
-        return;
-      }
-      target.focus();
-      if (retry && container.ownerDocument.activeElement !== target) {
-        requestAnimationFrame(() => doFocus(false));
-      }
+  const currentSlotColumnsRef = React.useRef([]);
+  React.useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    let el = null;
+    let disposed = false;
+    const mount = async () => {
+      if (!definePromise) {
+        definePromise = defineStandaloneUiGridElement(TAG_NAME);
+      }
+      await definePromise;
+      if (disposed) return;
+      el = document.createElement(TAG_NAME);
+      el.style.display = "block";
+      el.style.height = "100%";
+      el.style.minHeight = "0";
+      elementRef.current = el;
+      container.appendChild(el);
+      el.addEventListener("cellSlotsChanged", handleCellSlotsChanged);
+      applyOptions(el, optionsRef.current);
     };
-    queueMicrotask(() => doFocus(true));
-  }, []);
-  const focusEditorInput = useCallback((focusToken) => {
-    if (focusToken !== editorFocusTokenRef.current) return;
-    const ec = editingCellRef.current;
-    if (!ec) return;
-    const selector = `.cell-editor[data-row-id="${escapeCssSelectorValue(ec.rowId)}"][data-col-name="${escapeCssSelectorValue(ec.columnName)}"]`;
-    const doFocus = (retry = true) => {
-      if (focusToken !== editorFocusTokenRef.current) return;
-      const currentEc = editingCellRef.current;
-      if (!currentEc || currentEc.rowId !== ec.rowId || currentEc.columnName !== ec.columnName)
-        return;
-      const container = gridContainerRef.current;
-      if (!container) return;
-      const input = container.querySelector(selector);
-      if (!input) {
-        if (retry) requestAnimationFrame(() => doFocus(false));
-        return;
+    void mount();
+    return () => {
+      disposed = true;
+      if (el) {
+        el.removeEventListener("cellSlotsChanged", handleCellSlotsChanged);
+        el.remove();
+        elementRef.current = null;
       }
-      input.focus();
-      input.select();
+      setSlots(/* @__PURE__ */ new Map());
     };
-    doFocus(true);
   }, []);
-  const gridApiRef = useRef(null);
-  if (!gridApiRef.current) {
-    const bindings = {
-      refresh: () => setActiveFilters((current) => ({ ...current })),
-      getVisibleRows: () => pipelineRef.current.visibleRows,
-      setRowInvisible: (row, reason = "user") => {
-        const rowId = coreResolveGridRowId(optionsRef.current, row);
-        setHiddenRowReasons((current) => addGridRowInvisibleReason(current, rowId, reason));
-      },
-      clearRowInvisible: (row, reason = "user") => {
-        const rowId = coreResolveGridRowId(optionsRef.current, row);
-        setHiddenRowReasons((current) => clearGridRowInvisibleReason(current, rowId, reason));
-      },
-      setFilter: (columnName, value) => {
-        setActiveFilters((current) => {
-          const next = { ...current, [columnName]: value };
-          activeFiltersRef.current = next;
-          queueMicrotask(() => gridApiRef.current.core.raise.filterChanged(next));
-          return next;
-        });
-      },
-      clearAllFilters: () => {
-        const nextFilters = {};
-        activeFiltersRef.current = nextFilters;
-        setActiveFilters(nextFilters);
-        queueMicrotask(() => gridApiRef.current.core.raise.filterChanged(nextFilters));
-      },
-      sortColumn: (columnName, direction) => {
-        sortGridColumnCommand(gridApiRef.current, (s) => setSortState(s), columnName, direction);
-      },
-      moveColumn: (fromIndex, toIndex) => {
-        moveGridColumnCommand(
-          gridApiRef.current,
-          FEATURE_COLUMN_MOVING && optionsRef.current.enableColumnMoving === true,
-          (updater) => setColumnOrder((current) => updater(current)),
-          fromIndex,
-          toIndex
-        );
-      },
-      toggleGrouping: (columnName) => {
-        if (!(FEATURE_GROUPING && isGridGroupingEnabled(optionsRef.current))) return;
-        const current = groupByColumnsRef.current;
-        const next = current.includes(columnName) ? current.filter((n) => n !== columnName) : [...current, columnName];
-        groupByColumnsRef.current = next;
-        setGroupByColumns(next);
-        gridApiRef.current.core.raise.groupingChanged(next);
-      },
-      clearGrouping: () => {
-        clearGridGroupingCommand(
-          gridApiRef.current,
-          (grouping) => setGroupByColumns(grouping),
-          false
-        );
-      },
-      benchmark: (iterations) => {
-        return runBenchmarkFn(iterations);
-      },
-      exportCsv: () => {
-        exportCsvFn();
-      },
-      paginationGetPage: () => getCurrentPageValueFn(),
-      paginationGetTotalPages: () => getTotalPagesValueFn(),
-      paginationGetFirstRowIndex: () => getFirstRowIndexValueFn(),
-      paginationGetLastRowIndex: () => getLastRowIndexValueFn(),
-      paginationNextPage: () => seekPageFn(getCurrentPageValueFn() + 1),
-      paginationPreviousPage: () => seekPageFn(getCurrentPageValueFn() - 1),
-      paginationSeek: (page) => seekPageFn(page),
-      paginationSetPageSize: (ps) => setPaginationPageSizeFn(ps),
-      toggleRowExpansion: (row) => toggleRowExpansionByRefFn(row),
-      expandAllRows: () => expandAllRowsFn(),
-      collapseAllRows: () => {
-        collapseAllGridRowsCommand((e) => setExpandedRows(e));
-      },
-      toggleAllRows: () => toggleAllRowsFn(),
-      treeExpandAllRows: () => {
-        expandAllGridTreeRowsCommand(
-          (data) => buildRowsFromData(data),
-          optionsRef.current.data,
-          (e) => setExpandedTreeRows(e)
-        );
-      },
-      treeCollapseAllRows: () => {
-        collapseAllGridTreeRowsCommand((e) => setExpandedTreeRows(e));
-      },
-      treeToggleRow: (row) => toggleTreeRowByRefFn(row),
-      treeExpandRow: (row) => expandTreeRowByRefFn(row),
-      treeCollapseRow: (row) => collapseTreeRowByRefFn(row),
-      treeGetRowChildren: (row) => {
-        const rowId = coreResolveGridRowId(optionsRef.current, row);
-        return buildRowsFromData(optionsRef.current.data).filter((r) => r.parentId === rowId);
-      },
-      treeGetState: () => expandedTreeRowsRef.current,
-      treeSetState: (state) => setExpandedTreeRows({ ...state }),
-      infiniteScrollDataLoaded: (scrollUp, scrollDown) => {
-        return completeGridInfiniteScrollDataLoadCommand(
-          infiniteScrollStateRef.current,
-          (s) => setInfiniteScrollState(s),
-          scrollUp ?? infiniteScrollStateRef.current.scrollUp,
-          scrollDown ?? infiniteScrollStateRef.current.scrollDown
-        );
-      },
-      infiniteScrollReset: (scrollUp, scrollDown) => {
-        resetGridInfiniteScrollCommand(
-          (s) => setInfiniteScrollState(s),
-          scrollUp ?? infiniteScrollStateRef.current.scrollUp,
-          scrollDown ?? infiniteScrollStateRef.current.scrollDown
-        );
-      },
-      infiniteScrollSaveScrollPercentage: () => {
-        saveGridInfiniteScrollPercentageCommand(
-          infiniteScrollStateRef.current,
-          pipelineRef.current.visibleRows.length,
-          (s) => setInfiniteScrollState(s)
-        );
-      },
-      infiniteScrollDataRemovedTop: (scrollUp, scrollDown) => {
-        resetGridInfiniteScrollCommand(
-          (s) => setInfiniteScrollState(s),
-          scrollUp ?? infiniteScrollStateRef.current.scrollUp,
-          scrollDown ?? infiniteScrollStateRef.current.scrollDown
-        );
-      },
-      infiniteScrollDataRemovedBottom: (scrollUp, scrollDown) => {
-        resetGridInfiniteScrollCommand(
-          (s) => setInfiniteScrollState(s),
-          scrollUp ?? infiniteScrollStateRef.current.scrollUp,
-          scrollDown ?? infiniteScrollStateRef.current.scrollDown
-        );
-      },
-      infiniteScrollSetDirections: (scrollUp, scrollDown) => {
-        setGridInfiniteScrollDirectionsCommand(
-          infiniteScrollStateRef.current,
-          (s) => setInfiniteScrollState(s),
-          scrollUp,
-          scrollDown
-        );
-      },
-      saveState: () => {
-        return buildGridSavedState({
-          columnOrder: columnOrderRef.current,
-          activeFilters: activeFiltersRef.current,
-          sortState: sortStateRef.current,
-          groupByColumns: groupByColumnsRef.current,
-          currentPage: currentPageRef.current,
-          pageSize: pageSizeRef.current,
-          totalItems: pipelineRef.current.totalItems,
-          expandedRows: expandedRowsRef.current,
-          expandedTreeRows: expandedTreeRowsRef.current,
-          pinnedColumns: pinnedColumnsRef.current
-        });
-      },
-      restoreState: (state) => {
-        restoreGridStateCommand(gridApiRef.current, state, {
-          setColumnOrder: (order) => setColumnOrder(order),
-          setActiveFilters: (filters) => setActiveFilters(filters),
-          setSortState: (s) => setSortState(s),
-          setGroupByColumns: (grouping) => setGroupByColumns(grouping),
-          setCurrentPage: (page) => setCurrentPage(page),
-          setPageSize: (ps) => setPageSize(ps),
-          setExpandedRows: (e) => setExpandedRows(e),
-          setExpandedTreeRows: (e) => setExpandedTreeRows(e),
-          setPinnedColumns: (p) => setPinnedColumns(p),
-          getEffectivePageSize: () => effectivePageSizeFn(pipelineRef.current.totalItems)
+  React.useEffect(() => {
+    const el = elementRef.current;
+    if (!el) return;
+    applyOptions(el, options);
+  }, [options]);
+  React.useEffect(() => {
+    if (slots.size === 0 || !options.data) return;
+    const dataById = /* @__PURE__ */ new Map();
+    for (const row of options.data) {
+      const id = String(row["id"] ?? "");
+      if (id) dataById.set(id, row);
+    }
+    let changed = false;
+    const nextSlots = new Map(slots);
+    for (const [key, entry] of nextSlots) {
+      const row = dataById.get(entry.rowId);
+      if (!row) continue;
+      const col = options.columnDefs?.find((c) => c.name === entry.columnName);
+      const value = col?.field ? getNestedValue(row, col.field) : row[entry.columnName];
+      if (entry.context.value !== value || entry.context.row !== row) {
+        nextSlots.set(key, {
+          ...entry,
+          context: { ...entry.context, $implicit: value, value, row }
         });
-      },
-      beginCellEdit: (row, columnName, triggerEvent) => {
-        const rowId = coreResolveGridRowId(optionsRef.current, row);
-        const gridRow = coreFindGridRowById(buildRowsFromData(optionsRef.current.data), rowId);
-        const column = visibleColumnsRef.current.find((c) => c.name === columnName);
-        if (!gridRow || !column || !isCellEditable(gridRow, column, triggerEvent)) return;
-        startCellEditFn(gridRow, column, triggerEvent);
-      },
-      endCellEdit: () => commitCellEditFn(),
-      cancelCellEdit: () => cancelCellEditFn(),
-      getEditingCell: () => editingCellRef.current,
-      pinColumn: (columnName, direction) => {
-        pinGridColumnCommand(
-          gridApiRef.current,
-          isPinningEnabledFn(),
-          (v) => setPinnedColumns(v),
-          () => pinnedColumnsRef.current,
-          columnName,
-          direction
-        );
-      }
-    };
-    gridApiRef.current = createGridApi(bindings);
-  }
-  const gridApi = gridApiRef.current;
-  const seekPageFn = useCallback(
-    (page) => {
-      seekGridPaginationCommand(
-        gridApiRef.current,
-        (nextPage) => setCurrentPage(nextPage),
-        () => getTotalPagesValueFn(),
-        () => effectivePageSizeFn(pipelineRef.current.totalItems),
-        page
-      );
-    },
-    [getTotalPagesValueFn, effectivePageSizeFn]
-  );
-  const togglePinFn = useCallback((column) => {
-    const current = pinnedColumnsRef.current[column.name];
-    const next = current === "left" ? "right" : current === "right" ? "none" : "left";
-    pinGridColumnCommand(
-      gridApiRef.current,
-      isPinningEnabledFn(),
-      (v) => setPinnedColumns(v),
-      () => pinnedColumnsRef.current,
-      column.name,
-      next
-    );
-  }, []);
-  const setPaginationPageSizeFn = useCallback((ps) => {
-    setGridPaginationPageSizeCommand(
-      gridApiRef.current,
-      (nextPageSize) => setPageSize(nextPageSize),
-      (nextPage) => setCurrentPage(nextPage),
-      ps
-    );
-  }, []);
-  const toggleRowExpansionByRefFn = useCallback(
-    (row) => {
-      const rowId = coreResolveGridRowId(optionsRef.current, row);
-      toggleGridRowExpansionCommand(
-        gridApiRef.current,
-        FEATURE_EXPANDABLE && canGridExpandRows(optionsRef.current),
-        expandedRowsRef.current,
-        rowId,
-        (e) => setExpandedRows(e),
-        (resolvedRowId) => coreFindGridRowById(buildRowsFromData(optionsRef.current.data), resolvedRowId)
-      );
-    },
-    [buildRowsFromData]
-  );
-  const expandAllRowsFn = useCallback(() => {
-    if (!canGridExpandRows(optionsRef.current)) return;
-    expandAllGridRowsCommand(
-      (data) => buildRowsFromData(data),
-      optionsRef.current.data,
-      (e) => setExpandedRows(e)
-    );
-  }, [buildRowsFromData]);
-  const toggleAllRowsFn = useCallback(() => {
-    const allExpanded = areAllGridRowsExpanded(
-      buildRowsFromData(optionsRef.current.data),
-      expandedRowsRef.current
-    );
-    if (allExpanded) {
-      collapseAllGridRowsCommand((e) => setExpandedRows(e));
-    } else {
-      expandAllRowsFn();
-    }
-  }, [buildRowsFromData, expandAllRowsFn]);
-  const toggleTreeRowByRefFn = useCallback(
-    (row) => {
-      const rowId = coreResolveGridRowId(optionsRef.current, row);
-      toggleGridTreeRowCommand(
-        gridApiRef.current,
-        expandedTreeRowsRef.current,
-        rowId,
-        (e) => setExpandedTreeRows(e),
-        (resolvedRowId) => coreFindGridRowById(buildRowsFromData(optionsRef.current.data), resolvedRowId)
-      );
-    },
-    [buildRowsFromData]
-  );
-  const expandTreeRowByRefFn = useCallback(
-    (row) => {
-      const rowId = coreResolveGridRowId(optionsRef.current, row);
-      setGridTreeRowExpandedCommand(
-        gridApiRef.current,
-        expandedTreeRowsRef.current,
-        rowId,
-        true,
-        (e) => setExpandedTreeRows(e),
-        (resolvedRowId) => coreFindGridRowById(buildRowsFromData(optionsRef.current.data), resolvedRowId)
-      );
-    },
-    [buildRowsFromData]
-  );
-  const collapseTreeRowByRefFn = useCallback(
-    (row) => {
-      const rowId = coreResolveGridRowId(optionsRef.current, row);
-      setGridTreeRowExpandedCommand(
-        gridApiRef.current,
-        expandedTreeRowsRef.current,
-        rowId,
-        false,
-        (e) => setExpandedTreeRows(e),
-        (resolvedRowId) => coreFindGridRowById(buildRowsFromData(optionsRef.current.data), resolvedRowId)
-      );
-    },
-    [buildRowsFromData]
-  );
-  const startCellEditFn = useCallback(
-    (row, column, triggerEvent, initialValue) => {
-      const currentValue = getCellValue(row.entity, column);
-      const focusToken = ++editorFocusTokenRef.current;
-      const ec = beginGridCellEditCommand(
-        gridApiRef.current,
-        {
-          setFocusedCell: (fc) => setFocusedCell(fc),
-          setEditingCell: (ec2) => setEditingCell(ec2),
-          setEditingValue: (ev) => setEditingValue(ev)
-        },
-        row,
-        column,
-        currentValue,
-        triggerEvent,
-        initialValue
-      );
-      if (ec) {
-        queueMicrotask(() => focusEditorInput(focusToken));
-      }
-    },
-    [focusEditorInput]
-  );
-  const commitCellEditFn = useCallback(
-    (direction, restoreFocus = true) => {
-      const result = commitGridCellEditCommand(gridApiRef.current, {
-        getEditingCell: () => editingCellRef.current,
-        getEditingValue: () => editingValueRef.current,
-        setEditingCell: (ec) => setEditingCell(ec),
-        setEditingValue: (ev) => setEditingValue(ev),
-        findRowById: (rowId) => coreFindGridRowById(buildRowsFromData(optionsRef.current.data), rowId),
-        findColumnByName: (columnName) => visibleColumnsRef.current.find((c) => c.name === columnName),
-        parseEditedValue: (column, value, oldValue) => parseGridEditedValue(column, value, oldValue),
-        setCellValue: (rowEntity, column, value) => {
-          const fieldPath = column.editModelField ?? column.field ?? column.name;
-          setPathValue(rowEntity, fieldPath, value);
+        changed = true;
+      }
+    }
+    if (changed) setSlots(nextSlots);
+  }, [options.data]);
+  function applyOptions(el, opts) {
+    const renderers2 = cellRenderersRef.current;
+    const cellSlotColumns = [];
+    if (renderers2 && opts.columnDefs) {
+      for (const col of opts.columnDefs) {
+        if (renderers2[col.name]) {
+          cellSlotColumns.push(col.name);
         }
-      });
-      if (!result.committed || !result.row || !result.column || !result.focusTarget) return;
-      editorFocusTokenRef.current += 1;
-      if (direction) {
-        const moved = moveFocusFn(result.row, result.column, direction);
-        if (!moved) focusRenderedCell(result.focusTarget);
-      } else if (restoreFocus) {
-        focusRenderedCell(result.focusTarget);
-      }
-    },
-    [buildRowsFromData, focusRenderedCell]
-  );
-  const cancelCellEditFn = useCallback(() => {
-    const hadEditingCell = editingCellRef.current !== null;
-    const result = cancelGridCellEditCommand(gridApiRef.current, {
-      getEditingCell: () => editingCellRef.current,
-      setEditingCell: (ec) => setEditingCell(ec),
-      setEditingValue: (ev) => setEditingValue(ev),
-      findRowById: (rowId) => coreFindGridRowById(buildRowsFromData(optionsRef.current.data), rowId),
-      findColumnByName: (columnName) => visibleColumnsRef.current.find((c) => c.name === columnName)
-    });
-    if (!hadEditingCell) return;
-    editorFocusTokenRef.current += 1;
-    if (result.focusTarget) focusRenderedCell(result.focusTarget);
-  }, [buildRowsFromData, focusRenderedCell]);
-  const moveFocusFn = useCallback(
-    (row, column, direction, triggerEvent) => {
-      const nextCell = findNextGridCell({
-        rows: pipelineRef.current.visibleRows,
-        columns: visibleColumnsRef.current,
-        rowId: row.id,
-        columnName: column.name,
-        direction
-      });
-      if (!nextCell) return false;
-      setFocusedCell({ rowId: nextCell.row.id, columnName: nextCell.column.name });
-      focusRenderedCell({ rowId: nextCell.row.id, columnName: nextCell.column.name });
-      if (shouldEditOnFocusFn(nextCell.column) && isCellEditable(nextCell.row, nextCell.column, triggerEvent)) {
-        startCellEditFn(nextCell.row, nextCell.column, triggerEvent);
       }
-      return true;
-    },
-    [focusRenderedCell, isCellEditable, shouldEditOnFocusFn, startCellEditFn]
-  );
-  const runBenchmarkFn = useCallback((iterations) => {
-    const safeIterations = resolveBenchmarkIterations(
-      iterations,
-      optionsRef.current.benchmark?.iterations
-    );
-    const startedAt = performance.now();
-    let lastResult = defaultGridEngine.buildPipeline({
-      options: optionsRef.current,
-      columns: visibleColumnsRef.current,
-      activeFilters: activeFiltersRef.current,
-      sortState: sortStateRef.current,
-      groupByColumns: groupByColumnsRef.current,
-      collapsedGroups: collapsedGroupsRef.current,
-      hiddenRowReasons: hiddenRowReasonsRef.current,
-      expandedRows: expandedRowsRef.current,
-      expandedTreeRows: expandedTreeRowsRef.current,
-      currentPage: currentPageRef.current,
-      pageSize: pageSizeRef.current,
-      rowSize: optionsRef.current.rowHeight ?? 44
-    });
-    for (let i = 1; i < safeIterations; i++) {
-      lastResult = defaultGridEngine.buildPipeline({
-        options: optionsRef.current,
-        columns: visibleColumnsRef.current,
-        activeFilters: activeFiltersRef.current,
-        sortState: sortStateRef.current,
-        groupByColumns: groupByColumnsRef.current,
-        collapsedGroups: collapsedGroupsRef.current,
-        hiddenRowReasons: hiddenRowReasonsRef.current,
-        expandedRows: expandedRowsRef.current,
-        expandedTreeRows: expandedTreeRowsRef.current,
-        currentPage: currentPageRef.current,
-        pageSize: pageSizeRef.current,
-        rowSize: optionsRef.current.rowHeight ?? 44
-      });
-    }
-    const totalMs = performance.now() - startedAt;
-    const result = {
-      iterations: safeIterations,
-      totalMs,
-      averageMs: totalMs / safeIterations,
-      visibleRows: lastResult.visibleRows.length,
-      renderedItems: lastResult.displayItems.length
-    };
-    setBenchmarkResult(result);
-    raiseGridBenchmarkComplete(gridApiRef.current, result);
-    return result;
-  }, []);
-  const exportCsvFn = useCallback(() => {
-    if (!FEATURE_CSV_EXPORT) return;
-    const columns = visibleColumnsRef.current;
-    const csv = exportCsvRows(columns, pipelineRef.current.visibleRows);
-    downloadGridCsvFile(csv, `${sanitizeDownloadFilename(optionsRef.current.id)}.csv`);
-  }, []);
-  useEffect(() => {
-    if (initializedGridIdRef.current === options.id) return;
-    initializedGridIdRef.current = options.id;
-    setActiveFilters({});
-    setHiddenRowReasons({});
-    setCollapsedGroups({});
-    setFocusedCell(null);
-    setEditingCell(null);
-    setEditingValue("");
-    setExpandedRows({});
-    setExpandedTreeRows({});
-    setColumnOrder(options.columnDefs.map((column) => column.name));
-    setGroupByColumns(options.grouping?.groupBy ?? []);
-    setPinnedColumns(buildInitialPinnedState(options.columnDefs));
-    setCurrentPage(options.paginationCurrentPage ?? 1);
-    setPageSize(coreGetEffectivePageSize(options, 0, options.data.length));
-    setInfiniteScrollState({
-      scrollUp: options.infiniteScrollUp === true,
-      scrollDown: options.infiniteScrollDown !== false,
-      dataLoading: false,
-      previousVisibleRows: 0
-    });
-    const initialSort = options.columnDefs.find(
-      (column) => column.sort?.direction && !column.sort.ignoreSort
-    );
-    setSortState({
-      columnName: initialSort?.name ?? null,
-      direction: initialSort?.sort?.direction ?? SORT_DIRECTIONS.none
-    });
-    onRegisterApi?.(gridApi);
-    raiseGridRenderingComplete(gridApi);
-  }, [options.id]);
-  useEffect(() => {
-    raiseGridRowsRendered(gridApi, pipeline.visibleRows);
-    raiseGridRowsVisibleChanged(gridApi, pipeline.visibleRows);
-    const newHeight = pipeline.displayItems.length * rowSize;
-    if (newHeight !== lastCanvasHeightRef.current) {
-      raiseGridCanvasHeightChanged(gridApi, lastCanvasHeightRef.current, newHeight);
-      lastCanvasHeightRef.current = newHeight;
     }
-  }, [pipeline, gridApi, rowSize]);
-  useEffect(() => {
-    if (!FEATURE_AUTO_RESIZE || !options.enableAutoResize) return;
-    const container = gridContainerRef.current;
-    if (!container) return;
-    const observer = observeGridHostSize(container, ({ height: nextHeight, width: nextWidth }) => {
-      if (nextHeight === lastGridHeightRef.current && nextWidth === lastGridWidthRef.current)
-        return;
-      raiseGridDimensionChanged(
-        gridApi,
-        lastGridHeightRef.current,
-        lastGridWidthRef.current,
-        nextHeight,
-        nextWidth
-      );
-      lastGridHeightRef.current = nextHeight;
-      lastGridWidthRef.current = nextWidth;
-      if (!options.viewportHeight && nextHeight > 0) {
-        setAutoViewportHeight(nextHeight);
+    const wrappedOptions = {
+      ...opts,
+      onRegisterApi: (api) => {
+        onRegisterApiRef.current?.(api);
+        opts.onRegisterApi?.(api);
       }
-    });
-    if (!observer) return;
-    return () => observer.disconnect();
-  }, [options.enableAutoResize, options.viewportHeight, gridApi]);
-  const totalRows = pipeline.totalItems;
-  const visibleRowCount = pipeline.visibleRows.length;
-  const displayItems = pipeline.displayItems;
-  const virtualizationEnabled = pipeline.virtualizationEnabled;
-  const pipelineMsVal = pipeline.pipelineMs;
-  const paginationCurrentPage = getCurrentPageValueFn();
-  const paginationTotalPages = getTotalPagesValueFn();
-  const paginationSelectedPageSize = effectivePageSizeFn(pipeline.totalItems);
-  const viewportHeightPx = computeViewportHeightPx(options.viewportHeight, autoViewportHeight);
-  const headerLabelFn = useCallback((column) => coreHeaderLabel(column), []);
-  const isGroupItemFn = useCallback(
-    (item) => item.kind === "group",
-    []
-  );
-  const isExpandableItemFn = useCallback(
-    (item) => item.kind === "expandable",
-    []
-  );
-  const isRowItemFn = useCallback((item) => item.kind === "row", []);
-  const isOddStripedRowFn = useCallback(
-    (item) => item.kind === "row" && item.visibleIndex % 2 === 0,
-    []
-  );
-  const sortDirectionFn = useCallback((column) => {
-    return sortStateRef.current.columnName === column.name ? sortStateRef.current.direction : SORT_DIRECTIONS.none;
-  }, []);
-  const sortButtonLabelFn = useCallback(
-    (column) => {
-      return gridSortButtonLabel(sortDirectionFn(column), labels);
-    },
-    [labels, sortDirectionFn]
-  );
-  const sortAriaSortFn = useCallback(
-    (column) => {
-      return gridSortAriaSort(sortDirectionFn(column));
-    },
-    [sortDirectionFn]
-  );
-  const groupingButtonLabelFn = useCallback(
-    (column) => {
-      return gridGroupingButtonLabel(
-        isGridColumnGrouped(groupByColumnsRef.current, column),
-        labels
-      );
-    },
-    [labels]
-  );
-  const filterValueFn = useCallback((columnName) => {
-    return activeFiltersRef.current[columnName] ?? "";
-  }, []);
-  const filterPlaceholderFn = useCallback(
-    (column) => {
-      return gridFilterPlaceholder(isGridColumnFilterable(optionsRef.current, column), labels);
-    },
-    [labels]
-  );
-  const isFilterInputDisabledFn = useCallback((column) => {
-    return !isGridColumnFilterable(optionsRef.current, column);
-  }, []);
-  const groupDisclosureLabelFn = useCallback(
-    (item) => {
-      return gridGroupDisclosureLabel(item.collapsed, labels);
-    },
-    [labels]
-  );
-  const cellContextFn = useCallback(
-    (row, column) => {
-      return buildGridCellContext(row, column);
-    },
-    []
-  );
-  const displayValueFn = useCallback(
-    (row, column) => {
-      return formatGridCellDisplayValue(cellContextFn(row, column));
-    },
-    [cellContextFn]
-  );
-  const isFocusedCellFn = useCallback((row, column) => {
-    return isGridCellPosition(focusedCellRef.current, row.id, column.name);
-  }, []);
-  const isEditingCellFn = useCallback((row, column) => {
-    return isGridCellPosition(editingCellRef.current, row.id, column.name);
-  }, []);
-  const editorInputTypeFn = useCallback((column) => {
-    return gridEditorInputType(column);
-  }, []);
-  const expandedContextFn = useCallback(
-    (row) => {
-      return {
-        $implicit: row.entity,
-        row: row.entity,
-        rowIndex: row.index,
-        expanded: true,
-        ...optionsRef.current.expandableRowScope ?? {}
-      };
-    },
-    []
-  );
-  const columnWidthFn = useCallback((column) => gridColumnWidth2(column), []);
-  const isColumnSortableFn = useCallback((column) => {
-    return isGridColumnSortable(optionsRef.current, column);
-  }, []);
-  const isColumnFilterableFn = useCallback((column) => {
-    return isGridColumnFilterable(optionsRef.current, column);
-  }, []);
-  const cellIndentFn = useCallback((row, column) => {
-    return gridCellIndent(optionsRef.current, visibleColumnsRef.current, row, column);
-  }, []);
-  const treeToggleLabelFn = useCallback(
-    (row) => {
-      return gridTreeToggleLabelForRow(expandedTreeRowsRef.current, row, labels);
-    },
-    [labels]
-  );
-  const isTreeRowExpandedFn = useCallback((row) => {
-    return isGridTreeRowExpanded(expandedTreeRowsRef.current, row);
-  }, []);
-  const expandToggleLabelFn = useCallback(
-    (row) => {
-      return gridExpandToggleLabelForRow(row, labels);
-    },
-    [labels]
-  );
-  const isGroupedFn = useCallback((column) => {
-    return isGridColumnGrouped(groupByColumnsRef.current, column);
-  }, []);
-  const showTreeToggleFn = useCallback((row, column) => {
-    return shouldShowGridTreeToggle(optionsRef.current, visibleColumnsRef.current, row, column);
-  }, []);
-  const showExpandToggleFn = useCallback((row, column) => {
-    return shouldShowGridExpandToggle(optionsRef.current, visibleColumnsRef.current, column);
-  }, []);
-  const showPaginationControlsFn = useCallback(() => {
-    return FEATURE_PAGINATION && shouldShowGridPaginationControls(optionsRef.current);
-  }, []);
-  const paginationSummaryFn = useCallback(() => {
-    const ti = pipelineRef.current.totalItems;
-    return formatPaginationSummary(ti, getFirstRowIndexValueFn(ti), getLastRowIndexValueFn(ti));
-  }, [getFirstRowIndexValueFn, getLastRowIndexValueFn]);
-  const pageSizeOptionsFn = useCallback(() => {
-    return optionsRef.current.paginationPageSizes ?? [];
-  }, []);
-  const isGroupingEnabledFn = useCallback(() => {
-    return FEATURE_GROUPING && isGridGroupingEnabled(optionsRef.current);
-  }, []);
-  const isFilteringEnabledFn = useCallback(() => {
-    return FEATURE_FILTERING && isGridFilteringEnabled(optionsRef.current);
-  }, []);
-  const toggleSortFn = useCallback((column) => {
-    if (!FEATURE_SORTING || !isGridColumnSortable(optionsRef.current, column)) return;
-    const currentDirection = sortStateRef.current.columnName === column.name ? sortStateRef.current.direction : SORT_DIRECTIONS.none;
-    const nextDirection = currentDirection === SORT_DIRECTIONS.none ? SORT_DIRECTIONS.asc : currentDirection === SORT_DIRECTIONS.asc ? SORT_DIRECTIONS.desc : SORT_DIRECTIONS.none;
-    applyGridSortStateCommand(gridApiRef.current, (state) => setSortState(state), {
-      columnName: nextDirection === SORT_DIRECTIONS.none ? null : column.name,
-      direction: nextDirection
-    });
-  }, []);
-  const updateFilterFn = useCallback((columnName, value) => {
-    updateGridFilterCommand(
-      gridApiRef.current,
-      (updater) => setActiveFilters((current) => updater(current)),
-      () => activeFiltersRef.current,
-      columnName,
-      value
-    );
-  }, []);
-  const clearAllFiltersFn = useCallback(() => {
-    clearGridFiltersCommand(gridApiRef.current, (filters) => setActiveFilters(filters));
-  }, []);
-  const toggleGroupingFn = useCallback((column, event) => {
-    event?.stopPropagation();
-    if (!(FEATURE_GROUPING && isGridGroupingEnabled(optionsRef.current))) return;
-    const current = groupByColumnsRef.current;
-    const next = current.includes(column.name) ? current.filter((n) => n !== column.name) : [...current, column.name];
-    groupByColumnsRef.current = next;
-    setGroupByColumns(next);
-    gridApiRef.current.core.raise.groupingChanged(next);
-  }, []);
-  const toggleGroupFn = useCallback((item) => {
-    setCollapsedGroups((current) => ({
-      ...current,
-      [item.id]: !current[item.id]
-    }));
-  }, []);
-  const focusCellFn = useCallback(
-    (row, column, triggerEvent) => {
-      const nextFocusResult = buildGridFocusCellResult({
-        currentFocusedCell: focusedCellRef.current,
-        currentEditingCell: editingCellRef.current,
-        rowId: row.id,
-        columnName: column.name,
-        shouldEditOnFocus: shouldEditOnFocusFn(column),
-        isCellEditable: isCellEditable(row, column, triggerEvent)
-      });
-      setFocusedCell(nextFocusResult.focusedCell);
-      if (nextFocusResult.shouldBeginEdit) {
-        startCellEditFn(row, column, triggerEvent);
-      }
-    },
-    [isCellEditable, shouldEditOnFocusFn, startCellEditFn]
-  );
-  const handleCellKeyDownFn = useCallback(
-    (row, column, event) => {
-      focusCellFn(row, column, event.nativeEvent);
-      switch (event.key) {
-        case "ArrowLeft":
-          event.preventDefault();
-          moveFocusFn(row, column, "left", event.nativeEvent);
-          return;
-        case "ArrowRight":
-          event.preventDefault();
-          moveFocusFn(row, column, "right", event.nativeEvent);
-          return;
-        case "ArrowUp":
-          event.preventDefault();
-          moveFocusFn(row, column, "up", event.nativeEvent);
-          return;
-        case "ArrowDown":
-          event.preventDefault();
-          moveFocusFn(row, column, "down", event.nativeEvent);
-          return;
-        case "Tab":
-          event.preventDefault();
-          moveFocusFn(row, column, event.shiftKey ? "left" : "right", event.nativeEvent);
-          return;
-        case "Enter":
-          event.preventDefault();
-          moveFocusFn(row, column, event.shiftKey ? "up" : "down", event.nativeEvent);
-          return;
-        case "F2":
-          event.preventDefault();
-          if (isCellEditable(row, column, event.nativeEvent)) {
-            startCellEditFn(row, column, event.nativeEvent);
-          }
-          return;
-        case "Backspace":
-        case "Delete":
-          if (isCellEditable(row, column, event.nativeEvent)) {
-            event.preventDefault();
-            startCellEditFn(row, column, event.nativeEvent, "");
-          }
-          return;
-        default:
-          break;
-      }
-      if (isPrintableGridKey(event.key, event.ctrlKey, event.metaKey, event.altKey) && isCellEditable(row, column, event.nativeEvent)) {
-        event.preventDefault();
-        startCellEditFn(row, column, event.nativeEvent, event.key);
-      }
-    },
-    [focusCellFn, moveFocusFn, isCellEditable, startCellEditFn]
-  );
-  const handleCellDoubleClickFn = useCallback(
-    (row, column, event) => {
-      focusCellFn(row, column, event.nativeEvent);
-      if (isCellEditable(row, column, event.nativeEvent)) {
-        startCellEditFn(row, column, event.nativeEvent);
-      }
-    },
-    [focusCellFn, isCellEditable, startCellEditFn]
-  );
-  const updateEditingValueFn = useCallback((value) => {
-    setEditingValue(value);
-  }, []);
-  const handleEditorKeyDownFn = useCallback(
-    (event) => {
-      if (event.key === "Escape") {
-        event.preventDefault();
-        cancelCellEditFn();
-        return;
-      }
-      if (event.key === "Enter") {
-        event.preventDefault();
-        commitCellEditFn(event.shiftKey ? "up" : "down");
-        return;
-      }
-      if (event.key === "Tab") {
-        event.preventDefault();
-        commitCellEditFn(event.shiftKey ? "left" : "right");
-      }
-    },
-    [cancelCellEditFn, commitCellEditFn]
-  );
-  const handleEditorBlurFn = useCallback(
-    (event) => {
-      const ec = editingCellRef.current;
-      const target = event.target;
-      if (!ec || !target) return;
-      if (target.dataset["rowId"] !== ec.rowId || target.dataset["colName"] !== ec.columnName)
-        return;
-      commitCellEditFn(void 0, false);
-    },
-    [commitCellEditFn]
-  );
-  const toggleRowExpansionFn = useCallback(
-    (row, event) => {
-      event?.stopPropagation();
-      toggleRowExpansionByRefFn(row);
-    },
-    [toggleRowExpansionByRefFn]
-  );
-  const toggleTreeRowFn = useCallback(
-    (row, event) => {
-      event?.stopPropagation();
-      toggleTreeRowByRefFn(row);
-    },
-    [toggleTreeRowByRefFn]
-  );
-  const moveColumnFn = useCallback((fromIndex, toIndex) => {
-    moveGridColumnCommand(
-      gridApiRef.current,
-      FEATURE_COLUMN_MOVING && optionsRef.current.enableColumnMoving === true,
-      (updater) => setColumnOrder((current) => updater(current)),
-      fromIndex,
-      toIndex
-    );
-  }, []);
-  const moveVisibleColumnFn = useCallback((columnName, targetColumnName) => {
-    moveGridVisibleColumnCommand(
-      gridApiRef.current,
-      FEATURE_COLUMN_MOVING && optionsRef.current.enableColumnMoving === true,
-      columnOrderRef.current,
-      visibleColumnsRef.current.map((column) => column.name),
-      columnName,
-      targetColumnName,
-      (order) => setColumnOrder(order)
-    );
-  }, []);
-  const nextPageFn = useCallback(() => {
-    seekPageFn(getCurrentPageValueFn() + 1);
-  }, [seekPageFn, getCurrentPageValueFn]);
-  const previousPageFn = useCallback(() => {
-    seekPageFn(getCurrentPageValueFn() - 1);
-  }, [seekPageFn, getCurrentPageValueFn]);
-  const onPageSizeChangeFn = useCallback(
-    (value) => {
-      setPaginationPageSizeFn(Number(value));
-    },
-    [setPaginationPageSizeFn]
-  );
-  const onViewportScrollFn = useCallback((startIndex) => {
-    if (!scrollingRef.current) {
-      scrollingRef.current = true;
-      raiseGridScrollBegin(gridApiRef.current);
-    }
-    if (scrollEndHandleRef.current) {
-      window.clearTimeout(scrollEndHandleRef.current);
-    }
-    scrollEndHandleRef.current = window.setTimeout(() => {
-      scrollingRef.current = false;
-      raiseGridScrollEnd(gridApiRef.current);
-    }, 120);
-    const isInfiniteScrollEnabled = FEATURE_INFINITE_SCROLL && (optionsRef.current.infiniteScrollRowsFromEnd !== void 0 || optionsRef.current.infiniteScrollUp === true || optionsRef.current.infiniteScrollDown !== void 0);
-    maybeRequestInfiniteScrollCommand(gridApiRef.current, {
-      enabled: isInfiniteScrollEnabled,
-      virtualizationEnabled: pipelineRef.current.virtualizationEnabled,
-      state: infiniteScrollStateRef.current,
-      startIndex,
-      visibleRows: pipelineRef.current.visibleRows.length,
-      viewportRows: computeViewportRows(
-        optionsRef.current.viewportHeight,
-        optionsRef.current.rowHeight
-      ),
-      threshold: optionsRef.current.infiniteScrollRowsFromEnd ?? 20,
-      setState: (state) => setInfiniteScrollState(state)
-    });
-  }, []);
-  return {
-    pipeline,
-    visibleColumns,
-    labels,
-    gridTemplateColumns,
-    gridApi,
-    gridContainerRef,
-    activeFilters,
-    groupByColumns,
-    collapsedGroups,
-    sortState,
-    focusedCell,
-    editingCell,
-    editingValue,
-    expandedRows,
-    expandedTreeRows,
-    currentPage,
-    pageSize,
-    benchmarkResult,
-    infiniteScrollState,
-    totalRows,
-    visibleRowCount,
-    displayItems,
-    virtualizationEnabled,
-    pipelineMs: pipelineMsVal,
-    paginationCurrentPage,
-    paginationTotalPages,
-    paginationSelectedPageSize,
-    rowSize,
-    viewportHeightPx,
-    headerLabel: headerLabelFn,
-    isGroupItem: isGroupItemFn,
-    isExpandableItem: isExpandableItemFn,
-    isRowItem: isRowItemFn,
-    isOddStripedRow: isOddStripedRowFn,
-    sortButtonLabel: sortButtonLabelFn,
-    sortAriaSort: sortAriaSortFn,
-    sortDirection: sortDirectionFn,
-    groupingButtonLabel: groupingButtonLabelFn,
-    filterValue: filterValueFn,
-    filterPlaceholder: filterPlaceholderFn,
-    isFilterInputDisabled: isFilterInputDisabledFn,
-    groupDisclosureLabel: groupDisclosureLabelFn,
-    displayValue: displayValueFn,
-    isFocusedCell: isFocusedCellFn,
-    isEditingCell: isEditingCellFn,
-    editorInputType: editorInputTypeFn,
-    cellContext: cellContextFn,
-    expandedContext: expandedContextFn,
-    columnWidth: columnWidthFn,
-    isColumnSortable: isColumnSortableFn,
-    isColumnFilterable: isColumnFilterableFn,
-    cellIndent: cellIndentFn,
-    treeToggleLabel: treeToggleLabelFn,
-    isTreeRowExpanded: isTreeRowExpandedFn,
-    expandToggleLabel: expandToggleLabelFn,
-    isGrouped: isGroupedFn,
-    showTreeToggle: showTreeToggleFn,
-    showExpandToggle: showExpandToggleFn,
-    showPaginationControls: showPaginationControlsFn,
-    paginationSummary: paginationSummaryFn,
-    pageSizeOptions: pageSizeOptionsFn,
-    isCellEditable,
-    shouldEditOnFocus: shouldEditOnFocusFn,
-    sortingFeature: FEATURE_SORTING,
-    filteringFeature: FEATURE_FILTERING,
-    groupingFeature: FEATURE_GROUPING,
-    paginationFeature: FEATURE_PAGINATION,
-    cellEditFeature: FEATURE_CELL_EDIT,
-    expandableFeature: FEATURE_EXPANDABLE,
-    treeViewFeature: FEATURE_TREE_VIEW,
-    infiniteScrollFeature: FEATURE_INFINITE_SCROLL,
-    columnMovingFeature: FEATURE_COLUMN_MOVING,
-    csvExportFeature: FEATURE_CSV_EXPORT,
-    isGroupingEnabled: isGroupingEnabledFn,
-    isFilteringEnabled: isFilteringEnabledFn,
-    toggleSort: toggleSortFn,
-    updateFilter: updateFilterFn,
-    clearAllFilters: clearAllFiltersFn,
-    toggleGrouping: toggleGroupingFn,
-    toggleGroup: toggleGroupFn,
-    focusCell: focusCellFn,
-    handleCellKeyDown: handleCellKeyDownFn,
-    handleCellDoubleClick: handleCellDoubleClickFn,
-    updateEditingValue: updateEditingValueFn,
-    handleEditorKeyDown: handleEditorKeyDownFn,
-    handleEditorBlur: handleEditorBlurFn,
-    toggleRowExpansion: toggleRowExpansionFn,
-    toggleTreeRow: toggleTreeRowFn,
-    moveColumn: moveColumnFn,
-    moveVisibleColumn: moveVisibleColumnFn,
-    nextPage: nextPageFn,
-    previousPage: previousPageFn,
-    onPageSizeChange: onPageSizeChangeFn,
-    runBenchmark: runBenchmarkFn,
-    exportCsv: exportCsvFn,
-    onViewportScroll: onViewportScrollFn,
-    // Pinning
-    isPinned: isPinnedFn,
-    pinnedOffset: pinnedOffsetFn,
-    isPinningEnabled: isPinningEnabledFn,
-    isColumnPinnable: isColumnPinnableFn,
-    togglePin: togglePinFn,
-    pinningFeature: FEATURE_PINNING
-  };
-}
-
-// src/useVirtualScroll.ts
-import { useCallback as useCallback2, useRef as useRef2, useState as useState2 } from "react";
-
-// src/virtualScrollMath.ts
-function calculateVirtualWindow(request) {
-  const overscan = request.overscan ?? 3;
-  if (request.itemCount <= 0 || request.itemSize <= 0) {
-    return {
-      visibleRange: { start: 0, end: 0 },
-      totalHeight: Math.max(0, request.itemCount) * Math.max(0, request.itemSize),
-      offsetY: 0
     };
-  }
-  const rawStart = Math.floor(request.scrollTop / request.itemSize) - overscan;
-  const start = Math.max(0, rawStart);
-  const rawEnd = rawStart + Math.ceil(request.viewportHeight / request.itemSize) + 2 * overscan;
-  const end = Math.min(request.itemCount, rawEnd);
-  return {
-    visibleRange: { start, end },
-    totalHeight: request.itemCount * request.itemSize,
-    offsetY: start * request.itemSize
-  };
-}
-
-// src/useVirtualScroll.ts
-function useVirtualScroll(options) {
-  const { itemCount, itemSize, viewportHeight, overscan = 3 } = options;
-  const [scrollTop, setScrollTop] = useState2(0);
-  const viewportRef = useRef2(null);
-  const virtualWindow = calculateVirtualWindow({
-    itemCount,
-    itemSize,
-    viewportHeight,
-    overscan,
-    scrollTop
-  });
-  const onScroll = useCallback2((event) => {
-    setScrollTop(event.currentTarget.scrollTop);
-  }, []);
-  return {
-    visibleRange: virtualWindow.visibleRange,
-    totalHeight: virtualWindow.totalHeight,
-    offsetY: virtualWindow.offsetY,
-    onScroll,
-    setScrollTop,
-    viewportRef,
-    scrollTop
-  };
-}
-
-// src/UiGrid.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-function UiGrid({
-  options,
-  onRegisterApi,
-  cellRenderer,
-  headerRenderer,
-  expandableRenderer,
-  className
-}) {
-  const state = useGridState(options, onRegisterApi);
-  const {
-    pipeline,
-    visibleColumns,
-    labels,
-    gridTemplateColumns,
-    gridContainerRef,
-    displayItems,
-    virtualizationEnabled,
-    rowSize,
-    editingValue,
-    sortingFeature,
-    filteringFeature,
-    groupingFeature,
-    paginationFeature,
-    cellEditFeature,
-    expandableFeature,
-    treeViewFeature,
-    columnMovingFeature,
-    paginationCurrentPage,
-    paginationTotalPages,
-    paginationSelectedPageSize
-  } = state;
-  const headerGridRef = React.useRef(null);
-  const filterGridRef = React.useRef(null);
-  const [headerStickyHeight, setHeaderStickyHeight] = React.useState(0);
-  const [filterStickyHeight, setFilterStickyHeight] = React.useState(0);
-  const stickyChromeHeight = headerStickyHeight + filterStickyHeight;
-  const bodyViewportHeight = Math.max(
-    rowSize,
-    (options.viewportHeight ?? 560) - stickyChromeHeight
-  );
-  const virtualScroll = useVirtualScroll({
-    itemCount: displayItems.length,
-    itemSize: rowSize,
-    viewportHeight: bodyViewportHeight,
-    overscan: 3
-  });
-  const [openPinMenuColumn, setOpenPinMenuColumn] = React.useState(null);
-  const [draggedColumnName, setDraggedColumnName] = React.useState(null);
-  const [dropTargetColumnName, setDropTargetColumnName] = React.useState(null);
-  const scrollContainerHeight = `${options.viewportHeight ?? 560}px`;
-  function renderHeaderContent(column) {
-    const value = state.headerLabel(column);
-    const context = {
-      $implicit: value,
-      value,
-      column
-    };
-    if (headerRenderer) {
-      return headerRenderer(context) ?? value;
+    el.options = wrappedOptions;
+    const prev = currentSlotColumnsRef.current;
+    const columnsChanged = cellSlotColumns.length !== prev.length || cellSlotColumns.some((name, i) => name !== prev[i]);
+    if (columnsChanged) {
+      currentSlotColumnsRef.current = cellSlotColumns;
+      el.setFrameworkRenderedSlots({ cells: cellSlotColumns });
     }
-    if (column.headerRenderer) {
-      return column.headerRenderer(context);
-    }
-    return value;
   }
-  const eventPathIncludesClass = React.useCallback((event, className2) => {
-    const eventPath = typeof event.composedPath === "function" ? event.composedPath() : event.target ? [event.target] : [];
-    return eventPath.some((target) => {
-      if (!target || typeof target !== "object" || !("classList" in target)) {
-        return false;
-      }
-      const classList = target.classList;
-      return classList?.contains(className2) ?? false;
-    });
-  }, []);
-  const isPinMenuOpen = React.useCallback(
-    (column) => openPinMenuColumn === column.name,
-    [openPinMenuColumn]
-  );
-  const pinButtonLabel = React.useCallback(
-    (column) => state.isPinned(column) ? labels.unpin : labels.pinColumn,
-    [labels, state]
-  );
-  const onPinTrigger = React.useCallback(
-    (column, event) => {
-      event?.stopPropagation();
-      if (state.isPinned(column)) {
-        setOpenPinMenuColumn(null);
-        state.gridApi.pinning.pinColumn(column.name, "none");
-        return;
-      }
-      setOpenPinMenuColumn((current) => current === column.name ? null : column.name);
-    },
-    [state]
-  );
-  const choosePinDirection = React.useCallback(
-    (column, direction, event) => {
-      event?.stopPropagation();
-      setOpenPinMenuColumn(null);
-      state.gridApi.pinning.pinColumn(column.name, direction);
-    },
-    [state]
-  );
-  const handleHeaderDragStart = React.useCallback(
-    (column, event) => {
-      if (!columnMovingFeature) {
-        event.preventDefault();
-        return;
-      }
-      setDraggedColumnName(column.name);
-      setDropTargetColumnName(null);
-      event.dataTransfer.effectAllowed = "move";
-      event.dataTransfer.setData("text/plain", column.name);
-    },
-    [columnMovingFeature]
-  );
-  const handleHeaderDragOver = React.useCallback(
-    (column, event) => {
-      if (!columnMovingFeature || !draggedColumnName || draggedColumnName === column.name) {
-        return;
-      }
-      event.preventDefault();
-      event.dataTransfer.dropEffect = "move";
-      setDropTargetColumnName(column.name);
-    },
-    [columnMovingFeature, draggedColumnName]
-  );
-  const handleHeaderDrop = React.useCallback(
-    (column, event) => {
-      event.preventDefault();
-      if (!columnMovingFeature) {
-        return;
+  function handleCellSlotsChanged(event) {
+    const detail = event.detail;
+    const el = elementRef.current;
+    if (!el) return;
+    setSlots((prev) => {
+      const next = new Map(prev);
+      for (const slot of detail.removed) {
+        const entry = next.get(slot.slotName);
+        if (entry) {
+          entry.wrapper.remove();
+          next.delete(slot.slotName);
+        }
       }
-      const sourceColumnName = draggedColumnName ?? event.dataTransfer.getData("text/plain");
-      setDraggedColumnName(null);
-      setDropTargetColumnName(null);
-      if (!sourceColumnName || sourceColumnName === column.name) {
-        return;
+      for (const slot of detail.added) {
+        const existing = next.get(slot.slotName);
+        if (existing) {
+          existing.wrapper.remove();
+        }
+        const wrapper = document.createElement("span");
+        wrapper.setAttribute("slot", slot.slotName);
+        el.appendChild(wrapper);
+        next.set(slot.slotName, {
+          slotName: slot.slotName,
+          columnName: slot.columnName,
+          rowId: slot.rowId,
+          context: slot.context,
+          wrapper
+        });
       }
-      state.moveVisibleColumn(sourceColumnName, column.name);
-    },
-    [columnMovingFeature, draggedColumnName, state]
-  );
-  const handleHeaderDragEnd = React.useCallback(() => {
-    setDraggedColumnName(null);
-    setDropTargetColumnName(null);
-  }, []);
-  React.useLayoutEffect(() => {
-    setHeaderStickyHeight(headerGridRef.current?.offsetHeight ?? 0);
-    setFilterStickyHeight(filterGridRef.current?.offsetHeight ?? 0);
-  }, [visibleColumns, filteringFeature, options.enableFiltering]);
-  React.useLayoutEffect(() => {
-    const headerElement = headerGridRef.current;
-    const filterElement = filterGridRef.current;
-    if (typeof ResizeObserver === "undefined" || !headerElement && !filterElement) {
-      return;
-    }
-    const observer = new ResizeObserver(() => {
-      setHeaderStickyHeight(headerGridRef.current?.offsetHeight ?? 0);
-      setFilterStickyHeight(filterGridRef.current?.offsetHeight ?? 0);
+      return next;
     });
-    if (headerElement) {
-      observer.observe(headerElement);
-    }
-    if (filterElement) {
-      observer.observe(filterElement);
-    }
-    return () => observer.disconnect();
-  }, []);
-  React.useEffect(() => {
-    if (!openPinMenuColumn) {
-      return;
-    }
-    const handleDocumentClick = (event) => {
-      if (eventPathIncludesClass(event, "pin-control")) {
-        return;
-      }
-      setOpenPinMenuColumn(null);
-    };
-    const handleDocumentEscape = (event) => {
-      if (event.key === "Escape") {
-        setOpenPinMenuColumn(null);
+  }
+  const portals = [];
+  const renderers = cellRenderers;
+  if (renderers) {
+    for (const [, entry] of slots) {
+      const renderer = renderers[entry.columnName];
+      if (renderer) {
+        portals.push(createPortal(renderer(entry.context), entry.wrapper, entry.slotName));
       }
-    };
-    document.addEventListener("click", handleDocumentClick);
-    document.addEventListener("keydown", handleDocumentEscape);
-    return () => {
-      document.removeEventListener("click", handleDocumentClick);
-      document.removeEventListener("keydown", handleDocumentEscape);
-    };
-  }, [eventPathIncludesClass, openPinMenuColumn]);
-  const itemsToRender = virtualizationEnabled ? displayItems.slice(virtualScroll.visibleRange.start, virtualScroll.visibleRange.end) : displayItems;
-  const onGridTableScroll = (event) => {
-    const bodyScrollTop = Math.max(0, event.currentTarget.scrollTop - stickyChromeHeight);
-    virtualScroll.setScrollTop(bodyScrollTop);
-    const startIndex = Math.floor(bodyScrollTop / rowSize);
-    state.onViewportScroll(startIndex);
-  };
-  function renderDisplayItem(item) {
-    if (groupingFeature && state.isGroupItem(item)) {
-      return /* @__PURE__ */ jsxs(
-        "button",
-        {
-          type: "button",
-          className: "group-row ui-grid-row ui-grid-group-row",
-          "data-part": "group-row",
-          role: "row",
-          "aria-expanded": !item.collapsed,
-          style: { gridColumn: "1 / -1", paddingInlineStart: `${item.depth * 1.25 + 1}rem` },
-          onClick: () => state.toggleGroup(item),
-          children: [
-            /* @__PURE__ */ jsxs("strong", { children: [
-              item.field,
-              ": ",
-              item.label
-            ] }),
-            /* @__PURE__ */ jsxs("span", { children: [
-              item.count,
-              " ",
-              labels.groupRowsSuffix
-            ] }),
-            /* @__PURE__ */ jsx(
-              "svg",
-              {
-                className: "toggle-icon group-disclosure-icon",
-                viewBox: "0 0 24 24",
-                "aria-hidden": "true",
-                focusable: false,
-                children: /* @__PURE__ */ jsx("path", { d: item.collapsed ? "M10 7l5 5-5 5z" : "M7 10l5 5 5-5z" })
-              }
-            ),
-            /* @__PURE__ */ jsx("span", { className: "sr-only ui-grid-sr-only", children: state.groupDisclosureLabel(item) })
-          ]
-        },
-        item.id
-      );
-    }
-    if (expandableFeature && state.isExpandableItem(item)) {
-      const ctx = state.expandedContext(item.row);
-      return /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "expandable-row ui-grid-row ui-grid-expandable-row",
-          "data-part": "expandable-row",
-          style: { gridColumn: "1 / -1", minHeight: `${item.row.expandedRowHeight}px` },
-          children: expandableRenderer?.(ctx)
-        },
-        item.id
-      );
     }
-    if (item.kind !== "row") return null;
-    const rowItem = item;
-    return visibleColumns.map((column) => {
-      const pinned = state.isPinned(column);
-      const pinOffset = pinned ? state.pinnedOffset(column) : null;
-      return /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: `${cellClassName(rowItem, column)}${pinned ? " is-pinned" : ""}`,
-          "data-part": "body-cell",
-          role: "gridcell",
-          tabIndex: 0,
-          "data-row-id": rowItem.row.id,
-          "data-col-name": column.name,
-          onFocus: () => state.focusCell(rowItem.row, column),
-          onClick: () => state.focusCell(rowItem.row, column),
-          onDoubleClick: (e) => state.handleCellDoubleClick(rowItem.row, column, e),
-          onKeyDown: (e) => state.handleCellKeyDown(rowItem.row, column, e),
-          style: {
-            position: pinned ? "sticky" : void 0,
-            left: pinOffset?.side === "left" ? pinOffset.offset : void 0,
-            right: pinOffset?.side === "right" ? pinOffset.offset : void 0,
-            zIndex: pinned ? 2 : void 0
-          },
-          children: /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: "cell-shell",
-              style: { paddingInlineStart: state.cellIndent(rowItem.row, column) },
-              children: [
-                treeViewFeature && state.showTreeToggle(rowItem.row, column) && /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    type: "button",
-                    className: "row-toggle row-toggle-tree",
-                    "data-part": "tree-toggle",
-                    "aria-label": state.treeToggleLabel(rowItem.row),
-                    "aria-expanded": state.isTreeRowExpanded(rowItem.row),
-                    onClick: (e) => state.toggleTreeRow(rowItem.row, e),
-                    children: /* @__PURE__ */ jsx(
-                      "svg",
-                      {
-                        className: "toggle-icon",
-                        viewBox: "0 0 24 24",
-                        "aria-hidden": "true",
-                        focusable: false,
-                        children: /* @__PURE__ */ jsx(
-                          "path",
-                          {
-                            d: state.isTreeRowExpanded(rowItem.row) ? "M7 10l5 5 5-5z" : "M10 7l5 5-5 5z"
-                          }
-                        )
-                      }
-                    )
-                  }
-                ),
-                expandableFeature && state.showExpandToggle(rowItem.row, column) && /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    type: "button",
-                    className: "row-toggle row-toggle-expand",
-                    "data-part": "expand-toggle",
-                    "aria-label": state.expandToggleLabel(rowItem.row),
-                    "aria-expanded": rowItem.row.expanded,
-                    onClick: (e) => state.toggleRowExpansion(rowItem.row, e),
-                    children: /* @__PURE__ */ jsx(
-                      "svg",
-                      {
-                        className: "toggle-icon",
-                        viewBox: "0 0 24 24",
-                        "aria-hidden": "true",
-                        focusable: false,
-                        children: /* @__PURE__ */ jsx("path", { d: rowItem.row.expanded ? "M7 10l5 5 5-5z" : "M10 7l5 5-5 5z" })
-                      }
-                    )
-                  }
-                ),
-                /* @__PURE__ */ jsx("span", { className: "cell-value", children: cellEditFeature && state.isEditingCell(rowItem.row, column) ? /* @__PURE__ */ jsx(
-                  "input",
-                  {
-                    className: "cell-editor",
-                    "data-row-id": rowItem.row.id,
-                    "data-col-name": column.name,
-                    "aria-label": state.headerLabel(column),
-                    type: state.editorInputType(column),
-                    defaultValue: editingValue,
-                    onChange: (e) => state.updateEditingValue(e.target.value),
-                    onKeyDown: (e) => state.handleEditorKeyDown(e),
-                    onBlur: (e) => state.handleEditorBlur(e)
-                  }
-                ) : cellRenderer ? cellRenderer(state.cellContext(rowItem.row, column)) ?? state.displayValue(rowItem.row, column) : state.displayValue(rowItem.row, column) })
-              ]
-            }
-          )
-        },
-        `${rowItem.row.id}-${column.name}`
-      );
-    });
   }
-  function cellClassName(item, column) {
-    const classes = ["body-cell", "ui-grid-cell"];
-    if (state.isOddStripedRow(item)) classes.push("body-cell-odd");
-    if (column.align === "center") classes.push("align-center");
-    if (column.align === "end") classes.push("align-end");
-    if (state.isFocusedCell(item.row, column)) classes.push("cell-focused");
-    if (cellEditFeature && state.isEditingCell(item.row, column)) classes.push("cell-editing");
-    return classes.join(" ");
+  return /* @__PURE__ */ jsx("div", { ref: containerRef, className, style: { display: "block", height: "100%", minHeight: 0 }, children: portals });
+}
+function getNestedValue(obj, field) {
+  const parts = field.split(".");
+  let current = obj;
+  for (const part of parts) {
+    if (current == null || typeof current !== "object") return void 0;
+    current = current[part];
   }
-  function renderSortIcon(column) {
-    const direction = state.sortDirection(column);
-    switch (direction) {
-      case "asc":
-        return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", focusable: false, children: /* @__PURE__ */ jsx("path", { d: "M12 5l-6 6h4v8h4v-8h4z" }) });
-      case "desc":
-        return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", focusable: false, children: /* @__PURE__ */ jsx("path", { d: "M12 19l6-6h-4V5h-4v8H6z" }) });
-      default:
-        return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", focusable: false, children: /* @__PURE__ */ jsx("path", { d: "M7 6h10v2H7V6Zm0 5h7v2H7v-2Zm0 5h4v2H7v-2Z" }) });
-    }
-  }
-  return /* @__PURE__ */ jsx("div", { className: `ui-grid-host ${className ?? ""}`, ref: gridContainerRef, children: /* @__PURE__ */ jsxs(
-    "section",
-    {
-      className: "grid-frame ui-grid",
-      "data-part": "grid-frame",
-      role: "grid",
-      "aria-label": options.title ?? "Data grid",
-      children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: "grid-table ui-grid-contents-wrapper",
-            "data-part": "grid-table",
-            style: virtualizationEnabled ? { height: scrollContainerHeight, overflowY: "auto" } : void 0,
-            onScroll: virtualizationEnabled ? onGridTableScroll : void 0,
-            children: [
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: "header-grid ui-grid-header ui-grid-header-canvas",
-                  "data-part": "header",
-                  role: "row",
-                  ref: headerGridRef,
-                  style: { gridTemplateColumns },
-                  children: visibleColumns.map((column) => {
-                    const pinned = state.isPinned(column);
-                    const pinOffset = pinned ? state.pinnedOffset(column) : null;
-                    const pinMenuOpen = isPinMenuOpen(column);
-                    return /* @__PURE__ */ jsxs(
-                      "div",
-                      {
-                        className: `header-cell ui-grid-header-cell${sortingFeature && state.sortDirection(column) !== "none" ? " is-active" : ""}${pinned ? " is-pinned" : ""}${pinMenuOpen ? " is-pin-menu-open" : ""}${draggedColumnName === column.name ? " is-dragging" : ""}${dropTargetColumnName === column.name ? " is-drag-target" : ""}`,
-                        "data-part": "header-cell",
-                        role: "columnheader",
-                        "aria-sort": sortingFeature ? state.sortAriaSort(column) : void 0,
-                        draggable: columnMovingFeature,
-                        onDragStart: (event) => handleHeaderDragStart(column, event),
-                        onDragOver: (event) => handleHeaderDragOver(column, event),
-                        onDrop: (event) => handleHeaderDrop(column, event),
-                        onDragEnd: handleHeaderDragEnd,
-                        onDragLeave: () => {
-                          if (dropTargetColumnName === column.name) {
-                            setDropTargetColumnName(null);
-                          }
-                        },
-                        style: {
-                          position: pinned ? "sticky" : void 0,
-                          left: pinOffset?.side === "left" ? pinOffset.offset : void 0,
-                          right: pinOffset?.side === "right" ? pinOffset.offset : void 0,
-                          zIndex: pinMenuOpen ? 8 : pinned ? 2 : void 0
-                        },
-                        children: [
-                          /* @__PURE__ */ jsx("span", { className: "header-label", children: renderHeaderContent(column) }),
-                          /* @__PURE__ */ jsxs("div", { className: "header-actions", children: [
-                            sortingFeature && /* @__PURE__ */ jsxs(
-                              "button",
-                              {
-                                type: "button",
-                                className: `header-action${!state.isColumnSortable(column) ? " header-action-disabled" : ""}`,
-                                disabled: !state.isColumnSortable(column),
-                                "aria-label": state.sortButtonLabel(column),
-                                title: state.sortButtonLabel(column),
-                                onClick: () => state.toggleSort(column),
-                                children: [
-                                  renderSortIcon(column),
-                                  /* @__PURE__ */ jsx("span", { className: "sr-only ui-grid-sr-only", children: state.sortButtonLabel(column) })
-                                ]
-                              }
-                            ),
-                            groupingFeature && state.isGroupingEnabled() && column.enableGrouping !== false && /* @__PURE__ */ jsxs(
-                              "button",
-                              {
-                                type: "button",
-                                className: `chip-action${state.isGrouped(column) ? " chip-action-active" : ""}`,
-                                "data-part": "group-toggle",
-                                "aria-label": state.groupingButtonLabel(column),
-                                title: state.groupingButtonLabel(column),
-                                onClick: (e) => state.toggleGrouping(column, e),
-                                children: [
-                                  /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", focusable: false, children: /* @__PURE__ */ jsx("path", { d: "M4 6h8v4H4V6Zm0 8h8v4H4v-4Zm10-8h6v4h-6V6Zm0 8h6v4h-6v-4Z" }) }),
-                                  /* @__PURE__ */ jsx("span", { className: "sr-only ui-grid-sr-only", children: state.groupingButtonLabel(column) })
-                                ]
-                              }
-                            ),
-                            state.pinningFeature && state.isPinningEnabled() && state.isColumnPinnable(column) && /* @__PURE__ */ jsxs(
-                              "div",
-                              {
-                                className: `pin-control${pinMenuOpen ? " pin-control-open" : ""}`,
-                                onClick: (event) => event.stopPropagation(),
-                                children: [
-                                  /* @__PURE__ */ jsxs(
-                                    "button",
-                                    {
-                                      type: "button",
-                                      className: `chip-action pin-trigger${pinned || pinMenuOpen ? " chip-action-active" : ""}`,
-                                      "data-part": "pin-toggle",
-                                      "aria-label": pinButtonLabel(column),
-                                      title: pinButtonLabel(column),
-                                      "aria-haspopup": pinned ? void 0 : "menu",
-                                      "aria-expanded": pinned ? void 0 : pinMenuOpen,
-                                      onClick: (event) => onPinTrigger(column, event),
-                                      children: [
-                                        /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", focusable: false, children: /* @__PURE__ */ jsx("path", { d: "M16 12V4h1V2H7v2h1v8l-2 2v2h5v6l1 1 1-1v-6h5v-2l-2-2z" }) }),
-                                        /* @__PURE__ */ jsx("span", { className: "sr-only ui-grid-sr-only", children: pinButtonLabel(column) })
-                                      ]
-                                    }
-                                  ),
-                                  /* @__PURE__ */ jsxs(
-                                    "div",
-                                    {
-                                      className: "pin-menu",
-                                      "data-part": "pin-menu",
-                                      role: "menu",
-                                      "aria-label": "Pin options",
-                                      "aria-hidden": !pinMenuOpen,
-                                      children: [
-                                        /* @__PURE__ */ jsxs(
-                                          "button",
-                                          {
-                                            type: "button",
-                                            className: "pin-menu-action",
-                                            "data-part": "pin-left-action",
-                                            role: "menuitem",
-                                            "aria-label": labels.pinLeft,
-                                            title: labels.pinLeft,
-                                            tabIndex: pinMenuOpen ? 0 : -1,
-                                            onClick: (event) => choosePinDirection(column, "left", event),
-                                            children: [
-                                              /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", focusable: false, children: /* @__PURE__ */ jsx("path", { d: "M10 6 4 12l6 6v-4h10v-4H10V6z" }) }),
-                                              /* @__PURE__ */ jsx("span", { className: "sr-only ui-grid-sr-only", children: labels.pinLeft })
-                                            ]
-                                          }
-                                        ),
-                                        /* @__PURE__ */ jsxs(
-                                          "button",
-                                          {
-                                            type: "button",
-                                            className: "pin-menu-action",
-                                            "data-part": "pin-right-action",
-                                            role: "menuitem",
-                                            "aria-label": labels.pinRight,
-                                            title: labels.pinRight,
-                                            tabIndex: pinMenuOpen ? 0 : -1,
-                                            onClick: (event) => choosePinDirection(column, "right", event),
-                                            children: [
-                                              /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", focusable: false, children: /* @__PURE__ */ jsx("path", { d: "M14 6v4H4v4h10v4l6-6-6-6z" }) }),
-                                              /* @__PURE__ */ jsx("span", { className: "sr-only ui-grid-sr-only", children: labels.pinRight })
-                                            ]
-                                          }
-                                        )
-                                      ]
-                                    }
-                                  )
-                                ]
-                              }
-                            )
-                          ] })
-                        ]
-                      },
-                      column.name
-                    );
-                  })
-                }
-              ),
-              filteringFeature && state.isFilteringEnabled() && /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: "filter-grid ui-grid-header",
-                  "data-part": "filters",
-                  ref: filterGridRef,
-                  style: {
-                    gridTemplateColumns,
-                    ["--ui-grid-header-sticky-top"]: `${headerStickyHeight}px`
-                  },
-                  children: visibleColumns.map((column) => {
-                    const pinned = state.isPinned(column);
-                    const pinOffset = pinned ? state.pinnedOffset(column) : null;
-                    return /* @__PURE__ */ jsxs(
-                      "label",
-                      {
-                        className: `filter-cell ui-grid-filter-container${pinned ? " is-pinned" : ""}`,
-                        "data-part": "filter-cell",
-                        style: {
-                          position: pinned ? "sticky" : void 0,
-                          left: pinOffset?.side === "left" ? pinOffset.offset : void 0,
-                          right: pinOffset?.side === "right" ? pinOffset.offset : void 0,
-                          zIndex: pinned ? 2 : void 0
-                        },
-                        children: [
-                          /* @__PURE__ */ jsxs("span", { className: "sr-only ui-grid-sr-only", children: [
-                            labels.filterColumn,
-                            " ",
-                            state.headerLabel(column)
-                          ] }),
-                          /* @__PURE__ */ jsx(
-                            "input",
-                            {
-                              className: "ui-grid-filter-input",
-                              type: "text",
-                              defaultValue: state.filterValue(column.name),
-                              placeholder: state.filterPlaceholder(column),
-                              disabled: state.isFilterInputDisabled(column),
-                              onChange: (e) => state.updateFilter(column.name, e.target.value)
-                            }
-                          )
-                        ]
-                      },
-                      column.name
-                    );
-                  })
-                }
-              ),
-              displayItems.length > 0 ? virtualizationEnabled ? /* @__PURE__ */ jsx("div", { className: "grid-virtual-spacer", style: { height: `${virtualScroll.totalHeight}px` }, children: /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: "body-grid ui-grid-canvas grid-virtual-body",
-                  "data-part": "body",
-                  role: "rowgroup",
-                  style: {
-                    gridTemplateColumns,
-                    position: "absolute",
-                    top: `${virtualScroll.offsetY}px`,
-                    left: 0
-                  },
-                  children: itemsToRender.map(renderDisplayItem)
-                }
-              ) }) : /* @__PURE__ */ jsx("div", { className: "body-grid ui-grid-canvas", "data-part": "body", role: "rowgroup", style: { gridTemplateColumns }, children: displayItems.map(renderDisplayItem) }) : /* @__PURE__ */ jsxs("div", { className: "empty-state ui-grid-no-row-overlay", "data-part": "empty-state", children: [
-                /* @__PURE__ */ jsx("strong", { children: options.emptyMessage ?? labels.emptyHeading }),
-                /* @__PURE__ */ jsx("p", { children: labels.emptyDescription })
-              ] })
-            ]
-          }
-        ),
-        paginationFeature && state.showPaginationControls() && /* @__PURE__ */ jsxs(
-          "footer",
-          {
-            className: "pagination-bar ui-grid-pagination",
-            "data-part": "pagination",
-            role: "navigation",
-            "aria-label": labels.paginationPage,
-            children: [
-              /* @__PURE__ */ jsx("p", { children: state.paginationSummary() }),
-              /* @__PURE__ */ jsxs("div", { className: "pagination-controls", children: [
-                /* @__PURE__ */ jsxs(
-                  "button",
-                  {
-                    type: "button",
-                    className: "action action-secondary pagination-button",
-                    "aria-label": labels.paginationPrevious,
-                    disabled: paginationCurrentPage <= 1,
-                    onClick: () => state.previousPage(),
-                    children: [
-                      /* @__PURE__ */ jsx("svg", { className: "pagination-icon", viewBox: "0 0 24 24", "aria-hidden": "true", focusable: false, children: /* @__PURE__ */ jsx("path", { d: "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" }) }),
-                      /* @__PURE__ */ jsx("span", { className: "sr-only", children: labels.paginationPrevious })
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsxs("span", { children: [
-                  labels.paginationPage,
-                  " ",
-                  paginationCurrentPage,
-                  " ",
-                  labels.paginationOf,
-                  " ",
-                  paginationTotalPages
-                ] }),
-                /* @__PURE__ */ jsxs(
-                  "button",
-                  {
-                    type: "button",
-                    className: "action action-secondary pagination-button",
-                    "aria-label": labels.paginationNext,
-                    disabled: paginationCurrentPage >= paginationTotalPages,
-                    onClick: () => state.nextPage(),
-                    children: [
-                      /* @__PURE__ */ jsx("svg", { className: "pagination-icon", viewBox: "0 0 24 24", "aria-hidden": "true", focusable: false, children: /* @__PURE__ */ jsx("path", { d: "M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z" }) }),
-                      /* @__PURE__ */ jsx("span", { className: "sr-only", children: labels.paginationNext })
-                    ]
-                  }
-                ),
-                state.pageSizeOptions().length > 0 && /* @__PURE__ */ jsxs("label", { className: "pagination-size", children: [
-                  /* @__PURE__ */ jsx("span", { className: "sr-only", children: labels.paginationRows }),
-                  /* @__PURE__ */ jsx(
-                    "select",
-                    {
-                      "aria-label": labels.paginationRows,
-                      value: paginationSelectedPageSize,
-                      onChange: (e) => state.onPageSizeChange(e.target.value),
-                      children: state.pageSizeOptions().map((size) => /* @__PURE__ */ jsx("option", { value: size, children: size }, size))
-                    }
-                  )
-                ] })
-              ] })
-            ]
-          }
-        )
-      ]
-    }
-  ) });
+  return current;
 }
 
 // src/mountUiGrid.tsx
@@ -2115,6 +173,24 @@ function styledCell(text, color, extraStyle) {
     text
   );
 }
+function datePickerCell(value, onChange, extraStyle) {
+  return React2.createElement("input", {
+    type: "date",
+    value: value || "",
+    onChange: onChange ? (e) => onChange(e.target.value) : void 0,
+    style: {
+      font: "inherit",
+      fontSize: "0.85rem",
+      border: "1px solid color-mix(in srgb, currentColor 20%, transparent)",
+      borderRadius: "6px",
+      padding: "0.2rem 0.4rem",
+      background: "var(--ui-grid-surface, white)",
+      color: "inherit",
+      cursor: "pointer",
+      ...extraStyle
+    }
+  });
+}
 
 // src/vanillaAdapter.ts
 async function mountUiGridCustomElement(container, mountOptions) {
@@ -2135,43 +211,14 @@ async function mountUiGridCustomElement(container, mountOptions) {
   };
 }
 
-// src/rustWasmGridEngine.ts
-import { registerRustWasmGridEngine } from "@ornery/ui-grid-core";
-var uiGridWasmModulePath = "../../../dist/ui-grid-wasm-web/ui_grid_wasm.js";
-var uiGridWasmBinaryPath = "/dist/ui-grid-wasm-web/ui_grid_wasm_bg.wasm";
-function registerReactUiGridWasmEngineFromModule(module) {
-  registerRustWasmGridEngine({
-    buildPipeline(context) {
-      return module.build_pipeline_js(context);
-    }
-  });
-}
-async function enableReactUiGridWasmEngine() {
-  const module = await import(
-    /* @vite-ignore */
-    uiGridWasmModulePath
-  );
-  await module.default(uiGridWasmBinaryPath);
-  registerReactUiGridWasmEngineFromModule(module);
-}
-
 // src/index.ts
 import { DEFAULT_GRID_LABELS } from "@ornery/ui-grid-core";
 export {
   DEFAULT_GRID_LABELS,
   UiGrid,
-  buildGridTemplateColumns,
-  computeViewportHeightPx,
-  computeViewportRows,
-  enableReactUiGridWasmEngine,
-  formatPaginationSummary,
+  datePickerCell,
   mountUiGrid,
   mountUiGridCustomElement,
-  orderVisibleColumns,
-  registerReactUiGridWasmEngineFromModule,
-  resolveBenchmarkIterations,
   styledCell,
-  updateUiGrid,
-  useGridState,
-  useVirtualScroll
+  updateUiGrid
 };