Recommended package for creating tables in Observable Framework?

Community Help
1

Hi,

I am starting to use Observable Framework and I really like it. Everything works smoothly! Coming from an R background, it’s nice to be able to create lots of content using similar tools compared to what I do in R:

  • Markdown for content
  • Plot for plots
  • Arquero for working with data (or even R, with data loaders
  • etc

What I am missing though is some way to create customised tables for the data. Not only for the input data (for which I can use Inputs.table()) but also for data summaries etc. Something similar to what the gt and reactable packages do. The R package reactable is itself a wrapper around the JS React Table package but I don’t seem to find much example code of this package used in Observable notebooks.

Is there some recommended best practice/package for this task? Am I missing something obvious?

2

Thanks for the links. I like the reactable demo, the presentation is very elegant.

I don’t think you are missing anything obvious, the best thing we have for now is probably Inputs.table (but you could use any other npm module).

When you mention data summaries, are you referring to the automatic column summaries like those that appear at the top of each column in observable notebooks’ data table cells?

2582×1262 335 KB

Recreating this in Framework is something that we are actively working on (Summary data table display · Issue #23 · observablehq/framework · GitHub). Nothing to show yet, but I’m happy to hear about use cases and suggestions.

1 Like
3

With data summaries I mean the output of some data analysis. A typical case would be to group the data palmerpenguins data by species and sex and calculate average body_mass_g and showing the results in a table. Or similar operations to this one.
One example table here

1 Like
4

I’m sorry I don’t know of a (ready-made) module that would make this task simpler. And writing HTML table code is a bit tedious.

5

this is nice, too
https://posit-dev.github.io/great-tables/blog/introduction-0.4.0/

6

The table ecosystem in R is very rich. great_tables is an attempt to translate gt into python, but it’s in an initial phase.

I was hopping for some JS package for creating tables, with a similar philosophy to plot :heart_eyes: One can dream! :slight_smile:

7

You mentioned reactable and React Table, and upon looking at React Table’s website, it mentions AG Grid being their partner.

I haven’t used R, reactable, or React Table before but I do know AG Grid. AG Grid does have JS distribution so you can use require to add it to a Notebook and use in it.

E.g.: AG Grid in Observable Notebook / MP_Li | Observable

Ref:
Require | Observable documentation
JavaScript Grid: Quick Start | AG Grid

1 Like
8

Just chiming in here that Inputs.table() is actually wayyyyy more flexible than I initially thought it was. To date, the only core features from {reactable} that I use frequently but haven’t been able to replicate with Inputs.table() are Column Groups and Grouped Rows. I’ve been able to replicate data bars, sparklines, colored rows, column formatting, and custom styles for columns and column headers.

@Fil: do you know if there will ever be any updates to the arguments in Inputs.table() that can facilitate grouped rows and column groups?

9

I’d be interested in researching this, but can you point to a reference implementation of these groupings in HTML tables? I see that reactable uses custom divs—this would not be practical for us given that Inputs.table returns a table element.

10

I would suggest using multiple tbody elements.

11

being new to the Framework fray, I’d be happy to see your approach to each of your: “data bars, sparklines, colored rows, column formatting, and custom styles for columns and column headers.”

So far, I’ve used Inputs.table format option to display selected columns as inline images with:

format: {	"myImageColumn": (x) =>  htl.html`<img src="${x}" width="150" />`,}

and I’ve replace underrscore with blank in column headers of sql results with:

	header: results.schema.fields.reduce((ac,a) => ({...ac,[a.name]:htl.html`<i>${a.name.replace("_"," ")}`}),{}),`

I’d like especially to see examples that apply color scales to numeric columns (e.g. white-to-green gradient from low to high value).