You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: content/articles/leandrocfe-filament-v4-beta-feature-overview.md
+40-2Lines changed: 40 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -20,6 +20,14 @@ To upgrade your app to Filament v4 beta, please read the [upgrade guide](https:/
20
20
21
21
> Looking for the current stable version? Visit the [3.x documentation](https://filamentphp.com/docs/3.x).
22
22
23
+
## Latest updates
24
+
25
+
> **Updated: June 16, 2025**
26
+
27
+
-[Reorderable columns](#reordering-table-columns) feature in [v4.0.0-beta5](https://github.com/filamentphp/filament/releases/tag/v4.0.0-beta5)
28
+
29
+
---
30
+
23
31
## General
24
32
25
33
### Performance
@@ -137,6 +145,8 @@ If you need to refresh them — for example, after a setting or permission chang
137
145
They let you build user interfaces in PHP using structured configuration objects—no need to write `HTML` or `JavaScript` manually.
138
146
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).
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).
141
151
Components are modular, nestable, and reusable, making your interfaces consistent and easy to maintain.
142
152
@@ -150,6 +160,8 @@ For a full list of available components, see the [Schemas documentation](https:/
150
160
151
161
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.
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
160
172
161
173
[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.
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
186
200
187
201
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.
[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`.
197
215
You can configure these columns with the `table()` method and `TableColumn` objects, which map to fields in the repeater's schema.
-`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
239
259
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.
240
260
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).
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).
@@ -273,6 +297,8 @@ This improves type consistency and reduces the need for manual casting in your l
273
297
[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).
274
298
It uses [Phiki](https://github.com/phikiphp/phiki) for code highlighting on the server.
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.
333
+
334
+
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).
335
+
336
+
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.
337
+
302
338
## Actions
303
339
304
340
### Unified actions
@@ -311,6 +347,8 @@ Instead of having separate `Action` classes for each context, all actions now us
311
347
312
348
Tables now support a dedicated [toolbar actions](https://filamentphp.com/docs/4.x/tables/actions#toolbar-actions) area.
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.
315
353
316
354
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
362
400
363
401
#### Styling XLSX columns
364
402
365
-
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.
403
+
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.
366
404
367
405
#### Customizing the XLSX writer
368
406
@@ -411,7 +449,7 @@ Filament now loads the [Inter font](https://fonts.google.com/specimen/Inter) loc
411
449
412
450
### Sub-navigation position
413
451
414
-
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).
452
+
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).
0 commit comments