Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI

Datatable js responsive


Hi Metronic team I want your help making my datatable responsive I have done it but in some screen sizes the table will have a small horizontal slider [even after restarting the page with the new size] which I don't want even if small so what can I do. I am using Metronic HTML v8.2.7 with bootstrap


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)


I am already using responsive as mentioned in my first message but the problem is the responsive isn't perfect I find a small horizontal scroll bar that may hide the last column or half of it and when I say the last column I mean the last column that didn't get hidden under the plus sign. to clarify when I use responsive it works but sometimes a 6 columns table becomes 3 for example and the rest is hidden due to the responsive the problem is that times the third unhidden column most of it becomes visible and the last bit of the column needs me to use the horizontal scroll [ not very big scroll] but I don't want it. the same problem sometimes appears in the full 6 columns and the last one does the same. and finally, when I say sometime I mean in some tables it appears and it doesn't in another. but if it appears in a table the horizontal scroll will be shown. also, I want to clarify I am using datatable pagination so some pages do that and others don't I think [and I am not sure] that the problem happens when the data is very big and I have used break all and still find the small scroll.



Hi,

Can you provide us a test link to your site in a private reply? We include the datatable plugin as it is with style customization only and the column responsibility part might be the plugin's original bug or limitation. Or please send us your basic code via https://gist.github.com/ to reproduce this issue with Metronic v8.2.8.

if that has something to do with Metronic we will check it.

Regards.



Hi,

Can you check the responsive datatable option here that will hide columns in smaller devices?

Regards,
Sean


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(