Table Inspector not working correctly

[michaelos02]

Hello,
I am very excited that I "stumbled" upon Metro4! I do a lot of work of data work with a number of school districts in Dayton, Ohio. Many are "Google Schools" so they have a lot of data in Google Sheets. I have been working with Google Apps Scripts (GAS) for awhile now and have branched into web apps. Right now I can take a Google Spreadsheet and load it as a table in a web page using GAS that is filtered for the currently logged on user.

I am very impressed with what the Metro4 Table component can do! I have been trying to get it to work but I am stuck.

I can get data from a Google Spreadsheet, create a JSON file that meets the external JSON format needed by Metro4 and I can get it to load in a webapp! Whoo hoo!

My issue is the "Table Inspector". When I try to open it shows no headers (like the "tbody" of the inspector is missing). I can click on reset and it shows. I can use the "up and down" arrows to change the column order, I can hide columns, BUT I can not change the size.

So, how do I get the inspector to load an "initial view"? And how can I get the column size spinners to work?

Thanks in advance for any quidance!

[olton]

Hi, Can you create a live example with your code?

[michaelos02]

OK, here is a "bare bones" example.

Link to GAS project (anyone can edit) https://script.google.com/d/15oncwdJXrRLQqpszVOx4jweBLQjDJY6yWAqbss7G89hcf4Q8RbqbDcMx/edit?usp=sharing

Here is a link to the current WebApp deployment:
https://script.google.com/macros/s/AKfycbypmOxeleYLvcp9anXAZQ14xa1dfdp0YnJzZ3OVbVRgSQrq25vE4XpOrE8rq0fNN3JH/exec

The code is from the Metro 4 Table demo. If you click on the "open inspector" or the gear you will see the issue. You click "reset" when the inspector shows you can do everything BUT change column size.

I want to use this with GSheets and I know how to build the headers and data objects from sheet info that the table component needs so that is not an issue.

I have a feeling I am just missing one little thing.... but for the life of me I can't find it!

Any help is greatly appreciated!

[olton]

I can't run your example :(

[michaelos02]

Well... from one issue to another! What error are you getting? I do know that you have to be logged in to a Google Account for them links to work.

In the mean time I did create a public repo of my bare bones set up. Here is the link:
https://github.com/michaelos02/Metro4tableWork

Maybe you can take it and see what I am missing.

I appreciate you efforts and taking the time to help me!

[michaelos02]

OK, maybe this will get us a little closer. I took the example of Table Methods (https://metroui.org.ua/examples.html), pared down the "head" the section and added a table inspector button. I used the same "table.json" and did not alter it in anyway. I loaded this on my server, clicked the load button and the data loads. Great! BUT... click on the "Open Inspector" button and it shows BUT no info in it. You can click on the "reset" link and then it shows the columns. Everything works EXCEPT for the column sizes... Here is a link to my HTML page on github:https://github.com/michaelos02/Metro4tableWork/blob/main/metroTable3.html

I know I am missing one little thing however I can't find it.... hopefully when you load this page you will be able to duplicate my situation....

Again, thanks for the help!

[olton]

onclick="Metro.getPlugin('#t1', 'table').toggleInspector()"

[michaelos02]

Well... updated my code with your "onclick" version and I still get the same thing.... :(

[olton]

Please, create an issue on the https://github.com/olton/Metro-UI-CSS/issues

[olton]

Fixed in 4.5.0

function afterLoad(){
        var nsp ={}
        nsp.theTable = Metro.getPlugin("#t1","table")
        nsp.theTable.loadData("../data/table.json")
}

[michaelos02]

Whoo hoooo! Success! Changed to v4.5.0 and it works!!!

BUT.... I need to use table.setData() with my Apps Script project and the inspector fails as before. So.... what ever you did to fix the issue in the "loadData" method do the same for the "setData" method.

By the way, I again thank you for your assistance with this!