sheet-happens 0.0.18 → 0.0.19

package/dist/index.d.ts

@@ -32,9 +32,15 @@ export interface SheetMouseEvent extends MouseEvent {
     cellX: number;
     cellY: number;
 }
-export interface SheetProps {
+export interface SheetStyle {
+    hideGridlines?: boolean;
+    hideColumnHeaders?: boolean;
+    hideRowHeaders?: boolean;
     freezeColumns?: number;
     freezeRows?: number;
+    hideScrollBars?: boolean;
+}
+export interface SheetProps {
     cellWidth?: RowOrColumnProperty<number>;
     cellHeight?: RowOrColumnProperty<number>;
     columnHeaders?: RowOrColumnProperty<CellContentType>;
@@ -45,7 +51,7 @@ export interface SheetProps {
     displayData?: CellProperty<CellContentType>;
     editData?: CellProperty<string>;
     editKeys?: CellProperty<string>;
-    hideGridlines?: boolean;
+    sheetStyle?: SheetStyle;
     inputComponent?: (x: number, y: number, props: SheetInputProps, commitEditingCell?: () => void) => ReactElement | undefined;
     onSelectionChanged?: (x1: number, y1: number, x2: number, y2: number) => void;
     onRightClick?: (e: SheetMouseEvent) => void;

package/dist/index.js

@@ -71,11 +71,11 @@ var selBackColor = '#e9f0fd';
 var knobSize = 6;
 var gridColor = '#e2e3e3';
 var knobAreaBorderColor = '#707070';
-var rowHeaderWidth = 50;
+var kRowHeaderWidth = 50;
 var rowHeaderBackgroundColor = '#f8f9fa';
 var rowHeaderTextColor = '#666666';
 var rowHeaderSelectedBackgroundColor = '#e8eaed';
-var columnHeaderHeight = 22;
+var kColumnHeaderHeight = 22;
 var columnHeaderBackgroundColor = rowHeaderBackgroundColor;
 var columnHeaderSelectedBackgroundColor = rowHeaderSelectedBackgroundColor;
 var xBinSize = 10;
@@ -114,7 +114,14 @@ function resizeCanvas(canvas) {
       width = _canvas$getBoundingCl.width,
       height = _canvas$getBoundingCl.height;
 
-  var ratio = 2;
+  var _window = window,
+      _window$devicePixelRa = _window.devicePixelRatio,
+      ratio = _window$devicePixelRa === void 0 ? 1 : _window$devicePixelRa;
+
+  if (ratio < 1) {
+    ratio = 1;
+  }
+
   var newCanvasWidth = Math.round(width * ratio);
   var newCanvasHeight = Math.round(height * ratio);
 
@@ -328,8 +335,8 @@ function absCoordianteToCell(absX, absY, rowSizes, columnSizes) {
   };
 }
 
-function cellToAbsCoordinate(cellX, cellY, rowSizes, columnSizes, dataOffset, cellWidth, cellHeight) {
-  var absX = rowHeaderWidth;
+function cellToAbsCoordinate(cellX, cellY, rowSizes, columnSizes, dataOffset, cellWidth, cellHeight, sheetStyle) {
+  var absX = sheetStyle.rowHeaderWidth;
   var indX = columnSizes.index.findIndex(function (i) {
     return i === cellX;
   });
@@ -346,7 +353,7 @@ function cellToAbsCoordinate(cellX, cellY, rowSizes, columnSizes, dataOffset, ce
     }
   }
 
-  var absY = columnHeaderHeight;
+  var absY = sheetStyle.columnHeaderHeight;
   var indY = rowSizes.index.findIndex(function (i) {
     return i === cellY;
   });
@@ -496,16 +503,16 @@ function findInDisplayData(displayData, start, direction) {
   return i;
 }
 
-function renderOnCanvas(context, rowSizes, columnSizes, cellStyle, cellWidth, cellHeight, selection, knobDragInProgress, columnHeaders, columnHeaderStyle, knobArea, displayData, dataOffset, knobCoordinates, hideGridlines) {
+function renderOnCanvas(context, rowSizes, columnSizes, cellStyle, cellWidth, cellHeight, selection, knobDragInProgress, columnHeaders, columnHeaderStyle, knobArea, displayData, dataOffset, knobCoordinates, sheetStyle) {
   resizeCanvas(context.canvas);
   context.clearRect(0, 0, context.canvas.width, context.canvas.height);
   context.fillStyle = 'white';
   context.fillRect(0, 0, context.canvas.width, context.canvas.height);
-  var yCoord1 = columnHeaderHeight;
+  var yCoord1 = sheetStyle.columnHeaderHeight;
 
   for (var _iterator2 = _createForOfIteratorHelperLoose(rowSizes.index), _step2; !(_step2 = _iterator2()).done;) {
     var y = _step2.value;
-    var xCoord1 = rowHeaderWidth;
+    var xCoord1 = sheetStyle.rowHeaderWidth;
 
     for (var _iterator8 = _createForOfIteratorHelperLoose(columnSizes.index), _step8; !(_step8 = _iterator8()).done;) {
       var x = _step8.value;
@@ -542,8 +549,8 @@ function renderOnCanvas(context, rowSizes, columnSizes, cellStyle, cellWidth, ce
   var selectionActive = selx1 !== -1 && selx2 !== -1 || sely1 !== -1 && sely2 !== -1;
   var rowSelectionActive = selx1 === -1 && selx2 === -1 && sely1 !== -1 && sely2 !== -1;
   var colSelectionActive = selx1 !== -1 && selx2 !== -1 && sely1 === -1 && sely2 === -1;
-  var p1 = cellToAbsCoordinate(selx1, sely1, rowSizes, columnSizes, dataOffset, cellWidth, cellHeight);
-  var p2 = cellToAbsCoordinate(selx2, sely2, rowSizes, columnSizes, dataOffset, cellWidth, cellHeight);
+  var p1 = cellToAbsCoordinate(selx1, sely1, rowSizes, columnSizes, dataOffset, cellWidth, cellHeight, sheetStyle);
+  var p2 = cellToAbsCoordinate(selx2, sely2, rowSizes, columnSizes, dataOffset, cellWidth, cellHeight, sheetStyle);
   p2.x += cellWidth(selx2);
   p2.y += cellHeight(sely2);
 
@@ -589,105 +596,119 @@ function renderOnCanvas(context, rowSizes, columnSizes, cellStyle, cellWidth, ce
     }
   }
 
-  context.fillStyle = rowHeaderBackgroundColor;
-  context.fillRect(0, 0, rowHeaderWidth, context.canvas.height);
+  if (!sheetStyle.hideRowHeaders) {
+    context.fillStyle = rowHeaderBackgroundColor;
+    context.fillRect(0, 0, sheetStyle.rowHeaderWidth, context.canvas.height);
 
-  if (selectionActive) {
-    context.fillStyle = rowHeaderSelectedBackgroundColor;
-    context.fillRect(0, p1.y, rowHeaderWidth, p2.y - p1.y);
+    if (selectionActive) {
+      context.fillStyle = rowHeaderSelectedBackgroundColor;
+      context.fillRect(0, p1.y, sheetStyle.rowHeaderWidth, p2.y - p1.y);
+    }
   }
 
-  context.fillStyle = columnHeaderBackgroundColor;
-  context.fillRect(0, 0, context.canvas.width, columnHeaderHeight);
+  if (!sheetStyle.hideColumnHeaders) {
+    context.fillStyle = columnHeaderBackgroundColor;
+    context.fillRect(0, 0, context.canvas.width, sheetStyle.columnHeaderHeight);
 
-  if (selectionActive) {
-    context.fillStyle = columnHeaderSelectedBackgroundColor;
-    context.fillRect(p1.x, 0, p2.x - p1.x, columnHeaderHeight);
+    if (selectionActive) {
+      context.fillStyle = columnHeaderSelectedBackgroundColor;
+      context.fillRect(p1.x, 0, p2.x - p1.x, sheetStyle.columnHeaderHeight);
+    }
   }
 
   context.strokeStyle = gridColor;
   context.lineWidth = 1;
-  var startX = rowHeaderWidth;
-  var startY = columnHeaderHeight;
-  var xGridlineEnd = hideGridlines ? rowHeaderWidth : context.canvas.width;
-  var yGridlineEnd = hideGridlines ? columnHeaderHeight : context.canvas.height;
+  var startX = sheetStyle.rowHeaderWidth;
+  var startY = sheetStyle.columnHeaderHeight;
   var first = true;
+  var yGridlineEnd = sheetStyle.hideGridlines ? sheetStyle.columnHeaderHeight : context.canvas.height;
 
   for (var _iterator3 = _createForOfIteratorHelperLoose(columnSizes.index), _step3; !(_step3 = _iterator3()).done;) {
-    var col = _step3.value;
+    var _col = _step3.value;
     context.beginPath();
     context.moveTo(startX, 0);
 
     if (first) {
-      context.lineTo(startX, context.canvas.height);
+      if (!sheetStyle.hideRowHeaders) {
+        context.lineTo(startX, context.canvas.height);
+      }
+
       first = false;
     } else {
       context.lineTo(startX, yGridlineEnd);
     }
 
     context.stroke();
-    startX += cellWidth(col);
+    startX += cellWidth(_col);
   }
 
+  var xGridlineEnd = sheetStyle.hideGridlines ? sheetStyle.rowHeaderWidth : context.canvas.width;
   first = true;
 
   for (var _iterator4 = _createForOfIteratorHelperLoose(rowSizes.index), _step4; !(_step4 = _iterator4()).done;) {
-    var row = _step4.value;
+    var _row = _step4.value;
     context.beginPath();
     context.moveTo(0, startY);
 
     if (first) {
-      context.lineTo(context.canvas.width, startY);
+      if (!sheetStyle.hideColumnHeaders) {
+        context.lineTo(context.canvas.width, startY);
+      }
+
       first = false;
     } else {
       context.lineTo(xGridlineEnd, startY);
     }
 
     context.stroke();
-    startY += cellHeight(row);
+    startY += cellHeight(_row);
   }
 
-  startY = columnHeaderHeight;
-  context.textBaseline = 'middle';
-  context.textAlign = 'center';
-  context.font = defaultCellStyle.fontSize + 'px ' + defaultCellStyle.fontFamily;
-  context.fillStyle = rowHeaderTextColor;
-
-  for (var _iterator5 = _createForOfIteratorHelperLoose(rowSizes.index), _step5; !(_step5 = _iterator5()).done;) {
-    var _row = _step5.value;
-    var cellContent = _row + 1;
-    var chStyle = {};
-
-    if (rowSelectionActive && sely1 <= _row && sely2 >= _row) {
-      chStyle = _extends({}, chStyle, {
-        backgroundColor: rowColHeaderSelectionColor
-      });
-    }
+  if (!sheetStyle.hideRowHeaders) {
+    startY = sheetStyle.columnHeaderHeight;
+    context.textBaseline = 'middle';
+    context.textAlign = 'center';
+    context.font = defaultCellStyle.fontSize + 'px ' + defaultCellStyle.fontFamily;
+    context.fillStyle = rowHeaderTextColor;
+
+    for (var _iterator5 = _createForOfIteratorHelperLoose(rowSizes.index), _step5; !(_step5 = _iterator5()).done;) {
+      var row = _step5.value;
+      var cellContent = row + 1;
+      var chStyle = {};
+
+      if (rowSelectionActive && sely1 <= row && sely2 >= row) {
+        chStyle = _extends({}, chStyle, {
+          backgroundColor: rowColHeaderSelectionColor
+        });
+      }
 
-    drawCell(context, '' + cellContent, chStyle, defaultColumnHeaderStyle, 0, startY, rowHeaderWidth, cellHeight(_row));
-    startY += cellHeight(_row);
+      drawCell(context, '' + cellContent, chStyle, defaultColumnHeaderStyle, 0, startY, sheetStyle.rowHeaderWidth, cellHeight(row));
+      startY += cellHeight(row);
+    }
   }
 
-  startX = rowHeaderWidth;
-  context.textBaseline = 'middle';
-  context.textAlign = 'center';
+  if (!sheetStyle.hideColumnHeaders) {
+    startX = sheetStyle.rowHeaderWidth;
+    context.textBaseline = 'middle';
+    context.textAlign = 'center';
 
-  for (var _iterator6 = _createForOfIteratorHelperLoose(columnSizes.index), _step6; !(_step6 = _iterator6()).done;) {
-    var _col = _step6.value;
-    var cw = cellWidth(_col);
-    var ch = columnHeaders(_col);
-    var chcontent = ch !== null ? ch : excelHeaderString(_col + 1);
+    for (var _iterator6 = _createForOfIteratorHelperLoose(columnSizes.index), _step6; !(_step6 = _iterator6()).done;) {
+      var col = _step6.value;
+      var cw = cellWidth(col);
+      var ch = columnHeaders(col);
+      var chcontent = ch !== null ? ch : excelHeaderString(col + 1);
 
-    var _chStyle = columnHeaderStyle(_col);
+      var _chStyle = columnHeaderStyle(col);
 
-    if (colSelectionActive && selx1 <= _col && selx2 >= _col) {
-      _chStyle = _extends({}, _chStyle, {
-        backgroundColor: rowColHeaderSelectionColor
-      });
-    }
+      if (colSelectionActive && selx1 <= col && selx2 >= col) {
+        _chStyle = _extends({}, _chStyle, {
+          backgroundColor: rowColHeaderSelectionColor
+        });
+      }
 
-    drawCell(context, chcontent, _chStyle, defaultColumnHeaderStyle, startX, 0, cw, columnHeaderHeight);
-    startX += cw;
+      drawCell(context, chcontent, _chStyle, defaultColumnHeaderStyle, startX, 0, cw, sheetStyle.columnHeaderHeight);
+      startX += cw;
+    }
   }
 
   if (selectionActive) {
@@ -731,8 +752,8 @@ function renderOnCanvas(context, rowSizes, columnSizes, cellStyle, cellWidth, ce
       ky2 = knobArea.y1;
     }
 
-    var knobPoint1 = cellToAbsCoordinate(kx1, ky1, rowSizes, columnSizes, dataOffset, cellWidth, cellHeight);
-    var knobPoint2 = cellToAbsCoordinate(kx2 + 1, ky2 + 1, rowSizes, columnSizes, dataOffset, cellWidth, cellHeight);
+    var knobPoint1 = cellToAbsCoordinate(kx1, ky1, rowSizes, columnSizes, dataOffset, cellWidth, cellHeight, sheetStyle);
+    var knobPoint2 = cellToAbsCoordinate(kx2 + 1, ky2 + 1, rowSizes, columnSizes, dataOffset, cellWidth, cellHeight, sheetStyle);
     context.strokeStyle = knobAreaBorderColor;
     context.setLineDash([3, 3]);
     context.lineWidth = 1;
@@ -756,11 +777,11 @@ function renderOnCanvas(context, rowSizes, columnSizes, cellStyle, cellWidth, ce
   }
 
   context.textBaseline = 'middle';
-  var yCoord = columnHeaderHeight;
+  var yCoord = sheetStyle.columnHeaderHeight;
 
   for (var _iterator7 = _createForOfIteratorHelperLoose(rowSizes.index), _step7; !(_step7 = _iterator7()).done;) {
     var _y = _step7.value;
-    var xCoord = rowHeaderWidth;
+    var xCoord = sheetStyle.rowHeaderWidth;
 
     var _ch = cellHeight(_y);
 
@@ -785,7 +806,7 @@ function renderOnCanvas(context, rowSizes, columnSizes, cellStyle, cellWidth, ce
 }
 
 function Sheet(props) {
-  var _props$inputComponent;
+  var _props$sheetStyle9, _props$sheetStyle10, _props$sheetStyle11, _props$sheetStyle12, _props$sheetStyle13, _props$sheetStyle14, _props$inputComponent;
 
   var canvasRef = React.useRef(null);
   var overlayRef = React.useRef(null);
@@ -886,8 +907,6 @@ function Sheet(props) {
       _useResizeObserver$he = _useResizeObserver.height,
       canvasHeight = _useResizeObserver$he === void 0 ? 3000 : _useResizeObserver$he;
 
-  var freezeColumns = props.freezeColumns || 0;
-  var freezeRows = props.freezeRows || 0;
   var cellWidth = React.useMemo(function () {
     return createRowOrColumnPropFunction(props.cellWidth, 100);
   }, [props.cellWidth]);
@@ -918,6 +937,20 @@ function Sheet(props) {
   var cellStyle = React.useMemo(function () {
     return createCellPropFunction(props.cellStyle, defaultCellStyle);
   }, [props.cellStyle]);
+  var sheetStyle = React.useMemo(function () {
+    var _props$sheetStyle, _props$sheetStyle2, _props$sheetStyle3, _props$sheetStyle4, _props$sheetStyle5, _props$sheetStyle6, _props$sheetStyle7, _props$sheetStyle8;
+
+    return {
+      freezeColumns: ((_props$sheetStyle = props.sheetStyle) === null || _props$sheetStyle === void 0 ? void 0 : _props$sheetStyle.freezeColumns) || 0,
+      freezeRows: ((_props$sheetStyle2 = props.sheetStyle) === null || _props$sheetStyle2 === void 0 ? void 0 : _props$sheetStyle2.freezeRows) || 0,
+      hideColumnHeaders: ((_props$sheetStyle3 = props.sheetStyle) === null || _props$sheetStyle3 === void 0 ? void 0 : _props$sheetStyle3.hideColumnHeaders) || false,
+      hideRowHeaders: ((_props$sheetStyle4 = props.sheetStyle) === null || _props$sheetStyle4 === void 0 ? void 0 : _props$sheetStyle4.hideRowHeaders) || false,
+      hideGridlines: ((_props$sheetStyle5 = props.sheetStyle) === null || _props$sheetStyle5 === void 0 ? void 0 : _props$sheetStyle5.hideGridlines) || false,
+      columnHeaderHeight: (_props$sheetStyle6 = props.sheetStyle) !== null && _props$sheetStyle6 !== void 0 && _props$sheetStyle6.hideColumnHeaders ? 1 : kColumnHeaderHeight,
+      rowHeaderWidth: (_props$sheetStyle7 = props.sheetStyle) !== null && _props$sheetStyle7 !== void 0 && _props$sheetStyle7.hideRowHeaders ? 1 : kRowHeaderWidth,
+      hideScrollBars: ((_props$sheetStyle8 = props.sheetStyle) === null || _props$sheetStyle8 === void 0 ? void 0 : _props$sheetStyle8.hideScrollBars) || false
+    };
+  }, [(_props$sheetStyle9 = props.sheetStyle) === null || _props$sheetStyle9 === void 0 ? void 0 : _props$sheetStyle9.freezeColumns, (_props$sheetStyle10 = props.sheetStyle) === null || _props$sheetStyle10 === void 0 ? void 0 : _props$sheetStyle10.freezeRows, (_props$sheetStyle11 = props.sheetStyle) === null || _props$sheetStyle11 === void 0 ? void 0 : _props$sheetStyle11.hideColumnHeaders, (_props$sheetStyle12 = props.sheetStyle) === null || _props$sheetStyle12 === void 0 ? void 0 : _props$sheetStyle12.hideGridlines, (_props$sheetStyle13 = props.sheetStyle) === null || _props$sheetStyle13 === void 0 ? void 0 : _props$sheetStyle13.hideRowHeaders, (_props$sheetStyle14 = props.sheetStyle) === null || _props$sheetStyle14 === void 0 ? void 0 : _props$sheetStyle14.hideScrollBars]);
   React.useEffect(function () {
     var currEditKey = editKeys ? editKeys(editCell.x, editCell.y) : '';
 
@@ -930,11 +963,11 @@ function Sheet(props) {
     }
   }, [editKeys]);
   var columnSizes = React.useMemo(function () {
-    return calculateRowsOrColsSizes(freezeColumns, cellWidth, rowHeaderWidth, dataOffset.x, canvasWidth);
-  }, [props.freezeColumns, cellWidth, dataOffset.x, canvasWidth]);
+    return calculateRowsOrColsSizes(sheetStyle.freezeColumns, cellWidth, sheetStyle.rowHeaderWidth, dataOffset.x, canvasWidth);
+  }, [sheetStyle, cellWidth, dataOffset.x, canvasWidth]);
   var rowSizes = React.useMemo(function () {
-    return calculateRowsOrColsSizes(freezeRows, cellHeight, columnHeaderHeight, dataOffset.y, canvasHeight);
-  }, [props.freezeRows, cellHeight, dataOffset.y, canvasHeight]);
+    return calculateRowsOrColsSizes(sheetStyle.freezeRows, cellHeight, sheetStyle.columnHeaderHeight, dataOffset.y, canvasHeight);
+  }, [sheetStyle, cellHeight, dataOffset.y, canvasHeight]);
 
   var changeSelection = function changeSelection(x1, y1, x2, y2, scrollToP2) {
     if (scrollToP2 === void 0) {
@@ -960,7 +993,7 @@ function Sheet(props) {
 
       if (x2 !== -1 && (!columnSizes.index.includes(x2) || columnSizes.index[columnSizes.index.length - 1] === x2)) {
         var lastVisibleColumnIndex = columnSizes.index[columnSizes.index.length - 1];
-        var firstVisibleColumnIndex = columnSizes.index[freezeColumns];
+        var firstVisibleColumnIndex = columnSizes.index[sheetStyle.freezeColumns];
         var increment = 0;
 
         if (x2 >= lastVisibleColumnIndex) {
@@ -969,13 +1002,13 @@ function Sheet(props) {
           increment = x2 - firstVisibleColumnIndex;
         }
 
-        var newX = Math.max(dataOffset.x, freezeColumns) + increment;
+        var newX = Math.max(dataOffset.x, sheetStyle.freezeColumns) + increment;
         newDataOffset.x = newX;
         newScrollLeft = newX * scrollSpeed;
       }
 
       if (y2 !== -1 && (!rowSizes.index.includes(y2) || rowSizes.index[rowSizes.index.length - 1] === y2)) {
-        var firstVisibleRowIndex = rowSizes.index[freezeRows];
+        var firstVisibleRowIndex = rowSizes.index[sheetStyle.freezeRows];
         var lastVisibleRowIndex = rowSizes.index[rowSizes.index.length - 1];
         var _increment = 0;
 
@@ -985,7 +1018,7 @@ function Sheet(props) {
           _increment = y2 - firstVisibleRowIndex;
         }
 
-        var newY = Math.max(dataOffset.y, freezeRows) + _increment;
+        var newY = Math.max(dataOffset.y, sheetStyle.freezeRows) + _increment;
 
         newDataOffset.y = newY;
         newScrollTop = newY * scrollSpeed;
@@ -1044,7 +1077,7 @@ function Sheet(props) {
         sely2 = selection.y1;
       }
 
-      var c = cellToAbsCoordinate(0, sely2, rowSizes, columnSizes, dataOffset, cellWidth, cellHeight);
+      var c = cellToAbsCoordinate(0, sely2, rowSizes, columnSizes, dataOffset, cellWidth, cellHeight, sheetStyle);
       return {
         x: c.x + knobSize * 0.5,
         y: c.y + cellHeight(sely2)
@@ -1058,7 +1091,7 @@ function Sheet(props) {
         selx2 = selection.x1;
       }
 
-      var _c = cellToAbsCoordinate(selx2, 0, rowSizes, columnSizes, dataOffset, cellWidth, cellHeight);
+      var _c = cellToAbsCoordinate(selx2, 0, rowSizes, columnSizes, dataOffset, cellWidth, cellHeight, sheetStyle);
 
       return {
         x: _c.x + cellWidth(selx2),
@@ -1079,7 +1112,7 @@ function Sheet(props) {
         _sely = selection.y1;
       }
 
-      var _c2 = cellToAbsCoordinate(_selx, _sely, rowSizes, columnSizes, dataOffset, cellWidth, cellHeight);
+      var _c2 = cellToAbsCoordinate(_selx, _sely, rowSizes, columnSizes, dataOffset, cellWidth, cellHeight, sheetStyle);
 
       return {
         x: _c2.x + cellWidth(_selx),
@@ -1091,7 +1124,7 @@ function Sheet(props) {
       x: -1,
       y: -1
     };
-  }, [selection, rowSizes, columnSizes, dataOffset, cellWidth, cellHeight]);
+  }, [selection, rowSizes, columnSizes, dataOffset, cellWidth, cellHeight, sheetStyle]);
   var hitMap = React.useMemo(function () {
     var hitM = {};
     var canvas = canvasRef.current;
@@ -1101,8 +1134,8 @@ function Sheet(props) {
     }
 
     resizeCanvas(canvas);
-    var yCoord = columnHeaderHeight;
-    var xCoord = rowHeaderWidth;
+    var yCoord = sheetStyle.columnHeaderHeight;
+    var xCoord = sheetStyle.rowHeaderWidth;
 
     for (var _iterator10 = _createForOfIteratorHelperLoose(columnSizes.index), _step10; !(_step10 = _iterator10()).done;) {
       var x = _step10.value;
@@ -1122,7 +1155,7 @@ function Sheet(props) {
 
             var w = obj.content instanceof HTMLImageElement ? obj.width || cellW : 0;
             var absX1 = applyAlignment(xCoord, cellW, finalStyle, w, obj.horiozntalAlign) + obj.x;
-            var absY1 = columnHeaderHeight * 0.5 + obj.y;
+            var absY1 = sheetStyle.columnHeaderHeight * 0.5 + obj.y;
             var absX2 = absX1 + (obj.width || 0);
             var absY2 = absY1 + (obj.height || 0);
             var hitTarget = {
@@ -1161,7 +1194,7 @@ function Sheet(props) {
 
     for (var _iterator11 = _createForOfIteratorHelperLoose(rowSizes.index), _step11; !(_step11 = _iterator11()).done;) {
       var y = _step11.value;
-      xCoord = rowHeaderWidth;
+      xCoord = sheetStyle.rowHeaderWidth;
 
       for (var _iterator13 = _createForOfIteratorHelperLoose(columnSizes.index), _step13; !(_step13 = _iterator13()).done;) {
         var _x2 = _step13.value;
@@ -1240,7 +1273,7 @@ function Sheet(props) {
     }
 
     return hitM;
-  }, [displayData, props.cellWidth, props.cellHeight, canvasRef, columnSizes, rowSizes, dataOffset.x, dataOffset.y]);
+  }, [displayData, props.cellWidth, props.cellHeight, canvasRef, columnSizes, rowSizes, dataOffset.x, dataOffset.y, sheetStyle]);
   React.useEffect(function () {
     var canvas = canvasRef.current;
 
@@ -1255,12 +1288,12 @@ function Sheet(props) {
     }
 
     var animationFrameId = window.requestAnimationFrame(function () {
-      renderOnCanvas(context, rowSizes, columnSizes, cellStyle, cellWidth, cellHeight, selection, knobDragInProgress, columnHeaders, columnHeaderStyle, knobArea, displayData, dataOffset, knobCoordinates, props.hideGridlines || false);
+      renderOnCanvas(context, rowSizes, columnSizes, cellStyle, cellWidth, cellHeight, selection, knobDragInProgress, columnHeaders, columnHeaderStyle, knobArea, displayData, dataOffset, knobCoordinates, sheetStyle);
     });
     return function () {
       window.cancelAnimationFrame(animationFrameId);
     };
-  }, [canvasRef, rowSizes, columnSizes, cellStyle, cellWidth, cellHeight, selection, knobDragInProgress, columnHeaders, columnHeaderStyle, knobArea, displayData, dataOffset, knobCoordinates, props.hideGridlines]);
+  }, [canvasRef, rowSizes, columnSizes, cellStyle, cellWidth, cellHeight, selection, knobDragInProgress, columnHeaders, columnHeaderStyle, knobArea, displayData, dataOffset, knobCoordinates, sheetStyle]);
 
   var setFocusToTextArea = function setFocusToTextArea() {
     if (copyPasteTextAreaRef.current) {
@@ -1662,7 +1695,7 @@ function Sheet(props) {
       }
     }
 
-    if (y < columnHeaderHeight) {
+    if (!sheetStyle.hideColumnHeaders && y < sheetStyle.columnHeaderHeight) {
       for (var colIdx = 0; colIdx < columnSizes.index.length; colIdx++) {
         var start = columnSizes.start[colIdx];
         var end = columnSizes.end[colIdx];
@@ -1695,7 +1728,7 @@ function Sheet(props) {
       }
     }
 
-    if (x < rowHeaderWidth) {
+    if (!sheetStyle.hideRowHeaders && x < sheetStyle.rowHeaderWidth) {
       for (var rowIdx = 0; rowIdx < rowSizes.index.length; rowIdx++) {
         var _start = rowSizes.start[rowIdx];
         var _end = rowSizes.end[rowIdx];
@@ -1752,7 +1785,7 @@ function Sheet(props) {
 
     var scrollToP2 = true;
 
-    if (x < rowHeaderWidth) {
+    if (!sheetStyle.hideRowHeaders && x < sheetStyle.rowHeaderWidth) {
       scrollToP2 = false;
       setRowSelectionInProgress(true);
       sel1.x = -1;
@@ -1761,7 +1794,7 @@ function Sheet(props) {
       setRowSelectionInProgress(false);
     }
 
-    if (y < columnHeaderHeight) {
+    if (!sheetStyle.hideColumnHeaders && y < sheetStyle.columnHeaderHeight) {
       scrollToP2 = false;
       setColumnSelectionInProgress(true);
       sel1.y = -1;
@@ -1953,8 +1986,8 @@ function Sheet(props) {
       }
     }
 
-    if (props.onCellWidthChange && y < columnHeaderHeight) {
-      var xx = rowHeaderWidth;
+    if (!sheetStyle.hideColumnHeaders && props.onCellWidthChange && y < sheetStyle.columnHeaderHeight) {
+      var xx = sheetStyle.rowHeaderWidth;
 
       for (var _iterator21 = _createForOfIteratorHelperLoose(columnSizes.index), _step21; !(_step21 = _iterator21()).done;) {
         var col = _step21.value;
@@ -1968,8 +2001,8 @@ function Sheet(props) {
       }
     }
 
-    if (props.onCellHeightChange && x < rowHeaderWidth) {
-      var yy = columnHeaderHeight;
+    if (!sheetStyle.hideRowHeaders && props.onCellHeightChange && x < sheetStyle.rowHeaderWidth) {
+      var yy = sheetStyle.columnHeaderHeight;
 
       for (var _iterator22 = _createForOfIteratorHelperLoose(rowSizes.index), _step22; !(_step22 = _iterator22()).done;) {
         var row = _step22.value;
@@ -2313,7 +2346,7 @@ function Sheet(props) {
       y2 = _ref2[1];
     }
 
-    if (!(y > columnHeaderHeight && x > rowHeaderWidth)) {
+    if (!(y > sheetStyle.columnHeaderHeight && x > sheetStyle.rowHeaderWidth)) {
       return;
     }
 
@@ -2341,7 +2374,7 @@ function Sheet(props) {
   var editTextTextAlign = 'right';
 
   if (editMode) {
-    editTextPosition = cellToAbsCoordinate(editCell.x, editCell.y, rowSizes, columnSizes, dataOffset, cellWidth, cellHeight);
+    editTextPosition = cellToAbsCoordinate(editCell.x, editCell.y, rowSizes, columnSizes, dataOffset, cellWidth, cellHeight, sheetStyle);
     var style = cellStyle(editCell.x, editCell.y);
     editTextPosition.x += 1;
     editTextPosition.y += 1;
@@ -2371,17 +2404,36 @@ function Sheet(props) {
   var input = (_props$inputComponent = props.inputComponent) === null || _props$inputComponent === void 0 ? void 0 : _props$inputComponent.call(props, editCell.x, editCell.y, _extends({}, inputProps, {
     onChange: setEditValue
   }), commitEditingCell);
+  var overlayDivClassName = styles.sheetscroll;
+  var overlayDivStyles = {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    top: 0,
+    left: 0,
+    overflow: 'scroll',
+    borderBottom: '1px solid #ddd'
+  };
+  var canvasStyles = {
+    width: 'calc(100% - 14px)',
+    height: 'calc(100% - 15px)',
+    outline: '1px solid #ddd'
+  };
+
+  if (sheetStyle.hideScrollBars) {
+    delete canvasStyles['outline'];
+    delete overlayDivStyles['borderBottom'];
+    overlayDivClassName = '';
+    canvasStyles.width = 'calc(100%)';
+  }
+
   return React__default.createElement("div", {
     style: {
       position: 'relative',
       height: '100%'
     }
   }, React__default.createElement("canvas", {
-    style: {
-      width: 'calc(100% - 14px)',
-      height: 'calc(100% - 15px)',
-      outline: '1px solid #ddd'
-    },
+    style: canvasStyles,
     ref: canvasRef
   }), React__default.createElement("div", {
     ref: overlayRef,
@@ -2391,16 +2443,8 @@ function Sheet(props) {
     onMouseLeave: onMouseLeave,
     onContextMenu: onContextMenu,
     onScroll: onScroll,
-    className: styles.sheetscroll,
-    style: {
-      position: 'absolute',
-      width: '100%',
-      height: '100%',
-      top: 0,
-      left: 0,
-      overflow: 'scroll',
-      borderBottom: '1px solid #ddd'
-    }
+    className: overlayDivClassName,
+    style: overlayDivStyles
   }, React__default.createElement("div", {
     style: {
       position: 'absolute',