How to integrate Datatables.net into a web component framework with slots ?

RupertBarrow

I've integrated Datatables.net as an LWC Lightning Web Component (lwc.dev), and I'm happy with that : https://github.com/RupertBarrow/datatables-net-lwc

However, I would like to improve the integration visually. For example, one of my requests would be to be able to define a web component "slot" (Web Component slot, Lightning Web Component slot).

For example, I would like to include a Datatable in an LWC Card which has 3 slots : title, actions, footer.
So as you can guess, I would like to initialize the Datatables "dom" or "layout" (since 2.0.0) parameters by putting some of Datatables' components into a web component slot. In my case, for example :
* "l" (length changing input control) and "f" (filtering input) in the "actions" slot
* "i" (table information summary) and "p" (pagination control) in the "footer" slot
* and we would need to include "t" (the table) and "r" (processing display element) in the card's body markup

Is there a mechanism to support this currently in Datatables v1, maybe using the API ? Will it be possible in Datatables v2 ?

allan

Just to confirm my understanding - you want to take the controls that DataTables has rendered to the document, and place them into a slot - is that correct? If so, you could use Javascript in initComplete to move the elements around.

However, you might be meaning that you want to do something like new PageControl(myTable).appendTo('mySlot'); - is that more inline with what you are thinking?

Allan

RupertBarrow

Initially, what I was thinking is that I wanted to be able to add a "slot" command/indicator in the options.dom string property.
Then I found out that DT 2.0 had been released, that layout had replaced dom, and that I could customise layout as described at the bottom of this page : https://datatables.net/reference/option/layout#Comments

So I jumped in at the deep end and migrated from 1.10.13 to 2.0.1 (and Select 3.0.0) : it was seamless ! Congratulations for that !!
When I customised the layout, I couldn't get it to work when placing the <div> for a layout item (eg search) above the Datatable <table> in the elements hierarchy (I'm very bad at HTML/CSS trickery).

So I switched to using the API : as my focus was on the search <input>, that was easy.
But in the end, I can summarise my requirement (for such future customisation) as follows : I would like to be able handle independent Web Components for each layout feature, which would be prebuilt (HTML and CSS) and prewired to communicate with the Datatable, so that I could then place those components where I want in my application. Ideally, there would be one component per layout item : search, pageLength,; etc.

I may get round to doing that one day, for my LWC Lightning Web Components integration.

allan

it was seamless ! Congratulations for that !!

Thank you. You've just made my day with that single statement

When I customised the layout, I couldn't get it to work [...]

Can you show me what you were trying? I'm keen for the feature plug-ins to "take flight" as it were and become "the norm", rather than the exception for customisation beyond simple placement of items.

Allan

RupertBarrow

LWC Lightning Web Components use <slot>s so you can pass in HTML to a component which will add it exactly into that slot.

For example, my <rapido-dynamic-table> component has an "actionMenu" slot which is where I will pass in action menu items, developed as a separate component. This is how I use that component :

Another more complex example is the <rapido-dynamic-table> itself which uses the <lightning-card> component; this has its own slots which are title, actions, body (implicit) and footer. This is how the rapido-dynamic-table uses the lightning-card :

This is what the result looks like :

That search area boxed in orange is near the "actions" slot of the lightning-card where I will place the future actionMenus of my rapido-dynamic-table. It it existed, this is where I would use the Datatables.net search component.

At the bottom of the lightning-card is a "footer" slot (not visible in screenshots because not used) into which I would like to pass the Datatable layout controls which are visible in the screenshot : pageLength, info and paging.

I have developed the easy custom search component as a <lightning-input> element with its handler.
Next, I would like to have pageLength, info and paging as other custom components which I could then pass in to my component's <slot>s to place them wherever I want - basically breaking Datatables.net into smaller components for more flexibility.

I hope this helps you for you future design.

allan

Apologies for the delay in replying back to you here and many thanks for explaining a little more what you are looking for.

I'm wondering if I can make the DataTables "features" available via some kind of API, so you can do new DataTable.PageLength(table, insertPoint);. That's how the extensions for Buttons work and it might be possible to alter the core, or to add an API, to make that possible. I'll look into options for that - thank you.

Allan