From ae420e8f2735bd8ad377b821f730d46b098bc564 Mon Sep 17 00:00:00 2001
From: Andy Lee <andylee.address@gmail.com>
Date: Fri, 11 Feb 2022 08:41:45 -0500
Subject: [PATCH] Got scrolling and sizing to somewhat work?

* Outer container is set to position absolute and left/right/bottom/top
  to 0 to make it flood the whole viewport
  * overflow set to hidden.... I don't really know why, but it seems to
    work (in conjunction with the inner div being set to scroll)
* inner container set to overall scroll to get scroll bars if content
  gets too large
* table width set to max-content so that colgroup widths are respected

Still need to figure out what happens in vertical direction when we get
too many rows
---
 core.css   |  4 ++++
 index.html | 13 +++----------
 2 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/core.css b/core.css
index 8f2a1b8..2971ba4 100644
--- a/core.css
+++ b/core.css
@@ -8,10 +8,12 @@
     top : 0;
     bottom : 0;
     position: absolute;
+    overflow: hidden;
     
 }
 
 .coresheet_content {
+    /* width: 100%; */
     overflow: scroll;
 }
 
@@ -29,6 +31,8 @@
     border-bottom: 1px solid #ccc;
     user-select: none;
 
+    width: max-content;
+
 }
 
 .coresheet > thead > tr > td {
diff --git a/index.html b/index.html
index 1597444..78dbda7 100644
--- a/index.html
+++ b/index.html
@@ -10,16 +10,9 @@
         <script src="core.js"></script>
         <script>
             let target = document.getElementById("target");
-            var grid = new Grid(target, [
-                {"name": "A"},
-                {"name": "B"},
-                {"name": "C"},
-                {"name": "D"},
-                {"name": "E"},
-                {"name": "F"},
-                {"name": "G"},
-                {"name": "H"},
-            ], [
+            const columns = [...Array(26).keys()].map(x => {return {name:String.fromCharCode(97+x-32)}});
+
+            var grid = new Grid(target, columns, [
                 {"A" : 123, "B": 234, "C": 3455555555555555, "D": 12345678901234567890, "E": 12345678901234567890, "F": 12345678901234567890, "G": 12345678901234567890, "H": 12345678901234567890},
                 {"A" : 123, "B": 234, "C": 345},
                 {"A" : 123, "B": 234, "C": 345},