Merge branch 'main' into 4.x

Author: danharrin

content/articles/leandrocfe-filament-v4-beta-feature-overview.md

@@ -20,6 +20,14 @@ To upgrade your app to Filament v4 beta, please read the [upgrade guide](https:/
 
 > Looking for the current stable version? Visit the [3.x documentation](https://filamentphp.com/docs/3.x).
 
+## Latest updates
+
+> **Updated: June 16, 2025**
+
+- [Reorderable columns](#reordering-table-columns) feature in [v4.0.0-beta5](https://github.com/filamentphp/filament/releases/tag/v4.0.0-beta5)
+
+---
+
 ## General
 
 ### Performance
@@ -137,6 +145,8 @@ If you need to refresh them — for example, after a setting or permission chang
 They let you build user interfaces in PHP using structured configuration objects—no need to write `HTML` or `JavaScript` manually.
 These schemas define how your UI looks and behaves, representing components such as [forms fields](https://filamentphp.com/docs/4.x/forms/overview), [infolist entries](https://filamentphp.com/docs/4.x/infolists/overview), [layout components](https://filamentphp.com/docs/4.x/schemas/layouts) and [prime components](https://filamentphp.com/docs/4.x/schemas/primes).
 
+![Schemas](https://filamentphp.com/docs/4.x/images/light/schemas/overview/example.jpg)
+
 Every Filament UI component — whether it's a form field, a description list, or a static element like text or buttons — is configured through a [schema](https://filamentphp.com/docs/4.x/schemas/overview).
 Components are modular, nestable, and reusable, making your interfaces consistent and easy to maintain.
 
@@ -150,6 +160,8 @@ For a full list of available components, see the [Schemas documentation](https:/
 
 You can now switch to a [vertical tab](https://filamentphp.com/docs/4.x/schemas/tabs#using-vertical-tabs) layout by calling the `vertical()` method.
 
+![Vertical tabs](https://filamentphp.com/docs/4.x/images/light/schemas/layout/tabs/vertical.jpg)
+
 ### Container queries
 
 In addition to traditional breakpoints based on the size of the viewport, you can also use [container queries](https://filamentphp.com/docs/4.x/schemas/layouts#using-container-queries) to create responsive layouts based on the size of a parent container.
@@ -160,6 +172,8 @@ In addition to traditional breakpoints based on the size of the viewport, you ca
 
 [Rich editor](https://filamentphp.com/docs/4.x/forms/rich-editor) is now using [Tiptap](https://tiptap.dev/), a modern, headless, and highly extensible open source editor framework.
 
+![Rich editor](https://filamentphp.com/docs/4.x/images/light/forms/fields/rich-editor/simple.jpg)
+
 #### Storing content as HTML or JSON
 
 By default, the rich editor stores content as `HTML`. If you would like to store the content as `JSON` instead, you can use the [`json()` method](https://filamentphp.com/docs/4.x/forms/rich-editor#storing-content-as-json).
@@ -186,16 +200,22 @@ You can [extend the Rich editor](https://filamentphp.com/docs/4.x/forms/rich-edi
 
 The [Slider component](https://filamentphp.com/docs/4.x/forms/slider) lets users select one or more numeric values by dragging a handle along a track — ideal for inputs like ranges, ratings, or percentages.
 
+![Slider](https://filamentphp.com/docs/4.x/images/light/forms/fields/slider/pips-count.jpg)
+
 ### Code editor
 
 The [code editor component](https://filamentphp.com/docs/4.x/forms/code-editor) lets users write and edit code directly in the interface.
 It supports common languages including `HTML`, `CSS`, `JavaScript`, `PHP`, and `JSON`.
 
+![Code editor](https://filamentphp.com/docs/4.x/images/light/forms/fields/code-editor/language.jpg)
+
 ### Table repeaters
 
 [Table repeaters](https://filamentphp.com/docs/4.x/forms/repeater#table-repeaters) display [repeater](https://filamentphp.com/docs/4.x/forms/repeater) items in a table layout using defined `columns`.
 You can configure these columns with the `table()` method and `TableColumn` objects, which map to fields in the repeater's schema.
 
+![Table repeaters](https://filamentphp.com/docs/4.x/images/light/forms/fields/repeater/table.jpg)
+
 Each column can be customized:
 
 - `hiddenHeaderLabel()` hides the label visually but keeps it accessible.
@@ -239,10 +259,14 @@ In this JavaScript context, you can use `$state`, `$get()`, and `$set()` to inte
 The [`FusedGroup`](https://filamentphp.com/docs/4.x/forms/overview#fusing-fields-together-into-a-group) component lets you visually combine multiple fields into a single, compact group.
 It's best used with compatible field types like [text inputs](https://filamentphp.com/docs/4.x/forms/text-input), [selects](https://filamentphp.com/docs/4.x/forms/select), [date-time pickers](https://filamentphp.com/docs/4.x/forms/date-time-picker) and [color pickers](https://filamentphp.com/docs/4.x/forms/color-picker).
 
+![Fused group](https://filamentphp.com/docs/4.x/images/light/forms/fields/fused-columns.jpg)
+
 ### Adding extra content to a field
 
 Fields contain [multiple slots](https://filamentphp.com/docs/4.x/forms/overview#adding-extra-content-to-a-field) where content can be inserted in a child schema. Slots can accept text, [any schema components](https://filamentphp.com/docs/4.x/schemas/overview), [actions](https://filamentphp.com/docs/4.x/actions/overview), or [action groups](https://filamentphp.com/docs/4.x/actions/grouping-actions) — typically with [prime components](https://filamentphp.com/docs/4.x/schemas/primes).
 
+![Below content](https://filamentphp.com/docs/4.x/images/light/forms/fields/below-content/alignment.jpg)
+
 Available slots include:
 
 - `aboveLabel()`, `beforeLabel()`, `afterLabel()`, `belowLabel()`
@@ -273,6 +297,8 @@ This improves type consistency and reduces the need for manual casting in your l
 [Code entry](https://filamentphp.com/docs/4.x/infolists/code-entry) allows you to present a highlighted code snippet in your [infolist](https://filamentphp.com/docs/4.x/infolists).
 It uses [Phiki](https://github.com/phikiphp/phiki) for code highlighting on the server.
 
+![Code entry](https://filamentphp.com/docs/4.x/images/light/infolists/entries/code/simple.jpg)
+
 ## Tables
 
 ### Tables with custom data
@@ -299,6 +325,16 @@ Table headers are now shown even when no records are present, enhancing the user
 
 See the [bulk actions section](#bulk-actions) of this article.
 
+### Reordering Table Columns
+
+![Reordering Table Columns](https://filamentphp.com/docs/4.x/images/light/tables/columns/column-manager-reorderable.jpg)
+
+Filament now supports [reorderable table columns](https://filamentphp.com/docs/4.x/tables/columns/overview#reordering-columns) using the `reorderableColumns()` method. This allows users to drag and rearrange visible columns for a personalized view.
+
+You can also make the column manager `live`, so changes apply instantly without needing to click "Apply", by using [`deferColumnManager(false)`](https://filamentphp.com/docs/4.x/tables/columns/overview#live-column-manager).
+
+Additionally, the column manager trigger button can be customized via [`columnManagerTriggerAction()`](https://filamentphp.com/docs/4.x/tables/columns/overview#customizing-the-column-manager-dropdown-trigger-action), giving you control over its label, style, and behavior.
+
 ## Actions
 
 ### Unified actions
@@ -311,6 +347,8 @@ Instead of having separate `Action` classes for each context, all actions now us
 
 Tables now support a dedicated [toolbar actions](https://filamentphp.com/docs/4.x/tables/actions#toolbar-actions) area.
 
+![Toolbar actions](https://filamentphp.com/docs/4.x/images/light/tables/actions/toolbar.jpg)
+
 You can place both regular actions and [bulk actions](https://filamentphp.com/docs/4.x/tables/actions#bulk-actions) in the [`toolbarActions()`](https://filamentphp.com/docs/4.x/tables/actions#toolbar-actions) method.
 
 This is useful for actions like "create", which are not tied to a specific row, or for making bulk actions more visible and accessible in the table’s toolbar.
@@ -362,7 +400,7 @@ You can now use the [`rateLimit()`](https://filamentphp.com/docs/4.x/actions/ove
 
 #### Styling XLSX columns
 
-You can now customize the styling of individual cells in `XLSX` exports using the [`makeXlsxRow()` and `makeXlsxHeaderRow()`](https://filamentphp.comdocs/4.x/actions/export#styling-xlsx-columns) methods in your exporter class.
+You can now customize the styling of individual cells in `XLSX` exports using the [`makeXlsxRow()` and `makeXlsxHeaderRow()`](https://filamentphp.com/docs/4.x/actions/export#styling-xlsx-columns) methods in your exporter class.
 
 #### Customizing the XLSX writer
 
@@ -411,7 +449,7 @@ Filament now loads the [Inter font](https://fonts.google.com/specimen/Inter) loc
 
 ### Sub-navigation position
 
-By default, sub-navigation appears at the start of each page. You can override this globally for the entire panel using the [`subNavigationPosition()` method](https://filamentphp.com//docs/4.x/panel-configuration#setting-the-default-sub-navigation-position).
+By default, sub-navigation appears at the start of each page. You can override this globally for the entire panel using the [`subNavigationPosition()` method](https://filamentphp.com/docs/4.x/panel-configuration#setting-the-default-sub-navigation-position).
 
 Available options are:
 

content/authors/alperen-ersoy.md

@@ -0,0 +1,6 @@
+---
+name: Alperen Ersoy
+slug: alperen-ersoy
+github_url: https://github.com/alperenersoy
+twitter_url: https://twitter.com/alperen_ersoy
+---

content/authors/alvleont.md

@@ -0,0 +1,8 @@
+---
+name: Álvaro León Torres
+slug: alvleont
+github_url: https://github.com/alvleont
+twitter_url: https://twitter.com/alvleont
+---
+
+Álvaro León Torres is a pharmacist, software engineer, and entrepreneur who builds technology to simplify complex processes and empower professionals in regulated industries. He writes code to create meaningful change—often from his home office, with his cats nearby and karaoke tracks queued up.

content/authors/andrefelipe18.md

@@ -0,0 +1,8 @@
+---
+name: André Domingues
+slug: andrefelipe18
+github_url: https://github.com/andrefelipe18
+twitter_url: 
+sponsor_url: https://github.com/sponsors/andrefelipe18
+---
+Laravel | Livewire enthusiast | Open Source Contributor 🇧🇷