fix example project and make it works fine

app/Http/Controllers/UserController.php

@@ -4,6 +4,7 @@
 
 use App\User;
 use Illuminate\Http\Request;
+use App\Http\Controllers\Controller;
 use JamesDordoy\LaravelVueDatatable\Http\Resources\DataTableCollectionResource;
 
 class UserController extends Controller
@@ -34,15 +35,13 @@ public function queryBuilder(Request $request)
     {
         $searchValue = $request->input('search');
         $orderBy = $request->input('column');
-        $orderBydir = $request->input("dir");
-        $length = $request->input('length');
+        $orderBydir = $request->input("dir", "asc");
         $isActive = $request->input('isActive');
         $roleId = $request->input('roleId');
 
-        $query = \DB::table('users')
-            ->join('roles', 'roles.id', '=', 'users.role_id')
-            ->join('departments', 'departments.id', '=', 'roles.department_id')
-            ->select(
+        $query = User::join('roles', 'roles.id', '=', 'users.role_id')
+                ->join('departments', 'departments.id', '=', 'roles.department_id')
+                ->select(
                 'roles.name as role_name',
                 'users.id',
                 'users.cost',
@@ -66,8 +65,8 @@ public function queryBuilder(Request $request)
         if (isset($roleId) && ! empty($roleId)) {
             $query = $query->where("users.role_id", $roleId);
         }
-            
-        $data = $query->paginate($length);
+
+        $data = $query->paginate($request->input('length'));
 
         return new DataTableCollectionResource($data);
     }

package.json

@@ -26,6 +26,7 @@
         "vue-template-compiler": "^2.6.14"
     },
     "dependencies": {
+        "@popperjs/core": "^2.11.5",
         "laravel-vue-datatable": "^0.6.0"
     }
 }