Support of HTML custom elements (web-components)

annafw

Hi!

I recently got into the W3C-standards web-components (custom elements, shadow DOM, HTML templates) and tried to use them with DataTables. An example is a status-component, which basically displays text with specific styling depending on an attribute-value. DataTables displays it correct, but the order/sorting and search functionalities don't work on these components. I tried different ways (custom element with shadow DOM, without it, customized built-in element) but none of them worked.

I made a simple example: http://live.datatables.net/ciwobojo/1/edit (I know that could be solved without web-components, it's just an easy try-out)

Are there any plans to add support of web-components in future versions? As they are an upcoming trend, this would be pretty cool

colin

With orthogonal data data, you can get them ordering/filtering as expected - see here.

Hope that does the trick,

Colin

annafw

Hi Colin,

Thanks for your reply. It works pretty good for the example. Unfortunately my company creates our live tables from a database - so, instead of getting the whole component as data, we usually do something like this:

 columns: [{
        data: 'planningState',
        searchable: false,
        render: function (data, type, row) {
            return '<fw-badge status="' + data + '"></fw-badge>';
        }
    }]

Therefore the component <fw-badge> will be created on rendering the table. Using your suggestion we would need to access an attribute of this component which contains the displayed text (data from the database differs from displayed text), but that will not be set until the component is created.

Do you have any tips for that case?

Anna

colin

In that case you would do the opposite of what I had, something like this.

Hope that helps,

Colin

annafw

Yeah, I tried this as well. But this orders/filters with "data" whereas I need to order/filter the displayed text. This shows the issue: The displayed statuses aren't ordered correctly. Seems like I just could save the displayed text in the database too to make it accessible for datatables.

Anna

colin

Ah, that kind of is valid, because the text that's being returned for type sort in columns.render is INVALID, not the displayed text of this one is invalid.

So where the code is:

        return type === 'display'? '<fw-badge status="' + data + '"></fw-badge>':  data;

you would need to return the same string at the end as would be displayed in that widget.

Colin

annafw

Hi Colin,

thanks for your help. One more question concerning this: The export function (pdf, excel, ...) doesn't get any content from <fw-badge>. So when I export my table with

<fw-badge>Active</fw-badge>

(or something similar) in a cell, this cell is empty in the exported pdf.

I tried to modify my example for this issue, but somehow I'm not able to add the export buttons there

What could I do to fix this?

Anna

annafw

Nevermind, I found a solution.

Orthogonal Data (https://datatables.net/extensions/buttons/examples/html5/outputFormat-orthogonal.html) does the trick - just in case anyone else is searching for this.