fix height scrollbar table grid js

resources/js/bigdata-resumes/index.js

@@ -105,6 +105,7 @@ class BigdataResume {
                 total: (data) => data.total,
             },
             width: "auto",
+            fixedHeader: true,
         });
 
         return new Promise((resolve) => {

resources/scss/plugins/_gridjs.scss

@@ -1,6 +1,6 @@
-// 
+//
 // _gridjs.scss
-// 
+//
 
 .gridjs-container {
     color: var(--#{$prefix}body-color);
@@ -13,7 +13,6 @@
     border: 1px solid var(--#{$prefix}border-color);
     border-radius: 0px;
 
-
     &::-webkit-scrollbar {
         -webkit-appearance: none;
     }
@@ -24,11 +23,12 @@
     }
 
     &::-webkit-scrollbar:horizontal {
-        height: 5px;
+        height: 15px;
     }
 
     &::-webkit-scrollbar-thumb {
-        background-color: rgba(var(--#{$prefix}dark-rgb), .075);
+        // background-color: rgba(var(--#{$prefix}dark-rgb), 0.075);
+        background-color: $primary;
         border-radius: 10px;
         padding: 5px;
         border: none;
@@ -69,15 +69,13 @@ th {
     &.gridjs-th {
         border-top: 0;
         color: var(--#{$prefix}body-color);
-        background-color: rgba(var(--#{$prefix}light-rgb), .75);
-
+        background-color: rgba(var(--#{$prefix}light-rgb), 0.75);
     }
 
     &.gridjs-th-sort {
-
         &:focus,
         &:hover {
-            background-color: rgba(var(--#{$prefix}light-rgb), .85);
+            background-color: rgba(var(--#{$prefix}light-rgb), 0.85);
         }
     }
 }
@@ -99,7 +97,6 @@ th {
 }
 
 .gridjs-pagination {
-
     .gridjs-pages button {
         background-color: transparent;
         color: var(--#{$prefix}link-color);
@@ -166,7 +163,8 @@ input.gridjs-input {
     background-color: $input-bg;
     color: $input-color;
     line-height: $input-line-height;
-    padding: $input-padding-y $input-padding-x $input-padding-y $input-padding-x * 2.5;
+    padding: $input-padding-y $input-padding-x $input-padding-y $input-padding-x *
+        2.5;
     border-radius: $input-border-radius;
     @include font-size($input-font-size);
 
@@ -203,30 +201,26 @@ th.gridjs-th-sort .gridjs-th-content {
 }
 
 button {
-
     &.gridjs-sort-asc,
     &.gridjs-sort-desc {
         background-size: 7px;
     }
 }
 
-
 // gridjs selection
 .gridjs-tr-selected {
     td {
         background-color: $table-active-bg;
     }
 
-    .gridjs-td .gridjs-checkbox[type=checkbox] {
+    .gridjs-td .gridjs-checkbox[type="checkbox"] {
         background-color: $form-check-input-checked-bg-color;
         border-color: $form-check-input-checked-border-color;
 
         @if $enable-gradients {
             background-image: escape-svg($form-check-input-checked-bg-image),
-            var(--#{$prefix}gradient);
-        }
-
-        @else {
+                var(--#{$prefix}gradient);
+        } @else {
             background-image: escape-svg($form-check-input-checked-bg-image);
         }
     }
@@ -253,7 +247,6 @@ button {
 }
 
 .gridjs-border-none {
-
     td.gridjs-td,
     th.gridjs-th {
         border-right-width: 0;
@@ -267,11 +260,10 @@ button {
 
 [data-bs-theme="dark"] {
     button {
-
         &.gridjs-sort-neutral,
         &.gridjs-sort-asc,
         &.gridjs-sort-desc {
             filter: $btn-close-white-filter;
         }
     }
-}
+}

resources/views/bigdata-resumes/index.blade.php

@@ -2,79 +2,6 @@
 
 @section('css')
 @vite(['node_modules/gridjs/dist/theme/mermaid.min.css'])
-<style>
-/* Ensure the Grid.js container allows full scrolling */
-#table-bigdata-resumes {
-    overflow-x: auto;
-    overflow-y: hidden; /* Prevent vertical scrolling */
-    white-space: nowrap;
-    max-width: 100%;
-    height: 100%; /* Adjust height if necessary */
-}
-
-/* Ensure Grid.js wrapper is scrollable */
-.gridjs-wrapper {
-    max-width: 100%;
-    overflow-x: auto;
-    overflow-y: hidden;
-    white-space: nowrap;
-}
-
-/* Make the entire scrollbar much bigger */
-.gridjs-wrapper::-webkit-scrollbar {
-    height: 40px; /* Increase scrollbar height */
-}
-
-/* Scrollbar track (background) */
-.gridjs-wrapper::-webkit-scrollbar-track {
-    background: #ddd;
-    border-radius: 20px;
-}
-
-/* Scrollbar thumb (draggable part) */
-.gridjs-wrapper::-webkit-scrollbar-thumb {
-    background: #007bff;
-    border-radius: 20px;
-    width: 40px; /* Wider scrollbar thumb */
-    min-width: 40px;
-}
-
-/* Scrollbar thumb hover effect */
-.gridjs-wrapper::-webkit-scrollbar-thumb:hover {
-    background: #0056b3;
-}
-
-/* Bigger Scrollbar Buttons */
-.gridjs-wrapper::-webkit-scrollbar-button {
-    background: #007bff;
-    height: 40px; /* Force bigger button height */
-    width: 40px; /* Force bigger button width */
-    border-radius: 10px;
-}
-
-/* Left Scroll Button */
-.gridjs-wrapper::-webkit-scrollbar-button:horizontal:decrement {
-    display: block;
-    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M15 18l-6-6 6-6"/></svg>') no-repeat center;
-    background-size: 30px;
-    width: 40px; /* Ensure button size */
-    height: 40px;
-}
-
-/* Right Scroll Button */
-.gridjs-wrapper::-webkit-scrollbar-button:horizontal:increment {
-    display: block;
-    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M9 18l6-6-6-6"/></svg>') no-repeat center;
-    background-size: 30px;
-    width: 40px; /* Ensure button size */
-    height: 40px;
-}
-
-/* Scrollbar button hover effect */
-.gridjs-wrapper::-webkit-scrollbar-button:hover {
-    background: #0056b3;
-}
-</style>
 @endsection
 
 @section('content')
@@ -86,10 +13,6 @@
 <div class="row">
     <div class="col-12">
         <div class="card w-100 h-100">
-            <!-- <div class="card-header d-flex align-items-center">
-                <input type="text" class="form-control me-2 w-auto" id="search-box" />
-                <button id="search-btn" class="btn btn-md btn-info text-white">Cari</button>
-            </div> -->
             <div class="card-body">
                 <div id="table-bigdata-resumes"></div>
             </div>