Tablesorter Laravel Package

Getting Started

Minimal Setup

1. Installation

   composer require contao-components/tablesorter
   npm install tablesorter --save
   

   Ensure jquery and tablesorter JS/CSS are included in your Laravel resources/js/app.js and resources/css/app.css.

2. Basic Blade Integration

   <table id="myTable" class="tablesorter">
       <thead>
           <tr>
               <th>Name</th>
               <th>Position</th>
               <th>Office</th>
           </tr>
       </thead>
       <tbody>
           <!-- Data rows -->
       </tbody>
   </table>
   
   @push('scripts')
       <script>
           $(document).ready(function() {
               $("#myTable").tablesorter();
           });
       </script>
   @endpush
   

3. First Use Case Sort a static HTML table on a Laravel admin dashboard or user-facing grid.

Implementation Patterns

Laravel-Specific Workflows

1. Dynamic Table Data Use Laravel Blade directives to render tables from Eloquent collections:

   @foreach($users as $user)
       <tr>
           <td>{{ $user->name }}</td>
           <td>{{ $user->role }}</td>
           <td>{{ $user->created_at->diffForHumans() }}</td>
       </tr>
   @endforeach
   

2. Resource Controller Integration Pair with Laravel’s ResourceController for CRUD tables:

   public function index()
   {
       $users = User::latest()->paginate(10);
       return view('users.index', compact('users'));
   }
   

3. Livewire/Alpine.js Hybrid Combine with Livewire for reactive sorting:

   document.addEventListener('livewire:init', () => {
       Livewire.on('tableSorted', () => {
           $("#myTable").trigger("update"); // Refresh Livewire data
       });
   });
   

4. API-Driven Tables Fetch data via AJAX and update the table dynamically:

   $.get('/api/users', function(data) {
       let tbody = $('#myTable tbody');
       tbody.empty();
       data.forEach(user => {
           tbody.append(`<tr><td>${user.name}</td><td>${user.role}</td></tr>`);
       });
       $("#myTable").trigger("update"); // Re-initialize Tablesorter
   });
   

Gotchas and Tips

Pitfalls

1. jQuery Dependency

   • Ensure jquery is loaded before tablesorter. Use Laravel Mix to auto-order scripts:

     // webpack.mix.js
     mix.js('resources/js/app.js', 'public/js')
         .scripts([
             'jquery.js',
             'tablesorter.js'
         ]);
     

2. CSS Conflicts

   • Tablesorter’s default styles may clash with Bootstrap/Tailwind. Override with:

     .tablesorter thead tr th,
     .tablesorter tbody tr td {
         padding: 0.5rem;
         text-align: left;
     }
     

3. Dynamic Row Addition

   • Reinitialize Tablesorter after AJAX updates:

     $("#myTable").trigger("update");
     

4. Server-Side Sorting

   • Avoid client-side sorting for large datasets (>1000 rows). Use Laravel’s orderBy with AJAX:

     $.get('/api/users', { sort: 'name', order: 'desc' }, function(data) { ... });
     

Debugging Tips

• Console Errors: Check for missing jQuery or incorrect initialization:

  Uncaught TypeError: $(...).tablesorter is not a function
  

  → Verify tablesorter.js is included.

• Sorting Not Working: Ensure <thead> exists and columns are explicitly defined:

  <table class="tablesorter" data-sort-list="[[0,0],[1,1]]">
      <!-- ... -->
  </table>
  

Extension Points

1. Custom Widgets Extend Tablesorter with Laravel widgets (e.g., TablesorterWidget):

   class TablesorterWidget extends Widget
   {
       public function render()
       {
           $this->view->with('columns', $this->columns);
           return view('widgets.tablesorter');
       }
   }
   

2. Service Provider Register Tablesorter globally in AppServiceProvider:

   public function boot()
   {
       View::composer('*', function ($view) {
           $view->with('tablesorterScripts', '
               <script>$(document).ready(function() { $(".tablesorter").tablesorter(); });</script>
           ');
       });
   }
   

3. Tailwind Integration Use arbitrary variants for styling:

   <table class="w-full border-collapse [&_th]:border-b [&_td]:border-b">
       <!-- ... -->
   </table>