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
Posts: 23Questions: 3Answers: 0
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
initCompleteto 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
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