How to integrate Datatables.net into a web component framework with slots ?
How to integrate Datatables.net into a web component framework with slots ?
![RupertBarrow](https://secure.gravatar.com/avatar/4095bd3e314a51336f593a58b272ec2c/?default=https%3A%2F%2Fvanillicon.com%2F4095bd3e314a51336f593a58b272ec2c_200.png&rating=g&size=120)
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 ?
Answers
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
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.
Thank you. You've just made my day with that single statement![:) :)](https://datatables.net/forums/resources/emoji/smile.png)
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
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.
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