Adds readonly prop to grid.

Author: natalyjazzviolin

src/components/Grid/Cell.tsx

@@ -21,6 +21,7 @@ export const Cell = memo(
       rowStart,
       rowAutoHeight,
       updateRowHeight,
+      readOnly = false,
     } = data;
 
     const currentRowIndex = rowIndex + rowStart;
@@ -96,6 +97,7 @@ export const Cell = memo(
           $height={rowHeight}
           data-grid-row={currentRowIndex}
           data-grid-column={columnIndex}
+          $readOnly={readOnly}
           $showBorder
           $rowAutoHeight={rowAutoHeight}
           {...props}

src/components/Grid/Grid.stories.tsx

@@ -28,6 +28,7 @@ interface Props {
     column: number;
   };
   rowAutoHeight?: boolean;
+  readOnly?: boolean;
 }
 const Grid = ({ columnCount, rowCount, focus: focusProp, ...props }: Props) => {
   const [focus, setFocus] = useState(focusProp);
@@ -79,6 +80,7 @@ const Grid = ({ columnCount, rowCount, focus: focusProp, ...props }: Props) => {
           });
         }}
         getMenuOptions={getMenuOptions}
+        readOnly={props.readOnly}
         rowAutoHeight={props.rowAutoHeight}
         {...props}
       />
@@ -97,6 +99,7 @@ export const Playground = {
     rowCount: 120,
     columnCount: 200,
     rowStart: 0,
+    readOnly: false,
   },
   parameters: {
     docs: {

src/components/Grid/Grid.tsx

@@ -149,6 +149,7 @@ export const Grid = forwardRef<HTMLDivElement, GridProps>(
       onContextMenu: onContextMenuProp,
       forwardedGridRef,
       onItemsRendered: onItemsRenderedProp,
+      readOnly = false,
       rowAutoHeight,
       ...props
     },
@@ -439,6 +440,7 @@ export const Grid = forwardRef<HTMLDivElement, GridProps>(
       rowAutoHeight,
       updateRowHeight,
       getRowHeight,
+      readOnly,
     };
 
     const InnerElementType = forwardRef<HTMLDivElement, InnerElementTypeTypes>(

src/components/Grid/StyledCell.tsx

@@ -13,6 +13,7 @@ export const StyledCell = styled.div<{
   $height: number;
   $type?: "body" | "header";
   $showBorder: boolean;
+  $readOnly?: boolean;
   $rowAutoHeight?: boolean;
 }>`
   display: block;
@@ -35,6 +36,7 @@ export const StyledCell = styled.div<{
     $height,
     $type = "body",
     $showBorder,
+    $readOnly,
     $rowAutoHeight,
   }) => `
     height: ${$rowAutoHeight ? "100%" : `${$height}px`};
@@ -64,7 +66,7 @@ export const StyledCell = styled.div<{
         : ""
     }
     ${
-      $isFocused
+      $isFocused && !$readOnly
         ? `box-shadow: inset 0 0 0 1px ${theme.click.grid[$type].cell.color.stroke.selectDirect};`
         : ""
     }
@@ -84,7 +86,7 @@ export const StyledCell = styled.div<{
         ? `
         border-right-color: ${
           theme.click.grid[$type].cell.color.stroke[
-            $isFocused ? "selectDirect" : $selectionType
+            $isFocused && !$readOnly ? "selectDirect" : $selectionType
           ]
         };
     `

src/components/Grid/types.ts

@@ -160,6 +160,7 @@ export interface ItemDataType {
   rowAutoHeight?: boolean;
   updateRowHeight: (rowIndex: number, height: number) => void;
   getRowHeight: (index: number) => number;
+  readOnly?: boolean;
 }
 
 export interface GridContextMenuItemProps extends Omit<ContextMenuItemProps, "children"> {
@@ -207,6 +208,7 @@ export interface GridProps
   onCopyCallback?: (copied: boolean) => void;
   onContextMenu?: MouseEventHandler<HTMLDivElement>;
   forwardedGridRef?: MutableRefObject<VariableSizeGrid>;
+  readOnly?: boolean;
   rowAutoHeight?: boolean;
 }