wip

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

@@ -1223,6 +1223,42 @@ class TablesDemo extends Component implements HasForms, HasTable
             ]);
     }
 
+    public function reordering(Table $table): Table
+    {
+        return $this->postsTable($table)
+            ->columns([
+                TextColumn::make('title')
+                    ->searchable()
+                    ->sortable(),
+                TextColumn::make('slug'),
+                TextColumn::make('author.name')
+                    ->numeric(),
+                TextColumn::make('status')
+                    ->badge()
+                    ->icon(fn (string $state): string => match ($state) {
+                        'draft' => 'heroicon-o-pencil',
+                        'reviewing' => 'heroicon-o-clock',
+                        'published' => 'heroicon-o-check-circle',
+                    })
+                    ->color(fn (string $state): string => match ($state) {
+                        'draft' => 'gray',
+                        'reviewing' => 'warning',
+                        'published' => 'success',
+                    }),
+            ])
+            ->reorderable('rating');
+    }
+
+    public function reorderingCustomTriggerAction(Table $table): Table
+    {
+        return $this->reordering($table)
+            ->reorderRecordsTriggerAction(
+                fn (Action $action, bool $isReordering) => $action
+                    ->button()
+                    ->label($isReordering ? 'Disable reordering' : 'Enable reordering'),
+            );
+    }
+
     public function postsTable(Table $table, bool $hasSeededPosts = true): Table
     {
         User::truncate();

docs-assets/screenshots/schema.js

@@ -2492,4 +2492,32 @@ export default {
             deviceScaleFactor: 3,
         },
     },
+    'tables/reordering': {
+        url: 'tables?table=reordering',
+        selector: 'body',
+        viewport: {
+            width: 1080,
+            height: 640,
+            deviceScaleFactor: 3,
+        },
+        before: async (page) => {
+            await page.click('.filament-icon-button')
+
+            await new Promise((resolve) => setTimeout(resolve, 500))
+        },
+    },
+    'tables/reordering/custom-trigger-action': {
+        url: 'tables?table=reorderingCustomTriggerAction',
+        selector: 'body',
+        viewport: {
+            width: 1080,
+            height: 640,
+            deviceScaleFactor: 3,
+        },
+        before: async (page) => {
+            await page.click('.filament-button')
+
+            await new Promise((resolve) => setTimeout(resolve, 500))
+        },
+    },
 }

packages/tables/docs/10-advanced.md

@@ -1,6 +1,7 @@
 ---
 title: Advanced
 ---
+import AutoScreenshot from "@components/AutoScreenshot.astro"
 
 ## Pagination
 
@@ -103,6 +104,8 @@ If you're using mass assignment protection on your model, you will also need to
 
 When making the table reorderable, a new button will be available on the table to toggle reordering.
 
+<AutoScreenshot name="tables/reordering" alt="Table with reorderable rows" version="3.x" />
+
 The `reorderable()` method accepts the name of a column to store the record order in. If you use something like [`spatie/eloquent-sortable`](https://github.com/spatie/eloquent-sortable) with an order column such as `order_column`, you may use this instead:
 
 ```php
@@ -140,9 +143,6 @@ use Filament\Tables\Table;
 public function table(Table $table): Table
 {
     return $table
-        ->filters([
-            // ...
-        ])
         ->reorderRecordsTriggerAction(
             fn (Action $action, bool $isReordering) => $action
                 ->button()
@@ -151,6 +151,8 @@ public function table(Table $table): Table
 }
 ```
 
+<AutoScreenshot name="tables/reordering/custom-trigger-action" alt="Table with reorderable rows and a custom trigger action" version="3.x" />
+
 ## Polling table content
 
 You may poll table content so that it refreshes at a set interval, using the `$form->poll()` method: