Customization

CSS classes

All styling uses CSS classes that you can override in your stylesheet.

Row reordering

Column reordering

Default styles

The package includes these default styles:

/* Row ghost */
.wire-sortable-ghost {
    opacity: 0.4;
    background-color: rgb(59 130 246 / 0.1);
}
 
/* Row chosen */
.wire-sortable-chosen {
    background-color: rgb(59 130 246 / 0.05);
}
 
/* Row drag clone */
.wire-sortable-drag {
    background-color: white;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    border-radius: 0.5rem;
}
 
/* Column ghost */
.wire-sortable-column-ghost {
    opacity: 0.4;
    background-color: rgb(59 130 246 / 0.1);
}
 
/* Column drag clone */
.wire-sortable-column-drag {
    background-color: rgb(249 250 251);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    border-radius: 0.375rem;
}

Dark mode

Dark mode variants are included automatically:

.dark .wire-sortable-drag {
    background-color: rgb(31 41 55);
}
 
.dark .wire-sortable-column-drag {
    background-color: rgb(31 41 55);
}

The drag handle icon uses text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 for proper contrast in both themes.

The toggle button uses conditional Tailwind classes:

• Active (reordering): bg-primary-100 text-primary-600 (light) / bg-primary-900/30 text-primary-400 (dark)
• Inactive: text-gray-400 hover:text-gray-600 hover:bg-gray-100 (light) / text-gray-500 hover:text-gray-300 hover:bg-gray-700 (dark)

Overriding styles

Add your own rules after the package styles to override defaults:

.wire-sortable-ghost {
    opacity: 0.6;
    background-color: rgb(16 185 129 / 0.1); /* green instead of blue */
}
 
.wire-sortable-drag {
    border: 2px solid rgb(16 185 129);
}

Animation

Adjust the drag animation speed in config/wire-sortable.php:

'animation' => 300, // slower, smoother

Set to 0 to disable animation.

Toggle button

The toggle button is rendered automatically in the table toolbar. It shows:

• "Reorder" (with a grip icon) when not in reorder mode
• "Done reordering" (with a check icon) when in reorder mode

The button is hidden when the table uses alwaysReorderable() or when row reordering is disabled.

Translations

The button labels are translatable. Publish the translations:

php artisan vendor:publish --tag=wire-sortable::translations

Edit lang/vendor/wire-sortable/{locale}/messages.php:

return [
    'reorder' => 'Reorder',
    'done_reordering' => 'Done reordering',
];

Included locales: en, cs.

Publishing views

To fully customize the HTML and JavaScript:

php artisan vendor:publish --tag=wire-sortable::views

Published files:

After publishing, edit the files in resources/views/vendor/wire-sortable/.

Custom user model

If your application uses a custom user model, update config/wire-sortable.php:

'user_model' => 'App\\Models\\Admin',

This is used by the ReorderableColumnOrder model for the user() relationship.