Filament Tables with Livewire: Full Page Component! ✨

[@letm0uin]

That Service class trick is gold!!! thanks Tuto!

[@eracton]

Amazing! I didn't know one could use Filament like that in a Livewire component. Thanks for sharing

[@Tuto1902]

Glad it was helpful!

[@tjoasusanto]

teaching speed is perfect, not too fast and not too slow, thank you

[@Wawazi]

This is just awesome! An absolute joy of a video

[@alpondith]

Yo man, this great video. Really enjoyed this video 🎉🎉🎉🎉.

[@binaryfire]

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?

[@Tuto1902]

Great suggestion!

[@development2301]

Thank you for your efforts 🎉

[@Tuto1902]

My pleasure 😊

[@FredrikPlays]

Excellent video!

[@eduardoximenes3671]

Great video!!! Can you show more about filament and api integrations? Something like paginate our results and acess other pages of our api

[@Tuto1902]

Sure. I’ll take note to create some content around the subject

[@benzazalaid6623]

thanks , realy very simple exlication and powerfull in the same time

[@tahinuralam29]

That's awesome 💯

[@juanjosemartinez4987]

Awesome. Thanks tuto.👏

[@Tuto1902]

You're welcome 😊

[@ivanpadillamol]

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.

[@KiaBoluki]

Thank You ! It was really helpful for me.

[@mahmoudebada4025]

Great, Really Useful

[@vugarkhalil]

Perfecto

[@erinelkins237]

Great lessons here Tuto, thank you! Can you help me troubleshoot why sortable() and searchable() aren't working on my table?

[@Tuto1902]

Of course. Is it throwing any errors or just not showing the sorting option or the search field?

[@erinelkins237]

@@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.

[@Tuto1902]

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

[@redouanebenbiga9148]

this is extremly great

[@HamadAbdulla_7]

Great 😳

[@gotoslovakia]

Thank you. You helped me a lot!

[@md.yaqub.ajgori]

Great tutorial ❤

[@Tuto1902]

Thank you! 😊

[@techietoons]

Awesome

[@vugarkhalil]

Hi, Tuto, Is the Per Clinic project ended?

[@Tuto1902]

Not ended. Just taking a little break this week

[@konskript123]

What extension did you use when you autocomplete import those implements?

[@mphatsomlenga8948]

This was so helpful. Is there any project that has this approach ?

[@Tuto1902]

No examples come to mind, but I'll certainly use this approach in future projects

[@frederickosei4553]

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

[@Tuto1902]

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

[@muldiyanto5236]

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

[@Tuto1902]

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

[@teraspa1332]

Do you know how to add a widget above the filament tabile in a livewire component ?

[@Tuto1902]

Try using the @livewire or tags in your livewire component template. Widgets are, after all, just another livewire component: filamentphp.com/docs/3.x/widgets/adding-a-widget-to-a-blade-view

[@BrightMisr]

this is great video, help a lot, how to add 2 forms to a single livewire component

[@Tuto1902]

Try splitting each form into separate livewire components and then add them to a full page livewire component

[@BrightMisr]

​@@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 ?

[@benzazalaid6623]

please how can use filamant fors and table with bootstrap and in RTL application , and where a will add validation

[@Tuto1902]

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

[@JasonKadlec]

How do you change the default color from orange? The settings in AdminServiceProvider are not applied to the form when loaded via live wire

[@Tuto1902]

I haven't done this but I imagine you would have to configure your colors inside tailwind.config.js theme section

[@zoltanfarkas3008]

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?

[@Tuto1902]

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

[@zoltanfarkas3008]

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

[@nerisonpitogo3717]

is it possible to add dark mode support even if not using the panel?

[@Tuto1902]

Yes, but it's a manual process of adding the appropriate css classes to support it. Like dark:bg-gray-800 for example (tailwindcss)

[@marcelo.caetano]

How to insert the table into a page in the admin panel and a link in the sidebar?

[@Tuto1902]

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

[@Mr.Error__]

Primary color button not styled why ??

[@Tuto1902]

Not sure what button you are referring to. All buttons used here come with the default filament styles.

[@nazar87ali]

if i already install filament panel how deal with ?

[@Tuto1902]

You can skip the filament tables installation and create a full page livewire component

[@neverforget1575]

@@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

[@AmitErandole]

Tuto, could you cover making custom user-,defined (meta) fields with filament? It's kinda advanced but would to see you handle the challenge

[@Tuto1902]

I'll make a note for it. Thanks for the suggestion

[@gotoslovakia]

One thing - in your project there are notifications but you need to install them additionally if you want to use them.

[@Tuto1902]

That’s true

[@FabrizioNicosia]

🎉🎉

[@AmitErandole]

nice one

[@LileshJadav]

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.

[@neverforget1575]

Can you elaborate? Thanks

[@serhatculhalikk]

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

[@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

[@serhatculhalikk]

In this way can I embed this table into a regular blade view? The whole website will not be livewire

[@Tuto1902]

@@serhatculhalikk Livewire is a requirement for Filament.

[@abujihadsalahudin]

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 ?

[@Tuto1902]

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