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>
</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>