pixel-react-excel-sheet 1.0.27 → 1.0.28

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "pixel-react-excel-sheet",
   "description": "Great for pixel-perfect, design-focused components in React",
-  "version": "1.0.27",
+  "version": "1.0.28",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
   "types": "lib/index.d.ts",
   "author": {
     "name": "thaneshwaran"
-  },
+    },
   "license": "MIT",
   "devDependencies": {
     "@babel/preset-react": "^7.25.9",

package/src/components/Excel/ExcelFile/ExcelFileComponents/ColumnIndicator.tsx

@@ -105,7 +105,7 @@ const ColumnIndicator: Types.ColumnIndicatorComponent = ({
 
   return (
     <th
-      style={{ minWidth: `${columnWidth}px`}} //Dynamic value, Inline Styling required
+      style={{ minWidth: `${columnWidth}px`, position: 'sticky' }} //Dynamic value, Inline Styling required
       className={classNames('ff-spreadsheet-header', {
         'ff-spreadsheet-header--selected': selected,
       })}
@@ -113,11 +113,14 @@ const ColumnIndicator: Types.ColumnIndicatorComponent = ({
       onContextMenu={contextClick}
       tabIndex={0}
     >
-      <div onClick={handleClick} onContextMenu={contextClick} tabIndex={0}>
-        <Typography fontWeight="medium">
-          {label !== undefined ? label : columnIndexToLabel(column)}
-        </Typography>
+      <div      
+      onClick={handleClick}
+      onContextMenu={contextClick}
+      tabIndex={0}>
       </div>
+      <Typography fontWeight='medium'>
+      {label !== undefined ? label : columnIndexToLabel(column)}
+      </Typography>
       <div
         onMouseDown={onMouseDown}
         onClick={() => activate({ row: -1, column })}

package/src/components/Excel/ExcelFile/ExcelFileComponents/RowIndicator.tsx

@@ -106,7 +106,7 @@ const RowIndicator: Types.RowIndicatorComponent = ({
       style={{
         height: `${rowHeight}px`,
         minWidth: '60px',
-      }}
+      }} //Dynamic value, Inline Styling required
       className={classNames('ff-spreadsheet-header', {
         'ff-spreadsheet-header--selected': selected,
       })}
@@ -114,12 +114,9 @@ const RowIndicator: Types.RowIndicatorComponent = ({
       onContextMenu={contextClick}
       tabIndex={0}
     >
-      <div style={{ position: 'sticky', zIndex: 2000 }}>
-        <Typography fontWeight="medium">
-          {label !== undefined ? label : row + 1}
-        </Typography>
-      </div>
-
+      <Typography fontWeight="medium">
+        {label !== undefined ? label : row + 1}
+      </Typography>
       <div
         onMouseDown={onMouseDown}
         onClick={() => activate({ row, column: -1 })}

package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss

@@ -3,6 +3,7 @@
 .ff-excel {
   display: flex;
   flex-direction: column;
+  width: 100%;
 
   .ff-excel-toolbar-container {
     position: relative;
@@ -28,6 +29,10 @@
     color: var(--text-color);
     scrollbar-width: none;
     display: inline-block;
+    width: 100%;
+    top: 0px;
+    left: 0px;
+
   }
 
   .ff-spreadsheet-active-cell {
@@ -43,6 +48,9 @@
 
   .ff-spreadsheet-table {
     overflow: scroll;
+    top: 0;
+    left: 0;
+    margin: 0;
     position: relative;
     &::-webkit-scrollbar {
       height: 0px;
@@ -89,11 +97,12 @@
     color: var(--readonly-text-color);
     text-align: center;
     z-index: 1000;
+    position: sticky;
   }
 
   .ff-spreadsheet-corner-header {
     position: fixed;
-    z-index: 3000;
+    z-index: 2000;
   }
 
   .ff-spreadsheet-row-header {

package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.tsx

@@ -98,7 +98,7 @@ export type Props<CellType extends Types.CellBase> = {
   /** Callback called when the Spreadsheet's evaluated data changes. */
   onEvaluatedDataChange?: (data: Matrix.Matrix<CellType>) => void;
   setContextMenu: React.Dispatch<React.SetStateAction<Types.ContextMenuState>>;
-  /** Set your dynamic sheet Height*/
+    /** Set your dynamic sheet Height*/
   sheetHeight: string;
 };
 
@@ -446,23 +446,23 @@ const Spreadsheet = <CellType extends Types.CellBase>(
   const rootNode = React.useMemo(
     () => (
       <div className="ff-excel">
-        <div className="ff-excel-toolbar-container">
-          <ExcelToolBar
-            onBold={onBold}
-            onItalic={onItalic}
-            setUnderlineType={setUnderlineType}
-            setColor={setColor}
-            setBorderType={setBorderType}
-            setFontSize={setFontSize}
-            setFontFamily={setFontFamily}
-            setTextAlign={setTextAlign}
-            setBackgroundColor={setBackgroundColor}
-            setFormatePainter={setFormatePainter}
-          />
-        </div>
+      <div className="ff-excel-toolbar-container">
+        <ExcelToolBar
+          onBold={onBold}
+          onItalic={onItalic}
+          setUnderlineType={setUnderlineType}
+          setColor={setColor}
+          setBorderType={setBorderType}
+          setFontSize={setFontSize}
+          setFontFamily={setFontFamily}
+          setTextAlign={setTextAlign}
+          setBackgroundColor={setBackgroundColor}
+          setFormatePainter={setFormatePainter}
+        />
+      </div>
         <div
           ref={rootRef}
-          style={{ height: sheetHeight }}
+          style={{height:sheetHeight}}
           className={classNames('ff-spreadsheet', className)}
           onKeyDown={handleKeyDown}
           onMouseMove={handleMouseMove}