The Filament has 66 Render Hooks in various places. That's why we prepared a simple Cheat Sheet to display where you can expect them to appear.
In complex tables, we often have a lot of filters. But losing them each time we click the edit/create buttons - is annoying! So, let's solve that with persistent filters.
Your application's everyday actions should be accessible as quickly as possible. So, using the Render Hooks and Livewire component, let's move them above our sidebar.
We are used to our tables having an order. Often, it's done by ID or any other column. But did you know that you can shuffle them with a single button click?
Some elements in your panel require an existing Tailwind CSS class, but often, it's not pre-compiled and doesn't work. So let's see how we can use any class!
Having a form with too much information can hurt the user experience. To solve this, we can put our Relation Managers into tabs on the edit page.
Filtering tables can be confusing or even slow, especially if you have to filter them often. That's why moving buttons to the top of the table and displaying them at all times can lead to a better user experience.
Wizard forms solve the issue of having too many input fields (big forms). But what if the user leaves mid-filling? In that case, you can auto-save a draft and let them edit the record at any point.
The default table includes a border between each row and quite a big gap between them. But we can change that with a custom theme!
Filament allows panel customization in various ways, including adding new elements to an existing design. We will add a custom banner with a link at the bottom of our Sidebar navigation.
Not every table action needs to be a button. Sometimes, an icon is all we need. Combine that with dynamic visibility, and you will have a table that shows only the relevant actions.
The dashboard is the default page after login/registration. But what if we want something custom? How to redirect the user to a different resource/page?
By default, active menu items in filament navigation have orange text. What if we want to change that to any other color? How do we do it?
If you want to disable some form inputs based on the values of other fields like checkbox/select, this tutorial will help you.
Sometimes, we need "Other" as an option in the Select, allowing the user to enter any value they want, in a separate text field.