using Sortable by Kyslik how to set table header names, and how to integrate sortable into queries in laravel?

Question

I am using the Sortable by Kyslik in my Laravel program to sort and paginate tables. I have a problem at the moment.

This is my controller, I have 3 queries for 3 different user roles. The sortable function is straight forward and works well for the admin users, but employees and managers display data through a query. how can I integrate the sortable function with them?

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

        $documents = Document::sortable()->paginate(8);

        $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);
    }

The sortable function is working, But how do I use it with the manager or employee queries? Is there a way to integrate the sortable()->paginate(); functions into them?

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>@sortablelink('id')</th>
                                            <th>@sortablelink('staffName')</th>
                                            <th>@sortablelink('trainingName')</th>
                                            <th>@sortablelink('certName')</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 class="d-flex justify-content-center">
                                {!! $documents->appends(\Request::except('page'))->render() !!}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

How can I fix this problem? And how can I get the icons to stay after being clicked rather than disappearing for the sorting function? Please advise