How to add custom CSS onto perspective-viewer

[mhkeller]

I wanted to make some small CSS changes like altering the shade of green on the status circle and making column headers bold to better match the application theme. I've been reading about the shadow root but I'm definitely no expert in it. I see this issue but that looks like it's about creating your own component.

I'm wondering what's the best pattern for injecting custom styles? Looking at the theme css files, those don't seem to cover elements like column header text styles but maybe I just wasn't able to find them. My guess is it's a bit more complicated since editing styles via dev tools has no effect.

[texodus]

The datagrid plugin is just a regular HTML <table> in the light DOM (virtualized via regular-table), you can style it with regular CSS in the document:

perspective-viewer table thead th {
    background-color: red;
}

You may need to be aggressive with specificity to override the rules provided by default.

Perspective adds several of metadata classes to the table elements during it's render phase as well, but these are not documented. The perspective-viewer-datagrd package CSS source has the default styles and some examples of things like e.g. column type matching.

[texodus]

I really need to know specifically what you're trying to override, perhaps share a repo?

The <table> element's :host is document, so you can override anything defined here, though TMK there is nothing in the light DOM CSS qualified by :host.

[mhkeller]

I'll can make a repo this evening if still needed but here's a screencap from the website as quick reference. I was looking into modifying the bottom border on the #status_bar element. Here's a screenshot from the website showing that it's getting that line from the box-shadow style on :host #status_bar.

status_bar.mov

[texodus]

This is not part of the Datagrid, this is the <perspective-viewer> element, which you can only style via the exposed theme variables.

[mhkeller]

Got it. So the only way would be to change --inactive-border-color but that would have other effects elsewhere. Thanks for the extra info!

[texodus]

Well, it depends on what you mean by "elsewhere". You may still be able to get away with something like this e.g. for each plugin:

perspective-viewer {
--inactive--border-color: transparent;
}

perspective-viewer-datagrid {
--inactive--border-color: #FF0000; // whatever other color
}

.. but this is an implementation detail, we likely do (and will in the future) use this variable in a variety of other places where it is non-separable. A repo would help me understand overall what you're looking for, or better a mockup if you're willing to share.

We've kept this API minimal so far. On <perspective-viewer>'s interface (the part which can be made invisible by collapsing the tab), you can override the primary and secondary colors, fonts, and icons (though using icons of different dimensions than the builtins will undoubtedly cause other issues).

[limx0]

Somewhat related (and please forgive my JS/CSS ignorance), but is it possible to hide certain tools from the status bar? Suppose I wanted to disable the export and copy buttons?

[texodus]

@limx0 No, Perspective will never support this. It is completely futile to try to prevent users from copying or downloading data that the browser itself must download anyway.

[Mindbooom]

I would like to modify the cell’s style based on perspective, such as adding up and down arrows inside the cell to change the data. Is there any way to achieve this? Thank you very much.