Add docs

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

@@ -292,6 +292,26 @@ class TablesDemo extends Component implements HasForms, HasTable
             ]);
     }
 
+    public function columnVerticalAlignment(Table $table): Table
+    {
+        return $this->usersTable($table)
+            ->columns([
+                TextColumn::make('name')
+                    ->verticallyAlignStart(),
+                TextColumn::make('email')
+                    ->label('Email addresses')
+                    ->getStateUsing(fn ($record): array => [
+                        $record->email,
+                        str($record->email)->replace('filamentphp.com', 'filament.dev'),
+                    ])
+                    ->listWithLineBreaks(),
+                IconColumn::make('email_verified_at')
+                    ->label('Verified')
+                    ->boolean()
+                    ->getStateUsing(fn ($record) => filled($record->email_verified_at)),
+            ]);
+    }
+
     public function columnGrouping(Table $table): Table
     {
         return $this->postsTable($table)

docs-assets/screenshots/schema.js

@@ -2049,6 +2049,15 @@ export default {
             deviceScaleFactor: 3,
         },
     },
+    'tables/columns/vertical-alignment': {
+        url: 'tables?table=columnVerticalAlignment',
+        selector: 'body',
+        viewport: {
+            width: 1080,
+            height: 640,
+            deviceScaleFactor: 3,
+        },
+    },
     'tables/columns/grouping': {
         url: 'tables?table=columnGrouping',
         selector: 'body',

package-lock.json

@@ -2480,9 +2480,9 @@
             "dev": true
         },
         "node_modules/@jridgewell/trace-mapping": {
-            "version": "0.3.21",
-            "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.21.tgz",
-            "integrity": "sha512-SRfKmRe1KvYnxjEMtxEr+J4HIeMX5YBg/qhRHpxEIGjhX1rshcHlnFUE9K0GazhVKWM7B+nARSkV8LuvJdJ5/g==",
+            "version": "0.3.22",
+            "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.22.tgz",
+            "integrity": "sha512-Wf963MzWtA2sjrNt+g18IAln9lKnlRp+K2eH4jjIoF1wYeq3aMREpG09xhlhdzS0EjwU7qmUJYangWa+151vZw==",
             "dev": true,
             "dependencies": {
                 "@jridgewell/resolve-uri": "^3.1.0",
@@ -3274,9 +3274,9 @@
             "dev": true
         },
         "node_modules/alpinejs": {
-            "version": "3.13.3",
-            "resolved": "https://registry.npmjs.org/alpinejs/-/alpinejs-3.13.3.tgz",
-            "integrity": "sha512-WZ6WQjkAOl+WdW/jukzNHq9zHFDNKmkk/x6WF7WdyNDD6woinrfXCVsZXm0galjbco+pEpYmJLtwlZwcOfIVdg==",
+            "version": "3.13.4",
+            "resolved": "https://registry.npmjs.org/alpinejs/-/alpinejs-3.13.4.tgz",
+            "integrity": "sha512-+miZp8LXMfZKqi6L0m5TA2fk5Tr2dvxFJ3I0dL78Dz90gTXpdHu4Qhv7PJsRmTGRUWjbYh2e+3DYrB4it2DEHQ==",
             "dev": true,
             "dependencies": {
                 "@vue/reactivity": "~3.1.1"
@@ -4343,9 +4343,9 @@
             "dev": true
         },
         "node_modules/core-js-compat": {
-            "version": "3.35.0",
-            "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.35.0.tgz",
-            "integrity": "sha512-5blwFAddknKeNgsjBzilkdQ0+YK8L1PfqPYq40NOYMYFSS38qj+hpTcLLWwpIwA2A5bje/x5jmVn2tzUMg9IVw==",
+            "version": "3.35.1",
+            "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.35.1.tgz",
+            "integrity": "sha512-sftHa5qUJY3rs9Zht1WEnmkvXputCyDBczPnr7QDgL8n3qrF3CMXY4VPSYtOLLiOUJcah2WNXREd48iOl6mQIw==",
             "dev": true,
             "dependencies": {
                 "browserslist": "^4.22.2"
@@ -5014,9 +5014,9 @@
             "dev": true
         },
         "node_modules/electron-to-chromium": {
-            "version": "1.4.639",
-            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.639.tgz",
-            "integrity": "sha512-CkKf3ZUVZchr+zDpAlNLEEy2NJJ9T64ULWaDgy3THXXlPVPkLu3VOs9Bac44nebVtdwl2geSj6AxTtGDOxoXhg==",
+            "version": "1.4.642",
+            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.642.tgz",
+            "integrity": "sha512-M4+u22ZJGpk4RY7tne6W+APkZhnnhmAH48FNl8iEFK2lEgob+U5rUQsIqQhvAwCXYpfd3H20pHK/ENsCvwTbsA==",
             "dev": true
         },
         "node_modules/elliptic": {

packages/tables/docs/03-columns/01-getting-started.md

@@ -469,7 +469,7 @@ TextColumn::make('title')
     ->tooltip(fn (Model $record): string => "By {$record->author->name}")
 ```
 
-## Aligning column content
+## Horizontally aligning column content
 
 Table columns are aligned to the start (left in LTR interfaces or right in RTL interfaces) by default. You may change the alignment using the `alignment()` method, and passing it `Alignment::Start`, `Alignment::Center`, `Alignment::End` or `Alignment::Justify` options:
 
@@ -492,6 +492,30 @@ TextColumn::make('name')
     ->alignEnd()
 ```
 
+## Vertically aligning column content
+
+Table column content is vertically centered by default. You may change the vertical alignment using the `verticalAlignment()` method, and passing it `VerticalAlignment::Start`, `VerticalAlignment::Center` or `VerticalAlignment::End` options:
+
+```php
+use Filament\Support\Enums\VerticalAlignment;
+use Filament\Tables\Columns\TextColumn;
+
+TextColumn::make('name')
+    ->alignment(VerticalAlignment::Start)
+```
+
+<AutoScreenshot name="tables/columns/vertical-alignment" alt="Table with column vertically aligned to the start" version="3.x" />
+
+Alternatively, you may use shorthand methods like `verticallyAlignStart()`:
+
+```php
+use Filament\Support\Enums\VerticalAlignment;
+use Filament\Tables\Columns\TextColumn;
+
+TextColumn::make('name')
+    ->verticallyAlignStart()
+```
+
 ## Allowing column headers to wrap
 
 By default, column headers will not wrap onto multiple lines, if they need more space. You may allow them to wrap using the `wrapHeader()` method: