Filament•14mo ago

Blur the rest of the query result except the first 5

Hello guys! I hope you can help me blur the rest of the query result except the first 5. I can blur some of the results using the instruction from the documentation:

->recordClasses(function (Domain $record)
            {
                if ($record->price > 500) {
                    return 'blur';
                }
            }

->recordClasses(function (Domain $record)
            {
                if ($record->price > 500) {
                    return 'blur';
                }
            }

But what I need is to blur the rest of the query except the first 5 according to the query result order/key. Thanks a lot for your help!

11 Replies

bwurtz999•14mo ago

If the data is in some reliable order, you could use

->extraAttributes(function ($record) {
  // some kind of check on the $record->id
  if(!$check) {
    return ['class' => 'blur'];
  }
  return null;
})

->extraAttributes(function ($record) {
  // some kind of check on the $record->id
  if(!$check) {
    return ['class' => 'blur'];
  }
  return null;
})

Just tried this out, unless you have blur somewhere else in your project you will need to hardcode it return ['style' => 'filter: blur(4px);'] It might be easier to just limit the query to 5 results and then put a null action in the header of the table saying it is only showing limited results. Just a thought

jephOP•14mo ago

If only i know how to get the value of the query result key, i might be able to accomplish it. I want to copy this feature from other websites that the rest of the result are shown but blur.

jephOP•14mo ago

bwurtz999•14mo ago

You can customize the query by using public static function getEloquentQuery(): Builder in the resource and you can order it as necessary When you say the value of the query result key, what do you mean exactly? By using ->extraAttributes(function ($record) { you get access to the record for that row. And you can get the ID of the record that way

jephOP•14mo ago

I mean the key of the records. Can you please provide a sample code targeting only the first 5 records of like 20 total records from the query?

jephOP•14mo ago

I am following this guide from the documentation:

jephOP•14mo ago

It is working but instead, i want to modify the class of the first 5 result.

bwurtz999•14mo ago

Oh nice I didn't know about recordClasses, that's a great feature I don't think Filament exposes any kind of loop variable or index for the rows in a table Like I suggested earlier, you can modify the resource query to return the results in the order that you need them and then you can blur/not blur based on logic within the recordClasses function

awcodes•14mo ago

there is a $rowLoop, but it's available on Columns and not on the table itself. 🙂 https://filamentphp.com/docs/3.x/tables/columns/advanced#injecting-the-current-table-row-loop

Advanced columns - Table Builder - Filament

bwurtz999•14mo ago

Great to know. Thank you!

jephOP•14mo ago

finally found the solution! Thanks a lot @awcodes @bwurtz999 ! both your suggestion with additional digging to the docs solved the issue. here's the code i used:

TextColumn::make('name')
                ->formatStateUsing(function (HasTable $livewire, stdClass $rowLoop, $state) {
                    if ($rowLoop->iteration +
                    ($livewire->getTableRecordsPerPage() * (
                        $livewire->getTablePage() - 1
                    )) >= 11) {
                        return str_replace(str_split($state), '#', $state);
                    } return $state;
                })
                ->extraAttributes(function (HasTable $livewire, stdClass $rowLoop) {
                    if($rowLoop->iteration +
                    ($livewire->getTableRecordsPerPage() * (
                        $livewire->getTablePage() - 1
                    )) >= 11) {
                      return ['class' => 'blur'];
                    } else {
                        return [];
                    }

                  }),

TextColumn::make('name')
                ->formatStateUsing(function (HasTable $livewire, stdClass $rowLoop, $state) {
                    if ($rowLoop->iteration +
                    ($livewire->getTableRecordsPerPage() * (
                        $livewire->getTablePage() - 1
                    )) >= 11) {
                        return str_replace(str_split($state), '#', $state);
                    } return $state;
                })
                ->extraAttributes(function (HasTable $livewire, stdClass $rowLoop) {
                    if($rowLoop->iteration +
                    ($livewire->getTableRecordsPerPage() * (
                        $livewire->getTablePage() - 1
                    )) >= 11) {
                      return ['class' => 'blur'];
                    } else {
                        return [];
                    }

                  }),

Gaming

Programming

Blur the rest of the query result except the first 5