diff --git a/docs-assets/app/app/Http/Livewire/Forms/FieldsDemo.php b/docs-assets/app/app/Http/Livewire/Forms/FieldsDemo.php
index cef0bda3ea..e06ff35cfc 100644
--- a/docs-assets/app/app/Http/Livewire/Forms/FieldsDemo.php
+++ b/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()
diff --git a/docs-assets/app/app/Http/Livewire/Infolists/EntriesDemo.php b/docs-assets/app/app/Http/Livewire/Infolists/EntriesDemo.php
index 868d03207d..96496e24aa 100644
--- a/docs-assets/app/app/Http/Livewire/Infolists/EntriesDemo.php
+++ b/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',
diff --git a/docs-assets/app/app/Http/Livewire/TablesDemo.php b/docs-assets/app/app/Http/Livewire/TablesDemo.php
index b9d27fca76..31231d9e4b 100644
--- a/docs-assets/app/app/Http/Livewire/TablesDemo.php
+++ b/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();
diff --git a/docs-assets/app/database/database.sqlite b/docs-assets/app/database/database.sqlite
index 58b21d225b..25a6e01aec 100644
Binary files a/docs-assets/app/database/database.sqlite and b/docs-assets/app/database/database.sqlite differ
diff --git a/docs-assets/app/database/migrations/2014_10_12_000000_create_users_table.php b/docs-assets/app/database/migrations/2014_10_12_000000_create_users_table.php
index 444fafb7f5..3f80f5f081 100644
--- a/docs-assets/app/database/migrations/2014_10_12_000000_create_users_table.php
+++ b/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();
         });
