[WINDOW]: pinned row and column support. (#173)

* [WINDOW]: added support for pinned columns and rows.

* [WINDOW]: wired in cell meta to pinned columns and rows.

Author: leebeydoun

.changeset/yellow-berries-count.md

@@ -0,0 +1,5 @@
+---
+"@resembli/react-virtualized-window": patch
+---
+
+Added full support for pinned left and pinned right columns and pinned top and bottom rows

packages/react-virtualized-window/src/RenderItem.tsx

@@ -8,7 +8,8 @@ type RenderItemsProps<T> = {
   itemWidth: number
   column: number
   row: number
-  pinned?: "left" | "right"
+  pinnedRow?: CellMeta["pinnedRow"]
+  pinnedColumn?: CellMeta["pinnedColumn"]
 }
 
 export const RenderItem = function <T>({
@@ -17,7 +18,8 @@ export const RenderItem = function <T>({
   itemWidth,
   column,
   row,
-  pinned,
+  pinnedRow,
+  pinnedColumn,
 }: RenderItemsProps<T>) {
   const itemStyles = React.useMemo(() => {
     return {
@@ -28,7 +30,10 @@ export const RenderItem = function <T>({
     }
   }, [itemWidth])
 
-  const cellMeta = React.useMemo<CellMeta>(() => ({ row, column, pinned }), [column, pinned, row])
+  const cellMeta = React.useMemo<CellMeta>(
+    () => ({ row, column, pinnedRow, pinnedColumn }),
+    [column, pinnedRow, pinnedColumn, row],
+  )
 
   return <Component data={itemProps} style={itemStyles} cellMeta={cellMeta} />
 }

packages/react-virtualized-window/src/ScrollDiv.tsx

@@ -7,6 +7,7 @@ interface ScrollDivProps {
   leftOffset: number
   topOffset: number
   top: number
+  left: number
 }
 
 export function ScrollDiv({
@@ -15,6 +16,7 @@ export function ScrollDiv({
   leftOffset,
   topOffset,
   top,
+  left,
   children,
 }: PropsWithChildren<ScrollDivProps>) {
   return (
@@ -25,6 +27,7 @@ export function ScrollDiv({
           disableSticky ? 0 : -topOffset
         }px, 0px)`,
         top,
+        left,
         willChange: "transform",
         ...style,
       }}