The New Way to Build with AI! Introducing ReUI — the developer platform for agentic UI with shadcn/ui
Browse ReUI Pro
Light
Dark
System
Ask  Question

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



Thanks!


user
Lore Porre 2 years ago
Laravel Datatables PHP
1 Answers
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (1)

 
Deleted comment
user
George Ellison 1 year ago
Deleted comment
 
Deleted comment
 
Deleted comment
 
Deleted comment
user
galina moroz 1 year ago
Deleted comment
 
Deleted comment
user
Faizal Author 2 years ago

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
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Metronic

Go to Metronic Downloads License Guide & FAQ Purchase Metronic Refunds
buy metronic keenthemes mega bundle

ReUI

Open-source React components, blocks and templates built on shadcn/ui and Tailwind CSS by Keenthemes.

ReUI by Keenthemes React Components UI Blocks React Templates ReUI Documentation