clickable markers

app/Http/Livewire/Meetup/MeetupTable.php

@@ -10,6 +10,18 @@ class MeetupTable extends Component
 {
     public Country $country;
 
+    public function filterByMarker($id)
+    {
+        return to_route('meetup.table.meetup', [
+            'country' => $this->country->code,
+            'table'   => [
+                'filters' => [
+                    'byid' => $id,
+                ],
+            ]
+        ]);
+    }
+
     public function render()
     {
         // let markers = [{name: 'VAK', coords: [50.0091294, 9.0371812], status: 'closed', offsets: [0, 2]}];
@@ -23,6 +35,7 @@ class MeetupTable extends Component
                                    fn($query) => $query->where('countries.code', $this->country->code))
                                ->get()
                                ->map(fn($meetup) => [
+                                   'id'     => $meetup->id,
                                    'name'   => $meetup->name,
                                    'coords' => [$meetup->city->latitude, $meetup->city->longitude],
                                ])

app/Http/Livewire/Tables/MeetupTable.php

@@ -6,6 +6,7 @@ use App\Models\Meetup;
 use Illuminate\Database\Eloquent\Builder;
 use Rappasoft\LaravelLivewireTables\DataTableComponent;
 use Rappasoft\LaravelLivewireTables\Views\Column;
+use Rappasoft\LaravelLivewireTables\Views\Filters\TextFilter;
 
 class MeetupTable extends DataTableComponent
 {
@@ -32,6 +33,17 @@ class MeetupTable extends DataTableComponent
              ->setPerPage(10);
     }
 
+    public function filters(): array
+    {
+        return [
+            TextFilter::make('Meetup by ID', 'byid')
+                      ->hiddenFromMenus()
+                      ->filter(function (Builder $builder, string $value) {
+                          $builder->whereIn('meetups.id', str($value)->explode(','));
+                      }),
+        ];
+    }
+
     public function columns(): array
     {
         return [

resources/views/livewire/meetup/meetup-table.blade.php

@@ -25,6 +25,9 @@
                             map: '{{ $country->code }}_merc',
                             backgroundColor: 'transparent',
                             markers: markers.map(function(h){ return {name: h.name, latLng: h.coords} }),
+                            onMarkerClick: function(event, index) {
+                                $wire.call('filterByMarker', markers[index].id)
+                            },
                             markerStyle: {
                                 initial: {
                                     image: '{{ asset('img/btc.png') }}',