pixel-react-excel-sheet 1.0.26 → 1.0.27

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "pixel-react-excel-sheet",
   "description": "Great for pixel-perfect, design-focused components in React",
-  "version": "1.0.26",
+  "version": "1.0.27",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
   "types": "lib/index.d.ts",

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

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

@@ -102,37 +102,38 @@ const RowIndicator: Types.RowIndicatorComponent = ({
   );
 
   return (
-<th
-  style={{
-    height: `${rowHeight}px`,
-    minWidth: '60px',
-  }}
-  className={classNames('ff-spreadsheet-header', {
-    'ff-spreadsheet-header--selected': selected,
-  })}
-  onClick={handleClick}
-  onContextMenu={contextClick}
-  tabIndex={0}
->
-    <Typography fontWeight="medium">
-      {label !== undefined ? label : row + 1}
-    </Typography>
-
-  <div
-    onMouseDown={onMouseDown}
-    onClick={() => activate({ row, column: -1 })}
-    style={{
-      zIndex: 'inherit',
-      height: '2px',
-      position: 'absolute',
-      right: 0,
-      bottom: 0,
-      width: '100%',
-      cursor: 'ns-resize',
-    }}
-  />
-</th>
-
+    <th
+      style={{
+        height: `${rowHeight}px`,
+        minWidth: '60px',
+      }}
+      className={classNames('ff-spreadsheet-header', {
+        'ff-spreadsheet-header--selected': selected,
+      })}
+      onClick={handleClick}
+      onContextMenu={contextClick}
+      tabIndex={0}
+    >
+      <div style={{ position: 'sticky', zIndex: 2000 }}>
+        <Typography fontWeight="medium">
+          {label !== undefined ? label : row + 1}
+        </Typography>
+      </div>
+
+      <div
+        onMouseDown={onMouseDown}
+        onClick={() => activate({ row, column: -1 })}
+        style={{
+          zIndex: 'inherit',
+          height: '2px',
+          position: 'absolute',
+          right: 0,
+          bottom: 0,
+          width: '100%',
+          cursor: 'ns-resize',
+        }}
+      />
+    </th>
   );
 };
 

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

@@ -43,9 +43,6 @@
 
   .ff-spreadsheet-table {
     overflow: scroll;
-    top: 0;
-    left: 0;
-    margin: 0;
     position: relative;
     &::-webkit-scrollbar {
       height: 0px;
@@ -92,12 +89,11 @@
     color: var(--readonly-text-color);
     text-align: center;
     z-index: 1000;
-    position: sticky;
   }
 
   .ff-spreadsheet-corner-header {
     position: fixed;
-    z-index: 2000;
+    z-index: 3000;
   }
 
   .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}