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

package/dist/+types.d.ts

@@ -1710,7 +1710,7 @@ export interface ClientRowDataSourceParams<T> {
    */
   readonly rowIdLeaf?: (d: RowLeaf<T>, i: number) => string;
   /**
-   * Callback that transforms a column in-filter item before it's applied.
+   * Callback that transforms a set of values for a given column into the in filter items LyteNyte Grid should use.
    */
   readonly transformInFilterItem?: (params: {
     column: Column<T>;
@@ -1746,7 +1746,7 @@ export interface ClientTreeDataSourceParams<T> {
    */
   readonly rowIdLeaf?: (d: RowLeaf<T>, i: number) => string;
   /**
-   * Callback that transforms a column in-filter item before it's applied.
+   * Callback that transforms a set of values for a given column into the in filter items LyteNyte Grid should use.
    */
   readonly transformInFilterItem?: (params: {
     column: Column<T>;
@@ -1812,6 +1812,10 @@ export interface RowDataSourceClientPaginated<T> {
    * Adds new rows to the grid optionally at a specific index, beginning, or end.
    */
   readonly rowAdd: (newRows: any[], atIndex?: number | "beginning" | "end") => void;
+  /**
+   * Sets the data for the center rows (scrollable rows) of the grid. Effectively replacing the current row data.
+   */
+  readonly rowSetCenterData: (newRows: any[]) => void;
   /**
    * Sets the data for rows pinned to the top section.
    */
@@ -1907,6 +1911,10 @@ export interface RowDataSourceClient<T> {
    * Adds new rows to the grid optionally at a specific index, beginning, or end.
    */
   readonly rowAdd: (newRows: any[], atIndex?: number | "beginning" | "end") => void;
+  /**
+   * Sets the data for the center rows (scrollable rows) of the grid. Effectively replacing the current row data.
+   */
+  readonly rowSetCenterData: (newRows: any[]) => void;
   /**
    * Sets the data for rows pinned to the top section.
    */
@@ -1976,6 +1984,10 @@ export interface RowDataSource<T> {
    * Adds new rows to the grid optionally at a specific index, beginning, or end.
    */
   readonly rowAdd: (newRows: any[], atIndex?: number | "beginning" | "end") => void;
+  /**
+   * Sets the data for the center rows (scrollable rows) of the grid. Effectively replacing the current row data.
+   */
+  readonly rowSetCenterData: (newRows: any[]) => void;
   /**
    * Sets the data for rows pinned to the top section.
    */
@@ -2051,6 +2063,10 @@ export interface RowDataSourceServer<T> {
    * Adds new rows to the grid optionally at a specific index, beginning, or end.
    */
   readonly rowAdd: (newRows: any[], atIndex?: number | "beginning" | "end") => void;
+  /**
+   * Sets the data for the center rows (scrollable rows) of the grid. Effectively replacing the current row data.
+   */
+  readonly rowSetCenterData: (newRows: any[]) => void;
   /**
    * Sets the data for rows pinned to the top section.
    */
@@ -2599,6 +2615,10 @@ export interface CellRendererParams<T> {
    * Indicates whether the row is in an indeterminate selection state.
    */
   readonly rowIndeterminate: boolean;
+  /**
+   * The pinning state of a row, used to fix it to the top or bottom of the grid.
+   */
+  readonly rowPin: RowPin;
 }
 /**
  * The parameters the `columnAutosize` method accepts.

package/dist/cells/cell.js

@@ -57,6 +57,7 @@ const CellImpl = forwardRef(function Cell({ cell, children, ...props }, forwarde
                   grid: grid,
                   rowIndex: cell.rowIndex,
                   colIndex: cell.colIndex,
+                  rowPin: cell.rowPin,
                 })
               : Renderer,
         }),

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

@@ -27,6 +27,9 @@ export function makeClientDataSourcePaginated(p) {
   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 = [];
@@ -166,6 +169,13 @@ export function makeClientDataSourcePaginated(p) {
     };
     return comparator;
   });
+  const idToNode = atom((g) => {
+    const map = new Map();
+    traverse(g(tree).root, (node) => {
+      map.set(node.id, node);
+    });
+    return map;
+  });
   const initialized = atom(false);
   const flat = atom((g) => {
     if (!g(initialized)) return { flat: [], idMap: new Map(), idToIndexMap: new Map() };
@@ -337,29 +347,31 @@ export function makeClientDataSourcePaginated(p) {
   };
   const rowUpdate = (updates) => {
     const grid = rdsStore.get(grid$);
-    const t = rdsStore.get(tree);
     const d = rdsStore.get(data);
-    for (const [key, data] of updates.entries()) {
-      const rowIndex = typeof key === "number" ? key : rowToIndex(key);
-      const row = rowByIndex(rowIndex);
-      if (!row || !grid) {
-        console.error(`Failed to find the row at index ${rowIndex} which is being updated.`);
+    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 = data;
+      if (row?.kind === "branch") {
+        row.data = next;
       } else {
-        const source = t.idToSourceIndex.get(row.id);
+        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 at index ${rowIndex} which is being updated.`);
+          console.error(`Failed to find the row with identifier ${key} which is being updated.`);
           continue;
         }
-        d[source] = data;
+        d[source] = next;
       }
-      grid.state.rowDataStore.rowInvalidateIndex(rowIndex);
     }
     rdsStore.set(data, [...d]);
     rdsStore.set(snapshot, (prev) => prev + 1);
+    grid.state.rowDataStore.rowClearCache();
   };
   const rowToIndex = (rowId) => {
     const f = rdsStore.get(flat);
@@ -464,6 +476,11 @@ export function makeClientDataSourcePaginated(p) {
         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$);
@@ -543,12 +560,12 @@ export function useClientRowDataSourcePaginated(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(() => da.center.set(p.data));
+    if (p.data !== da.center.get()) queueMicrotask(() => ds.current.rowSetCenterData(p.data));
     if (!equal(p.topData ?? [], da.top.get())) {
-      queueMicrotask(() => da.top.set(p.topData ?? []));
+      queueMicrotask(() => ds.current.rowSetTopData(p.topData ?? []));
     }
     if (!equal(p.bottomData ?? [], da.bottom.get()))
-      queueMicrotask(() => da.bottom.set(p.bottomData ?? []));
+      queueMicrotask(() => ds.current.rowSetBotData(p.bottomData ?? []));
   }
   return ds.current;
 }

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

@@ -19,6 +19,9 @@ export function makeClientDataSource(p) {
   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 = [];
@@ -230,6 +233,13 @@ export function makeClientDataSource(p) {
     };
     return comparator;
   });
+  const idToNode = atom((g) => {
+    const map = new Map();
+    traverse(g(tree).root, (node) => {
+      map.set(node.id, node);
+    });
+    return map;
+  });
   const tree = atom((g) => (g(columnPivotMode) ? g(pivotTree) : g(normalTree)));
   const initialized = atom(false);
   const flatPivot = atom((g) => {
@@ -486,29 +496,31 @@ export function makeClientDataSource(p) {
   };
   const rowUpdate = (updates) => {
     const grid = rdsStore.get(grid$);
-    const t = rdsStore.get(normalTree);
     const d = rdsStore.get(data);
-    for (const [key, data] of updates.entries()) {
-      const rowIndex = typeof key === "number" ? key : rowToIndex(key);
-      const row = rowByIndex(rowIndex);
-      if (!row || !grid) {
-        console.error(`Failed to find the row at index ${rowIndex} which is being updated.`);
+    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 = data;
+      if (row?.kind === "branch") {
+        row.data = next;
       } else {
-        const source = t.idToSourceIndex.get(row.id);
+        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 at index ${rowIndex} which is being updated.`);
+          console.error(`Failed to find the row with identifier ${key} which is being updated.`);
           continue;
         }
-        d[source] = data;
+        d[source] = next;
       }
-      grid.state.rowDataStore.rowInvalidateIndex(rowIndex);
     }
     rdsStore.set(data, [...d]);
     rdsStore.set(snapshot, (prev) => prev + 1);
+    grid.state.rowDataStore.rowClearCache();
   };
   const rowToIndex = (rowId) => {
     const f = rdsStore.get(flat);
@@ -595,6 +607,11 @@ export function makeClientDataSource(p) {
         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$);
@@ -690,12 +707,12 @@ export function useClientRowDataSource(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(() => da.center.set(p.data));
+    if (p.data !== da.center.get()) queueMicrotask(() => ds.current.rowSetCenterData(p.data));
     if (!equal(p.topData ?? [], da.top.get())) {
-      queueMicrotask(() => da.top.set(p.topData ?? []));
+      queueMicrotask(() => ds.current.rowSetTopData(p.topData ?? []));
     }
     if (!equal(p.bottomData ?? [], da.bottom.get()))
-      queueMicrotask(() => da.bottom.set(p.bottomData ?? []));
+      queueMicrotask(() => ds.current.rowSetBotData(p.bottomData ?? []));
   }
   return ds.current;
 }

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

@@ -17,6 +17,9 @@ export function makeClientTreeDataSource(p) {
   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 = [];
@@ -145,6 +148,13 @@ export function makeClientTreeDataSource(p) {
     };
     return comparator;
   });
+  const idToNode = atom((g) => {
+    const map = new Map();
+    traverse(g(tree).root, (node) => {
+      map.set(node.id, node);
+    });
+    return map;
+  });
   const initialized = atom(false);
   const flat = atom((g) => {
     if (!g(initialized)) return { flat: [], idMap: new Map(), idToIndexMap: new Map() };
@@ -308,29 +318,31 @@ export function makeClientTreeDataSource(p) {
   };
   const rowUpdate = (updates) => {
     const grid = rdsStore.get(grid$);
-    const t = rdsStore.get(tree);
     const d = rdsStore.get(data);
-    for (const [key, data] of updates.entries()) {
-      const rowIndex = typeof key === "number" ? key : rowToIndex(key);
-      const row = rowByIndex(rowIndex);
-      if (!row || !grid) {
-        console.error(`Failed to find the row at index ${rowIndex} which is being updated.`);
+    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 = data;
+      if (row?.kind === "branch") {
+        row.data = next;
       } else {
-        const source = t.idToSourceIndex.get(row.id);
+        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 at index ${rowIndex} which is being updated.`);
+          console.error(`Failed to find the row with identifier ${key} which is being updated.`);
           continue;
         }
-        d[source] = data;
+        d[source] = next;
       }
-      grid.state.rowDataStore.rowInvalidateIndex(rowIndex);
     }
     rdsStore.set(data, [...d]);
     rdsStore.set(snapshot, (prev) => prev + 1);
+    grid.state.rowDataStore.rowClearCache();
   };
   const rowToIndex = (rowId) => {
     const f = rdsStore.get(flat);
@@ -417,6 +429,11 @@ export function makeClientTreeDataSource(p) {
         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$);
@@ -512,12 +529,12 @@ export function useClientTreeDataSource(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(() => da.center.set(p.data));
+    if (p.data !== da.center.get()) queueMicrotask(() => ds.current.rowSetCenterData(p.data));
     if (!equal(p.topData ?? [], da.top.get())) {
-      queueMicrotask(() => da.top.set(p.topData ?? []));
+      queueMicrotask(() => ds.current.rowSetTopData(p.topData ?? []));
     }
     if (!equal(p.bottomData ?? [], da.bottom.get()))
-      queueMicrotask(() => da.bottom.set(p.bottomData ?? []));
+      queueMicrotask(() => ds.current.rowSetBotData(p.bottomData ?? []));
   }
   return ds.current;
 }

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

@@ -664,6 +664,9 @@ export function makeServerDataSource({
     rowSelect,
     rowSelectAll,
     rowSetBotData,
+    rowSetCenterData: () => {
+      throw new Error("Server side data source does not support full row updates");
+    },
     rowSetTopData,
     rowToIndex,
     rowUpdate,

package/dist/state/helpers/empty-row-data-source.js

@@ -11,6 +11,7 @@ export const emptyRowDataSource = {
   rowAdd: () => {},
   rowDelete: () => {},
   rowSetBotData: () => {},
+  rowSetCenterData: () => {},
   rowSetTopData: () => {},
   rowAreAllSelected: () => false,
   inFilterItems: () => [],

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@1771technologies/lytenyte-pro",
   "description": "Blazingly fast headless React data grid with 100s of features.",
-  "version": "1.0.0-beta.10",
+  "version": "1.0.0-beta.12",
   "type": "module",
   "license": "COMMERCIAL",
   "files": [
@@ -49,12 +49,12 @@
   },
   "dependencies": {
     "@1771technologies/atom": "^1.0.2",
-    "@1771technologies/lytenyte-dom-utils": "1.0.0-beta.10",
-    "@1771technologies/lytenyte-dragon": "1.0.0-beta.10",
-    "@1771technologies/lytenyte-shared": "1.0.0-beta.10",
-    "@1771technologies/lytenyte-js-utils": "1.0.0-beta.10",
-    "@1771technologies/lytenyte-core": "1.0.0-beta.10",
-    "@1771technologies/lytenyte-react-hooks": "1.0.0-beta.10"
+    "@1771technologies/lytenyte-js-utils": "1.0.0-beta.12",
+    "@1771technologies/lytenyte-dragon": "1.0.0-beta.12",
+    "@1771technologies/lytenyte-shared": "1.0.0-beta.12",
+    "@1771technologies/lytenyte-dom-utils": "1.0.0-beta.12",
+    "@1771technologies/lytenyte-react-hooks": "1.0.0-beta.12",
+    "@1771technologies/lytenyte-core": "1.0.0-beta.12"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",