full resizing of table of excel

.babelrc

@@ -0,0 +1,6 @@
+{
+  "presets": ["@babel/env"],
+  "plugins": [
+    "@babel/plugin-syntax-class-properties"
+  ]
+}

.eslintrc.js

@@ -0,0 +1,31 @@
+module.exports = {
+  env: {
+    es2021: true,
+    browser: true,
+    amd: true,
+    node: true,
+  },
+  parserOptions: {
+    'sourceType': 'module',
+    'ecmaVersions': 2022,
+    'ecmaFeatures': {
+      'experimentalObjectRestSpread': true,
+    },
+  },
+
+  extends: ['eslint:recommended', 'google'],
+
+  rules: {
+    'semi': 'off',
+    'comma-dagnle': 'off',
+    'require-jsdoc': 'off',
+    'object-curly-spacing': 'off',
+    'quotes': 'off',
+    'operator-linebreak': 'off',
+  },
+
+
+  parser: "@babel/eslint-parser",
+
+
+}

.gitignore

@@ -0,0 +1 @@
+node_modules

Untitled Diagram.drawio

@@ -0,0 +1,97 @@
+<mxfile host="app.diagrams.net" modified="2022-05-09T16:08:16.468Z" agent="5.0 (X11)" etag="PP9wFXLqKzWwIfEyClMQ" version="18.0.2" type="github">
+  <diagram id="E8ToErx23mYqWKB4nhZ8" name="Компоненты">
+    <mxGraphModel dx="1422" dy="792" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="0">
+      <root>
+        <mxCell id="0" />
+        <mxCell id="1" parent="0" />
+        <mxCell id="aNw9bEFxO2HE7OY75L9--1" value="Header" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="670" y="450" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="aNw9bEFxO2HE7OY75L9--2" value="&lt;div&gt;Formula&lt;/div&gt;" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="500" y="460" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="aNw9bEFxO2HE7OY75L9--3" value="Toolbar" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="320" y="470" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="aNw9bEFxO2HE7OY75L9--5" value="Table" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="140" y="460" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="aNw9bEFxO2HE7OY75L9--6" value="DOMListener" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="460" y="180" width="280" height="180" as="geometry" />
+        </mxCell>
+        <mxCell id="aNw9bEFxO2HE7OY75L9--10" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="aNw9bEFxO2HE7OY75L9--9" target="aNw9bEFxO2HE7OY75L9--6">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="aNw9bEFxO2HE7OY75L9--9" value="ExcelComponent" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="120" y="180" width="250" height="180" as="geometry" />
+        </mxCell>
+        <mxCell id="aNw9bEFxO2HE7OY75L9--11" value="Adding listeners" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;" vertex="1" parent="1">
+          <mxGeometry x="480" y="380" width="100" height="20" as="geometry" />
+        </mxCell>
+        <mxCell id="aNw9bEFxO2HE7OY75L9--12" value="Deleting listeners" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;" vertex="1" parent="1">
+          <mxGeometry x="615" y="380" width="110" height="20" as="geometry" />
+        </mxCell>
+        <mxCell id="aNw9bEFxO2HE7OY75L9--14" value="" style="endArrow=classic;html=1;rounded=0;entryX=0.575;entryY=0.017;entryDx=0;entryDy=0;entryPerimeter=0;exitX=0;exitY=1;exitDx=0;exitDy=0;" edge="1" parent="1" source="aNw9bEFxO2HE7OY75L9--9" target="aNw9bEFxO2HE7OY75L9--5">
+          <mxGeometry width="50" height="50" relative="1" as="geometry">
+            <mxPoint x="420" y="430" as="sourcePoint" />
+            <mxPoint x="470" y="380" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="aNw9bEFxO2HE7OY75L9--17" value="" style="endArrow=classic;html=1;rounded=0;exitX=0.25;exitY=1;exitDx=0;exitDy=0;entryX=0.417;entryY=-0.017;entryDx=0;entryDy=0;entryPerimeter=0;" edge="1" parent="1" source="aNw9bEFxO2HE7OY75L9--9" target="aNw9bEFxO2HE7OY75L9--3">
+          <mxGeometry width="50" height="50" relative="1" as="geometry">
+            <mxPoint x="420" y="430" as="sourcePoint" />
+            <mxPoint x="470" y="380" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="aNw9bEFxO2HE7OY75L9--18" value="" style="endArrow=classic;html=1;rounded=0;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.25;entryY=0;entryDx=0;entryDy=0;" edge="1" parent="1" source="aNw9bEFxO2HE7OY75L9--9" target="aNw9bEFxO2HE7OY75L9--2">
+          <mxGeometry width="50" height="50" relative="1" as="geometry">
+            <mxPoint x="420" y="430" as="sourcePoint" />
+            <mxPoint x="470" y="380" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="aNw9bEFxO2HE7OY75L9--20" value="" style="endArrow=classic;html=1;rounded=0;exitX=0.75;exitY=1;exitDx=0;exitDy=0;entryX=0.158;entryY=0.017;entryDx=0;entryDy=0;entryPerimeter=0;" edge="1" parent="1" source="aNw9bEFxO2HE7OY75L9--9" target="aNw9bEFxO2HE7OY75L9--1">
+          <mxGeometry width="50" height="50" relative="1" as="geometry">
+            <mxPoint x="420" y="430" as="sourcePoint" />
+            <mxPoint x="470" y="380" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="aNw9bEFxO2HE7OY75L9--23" value="Excel" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="290" y="620" width="260" height="130" as="geometry" />
+        </mxCell>
+        <mxCell id="aNw9bEFxO2HE7OY75L9--24" value="" style="endArrow=classic;html=1;rounded=0;exitX=0.75;exitY=1;exitDx=0;exitDy=0;" edge="1" parent="1" source="aNw9bEFxO2HE7OY75L9--5" target="aNw9bEFxO2HE7OY75L9--23">
+          <mxGeometry width="50" height="50" relative="1" as="geometry">
+            <mxPoint x="420" y="430" as="sourcePoint" />
+            <mxPoint x="470" y="380" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="aNw9bEFxO2HE7OY75L9--25" value="" style="endArrow=classic;html=1;rounded=0;" edge="1" parent="1" source="aNw9bEFxO2HE7OY75L9--3" target="aNw9bEFxO2HE7OY75L9--23">
+          <mxGeometry width="50" height="50" relative="1" as="geometry">
+            <mxPoint x="420" y="430" as="sourcePoint" />
+            <mxPoint x="470" y="380" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="aNw9bEFxO2HE7OY75L9--26" value="" style="endArrow=classic;html=1;rounded=0;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.75;entryY=0;entryDx=0;entryDy=0;" edge="1" parent="1" source="aNw9bEFxO2HE7OY75L9--2" target="aNw9bEFxO2HE7OY75L9--23">
+          <mxGeometry width="50" height="50" relative="1" as="geometry">
+            <mxPoint x="420" y="430" as="sourcePoint" />
+            <mxPoint x="470" y="380" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="aNw9bEFxO2HE7OY75L9--27" value="" style="endArrow=classic;html=1;rounded=0;entryX=1;entryY=0;entryDx=0;entryDy=0;exitX=0.25;exitY=1;exitDx=0;exitDy=0;" edge="1" parent="1" source="aNw9bEFxO2HE7OY75L9--1" target="aNw9bEFxO2HE7OY75L9--23">
+          <mxGeometry width="50" height="50" relative="1" as="geometry">
+            <mxPoint x="420" y="430" as="sourcePoint" />
+            <mxPoint x="470" y="380" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="aNw9bEFxO2HE7OY75L9--29" value="Html" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="360" y="820" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="aNw9bEFxO2HE7OY75L9--31" value="" style="shape=flexArrow;endArrow=classic;html=1;rounded=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" edge="1" parent="1" target="aNw9bEFxO2HE7OY75L9--29">
+          <mxGeometry width="50" height="50" relative="1" as="geometry">
+            <mxPoint x="420" y="740" as="sourcePoint" />
+            <mxPoint x="470" y="410" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+      </root>
+    </mxGraphModel>
+  </diagram>
+</mxfile>

dist/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
+    <title>Pure JS Excel</title>
+<script defer src="main.bundle.js"></script><link href="main.bundle.css" rel="stylesheet"></head>
+<body>
+    <div id="app" class="container"></div>
+</body>
+</html>