reorderable col manager screenshots

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

@@ -268,6 +268,23 @@ class TablesDemo extends Component implements HasActions, HasSchemas, HasTable
             ]);
     }
 
+    public function columnManagerReorderable(Table $table): Table
+    {
+        return $this->usersTable($table)
+            ->columns([
+                TextColumn::make('name'),
+                TextColumn::make('email')
+                    ->label('Email address')
+                    ->toggleable(),
+                IconColumn::make('email_verified_at')
+                    ->label('Verified')
+                    ->boolean()
+                    ->getStateUsing(fn ($record) => filled($record->email_verified_at))
+                    ->toggleable(),
+            ])
+            ->reorderableColumns();
+    }
+
     public function columnTooltips(Table $table): Table
     {
         return $this->usersTable($table)

docs-assets/screenshots/schema.js

@@ -2813,6 +2813,20 @@ export default {
             await new Promise((resolve) => setTimeout(resolve, 500))
         }
     },
+    'tables/columns/column-manager-reorderable': {
+        url: 'tables?table=columnManagerReorderable',
+        selector: 'body',
+        viewport: {
+            width: 1080,
+            height: 640,
+            deviceScaleFactor: 3,
+        },
+        before: async (page) => {
+            await page.click('.fi-ta-col-manager-dropdown button')
+
+            await new Promise((resolve) => setTimeout(resolve, 500))
+        }
+    },
     'tables/columns/tooltips': {
         url: 'tables?table=columnTooltips',
         selector: 'body',

packages/tables/docs/02-columns/01-overview.md

@@ -799,7 +799,9 @@ TextColumn::make('role')
     ->visible(FeatureFlag::active())
 ```
 
-### Toggling column visibility
+### Allowing users to manage columns
+
+#### Toggling column visibility
 
 Users may hide or show columns themselves in the table. To make a column toggleable, use the `toggleable()` method:
 
@@ -812,7 +814,7 @@ TextColumn::make('email')
 
 <AutoScreenshot name="tables/columns/column-manager" alt="Table with column manager" version="4.x" />
 
-#### Making toggleable columns hidden by default
+##### Making toggleable columns hidden by default
 
 By default, toggleable columns are visible. To make them hidden instead:
 
@@ -823,6 +825,25 @@ TextColumn::make('id')
     ->toggleable(isToggledHiddenByDefault: true)
 ```
 
+#### Reordering columns
+
+You may allow columns to be reordered in the table using the `reorderableColumns()` method:
+
+```php
+use Filament\Tables\Table;
+
+public function table(Table $table): Table
+{
+    return $table
+        ->columns([
+            // ...
+        ])
+        ->reorderableColumns();
+}
+```
+
+<AutoScreenshot name="tables/columns/column-manager-reorderable" alt="Table with reorderable column manager" version="4.x" />
+
 #### Customizing the column manager dropdown trigger action
 
 To customize the column manager dropdown trigger button, you may use the `columnManagerTriggerAction()` method, passing a closure that returns an action. All methods that are available to [customize action trigger buttons](../actions/overview) can be used: