Let’s Table That
check out full sample | code diff
“I need to show this data in a table. How do I do it?”
Silence.
We were sitting in the conference room assigned to us for the hackathon. One of the visiting developers was trying to perform the prehistoric task of putting some data inside a table.
I was stumped. I had played with lots of tables in my time, but never in iModel.js.
I remembered there was a table in one of our sample apps, the simple-viewer-app . A good lead! I happened to have dozens of half baked versions of the SVA on my machine, so I started searching through my garbled up code for some lines that could save us.
Do you guys remember the SVA? It looks like this:
That box on the bottom left, that’s our homegrown table. By default, it displays data selected on the view above it.
You would think you can just reuse it to pop in your own data, right?
That’s exactly what we ended up asking one of the core developers in the HQ. This guy was the UI expert. He listened to our question and immediately announced: “guys, I didn’t write this!”.
He then paused for moment, looked at our hopeless faces, and turned back to his screen to open up the table component. Next thing we know, he is F12ing his way through the code like a superhero.
Apparently, the table takes in a “data provider” which tells it what to display. In the case of SVA, it uses the presentation data provider which gets data from the iModel.
But what if I want to put my own stuff in there?
For example:
It’s some element IDs and Jimi Hendrix lyrics.
In this case, we would use a simple table data provider. It takes in a list of column names for the table, and then we simply add each individual row.
Now that part can be a little tricky. You have to go inside each row to add individual cells => inside each cell, to add a property record => inside each property record, to add the value and description.
It’s a freaking Russian nesting doll!
What we really want to focus on is the last doll; the property value and description. That’s where we put the actual data from the CSV file. Eg. “Business”, “men”, “they”, “drink”, “my”, “wine”, “0x20000001710”, etc. will all be defined as individual property values.
Looking back, I can’t believe the expert started with nothing but figured this out right in front of our eyes. It’s almost silly, we could have done it ourselves.
Consider that iModel.js is open-source. Between the docs and the samples, I would even say…there is no need for experts.
In that spirit, I wanted to figure out how to make a cool demo for you guys. I thought it would be neat if I could just drag and drop that CSV file onto the table. Luckily, iModel.js is javascript based, so I can simply pull in a package that will do the job for me.
After a quick search on Google, I found react-dropzone. Based on its stats, it looks like a reliable solution.
The author provides some sample code in the read-me that I just popped in. It’s crazy how little code is needed to quickly import someone else’s package. This is what I ended up with.
Not really. I wanted to say Go Phillies! but this model doesn’t have the letters I need :/
Back to the Hackathon…the visiting developer was finally able to create a custom table after some frustration. I promised her I would write this post to make up for being less than helpful. I hope she, along with you find this sample useful. Links to the code up top.
-Roop, reporting live from the basement.
<- previous post | home | next post ->
