Added editor component

For every component provided access to "root"
Added config to sheet component

src/components/editor.ts

@@ -0,0 +1,18 @@
+import { Spreadsheet } from "../main";
+
+export class Editor {
+    element: HTMLInputElement
+    root: Spreadsheet
+    constructor(root: Spreadsheet) {
+        this.root = root
+        const element = document.createElement('input')
+        this.element = element
+    }
+    
+    hide() {
+        this.element.style.display = 'hidden'
+    }
+    show() {
+        this.element.style.display = 'block'
+    }
+}

src/components/header.ts

@@ -1,7 +1,12 @@
+import { Spreadsheet } from "../main"
+
 export class Header {
     element: HTMLHeadElement
-    constructor() {
+    root: Spreadsheet
+    constructor(root: Spreadsheet) {
+        this.root = root
         const headerElement = document.createElement('header')
+        headerElement.classList.add()
         this.element = headerElement
     }
 }

src/components/scroller.ts

@@ -1,7 +1,12 @@
+import { Spreadsheet } from "../main"
+
 export class Scroller {
     element: HTMLDivElement
-    constructor() {
+    root: Spreadsheet
+    constructor(root: Spreadsheet) {
+        this.root = root
         const scroller = document.createElement('div')
+        scroller.classList.add(this.root.cssPrefix + 'scroller')
         this.element = scroller
     }
 }

src/components/sheet.ts

@@ -1,11 +1,34 @@
+import { Spreadsheet } from "../main"
+import { Column } from "../modules/column"
+import { Row } from "../modules/row"
+
+export type SheetConfigConstructorProps = {
+    rows: Row[]
+    columns: Column[]
+}
+
+export class SheetConfig {
+    rows: Row[]
+    columns: Column[]
+
+    constructor(props: SheetConfigConstructorProps) {
+        this.rows = props.rows
+        this.columns = props.columns
+    }
+}
 
 /**
  * Display (CANVAS) element where cells render
  */
 export class Sheet {
     element: HTMLCanvasElement
-    constructor() {
+    config: SheetConfig
+    root: Spreadsheet
+    constructor(root: Spreadsheet, sheetConfig: SheetConfig) {
+        this.root = root
         const canvas = document.createElement('canvas')
+        canvas.classList.add(this.root.cssPrefix + 'sheet')
         this.element = canvas
+        this.config = new SheetConfig(sheetConfig)
     }
 }

src/components/table.ts

@@ -1,8 +1,13 @@
+import { Spreadsheet } from "../main"
+
 /** Base (root) component */
 export class Table {
     element: HTMLDivElement
-    constructor() {
+    root: Spreadsheet
+    constructor(root: Spreadsheet) {
+        this.root = root
         const container = document.createElement('div')
+        container.classList.add(this.root.cssPrefix + 'spreadsheet_container')
         this.element = container
     }
 }

src/components/toolbar.ts

@@ -1,7 +1,12 @@
+import { Spreadsheet } from "../main"
+
 export class Toolbar {
     element: HTMLDivElement
-    constructor() {
+    root: Spreadsheet
+    constructor(root: Spreadsheet) {
+        this.root = root
         const toolbarElement = document.createElement('div')
+        toolbarElement.classList.add(this.root.cssPrefix + 'toolbar')
         this.element = toolbarElement
     }
 }

src/main.ts

@@ -1,9 +1,10 @@
+import { Editor } from "./components/editor";
 import { Header } from "./components/header";
 import { Scroller } from "./components/scroller";
 import { Sheet } from "./components/sheet";
 import { Table } from "./components/table";
 import { Toolbar } from "./components/toolbar";
-import { Viewport } from "./components/viewport";
+// import { Viewport } from "./components/viewport";
 import { Config, ConfigProperties } from "./modules/config";
 import { Styles } from "./modules/styles";
 
@@ -25,6 +26,7 @@ export class Spreadsheet {
     private toolbar: Toolbar
     private header: Header
     private sheet: Sheet
+    private editor: Editor
     // private viewport: Viewport
     public styles: Styles
     private config: Config
@@ -34,14 +36,19 @@ export class Spreadsheet {
     }
 
     constructor(target: string | HTMLElement, config?: ConfigProperties) {
-        this.table = new Table()
-        this.scroller = new Scroller()
-        this.toolbar = new Toolbar()
-        this.header = new Header()
-        this.sheet = new Sheet()
-        // this.viewport = new Viewport()
-        this.styles = new Styles()
         this.config = new Config(config)
+        this.styles = new Styles()
+
+        this.table = new Table(this)
+        this.scroller = new Scroller(this)
+        this.toolbar = new Toolbar(this)
+        this.header = new Header(this)
+        this.sheet = new Sheet(this, {
+            columns: [],
+            rows: []
+        })
+        this.editor = new Editor(this)
+        // this.viewport = new Viewport()
 
         this.buildComponent()
         this.appendTableToTarget(target)
@@ -49,12 +56,14 @@ export class Spreadsheet {
 
     private buildComponent(): void {
         const content = document.createElement('div')   //* Abstract
+        content.classList.add(this.cssPrefix + 'content')
         content.appendChild(this.header.element)
         content.appendChild(this.sheet.element)
 
         this.table.element.appendChild(this.toolbar.element)
         this.table.element.appendChild(content)
         this.table.element.appendChild(this.scroller.element)
+        this.table.element.append(this.editor.element)
     }
 
     private appendTableToTarget(target: string | HTMLElement) {

src/modules/column.ts

@@ -0,0 +1,14 @@
+export type ColumnConstructorProperties = {
+    width: number
+    title: string
+}
+
+export class Column {
+    width: number
+    title: string
+
+    constructor(props: ColumnConstructorProperties) {
+        this.width = props.width
+        this.title = props.title
+    }
+}

src/modules/row.ts

@@ -0,0 +1,13 @@
+export type RowConstructorProps =  {
+    height: number
+    title: string
+}
+
+export class Row {
+    height: number
+    title: string
+    constructor(props: RowConstructorProps) {
+        this.height = props.height
+        this.title = props.title
+    }
+}