Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. Material Design Widgets: Table Widget

    NEWS

    • 15. 05. Wartungsarbeiten am ioBroker Forum

    • Monatsrückblick - April 2025

    • Minor js-controller 7.0.7 Update in latest repo

    Material Design Widgets: Table Widget

    This topic has been deleted. Only users with topic management privileges can see it.
    • sigi234
      sigi234 Forum Testing Most Active @Scrounger last edited by

      @Scrounger

      Hallo, kann ich die Anzahl der Zeilen begrenzen?

      1 Reply Last reply Reply Quote 0
      • sigi234
        sigi234 Forum Testing Most Active @Scrounger last edited by

        @Scrounger

        Hallo, noch immer weis ich nicht wie ich die Reihenfolge der Col ändere?
        (Objektname zum sortieren?)

        1 Reply Last reply Reply Quote 0
        • Scrounger
          Scrounger Developer last edited by

          @sigi234 sagte in Material Design Widgets: Table Widget:

          @Scrounger

          Hallo, kann ich die Anzahl der Zeilen begrenzen?

          @sigi234 sagte in Material Design Widgets: Table Widget:

          @Scrounger

          Hallo, noch immer weis ich nicht wie ich die Reihenfolge der Col ändere?
          (Objektname zum sortieren?)

          Geht beides indem du die Reihenfolge im json Objekt änderst und die Anzahl der Objekte dort begrenzt.

          Beispiel Ausgangssituation

          [
          	{
          		"img": "/vis.0/myImages/erlebnis_50.png",
          		"name": "Empire",
          		"betriebszeit": "4h 06m",
          		"funk": "5G",
          		"ip": "10.0.0.1"
          	},
          	{
          		"img": "/vis.0/myImages/erlebnis_100.png",
          		"name": "Handy",
          		"betriebszeit": "13m",
          		"funk": "5G",
          		"ip": "10.0.0.2"
          	},
          	{
          		"img": "/vis.0/myImages/erlebnis_100.png",
          		"name": "Harmony Hub - Wohnzimmer",
          		"betriebszeit": "18T 07h 21m",
          		"funk": "2G",
          		"ip": "10.0.0.3"
          	},
          	{
          		"img": "/vis.0/myImages/erlebnis_25.png",
          		"name": "MusicCast - Esszimmer (WX-030)",
          		"betriebszeit": "1h 57m",
          		"funk": "2G",
          		"ip": "10.0.0.4"
          	},
          	{
          		"img": "/vis.0/myImages/erlebnis_75.png",
          		"name": "MusicCast - K�che (ISX-18D)",
          		"betriebszeit": "4h 10m",
          		"funk": "2G",
          		"ip": "10.0.0.5"
          	}
          ]
          

          geänderte Reihenfolge:

          [
          	{
          		"funk": "5G",
          		"img": "/vis.0/myImages/erlebnis_50.png",
          		"name": "Empire",
          		"betriebszeit": "4h 06m",
          		"ip": "10.0.0.1"
          	},
          	{
          		"funk": "5G",
          		"img": "/vis.0/myImages/erlebnis_100.png",
          		"name": "Handy",
          		"betriebszeit": "13m",
          		"ip": "10.0.0.2"
          	},
          	{
          		"funk": "2G",
          		"img": "/vis.0/myImages/erlebnis_100.png",
          		"name": "Harmony Hub - Wohnzimmer",
          		"betriebszeit": "18T 07h 21m",
          		"ip": "10.0.0.3"
          	},
          	{
          		"funk": "2G",
          		"img": "/vis.0/myImages/erlebnis_25.png",
          		"name": "MusicCast - Esszimmer (WX-030)",
          		"betriebszeit": "1h 57m",
          		"ip": "10.0.0.4"
          	},
          	{
          		"funk": "2G",
          		"img": "/vis.0/myImages/erlebnis_75.png",
          		"name": "MusicCast - K�che (ISX-18D)",
          		"betriebszeit": "4h 10m",
          		"ip": "10.0.0.5"
          	}
          ]
          

          auf drei Zeilen bergrenzt

          [
          	{
          		"funk": "5G",
          		"img": "/vis.0/myImages/erlebnis_50.png",
          		"name": "Empire",
          		"betriebszeit": "4h 06m",
          		"ip": "10.0.0.1"
          	},
          	{
          		"funk": "5G",
          		"img": "/vis.0/myImages/erlebnis_100.png",
          		"name": "Handy",
          		"betriebszeit": "13m",
          		"ip": "10.0.0.2"
          	},
          	{
          		"funk": "2G",
          		"img": "/vis.0/myImages/erlebnis_100.png",
          		"name": "Harmony Hub - Wohnzimmer",
          		"betriebszeit": "18T 07h 21m",
          		"ip": "10.0.0.3"
          	}
          ]
          
          1 Reply Last reply Reply Quote 0
          • C
            calliou1234 last edited by

            Hallo Zusammen,

            ich baue mir in einem Skript ein JSON zusammen.

            Nun würde ich gerne einzelne Felder in unterschiedlichen Farben in Anhängigkeit eines Objekt anzeigen lassen.
            Kann man dies mit einbauen? Wenn ja wie?

            Aktuell zeige ich den Wert in einem html_Basic an und unter Farbe mit dem Binding

            {co2:netatmo.0.Indoor.Indoor.CO2.CO2; co2 <= 1000 ? "lime" : co2 <= 1300 ? "orange" : "red"}

            Grüße
            Thomas

            liv-in-sky 1 Reply Last reply Reply Quote 0
            • C
              calliou1234 last edited by

              Hallo,

              ich habe noch ein Thema wo ich Hilfe bräuchte.

              Ich möchte in der 2. Spalte auch ein Bild platzieren.

              Nur leider funktioniert das nicht.

              Es wird immer nur ein bild in der ersten Spalte angezeigt.
              Wenn ich das Bild für die 2. Spalte in das JSON hänge wird es in der ersten angezeigt.

              Mein JSON sieht so aus:

              [
              {"img":"/vis.0/main/img/icons8-Thermometer-48.png",
              "img":"/vis.0/Materialicons/baseline_trending_up_white_18dp.png"
              }
              ]

              Grüße

              Scrounger 1 Reply Last reply Reply Quote 0
              • Scrounger
                Scrounger Developer @calliou1234 last edited by

                @calliou1234

                Das Objekt darf nicht indentische namen bei der property haben, so geht es:

                [
                	{
                		"img": "/vis.0/myImages/erlebnis_50.png",
                		"img2": "/vis.0/myImages/erlebnis_100.png"
                	}
                ]
                

                Und für Spalte einstellen das es ein Bild ist:
                62bc371d-3402-4eef-bb55-48a50c7634ef-grafik.png

                1 Reply Last reply Reply Quote 0
                • liv-in-sky
                  liv-in-sky @calliou1234 last edited by

                  @calliou1234 sagte in Material Design Widgets: Table Widget:

                  Nun würde ich gerne einzelne Felder in unterschiedlichen Farben in Anhängigkeit eines Objekt anzeigen lassen.
                  Kann man dies mit einbauen? Wenn ja wie?

                  @Scrounger

                  ich würde gerne nochmal diese frage in den raum werfen - wie bekome ich dynamisch ein textfeld in einer bestimmten farbe (abhängig von einem wert im script)

                  als beispiel

                  Image 3.png

                  Scrounger 1 Reply Last reply Reply Quote 0
                  • Scrounger
                    Scrounger Developer @liv-in-sky last edited by

                    @liv-in-sky
                    Du kannst HTML tags verwenden.
                    Z.b. kannst du den Text in <font color="red">mein Text</font> packen, dann ist der Text rot.

                    Und damit geht noch viel mehr, könntest so zb einen ganze Tabelle in eine einzelne Zelle packen.

                    1 Reply Last reply Reply Quote 1
                    • Uwe Clement
                      Uwe Clement last edited by Uwe Clement

                      @Scrounger

                      Habe 2 Fragen:

                      1. Frage wurde zwar schon oben gestellt, die Antwort darauf hat mir allerdings nicht geholfen: Wie schaffe ich es, dass die Überschriften aus dem JSON genommen werden (ich stelle das JSON per Datenpunkt bereit)
                      2. Ist es möglich in einer Zelle auch einen Button/Bild darzustellen und beim Klick irgendwas (Event) ausgelöst wird, z.B. mein Shelly geschalten wird. Kann ich bestenfalls eine function aufrufen?
                      Scrounger 1 Reply Last reply Reply Quote 0
                      • Scrounger
                        Scrounger Developer @Uwe Clement last edited by Scrounger

                        @Uwe-Clement sagte in Material Design Widgets: Table Widget:

                        1. Frage wurde zwar schon oben gestellt, die Antwort darauf hat mir allerdings nicht geholfen: Wie schaffe ich es, dass die Überschriften aus dem JSON genommen werden (ich stelle das JSON per Datenpunkt bereit)

                        Geht nicht.

                        1. Ist es möglich in einer Zelle auch einen Button/Bild darzustellen und beim Klick irgendwas (Event) ausgelöst wird, z.B. mein Shelly geschalten wird. Kann ich bestenfalls eine function aufrufen?

                        Geht nicht. Nimm dafür besser das List Widget. Das kann man mit html tags auch zu einer Table machen. Und Funktionen wie button, checkbox, etc. kann das

                        Uwe Clement 1 Reply Last reply Reply Quote 0
                        • sigi234
                          sigi234 Forum Testing Most Active @Scrounger last edited by

                          @Scrounger

                          Hallo, wie kann ich die Spaltenfolge ändern? Spalte 3 soll an 1 Stelle sein.

                          Scrounger 1 Reply Last reply Reply Quote 0
                          • Scrounger
                            Scrounger Developer @sigi234 last edited by

                            @sigi234 sagte in Material Design Widgets: Table Widget:

                            Hallo, wie kann ich die Spaltenfolge ändern? Spalte 3 soll an 1 Stelle sein.

                            reihenfolge im JSON String ändern, siehe
                            https://forum.iobroker.net/topic/29658/material-design-widgets-table-widget/14

                            sigi234 1 Reply Last reply Reply Quote 0
                            • sigi234
                              sigi234 Forum Testing Most Active @Scrounger last edited by

                              @Scrounger sagte in Material Design Widgets: Table Widget:

                              @sigi234 sagte in Material Design Widgets: Table Widget:

                              Hallo, wie kann ich die Spaltenfolge ändern? Spalte 3 soll an 1 Stelle sein.

                              reihenfolge im JSON String ändern, siehe
                              https://forum.iobroker.net/topic/29658/material-design-widgets-table-widget/14

                              Upps, war schon lange kein Bier mehr trinken. 😀
                              Kannst du das einbauen als Atribut in Json wie beim Original Tablet Widget?

                              1 Reply Last reply Reply Quote 0
                              • Latzi
                                Latzi last edited by

                                @Scrounger
                                Ich möchte gerne den Inhalt des JSON
                                admin.0.info.updatesJson

                                bbacb746-21d9-46ff-9088-7e0b45bd5d6f-grafik.png
                                in einer Standard-Table darstellen, schaffe die Einstellungen der Spalten aber nicht (erhalte eine leere Tabelle, nur die selbstdefinierten Überschriften sind zu sehen).
                                Hast du einen Rat für mich, wie ich das realisieren kann?

                                Vielen Dank!

                                Scrounger 1 Reply Last reply Reply Quote 0
                                • Scrounger
                                  Scrounger Developer @Latzi last edited by Scrounger

                                  @Latzi sagte in Material Design Widgets: Table Widget:

                                  Hast du einen Rat für mich, wie ich das realisieren kann?

                                  Problem ist, das die Daten ein Objekt sind. Das Table Widget benötigt aber ein Array von Objekten:

                                  Vergleiche:

                                  {
                                  	"admin": {
                                  		"availableVersion": "4.1.1",
                                  		"installedVersion": "4.0.9"
                                  	},
                                  	"sql": {
                                  		"availableVersion": "1.12.1",
                                  		"installedVersion": "1.9.5"
                                  	}
                                  }
                                  

                                  muss aber so aussehen -> array hat [ Klammer

                                  [
                                  	{
                                  		"adapter": "admin",
                                  		"availableVersion": "4.1.1",
                                  		"installedVersion": "4.0.9"
                                  	},
                                  	{
                                  		"adapter": "sql",
                                  		"availableVersion": "1.12.1",
                                  		"installedVersion": "1.9.5"
                                  	}
                                  ]
                                  

                                  Du musst das Objekt mit einem Skript in ein Array of Objects umwandeln.

                                  Könntest auch mein Adapter View Skript verwenden, da werden dir updates angezeigt und noch viel mehr inkl. sortieren und filtern:
                                  https://forum.iobroker.net/topic/30661/material-design-widgets-adapter-status

                                  O 1 Reply Last reply Reply Quote 1
                                  • Scrounger
                                    Scrounger Developer @bommel_030 last edited by

                                    @bommel_030 sagte in Material Design Widgets: Table Widget:

                                    1. Wenn ich die Höhe der Tabelle festlege und in Y-Richtung scrolle, kann man die Überschriften fixieren? Quasi wie Wiederholbereich / Fenster fixieren in der Office Welt.

                                    Hab es doch hinbekommen, wenn du es testen magst aktuelle guithub version ziehen.

                                    fixed_header.gif

                                    B Latzi 2 Replies Last reply Reply Quote 0
                                    • B
                                      bommel_030 @Scrounger last edited by

                                      @Scrounger
                                      Haken "feste Tabellenüberschrift" ist standardmäßig aktiviert und ohne Wirkung.
                                      Haken raus und wieder rein, dann funktioniert es. Top, danke!

                                      1 Reply Last reply Reply Quote 0
                                      • M
                                        michihorn last edited by

                                        Hallo,
                                        ich möchte gerne das Table Widget nutzen um bestimmte Infos meiner Raspberrymatic dar zu stellen.
                                        Dank zweier IOBroker Experten habe ich einen JSON String, der diese Daten darstellen kann.

                                        [{"Name":"Uptime","Wert":"8T 03:33"},{"Name":"Temperatur Raspberry","Wert":"48.90"},{"Name":"DutyCycle","Wert":13},{"Name":"WatchDog-Alarm","Wert":false},{"Name":"javascript.0.ccu.cpuFrequency","Wert":1200}]
                                        

                                        Ich möchte gerne jedem Wert eine Einheit zuweisen, bzw. ein Logo, beim "False" ein Kreuz o.ä.
                                        Kann ich das mit dem Widget machen?
                                        Gruß
                                        Michael

                                        1 Reply Last reply Reply Quote 0
                                        • O
                                          osser last edited by

                                          ja kannst du. Einfach in den Widget Settings im Feld nachfolgender Text deine gewünschte Ergänzung
                                          eintragen
                                          e8ab263e-4bce-4a5a-ae03-18ddd2a05c87-grafik.png

                                          1 Reply Last reply Reply Quote 0
                                          • T
                                            tom38 last edited by

                                            Seit kurzem hat das Table-Widget vertikale und horizontale Scrollbalken, auch wenn sie aufgrund der Tabellenhöhe oder -breite nicht erforderlich sind. Wie kann man diese abschalten?

                                            1 Reply Last reply Reply Quote 0
                                            • First post
                                              Last post

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            482
                                            Online

                                            31.6k
                                            Users

                                            79.4k
                                            Topics

                                            1.3m
                                            Posts

                                            vis
                                            33
                                            95
                                            11839
                                            Loading More Posts
                                            • Oldest to Newest
                                            • Newest to Oldest
                                            • Most Votes
                                            Reply
                                            • Reply as topic
                                            Log in to reply
                                            Community
                                            Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                            The ioBroker Community 2014-2023
                                            logo