PF4 react-table colums (title) to support jsx (also in collapsed view)

Pretty pretty please, would be great if pf-table didn’t hate this

this kinda thing

    const [cols] = useState([
        { title: intl.formatMessage(messages.rulesTableColumnTitleRule), transforms: [sortable] },
        { title: intl.formatMessage(messages.rulesTableColumnTitleAdded), transforms: [sortable, cellWidth(15)] },
        { title: intl.formatMessage(messages.rulesTableColumnTitleTotalrisk), transforms: [sortable] },
        { title: intl.formatMessage(messages.rulesTableColumnTitleSystems), transforms: [sortable] },
        { title: <><AnsibeTowerIcon size='md' /> {intl.formatMessage(messages.rulesTableColumnTitleAnsible)}</>, transforms: [sortable] }
    ]);

throws this warning (it doesn’t enjoy the <><AnsibeTowerIcon size='md' />...</>

also, it doesn’t collapse very well, displays fallback rather than the column name

what it oughta look like

[mcoker]

@AllenBW sounds good! Let me know if you want to brainstorm or if I can help out in any way.

[mcoker]

@AllenBW the problem with this approach and how the table is configured currently is that we use the data-label attribute on each cell to generate the title/header via CSS on the left of each cell in the mobile/responsive layout. We do that by using content: attr(data-label); in the ::before pseudo element of each cell, and unfortunately the content property value isn’t parsed by the browser, so it won’t render HTML in the document tree.

To be able to display the content of the table columns from the default table view (desktop) to the grid layout view (responsive/mobile), I think we would need to consider a different approach.