From d39788c7886173b48399268d25c83874b1681a05 Mon Sep 17 00:00:00 2001
From: robert-ryu7 <balcerowicz87@gmail.com>
Date: Sun, 13 Nov 2022 21:49:59 +0100
Subject: [PATCH] Implement TableView component (#151)

---
 docs/index.html.ejs          | 91 ++++++++++++++++++++++++++++++++++++
 icon/sunken-panel-border.svg | 10 ++++
 style.css                    | 42 +++++++++++++++++
 3 files changed, 143 insertions(+)
 create mode 100644 icon/sunken-panel-border.svg

diff --git a/docs/index.html.ejs b/docs/index.html.ejs
index 6c1e8f1..2073dbf 100644
--- a/docs/index.html.ejs
+++ b/docs/index.html.ejs
@@ -41,6 +41,7 @@
             </ul>
           </li>
           <li><a href="#tree-view">TreeView</a></li>
+          <li><a href="#table-view">TableView</a></li>
         </ul>
       </li>
       <li><a href="#issues-contributing-etc">Issues, Contributing, etc.</a></li>
@@ -798,6 +799,96 @@
       </div>
     </section>
 
+    <section class="component">
+      <h3 id="table-view">TableView</h3>
+      <div>
+        <p>
+          To render a table view, use a table element. Wrap it with a div element with <code>sunken-panel</code> class to provide proper border and overflow container.
+        </p>
+        <p>
+          With a bit of extra scripting you can make table view interactive. Give <code>interactive</code> class to
+          table element to show pointer cursor when hovering over body rows. Table rows can be given
+          <code>highlighted</code> class to appear selected.
+        </p>
+
+        <%- example(`
+          <div class="sunken-panel" style="height: 120px; width: 240px;">
+            <table class="interactive">
+              <thead>
+                <tr>
+                  <th>Name</th>
+                  <th>Version</th>
+                  <th>Company</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>MySQL ODBC 3.51 Driver</td>
+                  <td>3.51.11.00</td>
+                  <td>MySQL AB</td>
+                </tr>
+                <tr>
+                  <td>SQL Server</td>
+                  <td>3.70.06.23</td>
+                  <td>Microsoft Corporation</td>
+                </tr>
+                <tr>
+                  <td>SQL Server</td>
+                  <td>3.70.06.23</td>
+                  <td>Microsoft Corporation</td>
+                </tr>
+                <tr>
+                  <td>SQL Server</td>
+                  <td>3.70.06.23</td>
+                  <td>Microsoft Corporation</td>
+                </tr>
+                <tr>
+                  <td>SQL Server</td>
+                  <td>3.70.06.23</td>
+                  <td>Microsoft Corporation</td>
+                </tr>
+                <tr>
+                  <td>SQL Server</td>
+                  <td>3.70.06.23</td>
+                  <td>Microsoft Corporation</td>
+                </tr>
+                <tr>
+                  <td>SQL Server</td>
+                  <td>3.70.06.23</td>
+                  <td>Microsoft Corporation</td>
+                </tr>
+                <tr>
+                  <td>SQL Server</td>
+                  <td>3.70.06.23</td>
+                  <td>Microsoft Corporation</td>
+                </tr>
+                <tr>
+                  <td>SQL Server</td>
+                  <td>3.70.06.23</td>
+                  <td>Microsoft Corporation</td>
+                </tr>
+                <tr>
+                  <td>SQL Server</td>
+                  <td>3.70.06.23</td>
+                  <td>Microsoft Corporation</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <script>
+            document.querySelectorAll('table.interactive').forEach(element => {
+              element.addEventListener('click', (event) => {
+                const row = event.path.find(element => element.tagName === 'TR' && element.parentElement.tagName === 'TBODY');
+                if (row) {
+                  row.classList.toggle('highlighted');
+                }
+              })
+            });
+          </script>
+      `) %>
+      </div>
+    </section>
+
     <h2 id="issues-contributing-etc">Issues, Contributing, etc.</h2>
 
     <p>
diff --git a/icon/sunken-panel-border.svg b/icon/sunken-panel-border.svg
new file mode 100644
index 0000000..1f09c91
--- /dev/null
+++ b/icon/sunken-panel-border.svg
@@ -0,0 +1,10 @@
+<svg width="5" height="5" viewBox="0 0 5 5" xmlns="http://www.w3.org/2000/svg">
+  <rect width="4" height="1" x="0" y="0" fill="#808080"/>
+  <rect width="1" height="4" x="0" y="0" fill="#808080"/>
+  <rect width="2" height="1" x="1" y="1" fill="#0a0a0a"/>
+  <rect width="1" height="2" x="1" y="1" fill="#0a0a0a"/>
+  <rect width="5" height="1" x="0" y="4" fill="#fff"/>
+  <rect width="1" height="5" x="4" y="0" fill="#fff"/>
+  <rect width="1" height="3" x="3" y="1" fill="#dfdfdf"/>
+  <rect width="3" height="1" x="1" y="3" fill="#dfdfdf"/>
+</svg>
diff --git a/style.css b/style.css
index 86e8e18..f222a15 100644
--- a/style.css
+++ b/style.css
@@ -99,6 +99,7 @@ input,
 textarea,
 select,
 option,
+table,
 ul.tree-view,
 .window,
 .title-bar {
@@ -790,3 +791,44 @@ summary:focus {
   width: 16px;
   background-image: svg-load("./icon/button-right.svg");
 }
+
+.sunken-panel {
+  box-sizing: border-box;
+  border: 2px groove transparent;
+  border-image: svg-load("./icon/sunken-panel-border.svg") 2;
+  overflow: auto;
+  background-color: #fff;
+}
+
+table {
+  border-collapse: collapse;
+  position: relative;
+  text-align: left;
+  white-space: nowrap;
+  background-color: #fff;
+}
+
+table > thead > tr > * {
+  position: sticky;
+  top: 0;
+  height: 17px;
+  box-shadow: var(--border-raised-outer), var(--border-raised-inner);
+  background: var(--surface);
+  box-sizing: border-box;
+  font-weight: normal;
+  padding: 0 var(--grouped-element-spacing);
+}
+
+table.interactive > tbody > tr {
+  cursor: pointer;
+}
+
+table > tbody > tr.highlighted {
+  color: #fff;
+  background-color: var(--dialog-blue);
+}
+
+table > tbody > tr > * {
+  padding: 0 var(--grouped-element-spacing);
+  height: 14px;
+}
\ No newline at end of file