Field Engine – Tutorial – Basic Scrollable Table with HTML

October 27, 2023 at 7:52 PM PST
This post has no media.
Profile picture
Franklin Powers

Frequently we need a table that a user can scroll through to present data for users. This is very easy with Field Engine and can be done with a few simple steps.

We need to include the Field Engine files:

<link href="FieldEngine.css" rel="stylesheet" />
<link href="FieldEngine-Defaults.css" rel="stylesheet" />
<script src="fe-browser.js"></script>

Then we need to specify the CSS for the hex grid, we're going to make our borders black and our hexes white:

.field-hex .field_view_inner {
background-color: black;
}
.field-hex .field_location {
background-color: white;
color: black;
}

Then we specify the scrollable table with a table and the class field-table

<table class="field-table" columns="3" rows="3">
<tr><th>Col A</th><th>Col B</th></tr>
<tr><td>123</td><td>456</td><td>123</td><td>456</td><td>123</td><td>456</td><td>123</td><td>456</td></tr>
<tr><td>789</td><td>012</td><td>789</td><td>012</td><td>789</td><td>012</td><td>789</td><td>012</td></tr>
<tr><td>123</td><td>456</td><td>123</td><td>456</td><td>123</td><td>456</td><td>123</td><td>456</td></tr>
<tr><td>789</td><td>012</td><td>789</td><td>012</td><td>789</td><td>012</td><td>789</td><td>012</td></tr>
<tr><td>123</td><td>456</td><td>123</td><td>456</td><td>123</td><td>456</td><td>123</td><td>456</td></tr>
<tr><td>789</td><td>012</td><td>789</td><td>012</td><td>789</td><td>012</td><td>789</td><td>012</td></tr>
<tr><td>123</td><td>456</td><td>123</td><td>456</td><td>123</td><td>456</td><td>123</td><td>456</td></tr>
<tr><td>789</td><td>012</td><td>789</td><td>012</td><td>789</td><td>012</td><td>789</td><td>012</td></tr>
<tr><td>123</td><td>456</td><td>123</td><td>456</td><td>123</td><td>456</td><td>123</td><td>456</td></tr>
<tr><td>789</td><td>012</td><td>789</td><td>012</td><td>789</td><td>012</td><td>789</td><td>012</td></tr>
</table>

And like that you have a scrollable table. Note that columns and rows specify the size of the view of the data.

Any thoughts on Franklin's post?

To comment or reply, you need an Ortingo account.

Sign in or sign up

Here's what Ortingoers think of Franklin's post.

There are no comments on this post.