Can we make HSDataTables mobile responsive like the DataTables Responsive feature?

[PranayHalder]

I know Preline HSDataTable relies on jQuery DataTables. It is responsive with horizontal sliding, but I want to make it responsive using the DataTables Responsive CSS. I tried using the CSS provided by DataTables and the table works fine, but the responsive ‘click to expand’ feature is not working.

[jahaganiev]

Hey @PranayHalder - could you please share more details, such as a link to the DataTables page where the feature works, and specify which feature is not working in the Preline implementation?

[PranayHalder]

Hey @jahaganiev , glad you replied

I want to make the DataTables responsive like the official jQuery DataTables plugin.

Documentation:

• DataTables Responsive Docs

Example:

• Responsive Example

I know that in Preline UI, the horizontal scroll responsive feature is sometimes available, but it doesn’t always fit well or look good. The official DataTables Responsive extension seems like a much better option.

I tried implementing this responsive feature with HSDataTable since it is also based on jQuery DataTables, but it didn’t work.

So I have a few questions:

• Is this feature available in HSDataTable?
• Is there any way to enable or use it with Preline UI?
• If not, is it possible to support a similar responsive feature in the Preline DataTables plugin?

It would be really helpful.

Thanks!

[jahaganiev]

You can use the DataTables Responsive feature with Preline, but you need to include the Responsive extension first, as it is not bundled by default.

1. Install the Responsive extension:
   npm install datatables.net-responsive-dt

2. Include its CSS and JS along with your existing DataTables assets.

3. Enable it in your HSDataTable options:

<div data-hs-datatable='{
  "responsive": true
}'>
  <table class="min-w-full">
    ...
  </table>
</div>

HSDataTable passes all options directly to DataTables, so once the Responsive extension is loaded, it should work normally.

Hope that helps!