Can we disable sortable on rows based on a conditional?

To disable reordering for certain rows based on a condition, you can use a combination of JavaScript and CSS to achieve this. Unfortunately, there isn't a built-in method in most table libraries to directly disable reordering for specific rows based on a condition. However, you can achieve this by adding a class to the rows you want to disable and then using JavaScript to prevent the reordering action.

Here's a step-by-step solution:

1. Add a class to the rows based on the condition: You can add a class to the rows that should not be reorderable using the extraAttributes method.

   Tables\Columns\TextColumn::make('priority')
       ->extraAttributes(fn ($record) => $record->is_required ? ['class' => 'non-reorderable'] : [])
   

2. Use JavaScript to disable reordering for rows with the specific class: You can add a script to your page that prevents the reordering action for rows with the non-reorderable class.

   document.addEventListener('DOMContentLoaded', function () {
       const nonReorderableRows = document.querySelectorAll('.non-reorderable');
   
       nonReorderableRows.forEach(row => {
           row.addEventListener('mousedown', function (event) {
               event.stopPropagation();
           });
       });
   });
   

3. Add CSS to style the non-reorderable rows if needed: You can add some CSS to visually indicate that these rows are not reorderable.

   .non-reorderable {
       background-color: #f8d7da; /* Light red background */
       cursor: not-allowed; /* Change cursor to indicate non-reorderable */
   }
   

Putting it all together, your final implementation would look something like this:

PHP Code:

Tables\Columns\TextColumn::make('priority')
    ->extraAttributes(fn ($record) => $record->is_required ? ['class' => 'non-reorderable'] : [])

JavaScript Code:

document.addEventListener('DOMContentLoaded', function () {
    const nonReorderableRows = document.querySelectorAll('.non-reorderable');

    nonReorderableRows.forEach(row => {
        row.addEventListener('mousedown', function (event) {
            event.stopPropagation();
        });
    });
});

CSS Code:

.non-reorderable {
    background-color: #f8d7da; /* Light red background */
    cursor: not-allowed; /* Change cursor to indicate non-reorderable */
}

This approach ensures that rows with the non-reorderable class cannot be reordered, providing a visual cue and preventing the reordering action through JavaScript.