Show output table

[kdabir]

Instead of having to open the console, it would be great to show a table with results. For nested objects/arrays, we may either show expandable view or a simpler readable representation.

[MelisaIm]

Could I work on this?

[kdabir]

@MelisaIm thanks for interest. Sure, go ahead and send a PR.

[odininon]

The biggest difficulty with this is going to be the result object coming back is not always the same and will be difficult to predict. I recommend not using a structured component, but use functions to dynamically change the results.

[kdabir]

yes, I tried some table components like google charts table and a couple of other react table components. Biggest challenge is we don't know the structure and types of columns upfront. Nested tree create another problem

We could potentially look at using or implementing something like this: https://github.com/once-ler/react-nested-json-table

EDIT:

To elaborate a bit with example, here is what I have in mind.

Top level values of object form the columns of table. Complex attributes (type Array, Object) can be expanded in tree view.

[
  {name:foo, age:1, address: {line1:street, line2:city}, tags:[work, manager]},
  {name:bar, age:2, address: {line1:street, line2:city}, tags:[friend, club]}
]

would render something like this:

name	age	address	tags
foo	1	►	►
bar	2	►	►

This is not optimal. Later, we can do some tweaks for better UX, like auto expanding arrays of simple types.

I am, of course, open for suggestions.

[odininon]

What if we make a bottom section with tabs?

If you query normalized data, it would just show under one tab. if you query complex data, say like address above, it would append another tab and show the 'Foreign Key' in the main tab. When clicked, it could jump to highlight the record in the 'address' tab? If a parse error, replace the main tab with the error message.

[odininon]

Started a rough draft over here.

If it looks like a step in the right direction, I'll clean it up.

[kdabir]

What if we make a bottom section with tabs? We can try that too, however I'd like to mention two points about it:

1. In that case it would be hard to see one row (entire object) in one shot.
2. The sql output is inherently expected to return single table, so it might confuse some.

If it looks like a step in the right direction

It is indeed. Its already better than having to open console :). Now we need to think about nesting. And as I said I am open to try different things. Even the tabbed one or inline expanding cell approach.

---

I have one more idea about implementing it, lets call it expanding row:

Lets just have top level keys in result row, and then the rows' div can expand to show the entire json object (pretty printed tree). That ways, we don't have to expand individual cell with ►, which can cause width issue. This expansion can always be enable to show underlying json object (whether it has nesting or not). what do you think?

[kdabir]

@odininon would you like to merge your first cut? @MelisaIm did you start on this?

[MelisaIm]

@kdabir I didn't have a chance to work on this, but noticed that @odininon was making great strides. Great job!

[odininon]

@MelisaIm I am sure you could make it look much better then I can :)