@polygrid/core 1.0.1 → 1.0.2

package/src/engine/services/column/column.ts

@@ -0,0 +1,30 @@
+import type { PolyGrid } from "../../core/grid";
+import type { GridDOM } from "../../core/grid-dom";
+import type { ObservableLike } from "../../rx-lite/interfaces/observable-like";
+import type { PolyGridStore } from "../../store/store";
+import type { PolyGridColumn } from "./interfaces/column";
+import * as methods from "./methods/index";
+
+export class ColumnService {
+  store: PolyGridStore;
+  destroy$: ObservableLike<void>;
+  gridDom: GridDOM;
+  grid: PolyGrid;
+
+  columns$!: ObservableLike<PolyGridColumn[]>;
+
+  constructor(grid: PolyGrid) {
+    this.store = grid._store;
+    this.destroy$ = grid._destroy$;
+    this.gridDom = grid._gridDom;
+    this.grid = grid;
+  }
+
+  resolveColumnWidths = methods.resolveColumnWidths;
+  setColumns = methods.setColumns;
+
+  initApiSubscriptions() {
+    this.columns$ = this.store.selectKeyed("columns", (s) => s.columns);
+    methods.setColumns(this, this.destroy$);
+  }
+}

package/src/engine/services/column/index.ts

@@ -0,0 +1 @@
+export * from "./column";

package/src/engine/services/column/interfaces/column.ts

@@ -0,0 +1,6 @@
+export interface PolyGridColumn {
+  header: string;
+  field: string;
+  width?: number;
+  visible?: boolean;
+}

package/src/engine/services/column/methods/index.ts

@@ -0,0 +1,2 @@
+export * from "./resolve-column-widths";
+export * from "./set-columns";

package/src/engine/services/column/methods/resolve-column-widths.ts

@@ -0,0 +1,46 @@
+import type { PolyGridColumn } from "../interfaces/column";
+import type { ColumnWidthState } from "../types/column-width-state";
+
+export function resolveColumnWidths(
+  columns: PolyGridColumn[],
+  gridWidth: number
+): number[] {
+  const explicit = columns.filter((c) => c.width != null);
+  const implicit = columns.filter((c) => c.width == null);
+
+  const totalExplicit = explicit.reduce(
+    (sum, c) => sum + (c.width as number),
+    0
+  );
+
+  const state: ColumnWidthState =
+    explicit.length === columns.length
+      ? "ALL_SET"
+      : explicit.length === 0
+      ? "NOT_SET"
+      : "SOME_SET";
+
+  switch (state) {
+    case "ALL_SET":
+      if (totalExplicit >= gridWidth) {
+        return columns.map((c) => c.width as number);
+      } else {
+        const leftover = gridWidth - totalExplicit;
+        const bonus = leftover / columns.length;
+        return columns.map((c) => (c.width as number) + bonus);
+      }
+
+    case "SOME_SET":
+      if (totalExplicit >= gridWidth) {
+        return columns.map((c) => c.width ?? 0);
+      } else {
+        const leftover = gridWidth - totalExplicit;
+        const bonus = leftover / implicit.length;
+        return columns.map((c) => c.width ?? bonus);
+      }
+
+    case "NOT_SET":
+      const even = gridWidth / columns.length;
+      return columns.map(() => even);
+  }
+}

package/src/engine/services/column/methods/set-columns.ts

