Added custom cells styles

src/components/scroller.ts

@@ -70,7 +70,6 @@ export class Scroller {
     }
 
     private handleKeydown = (event: KeyboardEvent) => {
-        console.log(event.key)
         //* Navigation
         if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(event.key)) {
             event.preventDefault()
@@ -108,7 +107,7 @@ export class Scroller {
             }
         }
 
-        if (event.key === 'F2') {
+        if (event.key === 'F2' || /^([a-z]|[а-я])$/.test(event.key.toLowerCase())) { //* English and Russian keyboard. Or F2 button
             event.preventDefault()
             if (!this.root.selection.selectedCell) return;
             this.root.showEditor(this.root.selection.selectedCell)

src/main.ts

@@ -45,14 +45,14 @@ export class Spreadsheet {
     public cache: Cache
 
     constructor(target: string | HTMLElement, props?: SpreadsheetConstructorProperties) {
-        const config = createSampleConfig(10000, 600)
+        const config = createSampleConfig(2000, 600)
         if (props?.view) {
             config.view = props.view
         }
 
         this.config = new Config(config)
         this.sheet = new Sheet(this)
-        const data = createSampleData(10000, 600)
+        const data = createSampleData(2000, 600)
         this.table = new Table(this)
         this.scroller = new Scroller(this)
         this.toolbar = new Toolbar(this)
@@ -67,6 +67,7 @@ export class Spreadsheet {
         this.styles = new Styles()
         this.buildComponent()
         this.appendTableToTarget(target)
+        this.renderSheet()
     }
 
     private getInitialCache(): Cache {
@@ -211,9 +212,8 @@ export class Spreadsheet {
 
 const spreadsheet = new Spreadsheet('#spreadsheet', {
     view: {
-        height: 600,
+        height: 768,
-        width: 800
+        width: 1366
     },
 })
-spreadsheet.renderSheet()
 console.log(spreadsheet)

src/modules/cell.ts

@@ -8,6 +8,16 @@ export type CellConstructorProps = {
     position: Position
 }
 
+interface CellStylesConstructorProps {
+    fontSize: number
+    fontColor: string
+    background: string
+    borderColor: string
+
+    selectedBackground: string
+    selectedFontColor: string
+}
+
 export class CellStyles {
     fontSize: number = 16
     fontColor: string = 'black'
@@ -16,6 +26,12 @@ export class CellStyles {
 
     selectedBackground = '#4287f5'
     selectedFontColor = '#ffffff'
+
+    constructor(props?: CellStylesConstructorProps) {
+        if (props) {
+            Object.assign(this, props) // Override default styles
+        }
+    }
 }
 
 export class Position {