Handling rich HTML content via JS

[natemoo-re]

@peterbowyer on Twitter
This sounds awesome! I've looked through the examples and thinking of the JS array in particular: is there a way to specify a column manually? E.g if you wanted one to link to the record's page, or have Edit/Delete actions?

@pbowyer

[natemoo-re]

Editable column support is high on my TODO list, but I'd like to avoid rolling our own data-binding if possible. I'll look at how Ionic handles it with <ion-input>. Off the top of my head, though, they basically have their own data events proxying the native ones, but that causes issues like this.

As for supporting rich HTML content via JS arrays, I'm not sure yet, but it's a great idea! Markdown tables are the only thing handled as HTML as of now, so technically this works:

<nomadx-table>
    <nomadx-table-data>
        | A             | B | C | D | E |
        |---------------|---|---|---|---|
        | [Link 0](url) | 1 | 2 | 3 | 4 |
        | [Link 1](url) | 5 | 6 | 7 | 8 |
    </nomadx-table-data>
</nomadx-table>

But it's worth considering supporting something similar more broadly and via JS. Definitely don't want to require that any rich content must a string of HTML, though that would be an quick fix.

I'll give it some thought and follow up here.

[pbowyer]

Hi, thanks for the feedback!

I am getting started with understanding web components, having looked round and realised "(React-based lib) has the best X component, (Angular-based lib) the best Y component"; thinking how much that sucked and how I didn't want to be tied to an ecosystem.

I was thinking of being able to manually type out a template for each row (or supply the headers separately too), using placeholders for each column's data. I appreciate this is a different direction to the one you are taking, and I have no idea if it's feasible - my ideas are coloured by having used Vue and Angular components, plus decades of server-side table generation, looping over records!

[natemoo-re]

Actually my first draft of this component handled things in a similar manner to that, with custom elements for columns/cells. I ran into some issues with screen readers since they rely on the native <table> and its children.

Looking again now, stencil#738 might be a good work-around. I just haven't tried it out yet.

Maybe it would it make sense to split out <nomadx-table-data> into multiple elements? There could potentially be a number of elements that handle their own type of input – templatable, markdown, csv, data, etc – but transform the data into a common format to pass up to the <nomadx-table>.