Filament Tables with Livewire: Full Page Component! ✨
Vložit
- čas přidán 20. 07. 2024
- The great thing about Filament is that you don't have to use the Panel Builder. You can create a complete C.R.U.D. application using just one full-page Livewire component and the Filament Tables package. This video will show you how to do that, using a small example project.
github.com/tuto1902/livewire-...
00:00 Intro
00:15 New project
01:03 Migrations
01:55 Install Filament Tables
03:18 Livewire Component
05:52 Create Medications Table
08:07 Medications Form
13:58 Create New Medication
15:28 Table Columns
18:54 Edit Medications
22:00 Delete Medications
Start creating Filament Admin Panels today with the Filament Bootcamp
👉jorgearturorojas.gumroad.com/...
Do you like my content? Buy me a coffee and help the channel grow ☕️
mercury.streamelements.com/ti...
Join me on Discord
/ discord
That Service class trick is gold!!! thanks Tuto!
Amazing! I didn't know one could use Filament like that in a Livewire component.
Thanks for sharing
Glad it was helpful!
Yo man, this great video. Really enjoyed this video 🎉🎉🎉🎉.
That's awesome 💯
Thank You ! It was really helpful for me.
Thank you. You helped me a lot!
thanks , realy very simple exlication and powerfull in the same time
Thank you for your efforts 🎉
My pleasure 😊
Buen dia master gracias por regalarnos tus conocimientos, ojala también puedas tener un canal o algo así para los que no hablamos ingles y así evitar estar traduciendo y tratar de entender todo.
this is extremly great
Perfecto
Great vid. Would love to see more advanced Filament content.
Could you do one on creating custom form fields for JavaScript packages like Flatpickr etc?
Great suggestion!
Great 😳
Great tutorial ❤
Thank you! 😊
🎉🎉
Great video!!! Can you show more about filament and api integrations? Something like paginate our results and acess other pages of our api
Sure. I’ll take note to create some content around the subject
nice one
Do you know how to add a widget above the filament tabile in a livewire component ?
is it possible to add dark mode support even if not using the panel?
This was so helpful. Is there any project that has this approach ?
No examples come to mind, but I'll certainly use this approach in future projects
this is great video, help a lot, how to add 2 forms to a single livewire component
Try splitting each form into separate livewire components and then add them to a full page livewire component
@@Tuto1902 thank you very much for your answer, i tried a lot to add more than one form like :
function mount() {
$this->nameForm->fill(['name'=>'TEST'])
$this->addressForm->fill(['address'=>'My Adress'])
}
but filament give me error : cannot access object before initialized
I will use these forms side by a table for search and filter in the same page
and print result data to printer
but when work with standard one form it works
WHY ?
Great lessons here Tuto, thank you! Can you help me troubleshoot why sortable() and searchable() aren't working on my table?
Of course. Is it throwing any errors or just not showing the sorting option or the search field?
@@Tuto1902 Thank you! No errors, just nothing happens when I click the arrow for sorting. And nothing happens when I type into the search field.
That's strange. Would you mind posting this question on the Filament technical help channel. And also, if possible, share the code of the Resource/Component that contains the table. I've never have this happened to me before.@@erinelkins237
Anyone doing this make sure you have strong validations because it’s plain Livewire &
don’t use it in client facing sides because it exposes a lot of your code data in browser.
Can you elaborate? Thanks
Primary color button not styled why ??
Tuto, could you cover making custom user-,defined (meta) fields with filament? It's kinda advanced but would to see you handle the challenge
I'll make a note for it. Thanks for the suggestion
Very educative. Do you have any video with a filament edit form without a resource? How do you use a custom field element in filament
No videos on that subject just yet. But this should get you started
filamentphp.com/docs/3.x/forms/adding-a-form-to-a-livewire-component
One thing - in your project there are notifications but you need to install them additionally if you want to use them.
That’s true
please how can use filamant fors and table with bootstrap and in RTL application , and where a will add validation
Filament uses only Tailwind CSS. Validation is added to each field when creating forms.
filamentphp.com/docs/3.x/forms/fields/getting-started#marking-a-field-as-required
Hi Tuto, I've problem,
public static function table(Table $table): Table
{
return $table
->query(Pusdiklat::query())
->columns([])
->headerActions([
Tables\Actions\CreateAction::make()
->model(Pusdiklat::class)
->form([])
]);
when run appear error like this (Class "Filament\tables\Actions\CreateAction" not found)
on the top already use Filament\Tables\Actions;
Thank You
What happens if you change that to just "use Filament\Tables;" instead? Also, I suppose its a typo here, but in "Filament\tables\Actions\CreateAction", that T in tables should be upper case
How do you change the default color from orange? The settings in AdminServiceProvider are not applied to the form when loaded via live wire
I haven't done this but I imagine you would have to configure your colors inside tailwind.config.js theme section
Hi, Tuto,
Is the Per Clinic project ended?
Not ended. Just taking a little break this week
How can it be arranged for the recording and editing form to be directed to the insert and edit URL instead of appearing in a pop-up window?
Just use a generic Action instead, use the ->url() method to redirect to any route you want. You then have to take care of building the edit page.
filamentphp.com/docs/3.x/actions/trigger-button#setting-a-label
Should the value of the "Action" url parameter be created in the router/web.php file or within the "public static function getPages()" function?@@Tuto1902
How to insert the table into a page in the admin panel and a link in the sidebar?
Well, if what you need is a table in the admin panel, I would recommend just using a Filament resource.
filamentphp.com/docs/3.x/panels/resources/getting-started
if i already install filament panel how deal with ?
You can skip the filament tables installation and create a full page livewire component
@@Tuto1902 the css does not work, I have panel builder already installed but the css is not taking effect on a full page component, also a comment was left here saying don't use this on front facing projects as its raw livewire and it exposes data? Thanks
Besides the variable we passed to the blade for $this->table to display the filament table on this page, how can we pass an additional variable that can be utilized outside the table? @Tuto1902
All you need to do is declare a public properties on the livewire component and they will be available as variables in the component's view.
livewire.laravel.com/docs/properties
In this way can I embed this table into a regular blade view? The whole website will not be livewire
@@serhatculhalikk Livewire is a requirement for Filament.
Hi Im salah Im new to laravel and coming from a javascript backround and I wanted to know how to install the laravel new command ?
Install the laravel installer package globally using composer, like this
composer global require laravel/installer
Make sure to add the following to you system PATH:
~/.config/composer/vendor/bin