Fixing some examples

resources/views/livewire/examples/with-two-tables-component.blade.php

@@ -1,5 +1,27 @@
 <div>
-    <div class="row">
+    <div class="modal fade" tabindex="-1" id = "subDepartments" wire:ignore.self>
+        <div class="modal-dialog modal-lg">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title">Sub Departamentos</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    @generic_table($subDepartments)
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                    <button type="button" class="btn btn-primary">Save changes</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+      
+    <div class="row g-3">
+        <div class="col-12">
+            <button class="btn btn-primary" wire:click = "showModal">See sub departments</button>
+        </div>
         <div class="col-7">
             <div class="card">
                 <div class="card-body p-0">
@@ -16,4 +38,19 @@
             </div>
         </div>
     </div>
+    
+    {{-- @script --}}
+        
+    {{-- @endscript --}}
 </div>
+
+@section('js')
+<script>
+    document.addEventListener('livewire:initialized', () => {
+        @this.on('showModal', () => {
+            const myModal = new bootstrap.Modal('#subDepartments');
+            myModal.show();
+        })
+    })
+</script>
+@endsection