search

glin / reactable

Interactive data tables for R
https://glin.github.io/reactable
Other
627 stars 80 forks source link

Feature request: change iframe style with reactable table in accordance to change in parent page style #209

Closed bbt-dev closed 2 years ago

bbt-dev commented 2 years ago

First of all, thanks a lot for the reactable package!

I produce reactable tables and save them with htmlwidgets::saveWidget with the final aim to insert into iframe (and avoid conflicts with Wordpress JS and CSS). This perfectly works in a static web-page. However, when I dinmicaly change the style of the major WP post and make background black or yellow, change font size, font family, etc - for sure these changes do not apply to the content of the reactable-generated iframe.

Could you please add a function to the reactable output that "listens" the style changes applied in the parent frame, and applies the same style changes in iframes with reactble-generated content?

Here is an html code of the parent page body:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<style>body{background-color:white;}</style>
</head>
<body>

<div>
  <p>There is some text before iframe that changes accessibility attributes appropriately</p>
</div>
<div>
  <h1 style="text-align:left;font-size:32px;font-style:normal;font-weight:bold;margin:2px">Table . This is a table that is situated inside an iframe and does not change accessibility attributes.</h1>

  <iframe src="/path_to_WP_dir_with_files/sample_child_sample_table.html" scrolling="auto" seamless="seamless" width="100%" height="360" name=""></iframe>

</div>
<div>
  <p>Here is some text after iframe that changes accessibility attributes appropriately</p>
</div>
</body>
</html>

The content of the "sample_child_sample_table.html" is generated by htmlwidgets::saveWidget( reactable(head(iris[, c(1:4)], 10)), file = "sample_child_sample_table.html", selfcontained = FALSE, libdir = "lib")

Changes in the WP post style is performed by the accessibility widget available in this demo, but I have no idea what exactly this widget changes in style attributes.

glin commented 2 years ago

Hi, this is tough, and I don't think reactable can (or should) do anything here. If you want to apply styles to an iframe outside of the iframe, it seems like you'll have to inject those styles from the parent page with somewhat of a hack in JavaScript: https://redstapler.co/how-to-apply-css-to-iframe/ (just the first result from googling)