Allow for caption to be specified for Table components

[chawes13]

We should be able to specify the text or component to use as a <caption> element in our Table components. We could leverage a similar pattern as established for label / labelComponent in LabeledField, i.e., accept a caption string prop and a captionComponent prop that defaults to ({ caption }) => <caption>{caption}</caption>.

This is related to research by @mwislek in addressing #324

[dpikt]

👍good callout. I think we could just make this a node prop that will be inserted into the tag since it wouldn't need access to any "internal" props/state (I think):

caption="My Table"

...

caption={<p>My<strong>important</strong>table</p>}

[chawes13]

Is there a pattern for accepting Node|String? Passing in text seems like the primary use case, and caption={<>My Table</>} feels a little clunky. Or since this is a node, I suppose the following would be equivalent?

caption="My Table"
<caption>{caption}</caption>

caption=<p>My <strong>Table</strong></p>
<caption>{caption}</caption>

[dpikt]

A string is a node, so it would work that way by default 🙂 My example above was an "inclusive or" of the ways it could be used.

[dpikt]

To be clear, I mean node as in PropTypes.node, not a DOM node.

[chawes13]

Awesome, thanks for the clarification!