Metronic Mega Update!Tailwind 4, React 19, Next.js 15, KtUI, ReUI, eCommerce, User Management Apps and more
Explore Update

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 (10)


Reddy Book Club brings together enthusiasts for a community-based experience. Be part of the action by joining like-minded individuals who share your passion. Enjoy exclusive features and real-time updates in a collaborative space.

Reddybook Login provides a secure and seamless entry to your account. With just a few clicks, you can access all your personalized features. It’s fast, easy, and keeps your information safe.

Reddy Anna is the place to discover real-time sports and exciting features. With everything available at your fingertips, there’s always something new to explore. Enjoy seamless navigation and constant updates.

Reddy Anna is a platform built for ultimate user engagement. Stay connected with the latest action and enjoy a seamless experience every time you interact. It’s the perfect place to get immersed in all the excitement.

Reddy Anna offers a dynamic platform with endless entertainment options. Dive into live sports, real-time updates, and more, all in one place. It’s designed for easy navigation and constant excitement.

Laser247 Login keeps you connected to your account at all times. The platform is built for quick access and uninterrupted enjoyment. Log in and dive straight into the action with no delays.

With Laser247 Login, entering the platform is fast and hassle-free. Your personalized dashboard and real-time updates are just a login away. Stay connected to the latest action with ease.



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  :(