pixel-react-excel-sheet 1.0.21 → 1.0.22

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.21",
+  "version": "1.0.22",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
   "types": "lib/index.d.ts",

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

@@ -113,14 +113,11 @@ const ColumnIndicator: Types.ColumnIndicatorComponent = ({
       tabIndex={0}
     >
       <div      
-      style={{ position: 'fixed' }}
       onClick={handleClick}
       onContextMenu={contextClick}
       tabIndex={0}>
-
       </div>
       {label !== undefined ? label : columnIndexToLabel(column)}
-
       <div
         onMouseDown={onMouseDown}
         onClick={() => activate({ row: -1, column })}

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

@@ -1,5 +1,5 @@
 import * as Types from './types';
 
-const HeaderRow: Types.HeaderRowComponent = (props) => <tr {...props} />;
+const HeaderRow: Types.HeaderRowComponent = (props) => <tr style={{position:'relative'}} {...props} />;
 
 export default HeaderRow;

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

@@ -48,6 +48,7 @@
     overflow: scroll;
     top: 0;
     left: 0;
+    margin: 0;
     position: relative;
     &::-webkit-scrollbar {
       height: 0px;

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

@@ -99,7 +99,7 @@ export type Props<CellType extends Types.CellBase> = {
   onEvaluatedDataChange?: (data: Matrix.Matrix<CellType>) => void;
   setContextMenu: React.Dispatch<React.SetStateAction<Types.ContextMenuState>>;
     /** Set your dynamic sheet Height*/
-    sheetHeight: string;
+  sheetHeight: string;
 };
 
 /**
@@ -352,6 +352,35 @@ const Spreadsheet = <CellType extends Types.CellBase>(
   const tableNode = React.useMemo(
     () => (
       <Table columns={size.columns}>
+                <HeaderRow >
+          {<CornerIndicator />}
+          {range(size.columns).map((columnNumber) =>
+            columnLabels ? (
+              <ColumnIndicator
+                key={columnNumber}
+                column={columnNumber}
+                setContextMenu={props.setContextMenu}
+                label={
+                  columnNumber in columnLabels
+                    ? columnLabels[columnNumber]
+                    : null
+                }
+                deleteColumn={deleteColumn}
+                addColumnLeft={addColumnLeft}
+                data={props.data}
+              />
+            ) : (
+              <ColumnIndicator
+                key={columnNumber}
+                column={columnNumber}
+                setContextMenu={props.setContextMenu}
+                deleteColumn={deleteColumn}
+                addColumnLeft={addColumnLeft}
+                data={props.data}
+              />
+            )
+          )}
+        </HeaderRow>
         <HeaderRow>
           {<CornerIndicator />}
           {range(size.columns).map((columnNumber) =>