pixel-react-excel-sheet 1.0.14 → 1.0.15

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

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

@@ -33,10 +33,14 @@ interface ExcelFileProps {
 
   /** Callback function to save the Excel data */
   onSave?: (saveData: any) => void;
+
+  /** Set your dynamic sheet Height*/
+  sheetHeight?: string;
 }
 
 const ExcelFile: React.FC<ExcelFileProps> = ({
   excelData,
+  sheetHeight = '100%',
   onSave = (saveData) => {
     saveData();
   },
@@ -440,6 +444,7 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
           {contextMenu.open && <ExcelContextMenu contextMenu={contextMenu} />}
           <div ref={sheetRef} className="ff-excel-sheet">
             <Spreadsheet
+              sheetHeight={sheetHeight}
               setContextMenu={setContextMenu}
               data={selectedSheetData}
               onEvaluatedDataChange={onEvaluateChange}
@@ -500,7 +505,7 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
           <Toastify />
         </div>
       )}
-      </>
+    </>
   );
 };
 

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

@@ -24,7 +24,6 @@
 
     position: relative;
     overflow: scroll;
-    height: 365px;
     background: var(--background-color);
     color: var(--text-color);
     scrollbar-width: none;

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

@@ -98,6 +98,8 @@ 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*/
+    sheetHeight: string;
 };
 
 /**
@@ -113,6 +115,7 @@ const Spreadsheet = <CellType extends Types.CellBase>(
     onKeyDown,
     Table = DefaultTable,
     Row = DefaultRow,
+    sheetHeight,
     HeaderRow = DefaultHeaderRow,
     DataEditor = DefaultDataEditor,
     DataViewer = DefaultDataViewer,
@@ -457,9 +460,9 @@ const Spreadsheet = <CellType extends Types.CellBase>(
           setFormatePainter={setFormatePainter}
         />
       </div>
-
         <div
           ref={rootRef}
+          style={{height:sheetHeight}}
           className={classNames('ff-spreadsheet', className)}
           onKeyDown={handleKeyDown}
           onMouseMove={handleMouseMove}

package/src/components/Excel/ExcelFile.stories.tsx

@@ -160,6 +160,7 @@ export const Default: Story = {
         action: () => {},
       },
     ],
+    sheetHeight:"",
     onSave: () => {},
   },
 };

package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx

@@ -219,6 +219,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
           <div className="ff-excel-toolbar-font-family">
             <Select
               showLabel={false}
+              optionZIndex={10000}
               onChange={(e) => {
                 setSelectedFontFamily({ label: e.label, value: e.value });
                 setFontFamily(data, e.label);
@@ -233,6 +234,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
           <div className="ff-excel-toolbar-font-size">
             <Select
               showLabel={false}
+              optionZIndex={5000}
               required={false}
               onChange={(e) => setFontSize(data, e.value)}
               optionsList={fontSize}
@@ -308,6 +310,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
             />
             <MenuOption
               iconName="arrow_down"
+              zIndex={2000}
               iconSize={12}
               options={underlineTypeIcon}
               tooltipPlacement="top"
@@ -384,6 +387,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
             <MenuOption
               iconName="arrow_down"
               iconSize={12}
+              zIndex={5000}
               options={borderTypeIcon}
               tooltipPlacement="top"
               variant="light"