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

Yajra Datatable head columns change alignment when clicked


Hi,

using Metronic Laravel 8.2.5 and self implementing Yajra Datatable, I found this "bug" for which when a head column (the title of a column) is clicked to apply its ordering on the table the head title switch from alignment lef to alignment right.

When clicked the title changes classes, however the two classes are called exactly the same but they come from different js files. One dictates align left while the other align right. I guess the correct behaviour to avoid switching is for the title to keep the original align left class but I don't know how to properly disable the class switching.

Maybe some one can help me?

I'll attach a screenshot of the two classes switching their places (circled in blue):

https://ibb.co/jZCVZzF

Thanks!


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)


If you're facing issues with Yajra Datatable headers changing alignment when clicked, you're not alone. This common problem often arises due to conflicting CSS classes that alter the text alignment unexpectedly. To resolve this, reviewing your styles and ensuring consistent class application can help. Similarly, when working on academic projects like BSN writing assignments, seeking expert guidance can save time and improve results. For professional support in crafting well-structured nursing papers, visit https://www.nursingpaper.com/bsn-writing-services/. Their expert team can assist you in delivering clear, concise, and well-researched content to meet academic standards.



Our assignment help provides students with quality, well-researched assignments done by professional writers.
Along with assignments, Instant Assignment Help provides Do My Homework services to help students out with homework.



Hi Lore Porre,

I apologize for the delayed response. It looks like there's a conflict in the CSS classes applied by the Yajra DataTables. By right, the plugins.bundle.js file should not contain DataTable-related code, as it is already separated into a distinct file located at /resources/mix/vendors/datatables/datatables.bundle.js.

The source file for the plugins.bundle.js file is /resources/mix/plugins.js.

Have you made any modifications to the /resources/mix/plugins.js file?

Thank you.


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