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

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

RupertBarrowRupertBarrow 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

  • allanallan Posts: 63,434Questions: 1Answers: 10,458 Site admin

    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

  • RupertBarrowRupertBarrow Posts: 23Questions: 3Answers: 0
    edited March 8

    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.

  • allanallan Posts: 63,434Questions: 1Answers: 10,458 Site admin

    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

  • RupertBarrowRupertBarrow Posts: 23Questions: 3Answers: 0

    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.

  • allanallan Posts: 63,434Questions: 1Answers: 10,458 Site admin

    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

Sign In or Register to comment.