PHPackages microweber-deps/filament-table-layout-toggle - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. microweber-deps/filament-table-layout-toggle ActiveLibrary[Utility & Helpers](/categories/utility) microweber-deps/filament-table-layout-toggle ============================================ Filament plugin adding a toggle button to tables, allowing user to switch between Grid and Table layouts. 1.0(9mo ago)02MITPHP Since Jul 19Pushed 9mo agoCompare [ Source](https://github.com/microweber-deps/filament-table-layout-toggle)[ Packagist](https://packagist.org/packages/microweber-deps/filament-table-layout-toggle)[ Docs](https://github.com/hydrat/filament-table-layout-toggle)[ GitHub Sponsors](https://github.com/Hydrat)[ RSS](/packages/microweber-deps-filament-table-layout-toggle/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (1)DependenciesVersions (2)Used By (0) Filament plugin adding a toggle button to tables, allowing users to switch between Grid and Table layouts. ========================================================================================================== [](#filament-plugin-adding-a-toggle-button-to-tables-allowing-users-to-switch-between-grid-and-table-layouts) [![Software License](https://camo.githubusercontent.com/55c0218c8f8009f06ad4ddae837ddd05301481fcf0dff8e0ed9dadda8780713e/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d627269676874677265656e2e7376673f7374796c653d666c61742d737175617265)](LICENSE.md)[![Latest Version on Packagist](https://camo.githubusercontent.com/540ac033091ffce80884084240c9c0e606802516bd3b5406112a7caaf5e90e0a/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6879647261742f66696c616d656e742d7461626c652d6c61796f75742d746f67676c652e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/hydrat/filament-table-layout-toggle)[![Total Downloads](https://camo.githubusercontent.com/9ef55a54269621ed0276d40fd420190a58ce0275f51ef4fd7cd8d7df05625c7c/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6879647261742f66696c616d656e742d7461626c652d6c61796f75742d746f67676c652e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/hydrat/filament-table-layout-toggle) This package brings a simple toggle button to Filament tables, allowing end users to switch between Grid and Table layouts on tables. This approach allows mobile users to benefit from the Grid layout, while desktop users can still benefit from Table layout features, such as the table headers, sorting and so on. > Big shoutout to [awcodes/filament-curator](https://github.com/awcodes/filament-curator), which implemented the toggle feature first on their package. This package is mainly an extraction of the feature so that it can be used in any project, and some other adding such as saving the selected layout in the cache or local storage. **Migrating from 1.x to 2.x ?** : Please read the [migration guide](MIGRATING.md). - [Screenshots](#screenshots) - [Installation](#installation) - [Usage](#usage) - [Panels](#usage_panels) - [Standalone tables](#usage_standalone_tables) - [Configuration](#configuration) - [Layout persister](#configuration_persister) - [Per-table settings](#configuration_per_table_settings) - [Using own action](#configuration_own_action) - [Changelog](#changelog) - [Migration guide](#migration_guide) - [Contributing](#contributing) - [Security](#security) - [Credits](#credits) - [License](#license) Screenshots ----------- [](#screenshots) **Video capture** screencast.mov **Screen capture** [![screenshot_table](https://private-user-images.githubusercontent.com/11785727/293654398-72035a42-4439-4317-9266-e4a6cd1a757a.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzUxODU2OTUsIm5iZiI6MTc3NTE4NTM5NSwicGF0aCI6Ii8xMTc4NTcyNy8yOTM2NTQzOTgtNzIwMzVhNDItNDQzOS00MzE3LTkyNjYtZTRhNmNkMWE3NTdhLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNjA0MDMlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjYwNDAzVDAzMDMxNVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWUxMmRjOWM1NTA5YmM1NmNkOGEzMjNjODg0MGQ0MzgyM2E3YTczMDVjNDYwYjMyMzY0NGY1MTllNzljYmI0ZmEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.BCttdd9HXvQN52oFqZuV7YNZ_5bcvzbyE24psiGUkpg)](https://private-user-images.githubusercontent.com/11785727/293654398-72035a42-4439-4317-9266-e4a6cd1a757a.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzUxODU2OTUsIm5iZiI6MTc3NTE4NTM5NSwicGF0aCI6Ii8xMTc4NTcyNy8yOTM2NTQzOTgtNzIwMzVhNDItNDQzOS00MzE3LTkyNjYtZTRhNmNkMWE3NTdhLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNjA0MDMlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjYwNDAzVDAzMDMxNVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWUxMmRjOWM1NTA5YmM1NmNkOGEzMjNjODg0MGQ0MzgyM2E3YTczMDVjNDYwYjMyMzY0NGY1MTllNzljYmI0ZmEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.BCttdd9HXvQN52oFqZuV7YNZ_5bcvzbyE24psiGUkpg)[![screenshot_grid](https://private-user-images.githubusercontent.com/11785727/293654409-56d0ecc8-07b9-459a-b045-c5916adfa703.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzUxODU2OTUsIm5iZiI6MTc3NTE4NTM5NSwicGF0aCI6Ii8xMTc4NTcyNy8yOTM2NTQ0MDktNTZkMGVjYzgtMDdiOS00NTlhLWIwNDUtYzU5MTZhZGZhNzAzLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNjA0MDMlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjYwNDAzVDAzMDMxNVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTc0NzE0ZTcwNjk0YjlmOWZiY2U0OTRmNDkyNGVlMmQ2ZDhkMmE0Y2FkNDRhODUwZmY2YzEwNjg0MzQ0NTlkMGMmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.kT8TwZHcnfIClSSrhy1Qi2De9yQ_yhoXGo1GkDUJIb0)](https://private-user-images.githubusercontent.com/11785727/293654409-56d0ecc8-07b9-459a-b045-c5916adfa703.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzUxODU2OTUsIm5iZiI6MTc3NTE4NTM5NSwicGF0aCI6Ii8xMTc4NTcyNy8yOTM2NTQ0MDktNTZkMGVjYzgtMDdiOS00NTlhLWIwNDUtYzU5MTZhZGZhNzAzLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNjA0MDMlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjYwNDAzVDAzMDMxNVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTc0NzE0ZTcwNjk0YjlmOWZiY2U0OTRmNDkyNGVlMmQ2ZDhkMmE0Y2FkNDRhODUwZmY2YzEwNjg0MzQ0NTlkMGMmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.kT8TwZHcnfIClSSrhy1Qi2De9yQ_yhoXGo1GkDUJIb0) installation ------------ [](#installation) You can install the package via composer: ``` composer require hydrat/filament-table-layout-toggle ``` Optionally, you can publish the views using ``` php artisan vendor:publish --tag="table-layout-toggle-views" ``` If you are using this package outside of filament panels (standalone tables), you should publish the configuration file : ``` php artisan vendor:publish --tag="table-layout-toggle-config" ``` If using panels, this configuration file **WILL NOT** be read by the plugin, as the configuration happens on the plugin registration itself. Usage ----- [](#usage) Please chose the appropriate section for your use case (Panels or Standalone tables). ### Panels [](#panels) First, register the plugin on your Filament panel : ``` use Hydrat\TableLayoutToggle\TableLayoutTogglePlugin; use Hydrat\TableLayoutToggle\Persisters; public function panel(Panel $panel): Panel { return $panel ->plugins([ TableLayoutTogglePlugin::make() ->setDefaultLayout('grid') // default layout for user seeing the table for the first time ->persistLayoutUsing( persister: Persisters\LocalStoragePersister::class, // chose a persister to save the layout preference of the user cacheStore: 'redis', // optional, change the cache store for the Cache persister cacheTtl: 60 * 24, // optional, change the cache time for the Cache persister ) ->shareLayoutBetweenPages(false) // allow all tables to share the layout option for this user ->displayToggleAction() // used to display the toggle action button automatically ->toggleActionHook('tables::toolbar.search.after') // chose the Filament view hook to render the button on ->listLayoutButtonIcon('heroicon-o-list-bullet') ->gridLayoutButtonIcon('heroicon-o-squares-2x2'), ]); } ``` Read more about the Layout persister and the configuration options in the [Configuration](#configuration) section. > Please note that all those configurations are optional, and have default values, which means you can omit them if you don't need to change the default behavior. Then, on the component containing the table (ListRecord, ManageRelatedRecords, ...), you can use the `HasToggleableTable` trait : ``` use Hydrat\TableLayoutToggle\Concerns\HasToggleableTable; class MyListRecords extends ListRecords { use HasToggleableTable; } ``` Finally, you need to configure your table so it dynamically sets the schema based on the selected layout. This is typically done on the resource's `table()` method : ``` public static function table(Table $table): Table { /** @var \Hydrat\TableLayoutToggle\Concerns\HasToggleableTable $livewire */ $livewire = $table->getLivewire(); return $table ->columns( $livewire->isGridLayout() ? static::getGridTableColumns() : static::getListTableColumns() ) ->contentGrid( fn () => $livewire->isListLayout() ? null : [ 'md' => 2, 'lg' => 3, 'xl' => 4, ] ); } // Define the columns for the table when displayed in list layout public static function getListTableColumns(): array; // Define the columns for the table when displayed in grid layout public static function getGridTableColumns(): array; ``` Please note that you must use the Layout tools described in the [filament documentation](https://filamentphp.com/docs/3.x/tables/layout#controlling-column-width-using-a-grid) in order for your Grid layout to render correctly. You may also use the `description()` method to print labels above your values. ``` public static function getGridTableColumns(): array { return [ // Make sure to stack your columns together Tables\Columns\Layout\Stack::make([ Tables\Columns\TextColumn::make('status')->badge(), // You may group columns together using the Split layout, so they are displayed side by side Tables\Columns\Layout\Split::make([ Tables\Columns\TextColumn::make('customer') ->description(__('Customer'), position: 'above') ->searchable(), Tables\Columns\TextColumn::make('owner.name') ->description(__('Owner'), position: 'above') ->searchable(), ]), ])->space(3)->extraAttributes([ 'class' => 'pb-2', ]), ]; } ``` ### Standalone tables [](#standalone-tables) You can manage the plugin settings via the published configuration file. The options are self-documented, and should be pretty straightforward to use. Then, on the component containing the table, you can use the `HasToggleableTable` trait : ``` namespace App\Livewire\Users; use Hydrat\TableLayoutToggle\Concerns\HasToggleableTable; class ListUsers extends Component implements HasForms, HasTable, HasActions { use InteractsWithTable; use InteractsWithActions; use InteractsWithForms; use HasToggleableTable; // table }} {{ $this->renderLayoutViewPersister() }}