@@ -0,0 +1,28 @@
+import type { ObservableLike } from "../../../rx-lite/interfaces/observable-like";
+import { takeUntil } from "../../../rx-lite/operators/takeuntil";
+import { updateColumnWidths } from "../../layout/methods";
+import { reRenderCells } from "../../renderer/methods";
+import type { ColumnService } from "../column";
+import { resolveColumnWidths } from "./resolve-column-widths";
+
+export function setColumns(
+  columnService: ColumnService,
+  destroy$: ObservableLike<void>
+) {
+  columnService.columns$.pipe(takeUntil(destroy$)).subscribe((columns) => {
+    const gridDom = columnService.gridDom;
+    // rerender cells
+    reRenderCells(gridDom, columnService.store);
+    // do everything else
+    const state = columnService.store.getState();
+    const cols = columns.filter((col) => col.visible ?? true);
+    const viewportWidth = state.viewportWidth;
+    const resolvedColWidths = resolveColumnWidths(cols, viewportWidth);
+    const totalColumnWidth = resolvedColWidths.reduce((a, b) => a + b, 0);
+    columnService.store.update((draft) => {
+      draft.resolvedColumnWidths = resolvedColWidths;
+      draft.totalColumnWidth = totalColumnWidth;
+    });
+    updateColumnWidths(gridDom, state, resolvedColWidths);
+  }, "SET-COLUMNS");
+}

package/{types/engine/services/column/types/column-width-state.d.ts → src/engine/services/column/types/column-width-state.ts}

@@ -1,2 +1 @@
-export type ColumnWidthState = "ALL_SET" | "SOME_SET" | "NOT_SET";
-//# sourceMappingURL=column-width-state.d.ts.map
+export type ColumnWidthState = "ALL_SET" | "SOME_SET" | "NOT_SET";

package/src/engine/services/data/data.ts

@@ -0,0 +1,27 @@
+import type { PolyGrid } from "../../core/grid";
+import type { GridDOM } from "../../core/grid-dom";
+import type { ObservableLike } from "../../rx-lite/interfaces/observable-like";
+import type { PolyGridStore } from "../../store/store";
+import type { PolyGridRow } from "../row/interfaces/row";
+import * as methods from "./methods/index";
+
+export class DataService {
+  store: PolyGridStore;
+  destroy$: ObservableLike<void>;
+  gridDom: GridDOM;
+  grid: PolyGrid;
+
+  rows$!: ObservableLike<PolyGridRow[]>;
+
+  constructor(grid: PolyGrid) {
+    this.store = grid._store;
+    this.destroy$ = grid._destroy$;
+    this.gridDom = grid._gridDom;
+    this.grid = grid;
+  }
+
+  initApiSubscriptions() {
+    this.rows$ = this.store.selectKeyed("rows", (s) => s.rows);
+    methods.setRows(this, this.destroy$);
+  }
+}

package/src/engine/services/data/index.ts

@@ -0,0 +1 @@
+export * from "./data";

package/src/engine/services/data/methods/index.ts

@@ -0,0 +1 @@
+export * from "./set-rows";

package/src/engine/services/data/methods/set-rows.ts

@@ -0,0 +1,18 @@
+import type { ObservableLike } from "../../../rx-lite/interfaces/observable-like";
+import { takeUntil } from "../../../rx-lite/operators/takeuntil";
+import { updateColumnWidths } from "../../layout/methods";
+import { reRenderCells } from "../../renderer/methods";
+import type { DataService } from "../data";
+
+export function setRows(
+  dataService: DataService,
+  destroy$: ObservableLike<void>
+) {
+  dataService.rows$.pipe(takeUntil(destroy$)).subscribe((rows) => {
+    const gridDom = dataService.gridDom;
+    const state = dataService.store.getState();
+    const resColWidths = state.resolvedColumnWidths;
+    reRenderCells(gridDom, dataService.store);
+    updateColumnWidths(gridDom, state, resColWidths);
+  }, "SET-DATA");
+}

package/src/engine/services/layout/index.ts

@@ -0,0 +1 @@
+export * from "./layout";

package/src/engine/services/layout/layout.ts

@@ -0,0 +1,100 @@
+import type { PolyGrid } from "../../core/grid";
+import type { GridDOM } from "../../core/grid-dom";
+import type { ObservableLike } from "../../rx-lite/interfaces/observable-like";
+import { distinctUntilArrayChanged } from "../../rx-lite/operators/distinct-until-array-changed";
+import { distinctUntilChanged } from "../../rx-lite/operators/distinct-until-changed";
+import { filter } from "../../rx-lite/operators/filter";
+import { map } from "../../rx-lite/operators/map";
+import type { PolyGridStore } from "../../store/store";
+import * as methods from "./methods/index";
+
+export class LayoutService {
+  store: PolyGridStore;
+  destroy$: ObservableLike<void>;
+  gridDom: GridDOM;
+  grid: PolyGrid;
+
+  totalRowHeight$!: ObservableLike<number>;
+  viewportWidth$!: ObservableLike<number>;
+  resolvedColWidths$: ObservableLike<number[]>;
+  showVScrollbar$: ObservableLike<boolean>;
+  showHScrollbar$: ObservableLike<boolean>;
+  adjustedViewportWidth$: ObservableLike<[boolean, number]>;
+  adjustedViewportHeight$: ObservableLike<[boolean, number]>;
+  gridId$!: ObservableLike<string>;
+
+  constructor(grid: PolyGrid) {
+    this.store = grid._store;
+    this.destroy$ = grid._destroy$;
+    this.gridDom = grid._gridDom;
+    this.grid = grid;
+
+    this.totalRowHeight$ = this.store
+      .combineLatest([(s) => s.rows, (s) => s.rowHeight])
+      .pipe(
+        map(([rows, rowHeight]) => rows.length * rowHeight),
+        distinctUntilChanged()
+      );
+    this.viewportWidth$ = this.store
+      .select((s) => s.viewportWidth)
+      .pipe(distinctUntilChanged());
+    this.resolvedColWidths$ = this.store
+      .combineLatest([
+        (s) => s.resolvedColumnWidths,
+        (s) => s.viewportWidth,
+        (s) => s.rawViewportWidth,
+      ])
+      .pipe(
+        filter(
+          ([_, viewportWidth, rawViewportWidth]) =>
+            viewportWidth !== rawViewportWidth
+        ),
+        map(([resolvedColWidths]) => resolvedColWidths),
+        distinctUntilArrayChanged()
+      );
+    this.showVScrollbar$ = this.store
+      .combineLatest([(s) => s.totalRowHeight, (s) => s.rawViewportHeight])
+      .pipe(
+        map(
+          ([totalRowHeight, rawViewportHeight]) =>
+            totalRowHeight > rawViewportHeight
+        ),
+        distinctUntilChanged()
+      );
+    this.showHScrollbar$ = this.store
+      .combineLatest([(s) => s.totalColumnWidth, (s) => s.rawViewportWidth])
+      .pipe(
+        map(
+          ([totalColumnWidth, rawViewportWidth]) =>
+            totalColumnWidth > rawViewportWidth
+        ),
+        distinctUntilChanged()
+      );
+    this.adjustedViewportWidth$ = this.store.combineLatestAny([
+      this.showVScrollbar$,
+      (s) => s.rawViewportWidth,
+    ]);
+    this.adjustedViewportHeight$ = this.store.combineLatestAny([
+      this.showHScrollbar$,
+      (s) => s.rawViewportHeight,
+    ]);
+  }
+
+  resizeVScrollbar = methods.resizeVScrollbar;
+  resizeBody = methods.resizeBody;
+  computeTotalRowHeight = methods.computeTotalRowHeight;
+  addScrollEventListeners = methods.addScrollEventListeners;
+  computeColumnWidths = methods.computeColumnWidths;
+  setCellWidth = methods.setCellWidth;
+  applyColumnWidths = methods.applyColumnWidths;
+  adjustViewport = methods.adjustViewport;
+  initializeLayoutPipeline = methods.initializeLayoutPipeline;
+  setUpResizeObserver = methods.setUpResizeObserver;
+  setGridId = methods.setGridId;
+  updateColumnWidths = methods.updateColumnWidths;
+
+  initApiSubscriptions() {
+    this.gridId$ = this.store.selectKeyed("id", (s) => s.id);
+    methods.setGridId(this, this.destroy$);
+  }
+}

package/src/engine/services/layout/methods/add-scroll-event-listeners.ts

@@ -0,0 +1,38 @@
+import { addDomListener } from "../../../core/methods";
+import type { LayoutService } from "../layout";
+
+export function addScrollEventListeners(layoutService: LayoutService) {
+  const gridDom = layoutService.gridDom;
+  // vertical scroll bar scrolls body
+  addDomListener(gridDom, gridDom.vScrollInner, "scroll", () => {
+    const scrollTop = gridDom.vScrollInner.scrollTop;
+    if (gridDom.bodyViewport.scrollTop !== scrollTop) {
+      gridDom.bodyViewport.scrollTop = scrollTop;
+    }
+  });
+
+  // horizontal scroll bar scrolls header, footer, body
+  addDomListener(gridDom, gridDom.hScrollInner, "scroll", () => {
+    const scrollLeft = gridDom.hScrollInner.scrollLeft;
+    if (gridDom.bodyViewport.scrollLeft !== scrollLeft) {
+      gridDom.bodyViewport.scrollLeft = scrollLeft;
+    }
+    if (gridDom.headerViewport.scrollLeft !== scrollLeft) {
+      gridDom.headerViewport.scrollLeft = scrollLeft;
+    }
+    if (gridDom.footerViewport.scrollLeft !== scrollLeft) {
+      gridDom.footerViewport.scrollLeft = scrollLeft;
+    }
+  });
+
+  // wheel scrolls scrollbars
+  addDomListener(gridDom, gridDom.bodyViewport, "wheel", (e) => {
+    if (e.deltaY !== 0) {
+      gridDom.vScrollInner.scrollTop += e.deltaY;
+    }
+    if (e.deltaX !== 0) {
+      gridDom.hScrollInner.scrollLeft += e.deltaX;
+    }
+    e.preventDefault();
+  });
+}

package/src/engine/services/layout/methods/adjust-viewport.ts

@@ -0,0 +1,66 @@
+import type { ObservableLike } from "../../../rx-lite/interfaces/observable-like";
+import { distinctUntilChanged } from "../../../rx-lite/operators/distinct-until-changed";
+import { filter } from "../../../rx-lite/operators/filter";
+import { map } from "../../../rx-lite/operators/map";
+import { takeUntil } from "../../../rx-lite/operators/takeuntil";
+import type { LayoutService } from "../layout";
+
+export function adjustViewport(
+  layoutService: LayoutService,
+  destroy$: ObservableLike<void>
+) {
+  const gridDom = layoutService.gridDom;
+  layoutService.showVScrollbar$
+    .pipe(takeUntil(destroy$))
+    .subscribe((showVScrollbar) => {
+      layoutService.store.update((draft) => {
+        draft.showVScrollbar = showVScrollbar;
+      });
+      gridDom.vScrollbar.style.display = showVScrollbar ? "flex" : "none";
+      const lastRow = gridDom.body.querySelector(".pg-row:last-child");
+      lastRow?.classList.toggle("last-row", !showVScrollbar);
+    }, "SHOW-V-SCROLLBAR");
+  layoutService.showHScrollbar$
+    .pipe(takeUntil(destroy$))
+    .subscribe((showHScrollbar) => {
+      layoutService.store.update((draft) => {
+        draft.showHScrollbar = showHScrollbar;
+      });
+      gridDom.hScrollbar.style.display = showHScrollbar ? "block" : "none";
+      gridDom.vScrollBottomCorner.style.display = showHScrollbar
+        ? "block"
+        : "none";
+    }, "SHOW-H-SCROLLBAR");
+
+  layoutService.adjustedViewportWidth$
+    .pipe(
+      takeUntil(destroy$),
+      map(
+        ([showVScrollbar, rawViewportWidth]) =>
+          rawViewportWidth - (showVScrollbar ? 16 : 0)
+      ),
+      distinctUntilChanged(),
+      // ignore initial invalid values (rawViewportWidth = 0)
+      filter((viewportWidth) => viewportWidth >= 0)
+    )
+    .subscribe((viewportWidth) => {
+      layoutService.store.update((draft) => {
+        draft.viewportWidth = viewportWidth;
+      });
+    });
+  layoutService.adjustedViewportHeight$
+    .pipe(
+      takeUntil(destroy$),
+      map(
+        ([showHScrollbar, rawViewportHeight]) =>
+          rawViewportHeight - (showHScrollbar ? 16 : 0)
+      ),
+      distinctUntilChanged(),
+      filter((viewportHeight) => viewportHeight >= 0)
+    )
+    .subscribe((viewportHeight) => {
+      layoutService.store.update((draft) => {
+        draft.viewportHeight = viewportHeight;
+      });
+    });
+}

package/src/engine/services/layout/methods/apply-column-widths.ts

@@ -0,0 +1,17 @@
+import type { ObservableLike } from "../../../rx-lite/interfaces/observable-like";
+import { takeUntil } from "../../../rx-lite/operators/takeuntil";
+import type { LayoutService } from "../layout";
+import { updateColumnWidths } from "./update-column-widths";
+
+export function applyColumnWidths(
+  layoutService: LayoutService,
+  destroy$: ObservableLike<void>
+) {
+  layoutService.resolvedColWidths$
+    .pipe(takeUntil(destroy$))
+    .subscribe((resolvedColWidths) => {
+      const gridDom = layoutService.gridDom;
+      const state = layoutService.store.getState();
+      updateColumnWidths(gridDom, state, resolvedColWidths);
+    }, "APPLY-COLUMN-WIDTHS");
+}

package/src/engine/services/layout/methods/compute-column-widths.ts

@@ -0,0 +1,23 @@
+import type { ObservableLike } from "../../../rx-lite/interfaces/observable-like";
+import { takeUntil } from "../../../rx-lite/operators/takeuntil";
+import { resolveColumnWidths } from "../../column/methods";
+import type { LayoutService } from "../layout";
+
+export function computeColumnWidths(
+  layoutService: LayoutService,
+  destroy$: ObservableLike<void>
+) {
+  layoutService.viewportWidth$
+    .pipe(takeUntil(destroy$))
+    .subscribe((viewportWidth) => {
+      const columns = layoutService.store
+        .getState()
+        .columns.filter((col) => col.visible ?? true);
+      const resolvedColWidths = resolveColumnWidths(columns, viewportWidth);
+      const totalColumnWidth = resolvedColWidths.reduce((a, b) => a + b, 0);
+      layoutService.store.update((draft) => {
+        draft.resolvedColumnWidths = resolvedColWidths;
+        draft.totalColumnWidth = totalColumnWidth;
+      });
+    }, "RESOLVE-COLUMN-WIDTHS");
+}

package/src/engine/services/layout/methods/compute-total-row-height.ts

@@ -0,0 +1,16 @@
+import type { ObservableLike } from "../../../rx-lite/interfaces/observable-like";
+import { takeUntil } from "../../../rx-lite/operators/takeuntil";
+import type { LayoutService } from "../layout";
+
+export function computeTotalRowHeight(
+  layoutService: LayoutService,
+  destroy$: ObservableLike<void>
+) {
+  layoutService.totalRowHeight$
+    .pipe(takeUntil(destroy$))
+    .subscribe((totalRowHeight) => {
+      layoutService.store.update((draft) => {
+        draft.totalRowHeight = totalRowHeight;
+      });
+    }, "SET-TOTALROWHEIGHT");
+}

package/src/engine/services/layout/methods/index.ts

@@ -0,0 +1,12 @@
+export * from "./compute-total-row-height";
+export * from "./resize-v-scrollbar";
+export * from "./resize-body";
+export * from "./add-scroll-event-listeners";
+export * from "./compute-column-widths";
+export * from "./set-cell-width";
+export * from "./apply-column-widths";
+export * from "./adjust-viewport";
+export * from "./initialize-layout-pipeline";
+export * from "./set-up-resize-observer";
+export * from "./set-grid-id";
+export * from "./update-column-widths";

package/src/engine/services/layout/methods/initialize-layout-pipeline.ts

@@ -0,0 +1,39 @@
+import type { ObservableLike } from "../../../rx-lite/interfaces/observable-like";
+import type { LayoutService } from "../layout";
+
+export function initializeLayoutPipeline(
+  layoutService: LayoutService,
+  destroy$: ObservableLike<void>
+) {
+  // --- PHASE 1: Fundamental metrics (row height, body height, scrollbar track) ---
+
+  // Compute total row height (rows × rowHeight)
+  layoutService.computeTotalRowHeight(layoutService, destroy$);
+
+  // Resize the vertical scrollbar track to match total row height
+  layoutService.resizeVScrollbar(layoutService, destroy$);
+
+  // Resize the body element to match total row height
+  layoutService.resizeBody(layoutService, destroy$);
+
+  // --- PHASE 2: Scrollbar visibility + viewport adjustment ---
+
+  // React to totalRowHeight + rawViewportHeight → showVScrollbar
+  // React to totalColumnWidth + rawViewportWidth → showHScrollbar
+  // Adjust viewportWidth/Height accordingly
+  layoutService.adjustViewport(layoutService, destroy$);
+
+  // --- PHASE 3: Column width resolution (depends on viewportWidth) ---
+
+  // Compute resolved column widths + totalColumnWidth
+  layoutService.computeColumnWidths(layoutService, destroy$);
+
+  // --- PHASE 4: Apply resolved column widths to DOM ---
+
+  // Apply column widths to header cells
+  layoutService.applyColumnWidths(layoutService, destroy$);
+
+  // --- PHASE 5: Scroll event syncing (body ↔ scrollbars) ---
+
+  layoutService.addScrollEventListeners(layoutService);
+}

package/src/engine/services/layout/methods/resize-body.ts

@@ -0,0 +1,15 @@
+import type { ObservableLike } from "../../../rx-lite/interfaces/observable-like";
+import { takeUntil } from "../../../rx-lite/operators/takeuntil";
+import type { LayoutService } from "../layout";
+
+export function resizeBody(
+  layoutService: LayoutService,
+  destroy$: ObservableLike<void>
+) {
+  const gridDom = layoutService.gridDom;
+  layoutService.totalRowHeight$
+    .pipe(takeUntil(destroy$))
+    .subscribe((totalRowHeight) => {
+      gridDom.body.style.height = `${totalRowHeight}px`;
+    }, "RESIZE-BODY-HEIGHT");
+}

package/src/engine/services/layout/methods/resize-v-scrollbar.ts

@@ -0,0 +1,15 @@
+import type { ObservableLike } from "../../../rx-lite/interfaces/observable-like";
+import { takeUntil } from "../../../rx-lite/operators/takeuntil";
+import type { LayoutService } from "../layout";
+
+export function resizeVScrollbar(
+  layoutService: LayoutService,
+  destroy$: ObservableLike<void>
+) {
+  const gridDom = layoutService.gridDom;
+  layoutService.totalRowHeight$
+    .pipe(takeUntil(destroy$))
+    .subscribe((totalRowHeight) => {
+      gridDom.vScrollTrack.style.height = `${totalRowHeight}px`;
+    }, "RESIZE-V-SCROLLBAR");
+}

package/src/engine/services/layout/methods/set-cell-width.ts

@@ -0,0 +1,21 @@
+export function setCellWidth(
+  el: HTMLElement,
+  widths: number[],
+  vScrollbarVisible: boolean
+) {
+  const cells = el.children;
+
+  for (let i = 0; i < widths.length; i++) {
+    const cell = cells[i] as HTMLElement;
+    if (!cell) continue;
+
+    const w = widths[i] + "px";
+    cell.style.width = w;
+    cell.style.minWidth = w;
+    cell.style.maxWidth = w;
+
+    if (i === widths.length - 1) {
+      cell.classList.toggle("last-cell", !vScrollbarVisible);
+    }
+  }
+}

