Stacked table rows on mobile (#19113)

* Adding option to stack the table cells on mobile while maintaining horizontal scroll on larger screens

* cs fix

* applied styling to columns and headers

* applied styling to work in combination with hiddenFrom and visibleFrom

* moved the tailwind classes into css files

* cleanup

* Update table.css

* Update index.blade.php

* tweaks

* styling

* edge cases

* fixes

* screenshots

* cleanup

* rebuild

* rename

* fix warning

* Update CanBeStackedOnMobile.php

---------

Co-authored-by: Dan Harrin <git@danharrin.com>

Author: mwagena

docs-assets/app/app/Livewire/TablesDemo.php

@@ -1255,6 +1255,20 @@ public function layoutGrid(Table $table): Table
             ->defaultPaginationPageOption(6);
     }
 
+    public function layoutStackedOnMobile(Table $table): Table
+    {
+        return $this->layoutTable($table)
+            ->columns([
+                TextColumn::make('name')
+                    ->searchable()
+                    ->sortable(),
+                TextColumn::make('email'),
+                TextColumn::make('phone'),
+                TextColumn::make('job'),
+            ])
+            ->stackedOnMobile();
+    }
+
     public function summaries(Table $table): Table
     {
         return $this->postsTable($table)