davejansen/98.css
1
0
Fork 0
mirror of https://github.com/jdan/98.css.git synced 2026-05-05 06:01:22 +09:00
Code Issues Activity

Implement TableView component (#151)

Browse Source
This commit is contained in:
robert-ryu7
2022-11-13 21:49:59 +01:00
committed by GitHub
parent 760731a828
commit d39788c788
3 changed files with 143 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
docs/index.html.ejs
View File

@@ -41,6 +41,7 @@
</ul> </ul>
</li> </li>
<li><a href="#tree-view">TreeView</a></li> <li><a href="#tree-view">TreeView</a></li>
<li><a href="#table-view">TableView</a></li>
</ul> </ul>
</li> </li>
<li><a href="#issues-contributing-etc">Issues, Contributing, etc.</a></li> <li><a href="#issues-contributing-etc">Issues, Contributing, etc.</a></li>
@@ -798,6 +799,96 @@
</div> </div>
</section> </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> <h2 id="issues-contributing-etc">Issues, Contributing, etc.</h2>
<p> <p>

10
icon/sunken-panel-border.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 545 B

42
style.css
View File

@@ -99,6 +99,7 @@ input,
textarea, textarea,
select, select,
option, option,
table,
ul.tree-view, ul.tree-view,
.window, .window,
.title-bar { .title-bar {
@@ -790,3 +791,44 @@ summary:focus {
width: 16px; width: 16px;
background-image: svg-load("./icon/button-right.svg"); 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;
}