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: