Changes

resources/js/Components/BasicTable.vue

@@ -23,6 +23,16 @@ const props = defineProps({
   options: {
     type: Object,
     default: {}
+  },
+  // Deprecated: fixed height. Prefer bodyMaxHeight (e.g., 'max-h-96').
+  bodyHeight: {
+    type: String,
+    default: 'h-96'
+  },
+  // Preferred: control scrollable body max-height (Tailwind class), e.g., 'max-h-96', 'max-h-[600px]'
+  bodyMaxHeight: {
+    type: String,
+    default: 'max-h-96'
   }
 });
 
@@ -105,7 +115,7 @@ const remove = () => {
       <p v-if="description" class="mt-1 text-sm text-gray-600">{{ description }}</p>
     </div>
 
-    <div class="relative overflow-x-auto rounded-lg border border-gray-200 bg-white shadow-sm">
+    <div :class="['relative rounded-lg border border-gray-200 bg-white shadow-sm overflow-x-auto overflow-y-auto', bodyMaxHeight]">
       <FwbTable hoverable striped class="text-sm">
         <FwbTableHead class="sticky top-0 z-10 bg-gray-50/90 backdrop-blur supports-[backdrop-filter]:bg-gray-50/80 border-b border-gray-200 shadow-sm">
           <FwbTableHeadCell v-for="(h, hIndex) in header" :key="hIndex" class="uppercase text-xs font-semibold tracking-wide text-gray-700 py-3 first:pl-6 last:pr-6">{{ h.data }}</FwbTableHeadCell>