# Responsive table in UIBUILDER?

**URL:** <https://discourse.nodered.org/t/responsive-table-in-uibuilder/88019>\
**Category:** Dashboard\
**Tags:** uibuilder\
**Created:** [16 May 2024 13:35 UTC](https://discourse.nodered.org/t/responsive-table-in-uibuilder/88019 "2024-05-16T13:35:20Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![thebaldgeek](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/thebaldgeek/32/93523_2.png) [@thebaldgeek](https://discourse.nodered.org/u/thebaldgeek)\
**Post date:** [16 May 2024 13:35 UTC](https://discourse.nodered.org/t/responsive-table-in-uibuilder/88019/1 "2024-05-16T13:35:20Z")

</div>

Has anyone managed to build a responsive table in UIBUILDER?  
The docs are a bit sparse in the table area:

> **[UIBUILDER Documentation v6](https://totallyinformation.github.io/node-red-contrib-uibuilder/#/elements/tables)**
>
> UIBUILDER Documentation v6

I have tried to use this flow to get started, but just get a blank template:

> [@Uibuilder Table Implementation](https://discourse.nodered.org/t/uibuilder-table-implementation/47906/):
>
> Hello, I'm brand new to working with vue and web development so please bear with me. I'm working on a project that is using the standard dashboard, but I want to be able to keep that dashboard secured and not publicly accessible. I'm currently doing this using a reverse proxy and Authelia (works great). Now I want to create a page that is publicly accessible without a login to display data from a table. I have installed uibuilder and am excited about the potential, but am banging my head against…

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/7/47af6eed01eddcb35da60bd092e8951bc8e4a6df.png)

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?

Thanks for pointing me in the right direction.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [16 May 2024 13:46 UTC](https://discourse.nodered.org/t/responsive-table-in-uibuilder/88019/2 "2024-05-16T13:46:57Z")

</div>

> [@thebaldgeek](#):
>
> 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 sear

Not much in the docs because, with UIBUILDER, you can use standard web techniques. 🙂

> **[html building a responsive table at DuckDuckGo](https://duckduckgo.com/?q=html%2Bbuilding%2Ba%2Bresponsive%2Btable&t=vivaldi&ia=web)**
>
> DuckDuckGo. Privacy, Simplified.

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:

> **[Responsive Data Tables | CSS-Tricks](https://css-tricks.com/responsive-data-tables/)**
>
> Tables of data can only squish horizontally so far, so they can be a pain to browse on small screens (like mobile devices) where you may need to scroll both horizontally and vertically to browse the information at readable text sizes. We'll explore a...

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.

> **[5 Ways to Create Responsive CSS Tables (Simple Examples)](https://code-boxx.com/css-responsive-table/)**
>
> This tutorial will walk through various ways to create mobile-friendly responsive CSS tables - Example code download included.

And this is perhaps and even better modern example:

> **[How to Build a Responsive HTML Table](https://elements.envato.com/learn/how-to-build-a-stylish-responsive-html-table)**
>
> Learn how to build a beautiful HTML table that responds seamlessly to different screen sizes in this step-by-step tutorial.

Or there is this example using flex:

> **[How to create responsive table in modern way](https://medium.com/@snowleo208/how-to-create-responsive-table-d1662cb62075)**
>
> Table is an important tool for representing data, however, for small screens e.g. mobile and tablet, it is also crucial to represent data…

💖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.

---

<div class="post-metadata">

**Author:** ![thebaldgeek](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/thebaldgeek/32/93523_2.png) [@thebaldgeek](https://discourse.nodered.org/u/thebaldgeek)\
**Post date:** [16 May 2024 14:19 UTC](https://discourse.nodered.org/t/responsive-table-in-uibuilder/88019/3 "2024-05-16T14:19:08Z")

</div>

I dropped the HTML and CSS from [How to Build a Stylish, Responsive HTML Table - Web Design](https://elements.envato.com/learn/how-to-build-a-stylish-responsive-html-table) into UIBUILDER.

The page renders differently.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/5/7519e68f4a6284a5def34bad1dc55ca913726c96.jpeg)

The header is missing for example, also the page is not responsive like their example etc.

Im guessing I don't have the correct template selected?

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/c/6c84b6f3cb9a6b7979e1f4a3106f00c7c0287ca3.png)

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [16 May 2024 15:23 UTC](https://discourse.nodered.org/t/responsive-table-in-uibuilder/88019/4 "2024-05-16T15:23:19Z")

</div>

> [@thebaldgeek](#):
>
> The page renders differently.

Try disabling the brand CSS import - quite possibly something is clashing.

> [@thebaldgeek](#):
>
> Im guessing I don't have the correct template selected?

The template shouldn't matter, the default should be fine.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [16 May 2024 15:30 UTC](https://discourse.nodered.org/t/responsive-table-in-uibuilder/88019/5 "2024-05-16T15:30:45Z")

</div>

Actually, just quickly tried it and it worked fine. I added their CSS to index.css and the index.html, I integrated their code:

```auto
<!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>

```

All worked as expected.

Wide:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/a/9ae09201ec4d7fbf850ada6d209a816b44f1fc61.png)

Medium:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/8/a8de14a82383b3658027ae713c193340524ebfca.png)

Narrow:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/d/ad668cebd0e9cb32dd46eaaaae4af3754f562b22.png)

---

<div class="post-metadata">

**Author:** ![thebaldgeek](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/thebaldgeek/32/93523_2.png) [@thebaldgeek](https://discourse.nodered.org/u/thebaldgeek)\
**Post date:** [16 May 2024 15:54 UTC](https://discourse.nodered.org/t/responsive-table-in-uibuilder/88019/6 "2024-05-16T15:54:10Z")

</div>

This is about my 8th attempt to use UIBUILDER... Clearly its not for me.  
Thanks for the sanity check everyone.

Looks like I am going back to dash 1.0....

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [16 May 2024 16:00 UTC](https://discourse.nodered.org/t/responsive-table-in-uibuilder/88019/7 "2024-05-16T16:00:14Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [15 June 2024 16:00 UTC](https://discourse.nodered.org/t/responsive-table-in-uibuilder/88019/8 "2024-06-15T16:00:32Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.