Expose width size to grid cell (#437)

* Adding width size in px to the grid cell as prop

* fixing import

* fixing ts issues

package.json

@@ -32,6 +32,7 @@
     "test": "vitest",
     "dev": "vite",
     "generate-tokens": "node build-tokens.js",
+    "typecheck": "tsc --noEmit",
     "build": "tsc && vite build",
     "build:watch": "watch 'npm run build' ./src",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",

src/components/Grid/Cell.tsx

@@ -3,14 +3,18 @@ import { GridChildComponentProps, areEqual } from "react-window";
 import { ItemDataType } from "./types";
 import { StyledCell } from "./StyledCell";
 
+type CellProps = GridChildComponentProps<ItemDataType> & {
+  width: number;
+}
+
 export const Cell = memo(
   ({
     data,
     rowIndex,
     columnIndex,
     style,
     ...props
-  }: GridChildComponentProps<ItemDataType>) => {
+  }: CellProps) => {
     const {
       cell: CellData,
       getSelectionType,

src/components/Grid/Grid.stories.tsx

@@ -2,13 +2,13 @@ import { useCallback, useEffect, useState } from "react";
 import { CellProps, GridContextMenuItemProps, SelectedRegion, SelectionFocus } from "..";
 import { Grid as CUIGrid } from "./Grid";
 
-const Cell: CellProps = ({ type, rowIndex, columnIndex, isScrolling, ...props }) => {
+const Cell: CellProps = ({ type, rowIndex, columnIndex, isScrolling, width, ...props }) => {
   return (
     <div
       data-scrolling={isScrolling}
       {...props}
     >
-      {rowIndex} {columnIndex} - {type}
+      {rowIndex} {columnIndex} - {type} - {width}px
     </div>
   );
 };

src/components/Grid/Grid.tsx

@@ -15,6 +15,7 @@ import {
   GridOnScrollProps,
   VariableSizeGrid,
   GridOnItemsRenderedProps,
+  GridChildComponentProps,
 } from "react-window";
 import AutoSizer, { Size } from "react-virtualized-auto-sizer";
 import RowNumberColumn from "./RowNumberColumn";
@@ -771,6 +772,16 @@ export const Grid = forwardRef<HTMLDivElement, GridProps>(
       }
     }, [rowStart, onItemsRendered]);
 
+    const CellWithWidth = (args: GridChildComponentProps<ItemDataType>): JSX.Element => {
+      const width = columnWidth(args.columnIndex);
+      return (
+        <Cell
+          {...args}
+          width={width}
+        />
+      );
+    }
+
     return (
       <ContextMenu
         modal={false}
@@ -823,7 +834,7 @@ export const Grid = forwardRef<HTMLDivElement, GridProps>(
                 onItemsRendered={onItemsRendered}
                 {...props}
               >
-                {Cell}
+                {CellWithWidth}
               </VariableSizeGrid>
             )}
           </AutoSizer>

src/components/Grid/Header.tsx

@@ -151,6 +151,7 @@ const Column = ({
         data-grid-column={columnIndex}
         data-selected={isSelected}
         $showBorder={showBorder}
+        width={columnWidth(columnIndex)}
       />
       <ColumnResizer
         height={height}

src/components/Grid/copyGridElements.ts

@@ -21,7 +21,7 @@ const addCellToRow = (
   const td = document.createElement("td");
   // const root = createRoot(td);
   const html = renderToStaticMarkup(
-    createElement(cell, { rowIndex, columnIndex, type: "row-cell" })
+    createElement(cell, { rowIndex, columnIndex, width: 1000, type: "row-cell" })
   );
   td.innerHTML = html;
 

src/components/Grid/types.ts

@@ -17,11 +17,13 @@ interface CellCommonProps extends HTMLAttributes<HTMLElement> {
 interface CellHeaderProps extends CellCommonProps {
   rowIndex?: never;
   type: "header-cell";
+  width: number;
 }
 
 interface CellBodyProps extends CellCommonProps {
   rowIndex: number;
   type: "row-cell";
+  width: number;
 }
 
 type CellComponentProps = CellHeaderProps | CellBodyProps;

src/examples/GridExample.tsx

@@ -8,13 +8,13 @@ import {
   Pagination,
 } from "..";
 
-const Cell: CellProps = ({ type, rowIndex, columnIndex, isScrolling, ...props }) => {
+const Cell: CellProps = ({ type, rowIndex, columnIndex, isScrolling, width, ...props }) => {
   return (
     <span
       data-scrolling={isScrolling}
       {...props}
     >
-      {rowIndex} {columnIndex} - {type}
+      {rowIndex} {columnIndex} - {type} {width}px
     </span>
   );
 };