feat: pinned headers

[skokenes]

pinned-headers.mp4

Changes

• Table now has a scroll wrapper around it. It will fit width/height to whatever it is embedded within
• Table uses a self-consuming context to determine if its at root or not.
• If at root, a set of sticky headers is drawn. The sticky headers are just another instance of the malloy-table embedded, but with only 1 row drawn at each level and all non-headers hidden
• On scroll, a class is added so that the sticky headers will change color. In order for this to work, sticky header versions of malloy-table are rendered within the parent root instead of its own ShadowDOM root
• For sticky headers, all pointer events are removed from base wrapper and then explicitly added to th cells. Otherwise, user can't interact with the content visible underneath the sticky header
• Malloy DataArray / DataRecord now caches calls to row() and cell(), rather than returning a new instance on every invocation. This was necessary for rendering tools downstream to have stable references to data points in order to not re-render unnecessarily
• Some typography tweaks with Inter
• Added an example story showing a more compact table, per Lloyd's feedback. This may become the default

[christopherswenson]

Looks great! Left one line comment, feel free to take it or leave it.

Also wondering stylistically whether there should be a vertical border on the sides of the header cells at the edges—it just looks a little odd to have a background color that meets the white background with no border in between. (E.g. on the left of category, brand, and sku in your example video, same on the rightmost columns as well.)

[christopherswenson]

Wondering if we should package this CSS in our repo somehow so that rendering our CSS doesn't require connecting to their server.

[skokenes]

Inter is our suggested font for using Malloy, but we don't actually ship it as part of the bundled renderer. It is up to the developer using the renderer to load the font themselves if they want to use it. This is similar to what Google Material 3 does, where Roboto is their default font but it is on the app developer to bring that font in https://github.com/material-components/material-web/blob/main/docs/theming/typography.md

In the code snippet above, that is only executed as part of the Storybook that we use to preview our components, so that won't get shipped as part of Malloy renderer.

In terms of where to recommend loading the font from, it is also available on Google Fonts https://fonts.google.com/specimen/Inter?query=inter. I believe I loaded it directly from source in the Storybook because the latest version had just been released and I wanted to try some of the new number variants.

[skokenes]

Just dug a bit deeper and it looks like the Google Fonts version of Inter does not include the variable font including the numeric variants, so I actually think recommending loading from the font source website is best.