package/src/engine/services/layout/methods/set-grid-id.ts

@@ -0,0 +1,14 @@
+import type { ObservableLike } from "../../../rx-lite/interfaces/observable-like";
+import { takeUntil } from "../../../rx-lite/operators/takeuntil";
+import type { LayoutService } from "../layout";
+
+export function setGridId(
+  layoutService: LayoutService,
+  destroy$: ObservableLike<void>
+) {
+  const gridDom = layoutService.gridDom;
+  const grid = layoutService.grid;
+  layoutService.gridId$.pipe(takeUntil(destroy$)).subscribe((id) => {
+    gridDom.root.id = id;
+  }, "SET-GRID-ID");
+}

package/src/engine/services/layout/methods/set-up-resize-observer.ts

@@ -0,0 +1,25 @@
+import type { GridDOM } from "../../../core/grid-dom";
+import type { PolyGridStore } from "../../../store/store";
+
+export function setUpResizeObserver(
+  resizeObserver: ResizeObserver,
+  gridDom: GridDOM,
+  store: PolyGridStore
+) {
+  return (resizeObserver = new ResizeObserver((entries) => {
+    for (const entry of entries) {
+      const gridWidth = entry.contentRect.width;
+      const gridHeight = entry.contentRect.height;
+      const headerHeight =
+        gridDom.headerViewport.getBoundingClientRect().height;
+      const footerHeight =
+        gridDom.footerViewport.getBoundingClientRect().height;
+      store.update((draft) => {
+        draft.viewportWidth = gridWidth; // at this moment this is the full grid width without a v scroll bar
+        draft.viewportHeight = gridHeight - headerHeight - footerHeight; // at this moment this is the full grid height without a h scroll bar
+        draft.rawViewportWidth = gridWidth;
+        draft.rawViewportHeight = gridHeight - headerHeight - footerHeight;
+      });
+    }
+  }));
+}

package/src/engine/services/layout/methods/update-column-widths.ts

@@ -0,0 +1,28 @@
+import type { GridDOM } from "../../../core/grid-dom";
+import type { PolyGridState } from "../../../store/interfaces/grid-state";
+import { setCellWidth } from "./set-cell-width";
+
+export function updateColumnWidths(
+  gridDom: GridDOM,
+  state: PolyGridState,
+  resolvedColWidths: number[]
+) {
+  // set header, footer and body cell widths
+  setCellWidth(gridDom.header, resolvedColWidths, state.showVScrollbar);
+  setCellWidth(gridDom.footer, resolvedColWidths, state.showVScrollbar);
+  const bodyRows = gridDom.body.querySelectorAll(".pg-row");
+  bodyRows.forEach((row) => {
+    setCellWidth(row as HTMLElement, resolvedColWidths, state.showVScrollbar);
+  });
+  // set body width
+  const totalColWidth = resolvedColWidths.reduce((a, b) => a + b, 0);
+  gridDom.body.style.width = `${totalColWidth}px`;
+  // set header, footer width
+  gridDom.header.style.width = `${totalColWidth}px`;
+  gridDom.footer.style.width = `${totalColWidth}px`;
+  // set h-scrollbar width
+  gridDom.hScrollTrack.style.width = `${totalColWidth}px`;
+  // set viewport width
+  const viewportWidth = state.viewportWidth;
+  gridDom.viewport.style.width = `${viewportWidth}px`;
+}

package/src/engine/services/renderer/index.ts

@@ -0,0 +1 @@
+export * from "./renderer";

package/src/engine/services/renderer/methods/index.ts

@@ -0,0 +1 @@
+export * from "./re-render-cells";