Table actions / alpine / livewire UI

Hi,

I've got a table that has accept and reject actions on each row. What I'd like to do is only show the actions on the first row UNTIL an action has been clicked. If accept or reject is clicked, then the actions for the 2nd row should appear and so on. It might be worth adding that my table is in a custom component in a modal.

I'm struggling to know where to start with this. Usually, (without using a front end framework) I'd just assign some classes to the table and actions and hide / show based on interactions quite simply.

I'm new to livewire / alpine but have been using filament for a few months. Just watched an alpine series on Laracast but that doesn't show integration with Filament obviously.

I added x-data to my component wrapper in the hope that I'd be able to hook in to the table there but I can't seem to hook into the table.

Any pointers in the right direction would be great.

toeknee•8/1/24, 2:05 PM

Really you need to relationship the rows, and order so if parent record is approved, show accept/reject.

Adam HolmesOP•8/1/24, 2:11 PM

I'm not sure I follow. Are you saying that each row should have a parent and the first row is the root?

This table could potentially have 30+ rows in it.

Are you suggesting that by doing this, I could just use the visible() method on the action rather than trying to look at table rows in javascript?

toeknee•8/1/24, 2:13 PM

Yep I am, or you return based on the order, but if it's handled in the relationahship, and you run $record->previousComplete which would check if the record before this record is complete.

Adam HolmesOP•8/1/24, 2:20 PM

So say I have a model and this popup is to choose a new company name based on another model called

the intention is to save the on the .

'm not sure how I could set up a relationship for all the models so that they have parents.

Not a great example, but I'm trying not to have to fill you with domain knowledge

Adam HolmesOP•8/1/24, 2:22 PM

Current table in component looks like this:

toeknee•8/1/24, 2:22 PM

Ok so you are not using a table builder then?

But just do a first where accept = 0, then in filament visible

Adam HolmesOP•8/1/24, 2:24 PM

Yeah I am using table builder - it's just in a component so I can use it in a modal

Adam HolmesOP•8/1/24, 2:39 PM

So I guess when I load the modal I'll need to add all displayed options into a relationship table, use that to detect if any have been accepted or rejected and then when one is accepted, clear the relationship table.

Because in theory I could have the first row reject, and then accept the second and then have to ignore the third

Adam HolmesOP•8/1/24, 2:40 PM

It just seems overly complicated for what would have been pretty simple if I manually created the table and then interacted with jquery for example

toeknee•8/1/24, 2:42 PM

You could still use JS... just put a listener on the table and hide them on load or add a js hidden class, there's lots of ways to do it

Adam HolmesOP•8/1/24, 2:43 PM

I don't suppose you have any resources you could point me towards for that?

Adam HolmesOP•8/1/24, 2:44 PM

I did try to do this, but I couldn't work out what to target on the filament tables for the query selector

toeknee•8/1/24, 2:47 PM

->extraAttributes([]) and use anything you like for example 'class' => 'approval_checker' on the table or the columns