Has anyone managed to build a responsive table in UIBUILDER?
The docs are a bit sparse in the table area:
I have tried to use this flow to get started, but just get a blank template:
By responsive I mean when the browser page size shrinks, the columns drop to card view so no data is cut or removed out of the table and no horizontal scrolling is required.
If there are no examples, what Google terms / keywords would I use to search and build said table?
Not much in the docs because, with UIBUILDER, you can use standard web techniques.
But a true responsive table isn't a simple thing, particularly if you have many columns.
However, this is quite a decent method though it is a little long in the tooth now and I would recommend using flex or grid:
Which basically uses CSS to change the various table elements to display as not a table.
See options 4 & 5 in this example for grid-based options which would be a more modern approach.
And this is perhaps and even better modern example:
Or there is this example using flex:
The nice thing about all of these is that they are pure CSS. Which means that you can still use UIBUILDER's no-/low-code features and still get your responsiveness.
Actually, just quickly tried it and it worked fine. I added their CSS to index.css and the index.html, I integrated their code:
<!doctype html>
<html lang="en"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="../uibuilder/images/node-blue.ico">
<title>Responsive Table Example - Node-RED uibuilder</title>
<meta name="description" content="Node-RED uibuilder - Responsive Table Example">
<!-- Your own CSS (defaults to loading uibuilders css)-->
<link type="text/css" rel="stylesheet" href="./index.css" media="all">
<!-- #region Supporting Scripts. These MUST be in the right order. Note no leading / -->
<script defer src="../uibuilder/uibuilder.iife.min.js"></script>
<!-- <script defer src="./index.js">/* OPTIONAL: Put your custom code in that */</script> -->
<!-- #endregion -->
</head><body class="uib">
<div class="container">
<h1 class="with-subtitle">Responsive Table Example</h1>
<div role="doc-subtitle">Using Node-RED and the UIBUILDER IIFE library.</div>
<div id="more"><!-- '#more' is used as a parent for dynamic HTML content in examples --></div>
<h2>Some of Steven Spielberg’s Movies</h2>
<table>
<thead class="visible@l">
<tr>
<th>Title</th>
<th>Year</th>
<th>Stars</th>
<th>Plot</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong class="hidden@l">Title:</strong> Firelight</td>
<td>
<strong class="hidden@l">Year:</strong> 1964
<img width="140" height="209" src="https://assets.codepen.io/162656/firelight.jpg" alt="Firelight">
</td>
<td><strong class="hidden@l">Stars:</strong> Robert Robyn, Beth Weber, Lucky Lohr, Margaret Peyou</td>
<td>
<strong class="hidden@l">Plot:</strong> Menacing flying saucers attack the citizens of a town
</td>
</tr>
<tr>
<td><strong class="hidden@l">Title:</strong> Duel</td>
<td>
<strong class="hidden@l">Year:</strong> 1971
<img width="140" height="209" src="https://assets.codepen.io/162656/duel.jpg" alt="Duel">
</td>
<td><strong class="hidden@l">Stars:</strong> Dennis Weaver, Jacqueline Scott, Eddie Firestone, Lou Frizzell</td>
<td>
<strong class="hidden@l">Plot:</strong> A business commuter is pursued and terrorized by the malevolent driver of a massive tractor-trailer.
</td>
</tr>
<tr>
<td><strong class="hidden@l">Title:</strong> The Sugarland Express</td>
<td>
<strong class="hidden@l">Year:</strong> 1974
<img width="140" height="209" src="https://assets.codepen.io/162656/The+Sugarland+Express.jpg" alt="The Sugarland Express">
</td>
<td><strong class="hidden@l">Stars:</strong> Goldie Hawn, Ben Johnson, Michael Sacks, William Atherton</td>
<td>
<strong class="hidden@l">Plot:</strong> A woman attempts to reunite her family by helping her husband escape prison and together kidnapping their son. But things don't go as planned when they are forced to take a police hostage on the road.
</td>
</tr>
<tr>
<td><strong class="hidden@l">Title:</strong> Jaws</td>
<td>
<strong class="hidden@l">Year:</strong>1975
<img width="140" height="209" src="https://assets.codepen.io/162656/jaws.jpg" alt="Jaws">
</td>
<td><strong class="hidden@l">Stars:</strong> Roy Scheider, Robert Shaw, Richard Dreyfuss, Lorraine Gary</td>
<td>
<strong class="hidden@l">Plot:</strong> When a killer shark unleashes chaos on a beach community off Cape Cod, it's up to a local sheriff, a marine biologist, and an old seafarer to hunt the beast down.
</td>
</tr>
<tr>
<td><strong class="hidden@l">Title:</strong> Close Encounters of the Third Kind</td>
<td>
<strong class="hidden@l">Year:</strong>
1977
<img width="140" height="209" src="https://assets.codepen.io/162656/Close+Encounters+of+the+Third+Kind.jpg" alt="Close Encounters of the Third Kind">
</td>
<td><strong class="hidden@l">Stars:</strong> Richard Dreyfuss, François Truffaut, Teri Garr, Melinda Dillon</td>
<td>
<strong class="hidden@l">Plot:</strong> Roy Neary, an Indiana electric lineman, finds his quiet and ordinary daily life turned upside down after a close encounter with a UFO, spurring him to an obsessed cross-country quest for answers as a momentous event approaches.
</td>
</tr>
<tr>
<td><strong class="hidden@l">Title:</strong> 1941</td>
<td>
<strong class="hidden@l">Year:</strong> 1979
<img width="140" height="209" src="https://assets.codepen.io/162656/1941.jpg" alt="1941">
</td>
<td><strong class="hidden@l">Stars:</strong> John Belushi, Dan Aykroyd, Treat Williams, Nancy Allen</td>
<td>
<strong class="hidden@l">Plot:</strong> Hysterical Californians prepare for a Japanese invasion in the days after Pearl Harbor.
</td>
</tr>
</tbody>
</table>
<p class="table-credits">Table info by <a href="https://www.imdb.com/list/ls069394158/" target="_blank">imdb.com</a></p>
</div>
<footer class="page-footer">
<span>made by </span>
<a href="https://georgemartsoukos.com/" target="_blank">
<img width="24" height="24" src="https://assets.codepen.io/162656/george-martsoukos-small-logo.svg" alt="George Martsoukos logo">
</a>
</footer>
</body></html>
I'd love to get to the bottom of where you are getting stuck. The basics really are quite simple (and not Elon Musk simple either! ) though I recognise that perhaps the detail in the documentation may still be quite confusing for some. I'm really keen to make entry easier for everyone though.
As in this case, the only knowledge needed was how to grab the HTML and CSS from the example and merge it into the uibuilder template which can be done using the files tab in the Editor or using VScode via the built-in editor link. I realise that is not zero-code by any means but it isn't difficult either. Not casting aspersions at you in any way incidentally, I get that something is getting in your way and I'm keen to try and find out what so that we can eliminate it.
The nice thing about all of these is that they are pure CSS. Which means that you can still use UIBUILDER's no-/low-code features and still get your responsiveness.
