Help with creating a table

[Schmaniel]

Hey!

I started to work on a FACEIT module that shows up a few informations about a player.

The API thing is done, now I need to create a table to visualize the output nicely.

At first I created it in html/css. It should look something like this:

I started now with this code: https://pastebin.com/jK2jGmjA (only for the thead), but I think it’s too complicated.
Do you have any ideas, how I can improve it?

[Jalibu]

@Schmaniel said in Help with creating a table:

https://pastebin.com/jK2jGmjA

You could either use the nunjucks template engine, which is baked in the magic mirror core or you could use javascript template strings:

let markup = `
<table>
  <tr>
    <td>Matches</td>
    <td>${numMatches}</td>
  </tr>
</table>
`
wrapper.innerHTML = markup

[Schmaniel]

uuh, that worked pretty well, thank you!

Now I’m stuck with the size of the module…

[sdetweil]

@Schmaniel welcome to the fun. 900,000 details to consider. size color, font … css

https://forum.magicmirror.builders/topic/6808/css-101-getting-started-with-css-and-understanding-how-css-works?_=1611671889049

[Schmaniel]

@sdetweil said in Help with creating a table:

welcome to the fun.

you misspelt nightmare…
Thanks for your help!

[sdetweil]

@Schmaniel it gives u an appreciation for the art of good user experience web pages

[Schmaniel]

Everytime my module do an API request to refresh the data, the table is disappearing for a second or two, this shouldn’t be normal, right?

[sdetweil]

@Schmaniel u get new data, then say, this.updateDom(how-fast)

then mm calls your getDom() routine to get the new content to display

so, what is the number u pass to updateDom()

0 means immediately
2000 means transition new content in 2 seconds

[Schmaniel]

@sdetweil thats the code I got:

    start: function() {
        var self = this;
        setInterval(function() {
            self.updateDom(1000);
        }, 60000);
    },

So as I understand now it updates every minute (60000) and it needs 1 second (1000) to update?
Should I change the 1000 to 0, so it updates immediately?

[sdetweil]

@Schmaniel yes, 0.

doesnt NEED 1 second. should TAKE 1 second

so.u slowed it down

[Schmaniel]

@sdetweil aaaaaaaah, thank you :)

[Schmaniel]

After hours of testing I’m at my end…

Thats the result so far:

I want to shrink the cells down, but I can’t find a way to do it…

I tried it with height, line-height, padding and so on…

Do you have any ideas?

[sdetweil]

@Schmaniel
see https://stackoverflow.com/questions/17342181/how-to-fit-html-table-row-to-its-content

[Schmaniel]

@sdetweil still no success, nothing happens with height: 0px; or

also because of the main.css the table is getting expanded over the whole screen

.region table {
  width: 100%;
  border-spacing: 0;
  border-collapse: separate;
}

Could it be, that the main.css is interupting something more than just the width? removed this point from the css earlier, didn’t thought about that…

[sdetweil]

@Schmaniel notice its style=“height:0px;”
on the ROW tr

[BKeyport]

The MMM-Multimonth module I created, and had some help re-writing, does an wonderful job of creating a table on the fly that autosizes, and you can use that to see how things work. Just a thought.

[Schmaniel]

@sdetweil yes, I know, but it didn’t worked Out :/

@BKeyport thanks I will Look into it later!

[Schmaniel]

Thats the view with the developer console

[Schmaniel]

The problem was the p tag, but now the break is too big inbetween the lines…

[sdetweil]

@Schmaniel paragraph AND a line break?
too much space ?
come on man.

thats why they creared div and span