Given a simple functional React component with a react-bootstrap Table using the striped property, what options are available to copy the table and all of it’s contents, styles intact, to the system clipboard?
There are numerous similar questions on SO and elsewhere but they either don’t work, such as the accepted answer to this question from 2019 which does not properly copy the text color, presumably because it comes from an external style, or they might work but are unavailable in a React web application due to using direct DOM manipulation, like this example from 2014 which results in Uncaught TypeError: Failed to set an indexed property [0] on 'CSSStyleDeclaration': Indexed property setter is not supported when used in a React component.
The modern navigator.clipboard interface also does not seem to properly copy all of the visual properties or styles associated with the table. Simple text markup like bold and italics work, but text colors do not nor do the table border properties or background striping.
Ultimately the goal is to get a styled copy of the table into the clipboard so that it can be pasted into a rich text environment such as a email client or word processing application. I’m more than willing to perform conversions to intermediate steps or other involved procedures so long as they are reliable and reasonably performant, to the point that I’m currently wondering if I can convert the entire page to a PDF and then extract what I want from the PDF to copy to the clipboard, but I’m hoping there’s some simple method, library, or component that can do this that I just haven’t found yet.