@1771technologies/lytenyte-pro 1.0.0-beta.12 → 1.0.0-beta.13

package/dist/row-data-source-client/use-client-data-source.js

@@ -2,12 +2,7 @@ import {} from "../+types.js";
 import { useRef } from "react";
 import { atom, createStore } from "@1771technologies/atom";
 import { traverse } from "./tree/traverse.js";
-import {
-  dateComparator,
-  makeGridAtom,
-  numberComparator,
-  stringComparator,
-} from "@1771technologies/lytenyte-shared";
+import { dateComparator, makeGridAtom, numberComparator, stringComparator, } from "@1771technologies/lytenyte-shared";
 import { equal, get, itemsWithIdToMap } from "@1771technologies/lytenyte-js-utils";
 import { computeFilteredRows } from "./filter/compute-filtered-rows.js";
 import { builtIns } from "./built-ins/built-ins.js";
@@ -15,704 +10,687 @@ import { createPivotColumns } from "./pivots/create-pivot-columns.js";
 import { createAggModel } from "./pivots/create-agg-model.js";
 import { makeClientTree } from "./tree/client-tree.js";
 export function makeClientDataSource(p) {
-  const rdsStore = createStore();
-  const data = atom(p.data);
-  const topData = atom(p.topData ?? []);
-  const bottomData = atom(p.bottomData ?? []);
-  const dataToSrc$ = atom((g) => {
-    return new Map(g(data).map((c, i) => [c, i]));
-  });
-  const cache = new Map();
-  const centerNodes = atom((g) => {
-    const nodes = [];
-    const d = g(data);
-    for (let i = 0; i < d.length; i++) {
-      if (!cache.has(i)) {
-        cache.set(i, {
-          id: "",
-          kind: "leaf",
-          data: d[i],
+    const rdsStore = createStore();
+    const data = atom(p.data);
+    const topData = atom(p.topData ?? []);
+    const bottomData = atom(p.bottomData ?? []);
+    const dataToSrc$ = atom((g) => {
+        return new Map(g(data).map((c, i) => [c, i]));
+    });
+    const cache = new Map();
+    const centerNodes = atom((g) => {
+        const nodes = [];
+        const d = g(data);
+        for (let i = 0; i < d.length; i++) {
+            if (!cache.has(i)) {
+                cache.set(i, {
+                    id: "",
+                    kind: "leaf",
+                    data: d[i],
+                });
+            }
+            const node = cache.get(i);
+            node.data = d[i];
+            nodes.push(node);
+        }
+        return nodes;
+    });
+    const topNodes = atom((g) => {
+        return g(topData).map((c, i) => ({ data: c, id: `top-${i}`, kind: "leaf" }));
+    });
+    const botNodes = atom((g) => {
+        return g(bottomData).map((c, i) => ({ data: c, id: `bottom-${i}`, kind: "leaf" }));
+    });
+    const pinnedIdMap = atom((g) => {
+        const combined = new Map([...g(topNodes), ...g(botNodes)].map((c) => [c.id, c]));
+        return combined;
+    });
+    const models = atom({
+        sort: [],
+        filter: {},
+        filterIn: {},
+        quickSearch: null,
+        agg: {},
+        group: [],
+        groupExpansions: {},
+        columnPivotGroupExpansions: {},
+        pivotMode: false,
+        pivotModel: {
+            columns: [],
+            filters: {},
+            filtersIn: {},
+            rows: [],
+            sorts: [],
+            values: [],
+        },
+    });
+    const sortModel = atom((g) => g(models).sort);
+    const filterModel = atom((g) => g(models).filter);
+    const filterInModel = atom((g) => g(models).filterIn);
+    const rowGroupModel = atom((g) => g(models).group);
+    const groupExpansions = atom((g) => g(models).groupExpansions);
+    const aggModel = atom((g) => g(models).agg);
+    const quickSearch = atom((g) => g(models).quickSearch);
+    const columnPivotGroupExpansions = atom((g) => g(models).columnPivotGroupExpansions);
+    const columnPivotMode = atom((g) => g(models).pivotMode);
+    const columnPivotModel = atom((g) => g(models).pivotModel);
+    const grid$ = atom(null);
+    const snapshot = atom(0);
+    const pivotTree = atom((g) => {
+        g(snapshot);
+        const grid = g(grid$);
+        const model = g(columnPivotModel);
+        const lookup = new Map(grid.state.columns.get().map((c) => [c.id, c]));
+        const activeRows = model.rows.filter((c) => c.active ?? true);
+        const rowGroups = activeRows.length
+            ? activeRows.map((c) => {
+                const column = lookup.get(c.field);
+                return {
+                    fn: (r) => {
+                        const res = grid.api.columnField(column, r);
+                        return res == null ? null : `${res}`;
+                    },
+                };
+            })
+            : [{ fn: () => null }];
+        const filtered = computeFilteredRows(g(centerNodes), grid, model.filters, model.filtersIn, "", "case-sensitive", true);
+        const aggModel = createAggModel(model, grid.state.columnPivotColumns.get(), grid.state.columnGroupJoinDelimiter.get());
+        const rowAggModel = Object.entries(aggModel).map(([name, agg]) => {
+            if (typeof agg.fn === "function") {
+                const fn = agg.fn;
+                return {
+                    name,
+                    fn: (rows) => fn(rows.map((c) => c.data), grid),
+                };
+            }
+            const key = agg.fn;
+            const fn = (data) => {
+                const fieldData = data.map((r) => grid?.api.columnField(name, { kind: "leaf", data: r.data }));
+                return builtIns[key](fieldData);
+            };
+            return { name, fn };
+        });
+        return makeClientTree({
+            rowData: filtered,
+            rowAggModel: rowAggModel,
+            rowBranchModel: rowGroups,
+            rowIdGroup: p.rowIdBranch,
+            rowIdLeaf: p.rowIdLeaf,
         });
-      }
-      const node = cache.get(i);
-      node.data = d[i];
-      nodes.push(node);
-    }
-    return nodes;
-  });
-  const topNodes = atom((g) => {
-    return g(topData).map((c, i) => ({ data: c, id: `top-${i}`, kind: "leaf" }));
-  });
-  const botNodes = atom((g) => {
-    return g(bottomData).map((c, i) => ({ data: c, id: `bottom-${i}`, kind: "leaf" }));
-  });
-  const pinnedIdMap = atom((g) => {
-    const combined = new Map([...g(topNodes), ...g(botNodes)].map((c) => [c.id, c]));
-    return combined;
-  });
-  const models = atom({
-    sort: [],
-    filter: {},
-    filterIn: {},
-    quickSearch: null,
-    agg: {},
-    group: [],
-    groupExpansions: {},
-    columnPivotGroupExpansions: {},
-    pivotMode: false,
-    pivotModel: {
-      columns: [],
-      filters: {},
-      filtersIn: {},
-      rows: [],
-      sorts: [],
-      values: [],
-    },
-  });
-  const sortModel = atom((g) => g(models).sort);
-  const filterModel = atom((g) => g(models).filter);
-  const filterInModel = atom((g) => g(models).filterIn);
-  const rowGroupModel = atom((g) => g(models).group);
-  const groupExpansions = atom((g) => g(models).groupExpansions);
-  const aggModel = atom((g) => g(models).agg);
-  const quickSearch = atom((g) => g(models).quickSearch);
-  const columnPivotGroupExpansions = atom((g) => g(models).columnPivotGroupExpansions);
-  const columnPivotMode = atom((g) => g(models).pivotMode);
-  const columnPivotModel = atom((g) => g(models).pivotModel);
-  const grid$ = atom(null);
-  const snapshot = atom(0);
-  const pivotTree = atom((g) => {
-    g(snapshot);
-    const grid = g(grid$);
-    const model = g(columnPivotModel);
-    const lookup = new Map(grid.state.columns.get().map((c) => [c.id, c]));
-    const activeRows = model.rows.filter((c) => c.active ?? true);
-    const rowGroups = activeRows.length
-      ? activeRows.map((c) => {
-          const column = lookup.get(c.field);
-          return {
-            fn: (r) => {
-              const res = grid.api.columnField(column, r);
-              return res == null ? null : `${res}`;
-            },
-          };
-        })
-      : [{ fn: () => null }];
-    const filtered = computeFilteredRows(
-      g(centerNodes),
-      grid,
-      model.filters,
-      model.filtersIn,
-      "",
-      "case-sensitive",
-      true,
-    );
-    const aggModel = createAggModel(
-      model,
-      grid.state.columnPivotColumns.get(),
-      grid.state.columnGroupJoinDelimiter.get(),
-    );
-    const rowAggModel = Object.entries(aggModel).map(([name, agg]) => {
-      if (typeof agg.fn === "function") {
-        const fn = agg.fn;
-        return {
-          name,
-          fn: (rows) =>
-            fn(
-              rows.map((c) => c.data),
-              grid,
-            ),
-        };
-      }
-      const key = agg.fn;
-      const fn = (data) => {
-        const fieldData = data.map((r) =>
-          grid?.api.columnField(name, { kind: "leaf", data: r.data }),
-        );
-        return builtIns[key](fieldData);
-      };
-      return { name, fn };
     });
-    return makeClientTree({
-      rowData: filtered,
-      rowAggModel: rowAggModel,
-      rowBranchModel: rowGroups,
-      rowIdGroup: p.rowIdBranch,
-      rowIdLeaf: p.rowIdLeaf,
+    const normalTree = atom((g) => {
+        g(snapshot);
+        const grid = g(grid$);
+        const rows = g(centerNodes);
+        const filtered = computeFilteredRows(rows, grid, g(filterModel), g(filterInModel), g(quickSearch), grid?.state.quickSearchSensitivity.get() ?? "case-sensitive", false);
+        const rowGroups = g(rowGroupModel)
+            .map((c) => {
+            if (typeof c === "string")
+                return (r) => grid.api.columnField(c, r);
+            if (typeof c.field === "string" || typeof c.field === "number")
+                return (r) => r.data[c.field];
+            if (typeof c.field === "function")
+                return (r) => c.field({ data: r.data, grid: grid });
+            return (r) => get(r.data, c.field.path);
+        })
+            .map((c) => ({ fn: c }));
+        const rowAggModel = Object.entries(g(aggModel)).map(([name, agg]) => {
+            if (typeof agg.fn === "function") {
+                const fn = agg.fn;
+                return {
+                    name,
+                    fn: (rows) => fn(rows.map((c) => c.data), grid),
+                };
+            }
+            const key = agg.fn;
+            const fn = (data) => {
+                const fieldData = data.map((r) => grid?.api.columnField(name, { kind: "leaf", data: r.data }));
+                return builtIns[key](fieldData);
+            };
+            return { name, fn };
+        });
+        return makeClientTree({
+            rowData: filtered,
+            rowAggModel: grid ? rowAggModel : [],
+            rowBranchModel: grid ? rowGroups : [],
+            rowIdGroup: p.rowIdBranch,
+            rowIdLeaf: p.rowIdLeaf,
+        });
     });
-  });
-  const normalTree = atom((g) => {
-    g(snapshot);
-    const grid = g(grid$);
-    const rows = g(centerNodes);
-    const filtered = computeFilteredRows(
-      rows,
-      grid,
-      g(filterModel),
-      g(filterInModel),
-      g(quickSearch),
-      grid?.state.quickSearchSensitivity.get() ?? "case-sensitive",
-      false,
-    );
-    const rowGroups = g(rowGroupModel)
-      .map((c) => {
-        if (typeof c === "string") return (r) => grid.api.columnField(c, r);
-        if (typeof c.field === "string" || typeof c.field === "number")
-          return (r) => r.data[c.field];
-        if (typeof c.field === "function") return (r) => c.field({ data: r.data, grid: grid });
-        return (r) => get(r.data, c.field.path);
-      })
-      .map((c) => ({ fn: c }));
-    const rowAggModel = Object.entries(g(aggModel)).map(([name, agg]) => {
-      if (typeof agg.fn === "function") {
-        const fn = agg.fn;
-        return {
-          name,
-          fn: (rows) =>
-            fn(
-              rows.map((c) => c.data),
-              grid,
-            ),
+    const sortComparator = atom((g) => {
+        const model = g(columnPivotMode) ? g(columnPivotModel).sorts : g(sortModel);
+        const grid = g(grid$);
+        if (!model.length || !grid)
+            return () => 0;
+        const comparator = (l, r) => {
+            let res = 0;
+            for (const sortSpec of model) {
+                const sort = sortSpec.sort;
+                const columnId = sortSpec.columnId;
+                const ld = l.kind === 2
+                    ? { kind: "branch", data: l.data, key: l.key }
+                    : { kind: "leaf", data: l.data.data };
+                const rd = r.kind === 2
+                    ? { kind: "branch", data: r.data, key: r.key }
+                    : { kind: "leaf", data: r.data.data };
+                if (sort.kind === "custom") {
+                    res = sort.comparator(ld, rd, sort.options ?? {});
+                }
+                else if (sort.kind === "number") {
+                    const left = grid.api.columnField(columnId, ld);
+                    const right = grid.api.columnField(columnId, rd);
+                    res = numberComparator(left, right, sort.options ?? {});
+                }
+                else if (sort.kind === "date") {
+                    const left = grid.api.columnField(columnId, ld);
+                    const right = grid.api.columnField(columnId, rd);
+                    res = dateComparator(left, right, sort.options ?? {});
+                }
+                else if (sort.kind === "string") {
+                    const left = grid.api.columnField(columnId, ld);
+                    const right = grid.api.columnField(columnId, rd);
+                    res = stringComparator(left, right, sort.options ?? {});
+                }
+                else {
+                    res = 0;
+                }
+                res = sortSpec.isDescending ? -res : res;
+                if (res !== 0)
+                    break;
+            }
+            return res;
         };
-      }
-      const key = agg.fn;
-      const fn = (data) => {
-        const fieldData = data.map((r) =>
-          grid?.api.columnField(name, { kind: "leaf", data: r.data }),
-        );
-        return builtIns[key](fieldData);
-      };
-      return { name, fn };
+        return comparator;
     });
-    return makeClientTree({
-      rowData: filtered,
-      rowAggModel: grid ? rowAggModel : [],
-      rowBranchModel: grid ? rowGroups : [],
-      rowIdGroup: p.rowIdBranch,
-      rowIdLeaf: p.rowIdLeaf,
+    const idToNode = atom((g) => {
+        const map = new Map();
+        traverse(g(tree).root, (node) => {
+            map.set(node.id, node);
+        });
+        return map;
     });
-  });
-  const sortComparator = atom((g) => {
-    const model = g(columnPivotMode) ? g(columnPivotModel).sorts : g(sortModel);
-    const grid = g(grid$);
-    if (!model.length || !grid) return () => 0;
-    const comparator = (l, r) => {
-      let res = 0;
-      for (const sortSpec of model) {
-        const sort = sortSpec.sort;
-        const columnId = sortSpec.columnId;
-        const ld =
-          l.kind === 2
-            ? { kind: "branch", data: l.data, key: l.key }
-            : { kind: "leaf", data: l.data.data };
-        const rd =
-          r.kind === 2
-            ? { kind: "branch", data: r.data, key: r.key }
-            : { kind: "leaf", data: r.data.data };
-        if (sort.kind === "custom") {
-          res = sort.comparator(ld, rd, sort.options ?? {});
-        } else if (sort.kind === "number") {
-          const left = grid.api.columnField(columnId, ld);
-          const right = grid.api.columnField(columnId, rd);
-          res = numberComparator(left, right, sort.options ?? {});
-        } else if (sort.kind === "date") {
-          const left = grid.api.columnField(columnId, ld);
-          const right = grid.api.columnField(columnId, rd);
-          res = dateComparator(left, right, sort.options ?? {});
-        } else if (sort.kind === "string") {
-          const left = grid.api.columnField(columnId, ld);
-          const right = grid.api.columnField(columnId, rd);
-          res = stringComparator(left, right, sort.options ?? {});
-        } else {
-          res = 0;
-        }
-        res = sortSpec.isDescending ? -res : res;
-        if (res !== 0) break;
-      }
-      return res;
-    };
-    return comparator;
-  });
-  const idToNode = atom((g) => {
-    const map = new Map();
-    traverse(g(tree).root, (node) => {
-      map.set(node.id, node);
+    const tree = atom((g) => (g(columnPivotMode) ? g(pivotTree) : g(normalTree)));
+    const initialized = atom(false);
+    const flatPivot = atom((g) => {
+        if (!g(initialized))
+            return { flat: [], idMap: new Map(), idToIndexMap: new Map() };
+        const idMap = new Map();
+        const idToIndexMap = new Map();
+        const flattened = [];
+        const comparator = g(sortComparator);
+        const expansions = g(columnPivotGroupExpansions);
+        const defaultExpansion = g(grid$)?.state.rowGroupDefaultExpansion.get() ?? false;
+        let index = 0;
+        traverse(g(tree).root, (node) => {
+            if (node.kind === 1) {
+                return;
+            }
+            else {
+                flattened.push({
+                    kind: "branch",
+                    data: node.data,
+                    id: node.id,
+                    key: node.key,
+                    depth: node.depth,
+                });
+            }
+            idMap.set(node.id, flattened.at(-1));
+            idToIndexMap.set(node.id, index);
+            index++;
+            if (node.kind === 2) {
+                const expanded = expansions[node.id] ??
+                    (typeof defaultExpansion === "number"
+                        ? node.depth <= defaultExpansion
+                        : defaultExpansion);
+                return expanded;
+            }
+        }, comparator);
+        return { flat: flattened, idMap, idToIndexMap };
     });
-    return map;
-  });
-  const tree = atom((g) => (g(columnPivotMode) ? g(pivotTree) : g(normalTree)));
-  const initialized = atom(false);
-  const flatPivot = atom((g) => {
-    if (!g(initialized)) return { flat: [], idMap: new Map(), idToIndexMap: new Map() };
-    const idMap = new Map();
-    const idToIndexMap = new Map();
-    const flattened = [];
-    const comparator = g(sortComparator);
-    const expansions = g(columnPivotGroupExpansions);
-    const defaultExpansion = g(grid$)?.state.rowGroupDefaultExpansion.get() ?? false;
-    let index = 0;
-    traverse(
-      g(tree).root,
-      (node) => {
-        if (node.kind === 1) {
-          return;
-        } else {
-          flattened.push({
-            kind: "branch",
-            data: node.data,
-            id: node.id,
-            key: node.key,
-            depth: node.depth,
-          });
-        }
-        idMap.set(node.id, flattened.at(-1));
-        idToIndexMap.set(node.id, index);
-        index++;
-        if (node.kind === 2) {
-          const expanded =
-            expansions[node.id] ??
-            (typeof defaultExpansion === "number"
-              ? node.depth <= defaultExpansion
-              : defaultExpansion);
-          return expanded;
-        }
-      },
-      comparator,
-    );
-    return { flat: flattened, idMap, idToIndexMap };
-  });
-  const flatNormal = atom((g) => {
-    if (!g(initialized)) return { flat: [], idMap: new Map(), idToIndexMap: new Map() };
-    const idMap = new Map();
-    const idToIndexMap = new Map();
-    const flattened = [];
-    const comparator = g(sortComparator);
-    const expansions = g(groupExpansions);
-    const defaultExpansion = g(grid$)?.state.rowGroupDefaultExpansion.get() ?? false;
-    let index = g(topNodes).length;
-    traverse(
-      g(tree).root,
-      (node) => {
-        if (node.kind === 1) {
-          node.data.id = node.id;
-          flattened.push(node.data);
-        } else {
-          flattened.push({
-            kind: "branch",
-            data: node.data,
-            id: node.id,
-            key: node.key,
-            depth: node.depth,
-          });
-        }
-        idMap.set(node.id, flattened.at(-1));
-        idToIndexMap.set(node.id, index);
-        index++;
-        if (node.kind === 2) {
-          const expanded =
-            expansions[node.id] ??
-            (typeof defaultExpansion === "number"
-              ? node.depth <= defaultExpansion
-              : defaultExpansion);
-          return expanded;
-        }
-      },
-      comparator,
-    );
-    return { flat: flattened, idMap, idToIndexMap };
-  });
-  const flat = atom((g) => (g(columnPivotMode) ? g(flatPivot) : g(flatNormal)));
-  const flatLength = atom((g) => g(flat).flat.length);
-  const cleanup = [];
-  const init = (grid) => {
-    while (cleanup.length) cleanup.pop()?.();
-    rdsStore.set(grid$, grid);
-    const store = grid.state.rowDataStore;
-    // Monitor row count changes
-    const centerCount = rdsStore.get(flatLength);
-    store.rowCenterCount.set(centerCount);
-    cleanup.push(
-      rdsStore.sub(flatLength, () => {
+    const flatNormal = atom((g) => {
+        if (!g(initialized))
+            return { flat: [], idMap: new Map(), idToIndexMap: new Map() };
+        const idMap = new Map();
+        const idToIndexMap = new Map();
+        const flattened = [];
+        const comparator = g(sortComparator);
+        const expansions = g(groupExpansions);
+        const defaultExpansion = g(grid$)?.state.rowGroupDefaultExpansion.get() ?? false;
+        let index = g(topNodes).length;
+        traverse(g(tree).root, (node) => {
+            if (node.kind === 1) {
+                node.data.id = node.id;
+                flattened.push(node.data);
+            }
+            else {
+                flattened.push({
+                    kind: "branch",
+                    data: node.data,
+                    id: node.id,
+                    key: node.key,
+                    depth: node.depth,
+                });
+            }
+            idMap.set(node.id, flattened.at(-1));
+            idToIndexMap.set(node.id, index);
+            index++;
+            if (node.kind === 2) {
+                const expanded = expansions[node.id] ??
+                    (typeof defaultExpansion === "number"
+                        ? node.depth <= defaultExpansion
+                        : defaultExpansion);
+                return expanded;
+            }
+        }, comparator);
+        return { flat: flattened, idMap, idToIndexMap };
+    });
+    const flat = atom((g) => (g(columnPivotMode) ? g(flatPivot) : g(flatNormal)));
+    const flatLength = atom((g) => g(flat).flat.length);
+    const cleanup = [];
+    const init = (grid) => {
+        while (cleanup.length)
+            cleanup.pop()?.();
+        rdsStore.set(grid$, grid);
+        const store = grid.state.rowDataStore;
+        // Monitor row count changes
         const centerCount = rdsStore.get(flatLength);
         store.rowCenterCount.set(centerCount);
-        grid.state.rowDataStore.rowClearCache();
-      }),
-    );
-    const top = rdsStore.get(topData).length;
-    store.rowTopCount.set(top);
-    cleanup.push(
-      rdsStore.sub(topData, () => {
+        cleanup.push(rdsStore.sub(flatLength, () => {
+            const centerCount = rdsStore.get(flatLength);
+            store.rowCenterCount.set(centerCount);
+            grid.state.rowDataStore.rowClearCache();
+        }));
         const top = rdsStore.get(topData).length;
         store.rowTopCount.set(top);
-        grid.state.rowDataStore.rowClearCache();
-      }),
-    );
-    const bottom = rdsStore.get(bottomData).length;
-    store.rowBottomCount.set(bottom);
-    cleanup.push(
-      rdsStore.sub(bottomData, () => {
-        const bot = rdsStore.get(bottomData).length;
-        store.rowBottomCount.set(bot);
-        grid.state.rowDataStore.rowClearCache();
-      }),
-    );
-    const sort = grid.state.sortModel.get();
-    const filter = grid.state.filterModel.get();
-    const filterIn = grid.state.filterInModel.get();
-    const group = grid.state.rowGroupModel.get();
-    const groupExpansions = grid.state.rowGroupExpansions.get();
-    const agg = grid.state.aggModel.get();
-    const quickSearch = grid.state.quickSearch.get();
-    const pivotMode = grid.state.columnPivotMode.get();
-    const pivotModel = grid.state.columnPivotModel.get();
-    const columnPivotGroupExpansions = grid.state.columnPivotRowGroupExpansions.get();
-    let prevPivotColumnModel = pivotModel.columns;
-    let prevPivotColumnValues = pivotModel.values;
-    const updatePivotColumns = (model, ignoreEqualCheck = false) => {
-      if (
-        !ignoreEqualCheck &&
-        equal(prevPivotColumnModel, model.columns) &&
-        equal(prevPivotColumnValues, model.values)
-      )
-        return;
-      const lookup = itemsWithIdToMap(grid.state.columns.get());
-      const pivotColumns = createPivotColumns(model, lookup, grid, rdsStore.get(centerNodes));
-      grid.state.columnPivotColumns.set(pivotColumns);
-      prevPivotColumnModel = model.columns;
-      prevPivotColumnValues = model.values;
-    };
-    if (pivotMode) updatePivotColumns(pivotModel);
-    rdsStore.set(models, {
-      agg,
-      filter,
-      filterIn,
-      group,
-      quickSearch,
-      groupExpansions,
-      sort,
-      pivotMode,
-      pivotModel,
-      columnPivotGroupExpansions,
-    });
-    rdsStore.set(initialized, true);
-    rdsStore.sub(centerNodes, () => {
-      updatePivotColumns(grid.state.columnPivotModel.get(), true);
-    });
-    // Pivot model monitoring
-    cleanup.push(
-      grid.state.columnPivotMode.watch(() => {
-        const model = grid.state.columnPivotModel.get();
-        updatePivotColumns(model);
-        rdsStore.set(models, (prev) => ({ ...prev, pivotMode: grid.state.columnPivotMode.get() }));
-        grid.state.rowDataStore.rowClearCache();
-      }),
-    );
-    cleanup.push(
-      grid.state.columnPivotModel.watch(() => {
-        const model = grid.state.columnPivotModel.get();
-        updatePivotColumns(model);
-        rdsStore.set(models, (prev) => ({
-          ...prev,
-          pivotModel: model,
+        cleanup.push(rdsStore.sub(topData, () => {
+            const top = rdsStore.get(topData).length;
+            store.rowTopCount.set(top);
+            grid.state.rowDataStore.rowClearCache();
         }));
-        grid.state.rowDataStore.rowClearCache();
-      }),
-    );
-    grid.state.columnPivotRowGroupExpansions.watch(() => {
-      rdsStore.set(models, (prev) => ({
-        ...prev,
-        columnPivotGroupExpansions: grid.state.columnPivotRowGroupExpansions.get(),
-      }));
-      grid.state.rowDataStore.rowClearCache();
-    });
-    // Sort model monitoring
-    cleanup.push(
-      grid.state.sortModel.watch(() => {
-        rdsStore.set(models, (prev) => ({ ...prev, sort: grid.state.sortModel.get() }));
-        grid.state.rowDataStore.rowClearCache();
-      }),
-    );
-    // Filter model monitoring
-    cleanup.push(
-      grid.state.filterModel.watch(() => {
-        rdsStore.set(models, (prev) => ({ ...prev, filter: grid.state.filterModel.get() }));
-        grid.state.rowDataStore.rowClearCache();
-      }),
-    );
-    cleanup.push(
-      grid.state.quickSearch.watch(() => {
-        rdsStore.set(models, (prev) => ({ ...prev, quickSearch: grid.state.quickSearch.get() }));
-        grid.state.rowDataStore.rowClearCache();
-      }),
-    );
-    cleanup.push(
-      grid.state.filterInModel.watch(() => {
-        rdsStore.set(models, (prev) => ({ ...prev, filterIn: grid.state.filterInModel.get() }));
-        grid.state.rowDataStore.rowClearCache();
-      }),
-    );
-    // Row group model monitoring
-    cleanup.push(
-      grid.state.rowGroupModel.watch(() => {
-        rdsStore.set(models, (prev) => ({ ...prev, group: grid.state.rowGroupModel.get() }));
-        grid.state.rowDataStore.rowClearCache();
-      }),
-    );
-    // Row group expansions monitoring
-    cleanup.push(
-      grid.state.rowGroupExpansions.watch(() => {
-        rdsStore.set(models, (prev) => ({
-          ...prev,
-          groupExpansions: grid.state.rowGroupExpansions.get(),
+        const bottom = rdsStore.get(bottomData).length;
+        store.rowBottomCount.set(bottom);
+        cleanup.push(rdsStore.sub(bottomData, () => {
+            const bot = rdsStore.get(bottomData).length;
+            store.rowBottomCount.set(bot);
+            grid.state.rowDataStore.rowClearCache();
         }));
-        grid.state.rowDataStore.rowClearCache();
-      }),
-    );
-    // Agg model monitoring
-    cleanup.push(
-      grid.state.aggModel.watch(() => {
-        rdsStore.set(models, (prev) => ({ ...prev, agg: grid.state.aggModel.get() }));
-        grid.state.rowDataStore.rowClearCache();
-      }),
-    );
-  };
-  const rowById = (id) => {
-    const pinned = rdsStore.get(pinnedIdMap);
-    if (pinned.has(id)) return pinned.get(id);
-    const t = rdsStore.get(flat);
-    return t.idMap.get(id) ?? null;
-  };
-  const rowByIndex = (index) => {
-    const top = rdsStore.get(topNodes);
-    const bot = rdsStore.get(botNodes);
-    const center = rdsStore.get(flat).flat;
-    const topOffset = top.length;
-    const centerOffset = topOffset + center.length;
-    const botOffset = centerOffset + bot.length;
-    if (index < topOffset) return top[index];
-    if (index < centerOffset) return center[index - topOffset];
-    if (index < botOffset) return bot[index - centerOffset];
-    return null;
-  };
-  const rowUpdate = (updates) => {
-    const grid = rdsStore.get(grid$);
-    const d = rdsStore.get(data);
-    const idMap = rdsStore.get(idToNode);
-    const dataToSrc = rdsStore.get(dataToSrc$);
-    for (const [key, next] of updates.entries()) {
-      const row = typeof key === "string" ? rowById(key) : rowByIndex(key);
-      const treeNode = typeof key === "string" ? idMap.get(key) : null;
-      if ((!row && !treeNode) || !grid) {
-        console.error(`Failed to find the row with identifier ${key} which is being updated.`);
-        continue;
-      }
-      if (row?.kind === "branch") {
-        row.data = next;
-      } else {
-        const data = row?.kind === "leaf" ? row.data : treeNode?.data.data;
-        const source = dataToSrc.get(data);
-        if (source == null) {
-          console.error(`Failed to find the row with identifier ${key} which is being updated.`);
-          continue;
-        }
-        d[source] = next;
-      }
-    }
-    rdsStore.set(data, [...d]);
-    rdsStore.set(snapshot, (prev) => prev + 1);
-    grid.state.rowDataStore.rowClearCache();
-  };
-  const rowToIndex = (rowId) => {
-    const f = rdsStore.get(flat);
-    const top = rdsStore.get(topNodes);
-    const bot = rdsStore.get(botNodes);
-    const topCount = top.length;
-    const center = f.flat.length;
-    const rowIndex = f.idToIndexMap.get(rowId);
-    if (rowIndex != null) return rowIndex;
-    if (rowIndex == null) {
-      const foundTop = top.findIndex((row) => row.id === rowId);
-      if (foundTop !== -1) return foundTop;
-      const foundBot = bot.findIndex((row) => row.id === rowId);
-      if (foundBot !== -1) return foundBot + topCount + center;
-    }
-    return null;
-  };
-  const rowAllChildIds = (rowId) => {
-    const t = rdsStore.get(tree);
-    const ids = [];
-    const node = t.idToNode.get(rowId);
-    if (node?.kind === 2) {
-      traverse(node, (n) => {
-        ids.push(n.id);
-      });
-    }
-    return ids;
-  };
-  return [
-    {
-      init,
-      rowById,
-      rowByIndex,
-      rowAllChildIds,
-      rowUpdate,
-      inFilterItems: (c) => {
-        const grid = rdsStore.get(grid$);
-        if (!grid) return [];
-        const data = rdsStore.get(centerNodes);
-        const values = new Set(
-          data.map((row) => {
-            const field = grid.api.columnField(c, row);
-            return field;
-          }),
-        );
-        if (p.transformInFilterItem) {
-          return p.transformInFilterItem({ column: c, values: [...values] });
-        }
-        return [...values].map((x) => ({ id: `${x}`, label: `${x}`, value: x }));
-      },
-      rowAdd: (newRows, place = "end") => {
-        rdsStore.set(data, (prev) => {
-          if (!newRows.length) return prev;
-          let next;
-          if (place === "beginning") next = [...newRows, ...prev];
-          else if (place === "end") next = [...prev, ...newRows];
-          else {
-            next = [...prev];
-            next.splice(place, 0, ...newRows);
-          }
-          return next;
+        const sort = grid.state.sortModel.get();
+        const filter = grid.state.filterModel.get();
+        const filterIn = grid.state.filterInModel.get();
+        const group = grid.state.rowGroupModel.get();
+        const groupExpansions = grid.state.rowGroupExpansions.get();
+        const agg = grid.state.aggModel.get();
+        const quickSearch = grid.state.quickSearch.get();
+        const pivotMode = grid.state.columnPivotMode.get();
+        const pivotModel = grid.state.columnPivotModel.get();
+        const columnPivotGroupExpansions = grid.state.columnPivotRowGroupExpansions.get();
+        let prevPivotColumnModel = pivotModel.columns;
+        let prevPivotColumnValues = pivotModel.values;
+        const updatePivotColumns = (model, ignoreEqualCheck = false) => {
+            if (!ignoreEqualCheck &&
+                equal(prevPivotColumnModel, model.columns) &&
+                equal(prevPivotColumnValues, model.values))
+                return;
+            const lookup = itemsWithIdToMap(grid.state.columns.get());
+            const pivotColumns = createPivotColumns(model, lookup, grid, rdsStore.get(centerNodes));
+            grid.state.columnPivotColumns.set(pivotColumns);
+            prevPivotColumnModel = model.columns;
+            prevPivotColumnValues = model.values;
+        };
+        if (pivotMode)
+            updatePivotColumns(pivotModel);
+        rdsStore.set(models, {
+            agg,
+            filter,
+            filterIn,
+            group,
+            quickSearch,
+            groupExpansions,
+            sort,
+            pivotMode,
+            pivotModel,
+            columnPivotGroupExpansions,
         });
-        const grid = rdsStore.get(grid$);
-        grid?.state.rowDataStore.rowClearCache();
-      },
-      rowDelete: (rows) => {
-        const rowData = new Set(
-          rows
-            .map((c) => {
-              if (typeof c === "number") return rowByIndex(c)?.data;
-              else return rowById(c)?.data;
-            })
-            .filter((c) => !!c),
-        );
-        rdsStore.set(data, (prev) => {
-          if (!rowData.size) return prev;
-          return prev.filter((d) => !rowData.has(d));
+        rdsStore.set(initialized, true);
+        rdsStore.sub(centerNodes, () => {
+            updatePivotColumns(grid.state.columnPivotModel.get(), true);
         });
+        // Pivot model monitoring
+        cleanup.push(grid.state.columnPivotMode.watch(() => {
+            const model = grid.state.columnPivotModel.get();
+            updatePivotColumns(model);
+            rdsStore.set(models, (prev) => ({ ...prev, pivotMode: grid.state.columnPivotMode.get() }));
+            grid.state.rowDataStore.rowClearCache();
+        }));
+        cleanup.push(grid.state.columnPivotModel.watch(() => {
+            const model = grid.state.columnPivotModel.get();
+            updatePivotColumns(model);
+            rdsStore.set(models, (prev) => ({
+                ...prev,
+                pivotModel: model,
+            }));
+            grid.state.rowDataStore.rowClearCache();
+        }));
+        grid.state.columnPivotRowGroupExpansions.watch(() => {
+            rdsStore.set(models, (prev) => ({
+                ...prev,
+                columnPivotGroupExpansions: grid.state.columnPivotRowGroupExpansions.get(),
+            }));
+            grid.state.rowDataStore.rowClearCache();
+        });
+        // Sort model monitoring
+        cleanup.push(grid.state.sortModel.watch(() => {
+            rdsStore.set(models, (prev) => ({ ...prev, sort: grid.state.sortModel.get() }));
+            grid.state.rowDataStore.rowClearCache();
+        }));
+        // Filter model monitoring
+        cleanup.push(grid.state.filterModel.watch(() => {
+            rdsStore.set(models, (prev) => ({ ...prev, filter: grid.state.filterModel.get() }));
+            grid.state.rowDataStore.rowClearCache();
+        }));
+        cleanup.push(grid.state.quickSearch.watch(() => {
+            rdsStore.set(models, (prev) => ({ ...prev, quickSearch: grid.state.quickSearch.get() }));
+            grid.state.rowDataStore.rowClearCache();
+        }));
+        cleanup.push(grid.state.filterInModel.watch(() => {
+            rdsStore.set(models, (prev) => ({ ...prev, filterIn: grid.state.filterInModel.get() }));
+            grid.state.rowDataStore.rowClearCache();
+        }));
+        // Row group model monitoring
+        cleanup.push(grid.state.rowGroupModel.watch(() => {
+            rdsStore.set(models, (prev) => ({ ...prev, group: grid.state.rowGroupModel.get() }));
+            grid.state.rowDataStore.rowClearCache();
+        }));
+        // Row group expansions monitoring
+        cleanup.push(grid.state.rowGroupExpansions.watch(() => {
+            rdsStore.set(models, (prev) => ({
+                ...prev,
+                groupExpansions: grid.state.rowGroupExpansions.get(),
+            }));
+            grid.state.rowDataStore.rowClearCache();
+        }));
+        // Agg model monitoring
+        cleanup.push(grid.state.aggModel.watch(() => {
+            rdsStore.set(models, (prev) => ({ ...prev, agg: grid.state.aggModel.get() }));
+            grid.state.rowDataStore.rowClearCache();
+        }));
+    };
+    const rowById = (id) => {
+        const pinned = rdsStore.get(pinnedIdMap);
+        if (pinned.has(id))
+            return pinned.get(id);
+        const t = rdsStore.get(flat);
+        return t.idMap.get(id) ?? null;
+    };
+    const rowByIndex = (index) => {
+        const top = rdsStore.get(topNodes);
+        const bot = rdsStore.get(botNodes);
+        const center = rdsStore.get(flat).flat;
+        const topOffset = top.length;
+        const centerOffset = topOffset + center.length;
+        const botOffset = centerOffset + bot.length;
+        if (index < topOffset)
+            return top[index];
+        if (index < centerOffset)
+            return center[index - topOffset];
+        if (index < botOffset)
+            return bot[index - centerOffset];
+        return null;
+    };
+    const rowUpdate = (updates) => {
         const grid = rdsStore.get(grid$);
-        grid?.state.rowDataStore.rowClearCache();
-      },
-      rowSetBotData: (data) => {
-        rdsStore.set(bottomData, data);
-        const grid = rdsStore.get(grid$);
-        grid?.state.rowDataStore.rowClearCache();
-      },
-      rowSetCenterData: (d) => {
-        rdsStore.set(data, d);
-        const grid = rdsStore.get(grid$);
-        grid?.state.rowDataStore.rowClearCache();
-      },
-      rowSetTopData: (data) => {
-        rdsStore.set(topData, data);
-        const grid = rdsStore.get(grid$);
-        grid?.state.rowDataStore.rowClearCache();
-      },
-      rowExpand: (expansions) => {
-        const grid = rdsStore.get(grid$);
-        if (!grid) return;
-        const mode = grid.state.columnPivotMode.get();
-        if (mode)
-          grid.state.columnPivotRowGroupExpansions.set((prev) => ({ ...prev, ...expansions }));
-        else grid.state.rowGroupExpansions.set((prev) => ({ ...prev, ...expansions }));
-      },
-      rowToIndex,
-      rowSelect: (params) => {
-        const grid = rdsStore.get(grid$);
-        if (!grid) return;
-        if (params.mode === "none") return;
-        if (params.mode === "single") {
-          if (params.deselect) {
-            grid.state.rowSelectedIds.set(new Set());
-          } else {
-            grid.state.rowSelectedIds.set(new Set([params.startId]));
-          }
-          return;
-        }
-        const ids = new Set();
-        if (params.startId === params.endId) {
-          ids.add(params.startId);
-          if (params.selectChildren) {
-            rowAllChildIds(params.startId).forEach((c) => ids.add(c));
-          }
-        } else {
-          const first = rowToIndex(params.startId);
-          const last = rowToIndex(params.endId);
-          if (first == null || last == null) return;
-          const start = Math.min(first, last);
-          const end = Math.max(first, last);
-          for (let i = start; i <= end; i++) {
-            const row = rowByIndex(i);
-            if (!row) continue;
-            if (params.selectChildren) {
-              rowAllChildIds(row.id).forEach((c) => ids.add(c));
+        const d = rdsStore.get(data);
+        const idMap = rdsStore.get(idToNode);
+        const dataToSrc = rdsStore.get(dataToSrc$);
+        for (const [key, next] of updates.entries()) {
+            const row = typeof key === "string" ? rowById(key) : rowByIndex(key);
+            const treeNode = typeof key === "string" ? idMap.get(key) : null;
+            if ((!row && !treeNode) || !grid) {
+                console.error(`Failed to find the row with identifier ${key} which is being updated.`);
+                continue;
+            }
+            if (row?.kind === "branch") {
+                row.data = next;
+            }
+            else {
+                const data = row?.kind === "leaf" ? row.data : treeNode?.data.data;
+                const source = dataToSrc.get(data);
+                if (source == null) {
+                    console.error(`Failed to find the row with identifier ${key} which is being updated.`);
+                    continue;
+                }
+                d[source] = next;
             }
-            if (row?.id) ids.add(row.id);
-          }
-        }
-        if (params.deselect) {
-          const current = grid.state.rowSelectedIds.get();
-          const next = current.difference(ids);
-          grid.state.rowSelectedIds.set(next);
-        } else {
-          const current = grid.state.rowSelectedIds.get();
-          const next = current.union(ids);
-          grid.state.rowSelectedIds.set(next);
         }
-      },
-      rowSelectAll: (params) => {
-        const grid = rdsStore.get(grid$);
-        if (!grid) return;
-        if (params.deselect) {
-          grid.state.rowSelectedIds.set(new Set());
-          return;
+        rdsStore.set(data, [...d]);
+        rdsStore.set(snapshot, (prev) => prev + 1);
+        grid.state.rowDataStore.rowClearCache();
+    };
+    const rowToIndex = (rowId) => {
+        const f = rdsStore.get(flat);
+        const top = rdsStore.get(topNodes);
+        const bot = rdsStore.get(botNodes);
+        const topCount = top.length;
+        const center = f.flat.length;
+        const rowIndex = f.idToIndexMap.get(rowId);
+        if (rowIndex != null)
+            return rowIndex;
+        if (rowIndex == null) {
+            const foundTop = top.findIndex((row) => row.id === rowId);
+            if (foundTop !== -1)
+                return foundTop;
+            const foundBot = bot.findIndex((row) => row.id === rowId);
+            if (foundBot !== -1)
+                return foundBot + topCount + center;
         }
+        return null;
+    };
+    const rowAllChildIds = (rowId) => {
         const t = rdsStore.get(tree);
-        grid.state.rowSelectedIds.set(new Set(t.idsAll));
-      },
-      rowAreAllSelected: (rowId) => {
-        const g = rdsStore.get(grid$);
-        if (!g) return false;
-        const selected = g.state.rowSelectedIds.get();
-        if (rowId) {
-          const row = rowById(rowId);
-          if (!row) return false;
-          const childIds = new Set(rowAllChildIds(rowId));
-          return childIds.isSubsetOf(selected);
+        const ids = [];
+        const node = t.idToNode.get(rowId);
+        if (node?.kind === 2) {
+            traverse(node, (n) => {
+                ids.push(n.id);
+            });
         }
-        const f = rdsStore.get(tree);
-        return f.idsAll.isSubsetOf(selected);
-      },
-    },
-    {
-      top: makeGridAtom(topData, rdsStore),
-      center: makeGridAtom(data, rdsStore),
-      bottom: makeGridAtom(bottomData, rdsStore),
-    },
-  ];
+        return ids;
+    };
+    return [
+        {
+            init,
+            rowById,
+            rowByIndex,
+            rowAllChildIds,
+            rowUpdate,
+            inFilterItems: (c) => {
+                const grid = rdsStore.get(grid$);
+                if (!grid)
+                    return [];
+                const data = rdsStore.get(centerNodes);
+                const values = new Set(data.map((row) => {
+                    const field = grid.api.columnField(c, row);
+                    return field;
+                }));
+                if (p.transformInFilterItem) {
+                    return p.transformInFilterItem({ column: c, values: [...values] });
+                }
+                return [...values].map((x) => ({ id: `${x}`, label: `${x}`, value: x }));
+            },
+            rowAdd: (newRows, place = "end") => {
+                rdsStore.set(data, (prev) => {
+                    if (!newRows.length)
+                        return prev;
+                    let next;
+                    if (place === "beginning")
+                        next = [...newRows, ...prev];
+                    else if (place === "end")
+                        next = [...prev, ...newRows];
+                    else {
+                        next = [...prev];
+                        next.splice(place, 0, ...newRows);
+                    }
+                    return next;
+                });
+                const grid = rdsStore.get(grid$);
+                grid?.state.rowDataStore.rowClearCache();
+            },
+            rowDelete: (rows) => {
+                const rowData = new Set(rows
+                    .map((c) => {
+                    if (typeof c === "number")
+                        return rowByIndex(c)?.data;
+                    else
+                        return rowById(c)?.data;
+                })
+                    .filter((c) => !!c));
+                rdsStore.set(data, (prev) => {
+                    if (!rowData.size)
+                        return prev;
+                    return prev.filter((d) => !rowData.has(d));
+                });
+                const grid = rdsStore.get(grid$);
+                grid?.state.rowDataStore.rowClearCache();
+            },
+            rowSetBotData: (data) => {
+                rdsStore.set(bottomData, data);
+                const grid = rdsStore.get(grid$);
+                grid?.state.rowDataStore.rowClearCache();
+            },
+            rowSetCenterData: (d) => {
+                rdsStore.set(data, d);
+                const grid = rdsStore.get(grid$);
+                grid?.state.rowDataStore.rowClearCache();
+            },
+            rowSetTopData: (data) => {
+                rdsStore.set(topData, data);
+                const grid = rdsStore.get(grid$);
+                grid?.state.rowDataStore.rowClearCache();
+            },
+            rowData: (section) => {
+                const d = [];
+                if (section === "top" || section === "flat") {
+                    d.push(...rdsStore.get(topData));
+                }
+                if (section === "center" || section === "flat") {
+                    d.push(...rdsStore.get(data));
+                }
+                if (section === "bottom" || section === "flat") {
+                    d.push(...rdsStore.get(bottomData));
+                }
+                return d;
+            },
+            rowExpand: (expansions) => {
+                const grid = rdsStore.get(grid$);
+                if (!grid)
+                    return;
+                const mode = grid.state.columnPivotMode.get();
+                if (mode)
+                    grid.state.columnPivotRowGroupExpansions.set((prev) => ({ ...prev, ...expansions }));
+                else
+                    grid.state.rowGroupExpansions.set((prev) => ({ ...prev, ...expansions }));
+            },
+            rowToIndex,
+            rowSelect: (params) => {
+                const grid = rdsStore.get(grid$);
+                if (!grid)
+                    return;
+                if (params.mode === "none")
+                    return;
+                if (params.mode === "single") {
+                    if (params.deselect) {
+                        grid.state.rowSelectedIds.set(new Set());
+                    }
+                    else {
+                        grid.state.rowSelectedIds.set(new Set([params.startId]));
+                    }
+                    return;
+                }
+                const ids = new Set();
+                if (params.startId === params.endId) {
+                    ids.add(params.startId);
+                    if (params.selectChildren) {
+                        rowAllChildIds(params.startId).forEach((c) => ids.add(c));
+                    }
+                }
+                else {
+                    const first = rowToIndex(params.startId);
+                    const last = rowToIndex(params.endId);
+                    if (first == null || last == null)
+                        return;
+                    const start = Math.min(first, last);
+                    const end = Math.max(first, last);
+                    for (let i = start; i <= end; i++) {
+                        const row = rowByIndex(i);
+                        if (!row)
+                            continue;
+                        if (params.selectChildren) {
+                            rowAllChildIds(row.id).forEach((c) => ids.add(c));
+                        }
+                        if (row?.id)
+                            ids.add(row.id);
+                    }
+                }
+                if (params.deselect) {
+                    const current = grid.state.rowSelectedIds.get();
+                    const next = current.difference(ids);
+                    grid.state.rowSelectedIds.set(next);
+                }
+                else {
+                    const current = grid.state.rowSelectedIds.get();
+                    const next = current.union(ids);
+                    grid.state.rowSelectedIds.set(next);
+                }
+            },
+            rowSelectAll: (params) => {
+                const grid = rdsStore.get(grid$);
+                if (!grid)
+                    return;
+                if (params.deselect) {
+                    grid.state.rowSelectedIds.set(new Set());
+                    return;
+                }
+                const t = rdsStore.get(tree);
+                grid.state.rowSelectedIds.set(new Set(t.idsAll));
+            },
+            rowAreAllSelected: (rowId) => {
+                const g = rdsStore.get(grid$);
+                if (!g)
+                    return false;
+                const selected = g.state.rowSelectedIds.get();
+                if (rowId) {
+                    const row = rowById(rowId);
+                    if (!row)
+                        return false;
+                    const childIds = new Set(rowAllChildIds(rowId));
+                    return childIds.isSubsetOf(selected);
+                }
+                const f = rdsStore.get(tree);
+                return f.idsAll.isSubsetOf(selected);
+            },
+        },
+        {
+            top: makeGridAtom(topData, rdsStore),
+            center: makeGridAtom(data, rdsStore),
+            bottom: makeGridAtom(bottomData, rdsStore),
+        },
+    ];
 }
 export function useClientRowDataSource(p) {
-  const ds = useRef(null);
-  const dataAtomRef = useRef(null);
-  if (!ds.current) [ds.current, dataAtomRef.current] = makeClientDataSource(p);
-  const da = dataAtomRef.current;
-  if (p.reflectData) {
-    // Need to queue the microtask since it we cannot update state during render.
-    if (p.data !== da.center.get()) queueMicrotask(() => ds.current.rowSetCenterData(p.data));
-    if (!equal(p.topData ?? [], da.top.get())) {
-      queueMicrotask(() => ds.current.rowSetTopData(p.topData ?? []));
+    const ds = useRef(null);
+    const dataAtomRef = useRef(null);
+    if (!ds.current)
+        [ds.current, dataAtomRef.current] = makeClientDataSource(p);
+    const da = dataAtomRef.current;
+    if (p.reflectData) {
+        // Need to queue the microtask since it we cannot update state during render.
+        if (p.data !== da.center.get())
+            queueMicrotask(() => ds.current.rowSetCenterData(p.data));
+        if (!equal(p.topData ?? [], da.top.get())) {
+            queueMicrotask(() => ds.current.rowSetTopData(p.topData ?? []));
+        }
+        if (!equal(p.bottomData ?? [], da.bottom.get()))
+            queueMicrotask(() => ds.current.rowSetBotData(p.bottomData ?? []));
     }
-    if (!equal(p.bottomData ?? [], da.bottom.get()))
-      queueMicrotask(() => ds.current.rowSetBotData(p.bottomData ?? []));
-  }
-  return ds.current;
+    return ds.current;
 }