diff --git a/docs-assets/screenshots/images/dark/tables/columns/checkbox/simple.jpg b/docs-assets/screenshots/images/dark/tables/columns/checkbox/simple.jpg
new file mode 100644
index 0000000000..819e7cc8b8
Binary files /dev/null and b/docs-assets/screenshots/images/dark/tables/columns/checkbox/simple.jpg differ
diff --git a/docs-assets/screenshots/images/dark/tables/columns/color/copyable.jpg b/docs-assets/screenshots/images/dark/tables/columns/color/copyable.jpg
new file mode 100644
index 0000000000..684c5934da
Binary files /dev/null and b/docs-assets/screenshots/images/dark/tables/columns/color/copyable.jpg differ
diff --git a/docs-assets/screenshots/images/dark/tables/columns/color/simple.jpg b/docs-assets/screenshots/images/dark/tables/columns/color/simple.jpg
new file mode 100644
index 0000000000..5bbffc931a
Binary files /dev/null and b/docs-assets/screenshots/images/dark/tables/columns/color/simple.jpg differ
diff --git a/docs-assets/screenshots/images/dark/tables/columns/icon/boolean-color.jpg b/docs-assets/screenshots/images/dark/tables/columns/icon/boolean-color.jpg
new file mode 100644
index 0000000000..ca58be23cb
Binary files /dev/null and b/docs-assets/screenshots/images/dark/tables/columns/icon/boolean-color.jpg differ
diff --git a/docs-assets/screenshots/images/dark/tables/columns/icon/boolean-icon.jpg b/docs-assets/screenshots/images/dark/tables/columns/icon/boolean-icon.jpg
new file mode 100644
index 0000000000..8c13e7cdd0
Binary files /dev/null and b/docs-assets/screenshots/images/dark/tables/columns/icon/boolean-icon.jpg differ
diff --git a/docs-assets/screenshots/images/dark/tables/columns/icon/boolean.jpg b/docs-assets/screenshots/images/dark/tables/columns/icon/boolean.jpg
new file mode 100644
index 0000000000..71e118bf51
Binary files /dev/null and b/docs-assets/screenshots/images/dark/tables/columns/icon/boolean.jpg differ
diff --git a/docs-assets/screenshots/images/dark/tables/columns/icon/color.jpg b/docs-assets/screenshots/images/dark/tables/columns/icon/color.jpg
new file mode 100644
index 0000000000..1205301b91
Binary files /dev/null and b/docs-assets/screenshots/images/dark/tables/columns/icon/color.jpg differ
diff --git a/docs-assets/screenshots/images/dark/tables/columns/icon/medium.jpg b/docs-assets/screenshots/images/dark/tables/columns/icon/medium.jpg
new file mode 100644
index 0000000000..3824a0925f
Binary files /dev/null and b/docs-assets/screenshots/images/dark/tables/columns/icon/medium.jpg differ
diff --git a/docs-assets/screenshots/images/dark/tables/columns/icon/simple.jpg b/docs-assets/screenshots/images/dark/tables/columns/icon/simple.jpg
new file mode 100644
index 0000000000..b998df6620
Binary files /dev/null and b/docs-assets/screenshots/images/dark/tables/columns/icon/simple.jpg differ
diff --git a/docs-assets/screenshots/images/dark/tables/columns/image/circular.jpg b/docs-assets/screenshots/images/dark/tables/columns/image/circular.jpg
new file mode 100644
index 0000000000..2a9acf17e7
Binary files /dev/null and b/docs-assets/screenshots/images/dark/tables/columns/image/circular.jpg differ
diff --git a/docs-assets/screenshots/images/dark/tables/columns/image/simple.jpg b/docs-assets/screenshots/images/dark/tables/columns/image/simple.jpg
new file mode 100644
index 0000000000..b24b462997
Binary files /dev/null and b/docs-assets/screenshots/images/dark/tables/columns/image/simple.jpg differ
diff --git a/docs-assets/screenshots/images/dark/tables/columns/image/square.jpg b/docs-assets/screenshots/images/dark/tables/columns/image/square.jpg
new file mode 100644
index 0000000000..0c3e8e11d5
Binary files /dev/null and b/docs-assets/screenshots/images/dark/tables/columns/image/square.jpg differ
diff --git a/docs-assets/screenshots/images/dark/tables/columns/select/simple.jpg b/docs-assets/screenshots/images/dark/tables/columns/select/simple.jpg
new file mode 100644
index 0000000000..3bc4ea91fb
Binary files /dev/null and b/docs-assets/screenshots/images/dark/tables/columns/select/simple.jpg differ
diff --git a/docs-assets/screenshots/images/dark/tables/columns/text-input/simple.jpg b/docs-assets/screenshots/images/dark/tables/columns/text-input/simple.jpg
new file mode 100644
index 0000000000..76e5e70668
Binary files /dev/null and b/docs-assets/screenshots/images/dark/tables/columns/text-input/simple.jpg differ
diff --git a/docs-assets/screenshots/images/dark/tables/columns/toggle/simple.jpg b/docs-assets/screenshots/images/dark/tables/columns/toggle/simple.jpg
new file mode 100644
index 0000000000..05f94581ec
Binary files /dev/null and b/docs-assets/screenshots/images/dark/tables/columns/toggle/simple.jpg differ
diff --git a/docs-assets/screenshots/images/light/tables/columns/checkbox/simple.jpg b/docs-assets/screenshots/images/light/tables/columns/checkbox/simple.jpg
new file mode 100644
index 0000000000..bbcb182314
Binary files /dev/null and b/docs-assets/screenshots/images/light/tables/columns/checkbox/simple.jpg differ
diff --git a/docs-assets/screenshots/images/light/tables/columns/color/copyable.jpg b/docs-assets/screenshots/images/light/tables/columns/color/copyable.jpg
new file mode 100644
index 0000000000..88ec5095e2
Binary files /dev/null and b/docs-assets/screenshots/images/light/tables/columns/color/copyable.jpg differ
diff --git a/docs-assets/screenshots/images/light/tables/columns/color/simple.jpg b/docs-assets/screenshots/images/light/tables/columns/color/simple.jpg
new file mode 100644
index 0000000000..0cafa4aeb6
Binary files /dev/null and b/docs-assets/screenshots/images/light/tables/columns/color/simple.jpg differ
diff --git a/docs-assets/screenshots/images/light/tables/columns/icon/boolean-color.jpg b/docs-assets/screenshots/images/light/tables/columns/icon/boolean-color.jpg
new file mode 100644
index 0000000000..adcd64243f
Binary files /dev/null and b/docs-assets/screenshots/images/light/tables/columns/icon/boolean-color.jpg differ
diff --git a/docs-assets/screenshots/images/light/tables/columns/icon/boolean-icon.jpg b/docs-assets/screenshots/images/light/tables/columns/icon/boolean-icon.jpg
new file mode 100644
index 0000000000..472f20088e
Binary files /dev/null and b/docs-assets/screenshots/images/light/tables/columns/icon/boolean-icon.jpg differ
diff --git a/docs-assets/screenshots/images/light/tables/columns/icon/boolean.jpg b/docs-assets/screenshots/images/light/tables/columns/icon/boolean.jpg
new file mode 100644
index 0000000000..091fe67d81
Binary files /dev/null and b/docs-assets/screenshots/images/light/tables/columns/icon/boolean.jpg differ
diff --git a/docs-assets/screenshots/images/light/tables/columns/icon/color.jpg b/docs-assets/screenshots/images/light/tables/columns/icon/color.jpg
new file mode 100644
index 0000000000..7334414459
Binary files /dev/null and b/docs-assets/screenshots/images/light/tables/columns/icon/color.jpg differ
diff --git a/docs-assets/screenshots/images/light/tables/columns/icon/medium.jpg b/docs-assets/screenshots/images/light/tables/columns/icon/medium.jpg
new file mode 100644
index 0000000000..cc6ebdcaa6
Binary files /dev/null and b/docs-assets/screenshots/images/light/tables/columns/icon/medium.jpg differ
diff --git a/docs-assets/screenshots/images/light/tables/columns/icon/simple.jpg b/docs-assets/screenshots/images/light/tables/columns/icon/simple.jpg
new file mode 100644
index 0000000000..7fd5a42343
Binary files /dev/null and b/docs-assets/screenshots/images/light/tables/columns/icon/simple.jpg differ
diff --git a/docs-assets/screenshots/images/light/tables/columns/image/circular.jpg b/docs-assets/screenshots/images/light/tables/columns/image/circular.jpg
new file mode 100644
index 0000000000..847a7ba05d
Binary files /dev/null and b/docs-assets/screenshots/images/light/tables/columns/image/circular.jpg differ
diff --git a/docs-assets/screenshots/images/light/tables/columns/image/simple.jpg b/docs-assets/screenshots/images/light/tables/columns/image/simple.jpg
new file mode 100644
index 0000000000..2ff7216296
Binary files /dev/null and b/docs-assets/screenshots/images/light/tables/columns/image/simple.jpg differ
diff --git a/docs-assets/screenshots/images/light/tables/columns/image/square.jpg b/docs-assets/screenshots/images/light/tables/columns/image/square.jpg
new file mode 100644
index 0000000000..e5b7188d31
Binary files /dev/null and b/docs-assets/screenshots/images/light/tables/columns/image/square.jpg differ
diff --git a/docs-assets/screenshots/images/light/tables/columns/select/simple.jpg b/docs-assets/screenshots/images/light/tables/columns/select/simple.jpg
new file mode 100644
index 0000000000..938228bb55
Binary files /dev/null and b/docs-assets/screenshots/images/light/tables/columns/select/simple.jpg differ
diff --git a/docs-assets/screenshots/images/light/tables/columns/text-input/simple.jpg b/docs-assets/screenshots/images/light/tables/columns/text-input/simple.jpg
new file mode 100644
index 0000000000..321af512b3
Binary files /dev/null and b/docs-assets/screenshots/images/light/tables/columns/text-input/simple.jpg differ
diff --git a/docs-assets/screenshots/images/light/tables/columns/toggle/simple.jpg b/docs-assets/screenshots/images/light/tables/columns/toggle/simple.jpg
new file mode 100644
index 0000000000..5d2cb9c190
Binary files /dev/null and b/docs-assets/screenshots/images/light/tables/columns/toggle/simple.jpg differ
diff --git a/docs-assets/screenshots/schema.js b/docs-assets/screenshots/schema.js
index d8881b2453..329d2a8d76 100644
--- a/docs-assets/screenshots/schema.js
+++ b/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,
+        },
+    },
 }
diff --git a/packages/infolists/docs/03-entries/03-icon.md b/packages/infolists/docs/03-entries/03-icon.md
index b0cbb13353..3c2fec71a2 100644
--- a/packages/infolists/docs/03-entries/03-icon.md
+++ b/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',
diff --git a/packages/tables/docs/03-columns/03-icon.md b/packages/tables/docs/03-columns/03-icon.md
index fc4646f042..c8ea64db34 100644
--- a/packages/tables/docs/03-columns/03-icon.md
+++ b/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" />
diff --git a/packages/tables/docs/03-columns/04-image.md b/packages/tables/docs/03-columns/04-image.md
index afa3cba878..adbe9ed5a5 100644
--- a/packages/tables/docs/03-columns/04-image.md
+++ b/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()`:
diff --git a/packages/tables/docs/03-columns/05-color.md b/packages/tables/docs/03-columns/05-color.md
index 9917ad9789..57539143a3 100644
--- a/packages/tables/docs/03-columns/05-color.md
+++ b/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" />
diff --git a/packages/tables/docs/03-columns/06-select.md b/packages/tables/docs/03-columns/06-select.md
index 42c381c923..4fbe43feb1 100644
--- a/packages/tables/docs/03-columns/06-select.md
+++ b/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:
diff --git a/packages/tables/docs/03-columns/07-toggle.md b/packages/tables/docs/03-columns/07-toggle.md
index 3be357cd60..44db7b0617 100644
--- a/packages/tables/docs/03-columns/07-toggle.md
+++ b/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" />
diff --git a/packages/tables/docs/03-columns/08-text-input.md b/packages/tables/docs/03-columns/08-text-input.md
index 20f330772a..db46ffcb0d 100644
--- a/packages/tables/docs/03-columns/08-text-input.md
+++ b/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:
diff --git a/packages/tables/docs/03-columns/09-checkbox.md b/packages/tables/docs/03-columns/09-checkbox.md
index 04eda91f17..42278762d8 100644
--- a/packages/tables/docs/03-columns/09-checkbox.md
+++ b/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" />
diff --git a/packages/tables/resources/views/columns/color-column.blade.php b/packages/tables/resources/views/columns/color-column.blade.php
index 67e3bf7bb0..54f7a88228 100644
--- a/packages/tables/resources/views/columns/color-column.blade.php
+++ b/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>