Distribute labels in columns instead of rows

Sorry can you be more specific please ?

In the previous example, there was something like this in the JS code:
import './ipsosboard.html';

Yes, this HTML file should contains the template used in the JS file. In my case, my template was simply named table, inside a HTML file named main.html.

And you have to import this HTML file in your JS file to get all of this working together.

See sections 2.2 and 2.3 in this tutorial.

1 Like

How can I have separate tables with same listparams for the two muons arrays separately?

Provided that I have loaded this below,

muons : [ { "pt": 33.1, "eta": 33.2, "phi": 33.3, "charge": 33.4 }, { "pt": 33.5, "eta": 33.6, "phi": 33.7, "charge": 33.8 }, ]

Can split the two in two tables, so I can map data to two instances of synths that are controlled by something like this Object { attack: 33.5, decay: 33.6, ..... }

If you want to save each muons Object (in the muons Array) in different Arrays you should just have to modify the .forEach() in transformData().

As this?
currentEvent.muons[ 0 ].forEach(function ( obj ) { Object.keys( obj ).forEach(function ( key ) { transformedMuons.push( [ key, obj[ key ] ] ); }); });

` currentEvent.muons[ 1 ].forEach(function ( obj ) {
                Object.keys( obj ).forEach(function ( key ) {
                    transformedMuons.push( [ key, obj[ key ] ] );
                });
            });`

Will this create two tables with each muon Objects though?

You use indexes to target the Objects in the Array, it is wrong. You can’t use .forEach() on Objects.
And you are still using the Array transformedMuons to store the muons label/value, you won’t have two separates tables you see ? By doing this you will end by having your muons Objects in the same Array transformedMuons (like previously).

A more “flexible” approach would be to avoid using indexes (what if your Array contains more than 2 muons Objects?).

const myArray = []; // will store all Array of tuples

currentEvent.muons.forEach(function ( obj ) {
  const tuplesArray = []; // create an Array for each Object of muons

  Object.keys( obj ).forEach(function ( key ) {
    tuplesArray.push( [ key, obj[ key ] ] );
  });

  myArray.push( tuplesArray );
});

myArray will have this kind of structure :

[
  [ [ "label", 0.00 ], [ "label", 0.00 ], ... ], // first set of muons
  [ [ "label", 0.00 ], [ "label", 0.00 ], ... ], // second set
  // and more if you had others muons Objects
]

Thanks a lot @borntodev I am not sure though this is what I want to achieve. Specifically, I would like to have radio buttons in each object/table, thus to have each object as separate entity in my table, how can I do it using the above example?