pixel-react-excel-sheet 1.0.27 → 1.0.29

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.29",
   "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

@@ -5,7 +5,6 @@ import * as Point from './point';
 import * as Actions from './actions';
 import useDispatch from './use-dispatch';
 import useSelector from './use-selector';
-import Typography from '../../../Typography';
 
 const ColumnIndicator: Types.ColumnIndicatorComponent = ({
   column,
@@ -113,11 +112,7 @@ 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>
+      {label !== undefined ? label : columnIndexToLabel(column)}
       <div
         onMouseDown={onMouseDown}
         onClick={() => activate({ row: -1, column })}
@@ -132,6 +127,31 @@ const ColumnIndicator: Types.ColumnIndicatorComponent = ({
         }}
       />
     </th>
+
+    // <th
+    //   style={{ minWidth: `${columnWidth}px`}} //Dynamic value, Inline Styling required
+    //   className={classNames('ff-spreadsheet-header', {
+    //     'ff-spreadsheet-header--selected': selected,
+    //   })}
+    //   onClick={handleClick}
+    //   onContextMenu={contextClick}
+    //   tabIndex={0}
+    // >
+    //   {label !== undefined ? label : columnIndexToLabel(column)}
+    //   <div
+    //     onMouseDown={onMouseDown}
+    //     onClick={() => activate({ row: -1, column })}
+    //     style={{
+    //       zIndex: 'inherit',
+    //       width: '2px',
+    //       position: 'absolute',
+    //       right: 0,
+    //       top: 0,
+    //       height: '100%',
+    //       cursor: 'ew-resize',
+    //     }}
+    //   />
+    // </th>
   );
 };
 

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

@@ -106,7 +106,8 @@ const RowIndicator: Types.RowIndicatorComponent = ({
       style={{
         height: `${rowHeight}px`,
         minWidth: '60px',
-      }}
+        position: 'relative',
+      }} //Dynamic value, Inline Styling required
       className={classNames('ff-spreadsheet-header', {
         'ff-spreadsheet-header--selected': selected,
       })}
@@ -114,12 +115,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

@@ -43,6 +43,9 @@
 
   .ff-spreadsheet-table {
     overflow: scroll;
+    top: 0;
+    left: 0;
+    margin: 0;
     position: relative;
     &::-webkit-scrollbar {
       height: 0px;
@@ -89,11 +92,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}