Sort Table when clicking on a table header in Laravel

I have a table that is displaying inside my laravel system. I want to be able to automatically sort the fields in the table when I click on a table header.

How can I make the table headers into a sort of hyperlink that when it is clicked it would run a query from the controller? This is the current controller for the page:

public function index()
    {
        $user = Auth::user();
        $userId = Auth::id();
        $username = DB::table('users')
            ->select('staffName')
            ->where('id', $userId)
            ->pluck('staffName')
            ->first();

        $documents = Document::all();

        $managers = DB::table('documents')
            ->join('users', 'users.id', '=', 'documents.staff_id')
            ->select('documents.staffName','certName','trainingName','uploadCert')
            ->where('documents.staffName', $username)
            ->orWhere('reportingTo', $username)
            ->get();
        $employees = DB::table('documents')
            ->where('staffName', $username)
            ->get();

        return view('admin.leave.list', compact('documents', 'managers', 'employees', 'user'));
        // return $this->autoIndex(Document::class);
    }

And this is the blade:

<div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">Certificate List</h5>
                            <div class="table-responsive">
                                <table id="zero_config" class="table table-striped table-bordered">
                                    <thead>
                                        <tr>
                                            <th>No</th>
                                            <th>Name</th>
                                            <th>Training Name</th>
                                            <th>Certificate Name</th>
                                            <th>Certificate</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @can('isAdmin')
                                        @foreach($documents as $document)
                                        <tr>
                                            <td>{{$loop -> index+1 }}</td>
                                            <td>{{$document -> staffName}}</td>
                                            <td>{{$document -> trainingName}}</td>
                                            <td>{{$document -> certName}}</td>
                                            <td><a href="storage/{{$document -> uploadCert}}" target="_blank">View Certificate</a></td>
                                        </tr>
                                        @endforeach
                                        @endcan

                                        @if($user -> role == 'manager')
                                        @foreach($managers as $manager)
                                        <tr>
                                            <td>{{$loop -> index+1 }}</td>
                                            <td>{{$manager -> staffName}}</td>
                                            <td>{{$manager -> trainingName}}</td>
                                            <td>{{$manager -> certName}}</td>
                                            <td><a href="storage/{{$manager -> uploadCert}}" target="_blank">View Certificate</a></td>
                                        </tr>
                                        @endforeach
                                        @endif

                                        @can('isEmployee')
                                        @foreach($employees as $employee)
                                        <tr>
                                            <td>{{$loop -> index+1 }}</td>
                                            <td>{{$employee -> staffName}}</td>
                                            <td>{{$employee -> trainingName}}</td>
                                            <td>{{$employee -> certName}}</td>
                                            <td><a href="storage/{{$employee -> uploadCert}}" target="_blank">View Certificate</a></td>
                                        </tr>
                                        @endforeach
                                        @endcan

                                    </tbody>
                                </table>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>

What can I do or change with the code to make the sorting function using the table headers? Could I get some help.