diff --git a/docs-assets/app/app/Livewire/TablesDemo.php b/docs-assets/app/app/Livewire/TablesDemo.php
index cf02ff6256..f007afaff6 100644
--- a/docs-assets/app/app/Livewire/TablesDemo.php
+++ b/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)
diff --git a/docs-assets/app/database/database.sqlite b/docs-assets/app/database/database.sqlite
index 8c6ea3cf13..e778063a80 100644
Binary files a/docs-assets/app/database/database.sqlite and b/docs-assets/app/database/database.sqlite differ
diff --git a/docs-assets/screenshots/images/dark/tables/columns/column-manager-reorderable.jpg b/docs-assets/screenshots/images/dark/tables/columns/column-manager-reorderable.jpg
new file mode 100644
index 0000000000..27e4681956
Binary files /dev/null and b/docs-assets/screenshots/images/dark/tables/columns/column-manager-reorderable.jpg differ
diff --git a/docs-assets/screenshots/images/light/tables/columns/column-manager-reorderable.jpg b/docs-assets/screenshots/images/light/tables/columns/column-manager-reorderable.jpg
new file mode 100644
index 0000000000..e61f6c7ed6
Binary files /dev/null and b/docs-assets/screenshots/images/light/tables/columns/column-manager-reorderable.jpg differ
diff --git a/docs-assets/screenshots/schema.js b/docs-assets/screenshots/schema.js
index 786842a916..6f24fc6db4 100644
--- a/docs-assets/screenshots/schema.js
+++ b/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',
diff --git a/packages/tables/docs/02-columns/01-overview.md b/packages/tables/docs/02-columns/01-overview.md
index 931055038b..80d7736cd5 100644
--- a/packages/tables/docs/02-columns/01-overview.md
+++ b/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')
-#### 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();
+}
+```
+
+
+
#### 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: