wip

docs-assets/app/app/Http/Livewire/Forms/FieldsDemo.php

@@ -175,8 +175,8 @@ class FieldsDemo extends Component implements HasForms
                                 'dan' => 'Dan Harrin',
                                 'ryan' => 'Ryan Chandler',
                                 'zep' => 'Zep Fietje',
-                                'adam' => 'Adam Weston',
                                 'dennis' => 'Dennis Koch',
+                                'adam' => 'Adam Weston',
                             ]),
                     ]),
                 Group::make()

docs-assets/app/app/Http/Livewire/Infolists/EntriesDemo.php

@@ -122,7 +122,7 @@ class EntriesDemo extends Component implements HasInfolists
                     ->schema([
                         TextEntry::make('authors.name')
                             ->listWithLineBreaks()
-                            ->state(['Dan Harrin', 'Ryan Chandler', 'Zep Fietje', 'Adam Weston', 'Dennis Koch']),
+                            ->state(['Dan Harrin', 'Ryan Chandler', 'Zep Fietje', 'Dennis Koch', 'Adam Weston']),
                     ]),
                 Group::make()
                     ->id('textBulletList')
@@ -133,7 +133,7 @@ class EntriesDemo extends Component implements HasInfolists
                         TextEntry::make('authors.name')
                             ->listWithLineBreaks()
                             ->bulleted()
-                            ->state(['Dan Harrin', 'Ryan Chandler', 'Zep Fietje', 'Adam Weston', 'Dennis Koch']),
+                            ->state(['Dan Harrin', 'Ryan Chandler', 'Zep Fietje', 'Dennis Koch', 'Adam Weston']),
                     ]),
                 Group::make()
                     ->id('textColor')
@@ -238,7 +238,7 @@ class EntriesDemo extends Component implements HasInfolists
                                 'published' => 'heroicon-o-check-circle',
                             })
                             ->color(fn (string $state): string => match ($state) {
-                                'draft' => 'danger',
+                                'draft' => 'info',
                                 'reviewing' => 'warning',
                                 'published' => 'success',
                                 default => 'gray',

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

@@ -12,8 +12,14 @@ use Filament\Tables\Actions\CreateAction;
 use Filament\Tables\Actions\DeleteAction;
 use Filament\Tables\Actions\DeleteBulkAction;
 use Filament\Tables\Actions\EditAction;
+use Filament\Tables\Columns\CheckboxColumn;
+use Filament\Tables\Columns\ColorColumn;
 use Filament\Tables\Columns\IconColumn;
+use Filament\Tables\Columns\ImageColumn;
+use Filament\Tables\Columns\SelectColumn;
 use Filament\Tables\Columns\TextColumn;
+use Filament\Tables\Columns\TextInputColumn;
+use Filament\Tables\Columns\ToggleColumn;
 use Filament\Tables\Concerns\InteractsWithTable;
 use Filament\Tables\Contracts\HasTable;
 use Filament\Tables\Filters\Filter;
@@ -367,6 +373,196 @@ class TablesDemo extends Component implements HasForms, HasTable
             ]);
     }
 
+    public function iconColumn(Table $table): Table
+    {
+        return $this->postsTable($table)
+            ->columns([
+                TextColumn::make('title'),
+                IconColumn::make('status')
+                    ->icon(fn (string $state): string => match ($state) {
+                        'draft' => 'heroicon-o-pencil',
+                        'reviewing' => 'heroicon-o-clock',
+                        'published' => 'heroicon-o-check-circle',
+                    }),
+            ]);
+    }
+
+    public function iconColumnColor(Table $table): Table
+    {
+        return $this->postsTable($table)
+            ->columns([
+                TextColumn::make('title'),
+                IconColumn::make('status')
+                    ->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' => 'info',
+                        'reviewing' => 'warning',
+                        'published' => 'success',
+                        default => 'gray',
+                    }),
+            ]);
+    }
+
+    public function iconColumnMedium(Table $table): Table
+    {
+        return $this->postsTable($table)
+            ->columns([
+                TextColumn::make('title'),
+                IconColumn::make('status')
+                    ->icon(fn (string $state): string => match ($state) {
+                        'draft' => 'heroicon-o-pencil',
+                        'reviewing' => 'heroicon-o-clock',
+                        'published' => 'heroicon-o-check-circle',
+                    })
+                    ->size('md'),
+            ]);
+    }
+
+    public function iconColumnBoolean(Table $table): Table
+    {
+        return $this->postsTable($table)
+            ->columns([
+                TextColumn::make('title'),
+                IconColumn::make('is_featured')
+                    ->boolean(),
+            ]);
+    }
+
+    public function iconColumnBooleanIcon(Table $table): Table
+    {
+        return $this->postsTable($table)
+            ->columns([
+                TextColumn::make('title'),
+                IconColumn::make('is_featured')
+                    ->boolean()
+                    ->trueIcon('heroicon-o-check-badge')
+                    ->falseIcon('heroicon-o-x-mark'),
+            ]);
+    }
+
+    public function iconColumnBooleanColor(Table $table): Table
+    {
+        return $this->postsTable($table)
+            ->columns([
+                TextColumn::make('title'),
+                IconColumn::make('is_featured')
+                    ->boolean()
+                    ->trueColor('info')
+                    ->falseColor('warning'),
+            ]);
+    }
+
+    public function imageColumn(Table $table): Table
+    {
+        return $this->usersTable($table)
+            ->columns([
+                TextColumn::make('name'),
+                ImageColumn::make('avatar'),
+            ]);
+    }
+
+    public function imageColumnSquare(Table $table): Table
+    {
+        return $this->usersTable($table)
+            ->columns([
+                TextColumn::make('name'),
+                ImageColumn::make('avatar')
+                    ->square(),
+            ]);
+    }
+
+    public function imageColumnCircular(Table $table): Table
+    {
+        return $this->usersTable($table)
+            ->columns([
+                TextColumn::make('name'),
+                ImageColumn::make('avatar')
+                    ->circular(),
+            ]);
+    }
+
+    public function colorColumn(Table $table): Table
+    {
+        return $this->postsTable($table)
+            ->columns([
+                TextColumn::make('title'),
+                ColorColumn::make('color')
+                    ->getStateUsing(fn ($rowLoop): string => match ($rowLoop->index) {
+                        0 => '#ef4444',
+                        1 => '#fde047',
+                        2 => '#22c55e',
+                        3 => '#0ea5e9',
+                        default => '#8b5cf6',
+                    }),
+            ]);
+    }
+
+    public function colorColumnCopyable(Table $table): Table
+    {
+        return $this->postsTable($table)
+            ->columns([
+                TextColumn::make('title'),
+                ColorColumn::make('color')
+                    ->getStateUsing(fn ($rowLoop): string => match ($rowLoop->index) {
+                        0 => '#ef4444',
+                        1 => '#fde047',
+                        2 => '#22c55e',
+                        3 => '#0ea5e9',
+                        default => '#8b5cf6',
+                    })
+                    ->copyable()
+                    ->copyMessage('Color code copied')
+                    ->copyMessageDuration(1500),
+            ]);
+    }
+
+    public function selectColumn(Table $table): Table
+    {
+        return $this->postsTable($table)
+            ->columns([
+                TextColumn::make('title'),
+                SelectColumn::make('status')
+                    ->options([
+                        'draft' => 'Draft',
+                        'reviewing' => 'Reviewing',
+                        'published' => 'Published',
+                    ]),
+            ]);
+    }
+
+    public function toggleColumn(Table $table): Table
+    {
+        return $this->usersTable($table)
+            ->columns([
+                TextColumn::make('name'),
+                ToggleColumn::make('is_admin')
+                    ->getStateUsing(fn ($rowLoop): bool => $rowLoop->index < 2),
+            ]);
+    }
+
+    public function textInputColumn(Table $table): Table
+    {
+        return $this->usersTable($table)
+            ->columns([
+                TextColumn::make('name'),
+                TextInputColumn::make('email'),
+            ]);
+    }
+
+    public function checkboxColumn(Table $table): Table
+    {
+        return $this->usersTable($table)
+            ->columns([
+                TextColumn::make('name'),
+                CheckboxColumn::make('is_admin')
+                    ->getStateUsing(fn ($rowLoop): bool => $rowLoop->index < 2),
+            ]);
+    }
+
     public function postsTable(Table $table): Table
     {
         User::truncate();
@@ -402,7 +598,7 @@ class TablesDemo extends Component implements HasForms, HasTable
                 'description' => 'Learn how to customize Filament\'s UI with a theme and make it your own.',
                 'is_featured' => false,
                 'status' => 'reviewing',
-                'author_id' => User::factory()->create(['name' => 'Adam Weston'])->id,
+                'author_id' => User::factory()->create(['name' => 'Dennis Koch'])->id,
             ],
             [
                 'title' => 'New Filament plugins in August',
@@ -410,7 +606,7 @@ class TablesDemo extends Component implements HasForms, HasTable
                 'description' => 'Discover the latest Filament plugins that were released in August.',
                 'is_featured' => false,
                 'status' => 'published',
-                'author_id' => User::factory()->create(['name' => 'Dennis Koch'])->id,
+                'author_id' => User::factory()->create(['name' => 'Adam Weston'])->id,
             ],
         ]);
         Post::factory()->count(45)->create();
@@ -429,30 +625,35 @@ class TablesDemo extends Component implements HasForms, HasTable
                 'email' => 'dan@filamentphp.com',
                 'email_verified_at' => '2023-08-01 11:30:00',
                 'password' => 'password',
+                'avatar' => 'https://avatars.githubusercontent.com/u/41773797?v=4',
             ],
             [
                 'name' => 'Ryan Chandler',
                 'email' => 'ryan@filamentphp.com',
                 'email_verified_at' => null,
                 'password' => 'password',
+                'avatar' => 'https://avatars.githubusercontent.com/u/41837763?v=4',
             ],
             [
                 'name' => 'Zep Fietje',
                 'email' => 'zep@filamentphp.com',
                 'email_verified_at' => null,
                 'password' => 'password',
-            ],
-            [
-                'name' => 'Adam Weston',
-                'email' => 'adam@filamentphp.com',
-                'email_verified_at' => '2023-08-01 11:30:00',
-                'password' => 'password',
+                'avatar' => 'https://avatars.githubusercontent.com/u/44533235?v=4',
             ],
             [
                 'name' => 'Dennis Koch',
                 'email' => 'dennis@filamentphp.com',
                 'email_verified_at' => '2023-08-01 11:30:00',
                 'password' => 'password',
+                'avatar' => 'https://avatars.githubusercontent.com/u/22632550?v=4',
+            ],
+            [
+                'name' => 'Adam Weston',
+                'email' => 'adam@filamentphp.com',
+                'email_verified_at' => '2023-08-01 11:30:00',
+                'password' => 'password',
+                'avatar' => 'https://avatars.githubusercontent.com/u/3596800?v=4',
             ],
         ]);
         User::factory()->count(45)->create();

docs-assets/app/database/migrations/2014_10_12_000000_create_users_table.php

@@ -17,6 +17,7 @@ return new class extends Migration
             $table->string('email')->unique();
             $table->timestamp('email_verified_at')->nullable();
             $table->string('password');
+            $table->string('avatar')->nullable();
             $table->rememberToken();
             $table->timestamps();
         });

docs-assets/screenshots/schema.js

@@ -1818,4 +1818,144 @@ export default {
             await new Promise((resolve) => setTimeout(resolve, 500))
         },
     },
+    'tables/columns/icon/simple': {
+        url: 'tables?table=iconColumn',
+        selector: 'body',
+        viewport: {
+            width: 1920,
+            height: 640,
+            deviceScaleFactor: 3,
+        },
+    },
+    'tables/columns/icon/color': {
+        url: 'tables?table=iconColumnColor',
+        selector: 'body',
+        viewport: {
+            width: 1920,
+            height: 640,
+            deviceScaleFactor: 3,
+        },
+    },
+    'tables/columns/icon/medium': {
+        url: 'tables?table=iconColumnMedium',
+        selector: 'body',
+        viewport: {
+            width: 1920,
+            height: 640,
+            deviceScaleFactor: 3,
+        },
+    },
+    'tables/columns/icon/boolean': {
+        url: 'tables?table=iconColumnBoolean',
+        selector: 'body',
+        viewport: {
+            width: 1920,
+            height: 640,
+            deviceScaleFactor: 3,
+        },
+    },
+    'tables/columns/icon/boolean-icon': {
+        url: 'tables?table=iconColumnBooleanIcon',
+        selector: 'body',
+        viewport: {
+            width: 1920,
+            height: 640,
+            deviceScaleFactor: 3,
+        },
+    },
+    'tables/columns/icon/boolean-color': {
+        url: 'tables?table=iconColumnBooleanColor',
+        selector: 'body',
+        viewport: {
+            width: 1920,
+            height: 640,
+            deviceScaleFactor: 3,
+        },
+    },
+    'tables/columns/image/simple': {
+        url: 'tables?table=imageColumn',
+        selector: 'body',
+        viewport: {
+            width: 1920,
+            height: 640,
+            deviceScaleFactor: 3,
+        },
+    },
+    'tables/columns/image/square': {
+        url: 'tables?table=imageColumnSquare',
+        selector: 'body',
+        viewport: {
+            width: 1920,
+            height: 640,
+            deviceScaleFactor: 3,
+        },
+    },
+    'tables/columns/image/circular': {
+        url: 'tables?table=imageColumnCircular',
+        selector: 'body',
+        viewport: {
+            width: 1920,
+            height: 640,
+            deviceScaleFactor: 3,
+        },
+    },
+    'tables/columns/color/simple': {
+        url: 'tables?table=colorColumn',
+        selector: 'body',
+        viewport: {
+            width: 1920,
+            height: 640,
+            deviceScaleFactor: 3,
+        },
+    },
+    'tables/columns/color/copyable': {
+        url: 'tables?table=colorColumnCopyable',
+        selector: 'body',
+        viewport: {
+            width: 1920,
+            height: 640,
+            deviceScaleFactor: 3,
+        },
+        before: async (page) => {
+            await page.click('[wire\\:key$="4.column.color"] .filament-tables-color-column-content')
+
+            await new Promise((resolve) => setTimeout(resolve, 500))
+        },
+    },
+    'tables/columns/select/simple': {
+        url: 'tables?table=selectColumn',
+        selector: 'body',
+        viewport: {
+            width: 1920,
+            height: 640,
+            deviceScaleFactor: 3,
+        },
+    },
+    'tables/columns/toggle/simple': {
+        url: 'tables?table=toggleColumn',
+        selector: 'body',
+        viewport: {
+            width: 1920,
+            height: 640,
+            deviceScaleFactor: 3,
+        },
+    },
+    'tables/columns/text-input/simple': {
+        url: 'tables?table=textInputColumn',
+        selector: 'body',
+        viewport: {
+            width: 1920,
+            height: 640,
+            deviceScaleFactor: 3,
+        },
+    },
+    'tables/columns/checkbox/simple': {
+        url: 'tables?table=checkboxColumn',
+        selector: 'body',
+        viewport: {
+            width: 1920,
+            height: 640,
+            deviceScaleFactor: 3,
+        },
+    },
 }

packages/infolists/docs/03-entries/03-icon.md

@@ -31,7 +31,7 @@ use Filament\Infolists\Components\IconEntry;
 
 IconEntry::make('status')
     ->color(fn (string $state): string => match ($state) {
-        'draft' => 'danger',
+        'draft' => 'info',
         'reviewing' => 'warning',
         'published' => 'success',
         default => 'gray',

packages/tables/docs/03-columns/03-icon.md

@@ -1,6 +1,7 @@
 ---
 title: Icon column
 ---
+import AutoScreenshot from "@components/AutoScreenshot.astro"
 
 ## Overview
 
@@ -19,6 +20,8 @@ IconColumn::make('status')
 
 In the function, `$state` is the value of the column, and `$record` can be used to access the underlying Eloquent record.
 
+<AutoScreenshot name="tables/columns/icon/simple" alt="Icon column" version="3.x" />
+
 ## Customizing the color
 
 Icon columns may also have a set of icon colors, using the same syntax. They may be either `danger`, `gray`, `info`, `primary`, `success` or `warning`:
@@ -28,7 +31,7 @@ use Filament\Tables\Columns\IconColumn;
 
 IconColumn::make('status')
     ->color(fn (string $state): string => match ($state) {
-        'draft' => 'danger',
+        'draft' => 'info',
         'reviewing' => 'warning',
         'published' => 'success',
         default => 'gray',
@@ -37,6 +40,8 @@ IconColumn::make('status')
 
 In the function, `$state` is the value of the column, and `$record` can be used to access the underlying Eloquent record.
 
+<AutoScreenshot name="tables/columns/icon/color" alt="Icon column with color" version="3.x" />
+
 ## Customizing the size
 
 The default icon size is `lg`, but you may customize the size to be either `xs`, `sm`, `md`, `lg` or `xl`:
@@ -48,6 +53,8 @@ IconColumn::make('status')
     ->size('md')
 ```
 
+<AutoScreenshot name="tables/columns/icon/medium" alt="Medium-sized icon column" version="3.x" />
+
 ## Handling booleans
 
 Icon columns can display a check or cross icon based on the contents of the database column, either true or false, using the `boolean()` method:
@@ -59,6 +66,8 @@ IconColumn::make('is_featured')
     ->boolean()
 ```
 
+<AutoScreenshot name="tables/columns/icon/boolean" alt="Icon column to display a boolean" version="3.x" />
+
 ### Customizing the boolean icons
 
 You may customize the icon representing each state. Icons are the name of a Blade component present. By default, [Heroicons v1](https://v1.heroicons.com) are installed:
@@ -69,9 +78,11 @@ use Filament\Tables\Columns\IconColumn;
 IconColumn::make('is_featured')
     ->boolean()
     ->trueIcon('heroicon-o-check-badge')
-    ->falseIcon('heroicon-o-x-circle')
+    ->falseIcon('heroicon-o-x-mark')
 ```
 
+<AutoScreenshot name="tables/columns/icon/boolean-icon" alt="Icon column to display a boolean with custom icons" version="3.x" />
+
 ### Customizing the boolean colors
 
 You may customize the icon color representing each state. These may be either `danger`, `gray`, `info`, `primary`, `success` or `warning`:
@@ -81,6 +92,8 @@ use Filament\Tables\Columns\IconColumn;
 
 IconColumn::make('is_featured')
     ->boolean()
-    ->trueColor('primary')
+    ->trueColor('info')
     ->falseColor('warning')
 ```
+
+<AutoScreenshot name="tables/columns/icon/boolean-color" alt="Icon column to display a boolean with custom colors" version="3.x" />

packages/tables/docs/03-columns/04-image.md

@@ -1,6 +1,7 @@
 ---
 title: Image column
 ---
+import AutoScreenshot from "@components/AutoScreenshot.astro"
 
 ## Overview
 
@@ -9,11 +10,13 @@ Images can be easily displayed within your table:
 ```php
 use Filament\Tables\Columns\ImageColumn;
 
-ImageColumn::make('header_image')
+ImageColumn::make('avatar')
 ```
 
 The column in the database must contain the path to the image, relative to the root directory of its storage disk.
 
+<AutoScreenshot name="tables/columns/image/simple" alt="Image column" version="3.x" />
+
 ## Managing the image disk
 
 By default, the `public` disk will be used to retrieve images. You may pass a custom disk name to the `disk()` method:
@@ -43,10 +46,12 @@ You may display the image using a 1:1 aspect ratio:
 ```php
 use Filament\Tables\Columns\ImageColumn;
 
-ImageColumn::make('author.avatar')
+ImageColumn::make('avatar')
     ->square()
 ```
 
+<AutoScreenshot name="tables/columns/image/square" alt="Square image column" version="3.x" />
+
 ## Circular image
 
 You may make the image fully rounded, which is useful for rendering avatars:
@@ -54,10 +59,12 @@ You may make the image fully rounded, which is useful for rendering avatars:
 ```php
 use Filament\Tables\Columns\ImageColumn;
 
-ImageColumn::make('author.avatar')
+ImageColumn::make('avatar')
     ->circular()
 ```
 
+<AutoScreenshot name="tables/columns/image/circular" alt="Circular image column" version="3.x" />
+
 ## Customizing the size
 
 You may customize the image size by passing a `width()` and `height()`, or both with `size()`:

packages/tables/docs/03-columns/05-color.md

@@ -1,6 +1,7 @@
 ---
 title: Color column
 ---
+import AutoScreenshot from "@components/AutoScreenshot.astro"
 
 ## Overview
 
@@ -12,6 +13,8 @@ use Filament\Tables\Columns\ColorColumn;
 ColorColumn::make('color')
 ```
 
+<AutoScreenshot name="tables/columns/color/simple" alt="Color column" version="3.x" />
+
 ## Allowing the color to be copied to the clipboard
 
 You may make the color copyable, such that clicking on the preview copies the CSS value to the clipboard, and optionally specify a custom confirmation message and duration in milliseconds. This feature only works when SSL is enabled for the app.
@@ -24,3 +27,5 @@ ColorColumn::make('color')
     ->copyMessage('Color code copied')
     ->copyMessageDuration(1500)
 ```
+
+<AutoScreenshot name="tables/columns/color/copyable" alt="Color column with a button to copy it" version="3.x" />

packages/tables/docs/03-columns/06-select.md

@@ -1,6 +1,7 @@
 ---
 title: Select column
 ---
+import AutoScreenshot from "@components/AutoScreenshot.astro"
 
 ## Overview
 
@@ -19,6 +20,8 @@ SelectColumn::make('status')
     ])
 ```
 
+<AutoScreenshot name="tables/columns/select/simple" alt="Select column" version="3.x" />
+
 ## Validation
 
 You can validate the input by passing any [Laravel validation rules](https://laravel.com/docs/validation#available-validation-rules) in an array:

packages/tables/docs/03-columns/07-toggle.md

@@ -1,6 +1,7 @@
 ---
 title: Toggle column
 ---
+import AutoScreenshot from "@components/AutoScreenshot.astro"
 
 ## Overview
 
@@ -11,3 +12,5 @@ use Filament\Tables\Columns\ToggleColumn;
 
 ToggleColumn::make('is_admin')
 ```
+
+<AutoScreenshot name="tables/columns/toggle/simple" alt="Toggle column" version="3.x" />

packages/tables/docs/03-columns/08-text-input.md

@@ -1,6 +1,7 @@
 ---
 title: Text input column
 ---
+import AutoScreenshot from "@components/AutoScreenshot.astro"
 
 ## Overview
 
@@ -9,9 +10,11 @@ The text input column allows you to render a text input inside the table, which
 ```php
 use Filament\Tables\Columns\TextInputColumn;
 
-TextInputColumn::make('name')
+TextInputColumn::make('email')
 ```
 
+<AutoScreenshot name="tables/columns/text-input/simple" alt="Text input column" version="3.x" />
+
 ## Validation
 
 You can validate the input by passing any [Laravel validation rules](https://laravel.com/docs/validation#available-validation-rules) in an array:

packages/tables/docs/03-columns/09-checkbox.md

@@ -1,6 +1,7 @@
 ---
 title: Checkbox column
 ---
+import AutoScreenshot from "@components/AutoScreenshot.astro"
 
 ## Overview
 
@@ -11,3 +12,5 @@ use Filament\Tables\Columns\CheckboxColumn;
 
 CheckboxColumn::make('is_admin')
 ```
+
+<AutoScreenshot name="tables/columns/checkbox/simple" alt="Checkbox column" version="3.x" />

packages/tables/resources/views/columns/color-column.blade.php

@@ -27,7 +27,7 @@
                 @endif
             @endif
             @class([
-                'relative flex h-6 w-6 rounded-md',
+                'filament-tables-color-column-content relative flex h-6 w-6 rounded-md',
                 'cursor-pointer' => $itemIsCopyable,
             ])
         ></div>