Sort & Search Table by Columns

Sort & Search Table by Columns

2024-10-16 وقت القراءه : 1 دقائق

لفرض أن المستخدم يريد ميزه ترتيب عرض البيانات، حسب ( الإسم، السعر ....)، وللقيام بذلك كل ما علينا القيام به هو إضافة sortable() إلى TextColumn الذي نريد إتاحه عملية الترتيب له.

في المثال الذي نستخدمه وهو Product لإضافة sorting حسب name نذهب للملف ProductResource ثم إلى الدالة table-columns وبجانب الحقل name نضيف sortable()

public static function table(Table $table): Table
{
    return $table
        ->columns([
            Tables\Columns\TextColumn::make('name')->sortable(),
            Tables\Columns\TextColumn::make('price'),
        ])
        ->filters([
            //
        ])
        ->actions([
            Tables\Actions\EditAction::make(),
        ])
        ->bulkActions([
            Tables\Actions\BulkActionGroup::make([
                Tables\Actions\DeleteBulkAction::make(),
            ]),
        ]);
}

الأن وكما نرى في الصوره أنه تم إضافة سهم بجانب Name من أجل ترتيب النتائج حسب الإسم.


لفرض أنه لدينا أكثر من حقل نريد عمل sort له، ففي حالتنا Name, Price لكن نريد أن تظهر النتائج بشكل إفتراضي حسب السعر من الأعلى إلى الأقل

هنا نحتاج للتعديل على الدالة table  وإضافة defaultSort

public static function table(Table $table): Table
{
    return $table
        ->columns([
            Tables\Columns\TextColumn::make('name')->sortable(),
            Tables\Columns\TextColumn::make('price')->sortable(),
        ])
        ->defaultSort('price','desc')
        ->filters([
            //
        ])
        ->actions([
            Tables\Actions\EditAction::make(),
        ])
        ->bulkActions([
            Tables\Actions\BulkActionGroup::make([
                Tables\Actions\DeleteBulkAction::make(),
            ]),
        ]);
}


إضافة حقل للبحث في Filament

لإضافة خاصية البحث في جدول معين، كل ما علينا القيام به هو إضافة الخاصية searchable إلى TextColumn للحقل الذي نريد البحث عليه

في حالتنا هنا نريد تطبيق ذلك على إسم المنتج Name

لذلك نذهب للملف ProductRecource للدالة table ومن ثم بداخل الدالة table نضيف searchable للـ Name

public static function table(Table $table): Table
{
    return $table
        ->columns([
            Tables\Columns\TextColumn::make('name')->sortable()->searchable(),
            Tables\Columns\TextColumn::make('price')->sortable(),
        ])
        ->defaultSort('price','desc')
        ->filters([
            //
        ])
        ->actions([
            Tables\Actions\EditAction::make(),
        ])
        ->bulkActions([
            Tables\Actions\BulkActionGroup::make([
                Tables\Actions\DeleteBulkAction::make(),
            ]),
        ]);
}

إضافة تعليق
Loading...