در دنیای توسعه وب، مدیریت دادهها و نمایش آنها در قالب جدول یکی از مهمترین وظایف برای هر برنامه کاربردی است. در آموزش Filament، بهعنوان یکی از فریمورکهای قدرتمند لاراول، ابزارهای مناسبی برای ساخت و مدیریت جداول ارائه شده است. Filament با ارائه ابزارهای قدرتمند و انعطافپذیر، ساخت جداول را بسیار آسان کرده است. در این مقاله آموزشی جامع، به بررسی تمامی جنبههای جداول (Tables) در Filament خواهیم پرداخت و آنها را از سطح مبتدی تا پیشرفته توضیح خواهیم داد. این مقاله شامل مفاهیم پایهای مانند ستونها، فیلترها، مرتبسازی، و اکشنها خواهد بود که برای طراحی و ساخت جداول در سیستمهای مدیریت محتوای مبتنی بر Filament ضروری هستند.
ستونها (Columns) در جداول (Tables) در Filament
ستونها در جداول (Tables) در Filament بخش اصلی برای نمایش دادهها هستند. شما میتوانید انواع مختلفی از ستونها را بهطور سفارشی بر اساس نوع دادههایی که میخواهید نمایش دهید، ایجاد کنید. این ستونها میتوانند دادهها را بهصورت ساختارمند و مرتب نمایش دهند. در این بخش، انواع مختلف ستونها را معرفی خواهیم کرد.
TextColumn
ستونهای TextColumn در Filament برای نمایش دادههای متنی استفاده میشوند. این ستونها یکی از سادهترین و در عین حال پرکاربردترین انواع ستونها در جداول هستند. معمولاً برای نمایش دادههایی که به صورت متن هستند، مانند نام، آدرس، توضیحات، و سایر اطلاعات متنی به کار میروند. در بسیاری از پروژهها، نمایش دادههای متنی در قالب جداول یکی از اصلیترین نیازها است.
ویژگیها:
نمایش دادههای متنی:
این ستون برای نمایش دادههایی که به صورت متنی ذخیره شدهاند، مانند نام افراد، آدرسها، توضیحات و … بسیار مناسب است.
برای هر نوع داده متنی که نیاز به نمایش دارد، میتوان از این ستون استفاده کرد.
سادگی طراحی:
TextColumn یکی از سادهترین ستونها است که نیاز به هیچ تنظیم پیچیدهای ندارد.
طراحی و استفاده از آن به راحتی انجام میشود.
امکان سفارشیسازی:
میتوان برچسب (label) ستون را تغییر داد.
به راحتی میتوان ویژگیهای دیگر ستون مانند طول و عرض، نوع نمایش (متن ساده یا متنی با لینک) و … را تنظیم کرد.
نمایش دادهها به صورت ساده و واضح:
این ستون معمولاً برای نمایش اطلاعات ساده و متنی است که نیازی به پردازش پیچیده ندارند. نمایش این نوع دادهها ساده و مستقیم است.
مثال استفاده:
use Filament\Tables\Columns\TextColumn;
TextColumn::make('name')
->label('نام');
در این مثال، ستون name دادهای که از نوع متن است را نمایش میدهد. برچسب این ستون به فارسی بهصورت “نام” نمایش داده میشود. شما میتوانید این ستون را برای هر داده متنی دیگری که در سیستم دارید، مانند آدرس یا توضیحات، استفاده کنید.
قابلیتهای اضافی:
میتوان از متدهای مختلفی برای تنظیم نمایش متن استفاده کرد، مانند sortable(), searchable() و hidden().
به عنوان مثال، میتوانید ستون نام را قابل جستجو کنید تا کاربر بتواند از طریق جستجو، رکوردهای خاصی را بر اساس نام پیدا کند:
TextColumn::make('name')
->label('نام')
->searchable();
ImageColumn
ستونهای ImageColumn برای نمایش تصاویر ذخیرهشده در پایگاه داده استفاده میشوند. این نوع ستون برای مواردی که نیاز دارید تصاویر (مانند تصاویر پروفایل، محصولات، یا تصاویر ویدئوها) در جداول نمایش داده شوند، بسیار مفید است. استفاده از ستونهای تصویری به شما کمک میکند تا تجربه کاربری بهتری برای مشاهده و دسترسی به تصاویر فراهم کنید.
ویژگیها:
مناسب برای نمایش تصاویر ذخیرهشده در پایگاه داده:
این ستون برای نمایش تصاویر از نوع URL یا تصاویر ذخیرهشده در پایگاه داده طراحی شده است.
معمولاً برای نمایش عکسهای پروفایل، تصاویر محصولات، گالریها و سایر انواع تصاویر استفاده میشود.
قابلیت تنظیم اندازه و ویژگیهای تصویر:
میتوان اندازه تصویر را با استفاده از ویژگیهایی مانند width و height کنترل کرد. این ویژگیها به شما این امکان را میدهند که اندازه تصویر در جدول مطابق با طراحی مدنظر خود تنظیم شود.
همچنین میتوان سایر ویژگیها مانند image_fit (برای تغییر نحوه قرار گرفتن تصویر در داخل باکس) یا image_ratio (برای تنظیم نسبت ابعاد تصویر) را نیز تنظیم کرد.
سفارشیسازی دقیق:
به راحتی میتوان تنظیمات اضافی مانند تغییر تصویر برای انواع مختلف دادهها (مثلاً تصویر پروفایل برای یک کاربر خاص یا تصویر محصول) را سفارشیسازی کرد.
پشتیبانی از فرمتهای مختلف تصویر:
این ستون از انواع مختلف فرمتهای تصویری (مانند jpg, png, gif, و غیره) پشتیبانی میکند و بهراحتی میتوان تصاویر را از منابع مختلف (مانند پایگاه داده یا مسیرهای URL) بارگذاری کرد.
مثال استفاده:
use Filament\Tables\Columns\ImageColumn;
ImageColumn::make('profile_picture')
->label('تصویر پروفایل');
در این مثال، ستون profile_picture تصاویری را که در پایگاه داده ذخیره شدهاند نمایش میدهد. این تصاویر میتوانند تصاویر پروفایل کاربران باشند. برچسب ستون بهصورت “تصویر پروفایل” نمایش داده میشود.
قابلیتهای اضافی:
میتوان ویژگیهای تصویر را سفارشیسازی کرد، مانند اندازه و قابلیت نمایش تصویر در اندازه کوچک یا بزرگ. به عنوان مثال:
ImageColumn::make('profile_picture')
->label('تصویر پروفایل')
->width(50)
->height(50);
در صورت نیاز به تغییر نحوه نمایش تصویر (مثلاً نسبت ابعاد تصویر) میتوانید از ویژگیهای image_fit یا image_ratio استفاده کنید:
ImageColumn::make('profile_picture')
->label('تصویر پروفایل')
->imageFit('cover') // تنظیم نمایش تصویر به صورت کاور
->imageRatio(1) // نسبت ابعاد 1:1
کاربردهای اضافی:
شما میتوانید از ImageColumn برای نمایش هر نوع تصویر دیگر که ممکن است در پایگاه داده ذخیره شده باشد استفاده کنید. بهطور مثال، در سیستمهای فروشگاهی برای نمایش تصاویر محصولات، در سیستمهای آموزشی برای نمایش تصاویر دورهها، یا در شبکههای اجتماعی برای نمایش عکسهای پروفایل کاربران.
در این توضیحات، به بررسی دو نوع از ستونهای پرکاربرد در جداول Filament یعنی TextColumn و ImageColumn پرداختیم. این ستونها بهویژه در پروژههایی که نیاز به نمایش دادههای متنی ساده یا تصاویری مانند عکسهای پروفایل یا تصاویر محصولات دارند، بسیار مفید هستند. شما میتوانید این ستونها را به راحتی در پروژههای خود به کار ببرید و آنها را با استفاده از متدهای مختلفی که Filament در اختیار شما میگذارد، سفارشیسازی کنید.
استفاده از این ستونها در جداول میتواند تجربه کاربری سایت یا اپلیکیشن شما را بسیار بهبود دهد، زیرا دادهها را بهطور واضح و دقیق نمایش میدهد و به کاربر امکان تعامل راحتتری با دادهها میدهد.
BooleanColumn
ستونهای BooleanColumn در Filament برای نمایش مقادیر درست یا غلط (Boolean values) طراحی شدهاند. این نوع ستونها اغلب برای نمایش وضعیتهایی که دو حالت دارند، مانند فعال بودن یا غیرفعال بودن یک ویژگی، تایید شده یا رد شده بودن یک رکورد، یا حتی وضعیتهایی که نیاز به نشان دادن اطلاعات باینری دارند، استفاده میشوند. نمایش دادههای بولی بهراحتی برای کاربر قابل درک است و معمولاً با استفاده از آیکونها، رنگها یا برچسبها، این وضعیتها بهطور بصری در جداول نمایش داده میشوند.
ویژگیها:
نمایش مقادیر درست یا غلط:
این ستون برای نمایش وضعیتهایی است که تنها دو حالت ممکن دارند: true یا false (درست یا غلط).
بهطور معمول برای نمایش وضعیتهای فعال/غیرفعال، تایید شده/رد شده یا وجود/عدم وجود استفاده میشود.
سادگی و وضوح:
ستونهای بولی بهطور طبیعی ساده و قابل فهم هستند. کاربران میتوانند به راحتی وضعیت یک رکورد را فقط با نگاه کردن به نمایش دادهها در ستون متوجه شوند.
برای نمایش وضعیتها معمولاً از آیکونهایی مثل تیک (برای درست) یا ضربدر (برای غلط) استفاده میشود.
سفارشیسازی نمایش:
شما میتوانید نحوه نمایش دادهها در این ستون را سفارشی کنید. بهعنوان مثال، میتوانید رنگها، آیکونها یا حتی متنهای دلخواه برای هر حالت (درست یا غلط) تنظیم کنید.
افزایش قابلیت جستجو و فیلتر:
شما میتوانید ستونهای بولی را قابل فیلتر کنید تا کاربران بتوانند به راحتی وضعیتهایی مثل “فعال” یا “غیرفعال” را فیلتر کنند.
مثال استفاده:
use Filament\Tables\Columns\BooleanColumn;
BooleanColumn::make('is_active')
->label('فعال');
در این مثال، ستون is_active بهعنوان یک ستون بولی استفاده شده است. دادههای این ستون میتوانند وضعیتهایی مانند “فعال” یا “غیرفعال” را نشان دهند و معمولاً با استفاده از آیکون یا رنگ نشان داده میشوند.
قابلیتهای اضافی:
نمایش آیکون: شما میتوانید از آیکونهای خاص برای وضعیتهای درست یا غلط استفاده کنید:
BooleanColumn::make('is_active')
->label('فعال')
->trueIcon('heroicon-s-check-circle')
->falseIcon('heroicon-s-x-circle');
سفارشیسازی رنگ: بهراحتی میتوانید رنگهای مختلفی برای نشان دادن وضعیتهای مختلف تنظیم کنید:
BooleanColumn::make('is_active')
->label('فعال')
->trueColor('green')
->falseColor('red');
SelectColumn
ستونهای SelectColumn در Filament برای نمایش مقادیر انتخابی از یک لیست کشویی (dropdown) استفاده میشوند. این ستونها معمولاً برای نمایش وضعیتها یا مقادیر از پیشتعریف شده به کار میروند. این لیست کشویی میتواند مجموعهای از مقادیر خاص باشد که کاربر میتواند از بین آنها انتخاب کند. این نوع ستونها بهویژه در مواقعی که شما نیاز به انتخاب وضعیتهایی مانند منتظر، تایید شده یا رد شده دارید، کاربرد دارند.
ویژگیها:
نمایش لیست کشویی:
این ستونها برای نمایش مقادیر از پیشتعریف شده بهصورت کشویی (dropdown) طراحی شدهاند. کاربر میتواند از لیست گزینهها یکی را انتخاب کند.
مناسب برای وضعیتها و مقادیر ثابت:
ستونهای Select معمولاً برای نمایش وضعیتهای خاص یا مقادیر از پیشتعریف شده (مثل در انتظار، تایید شده، رد شده) استفاده میشوند.
تعامل کاربری بهتر:
لیستهای کشویی یک تجربه کاربری تمیز و تعاملی فراهم میکنند و از نمایش مستقیم مقادیر پیچیده یا زیادی جلوگیری میکنند.
قابلیت سفارشیسازی گزینهها:
شما میتوانید بهراحتی گزینههای انتخابی در این ستون را از آرایهها یا منابع مختلف بارگذاری کنید.
این ستونها میتوانند مقادیر ثابت یا دینامیک از پایگاه داده یا منابع دیگر را نمایش دهند.
مثال استفاده:
use Filament\Tables\Columns\SelectColumn;
SelectColumn::make('status')
->options([
'pending' => 'منتظر',
'approved' => 'تایید شده',
'rejected' => 'رد شده',
])
->label('وضعیت');
در این مثال، ستون status برای نمایش وضعیتهایی مانند “منتظر”، “تایید شده” و “رد شده” استفاده میشود. این وضعیتها از طریق یک لیست کشویی در جدول نشان داده میشوند.
قابلیتهای اضافی:
تنظیمات فیلتر: شما میتوانید از SelectColumn به عنوان یک فیلتر نیز استفاده کنید تا کاربران بتوانند جداول را بر اساس وضعیت انتخابی فیلتر کنند:
SelectColumn::make('status')
->options([
'pending' => 'منتظر',
'approved' => 'تایید شده',
'rejected' => 'رد شده',
])
->label('وضعیت')
->filterable();
BadgeColumn
ستونهای BadgeColumn به شما این امکان را میدهند که مقادیر خاص را با استفاده از برچسبهای رنگی (badges) نمایش دهید. این ستونها بیشتر برای نمایش وضعیتها و دستهبندیهایی با رنگهای مختلف و متناسب با اولویتها یا ویژگیهای رکوردها استفاده میشوند. استفاده از برچسبها برای نمایش اطلاعات میتواند باعث ایجاد تجربه کاربری واضحتر و زیباتر شود.
ویژگیها:
نمایش وضعیتها با برچسبهای رنگی:
این ستونها برای نمایش دادهها بهصورت برچسبهای رنگی استفاده میشوند. هر وضعیت میتواند یک رنگ خاص داشته باشد که به کاربر کمک میکند تا وضعیتهای مختلف را بهراحتی تشخیص دهد.
مناسب برای نمایش اولویتها، وضعیتها یا دستهبندیها:
ستونهای BadgeColumn بیشتر برای نمایش دستهبندیها، وضعیتها یا اولویتها به کار میروند. بهطور مثال، میتوانید اولویتهای “کم”، “متوسط” یا “بالا” را با رنگهای مختلف نمایش دهید.
قابلیت سفارشیسازی رنگها:
شما میتوانید رنگهای هر برچسب را بهراحتی تغییر دهید تا متناسب با طراحی سایت یا نیاز پروژهتان باشد.
پشتیبانی از چندین گزینه:
این ستونها میتوانند چندین گزینه مختلف را به نمایش بگذارند که هرکدام از آنها به یک رنگ خاص تعلق دارند.
مثال استفاده:
use Filament\Tables\Columns\BadgeColumn;
BadgeColumn::make('priority')
->options([
'low' => 'کم',
'medium' => 'متوسط',
'high' => 'بالا',
])
->label('اولویت');
در این مثال، ستون priority با استفاده از برچسبها نمایش داده میشود و مقادیر “کم”، “متوسط” و “بالا” را بهصورت برچسبهایی با رنگهای مختلف نشان میدهد.
قابلیتهای اضافی:
سفارشیسازی رنگها: بهراحتی میتوانید رنگ برچسبها را متناسب با وضعیتهای مختلف تغییر دهید:
BadgeColumn::make('priority')
->options([
'low' => 'کم',
'medium' => 'متوسط',
'high' => 'بالا',
])
->colors([
'low' => 'gray',
'medium' => 'yellow',
'high' => 'red',
])
->label('اولویت');
IconColumn
ستونهای IconColumn به شما این امکان را میدهند که از آیکونها برای نمایش وضعیتها در جداول استفاده کنید. این ستونها معمولاً برای نمایش اطلاعات بهصورت بصری و بهویژه برای نشان دادن وضعیتهایی مانند تایید شده یا رد شده، استفاده میشوند. آیکونها معمولاً خوانایی و درک اطلاعات را برای کاربر تسهیل میکنند و بهویژه در مواقعی که وضعیتها تنها با کلمات ساده قابل توصیف هستند، بسیار مفیدند.
ویژگیها:
نمایش وضعیتها با استفاده از آیکونها: ستونهای IconColumn برای نمایش وضعیتهای مختلف با استفاده از آیکون طراحی شدهاند. این وضعیتها ممکن است شامل حالتهایی مانند تایید، رد، فعال بودن یا غیرفعال بودن باشد.
امکان استفاده از آیکونهای از پیشتعریف شده یا سفارشی: شما میتوانید از آیکونهای موجود در کتابخانههای مشهور مثل Heroicons یا از آیکونهای سفارشی استفاده کنید.
مناسب برای وضعیتهایی مانند تایید یا رد: این نوع ستونها معمولاً برای نمایش وضعیتهای باینری مانند “تایید شده/رد شده” یا “فعال/غیرفعال” به کار میروند.
مثال استفاده:
use Filament\Tables\Columns\IconColumn;
IconColumn::make('is_verified')
->icon('heroicon-s-check-circle') // آیکون تایید
->label('تایید شده');
در این مثال، ستون is_verified یک آیکون وضعیت تایید شده (با استفاده از آیکون check-circle از Heroicons) را بهصورت بصری نمایش میدهد. این آیکون میتواند بهراحتی وضعیت تایید یک رکورد را برای کاربر مشخص کند.
قابلیتهای اضافی:
آیکونهای سفارشی: شما میتوانید برای وضعیتهای مختلف آیکونهای متفاوتی تعریف کنید.
سفارشیسازی رنگها: شما میتوانید رنگ آیکونها را به دلخواه تنظیم کنید تا آنها با طراحی کلی پروژه هماهنگ شوند.
TagsColumn
TagsColumn برای نمایش برچسبها یا تگها در جداول استفاده میشود. این ستونها معمولاً برای نمایش دستهبندیها، ویژگیها یا برچسبهای مختلف بهکار میروند. نمایش برچسبها میتواند به کاربر کمک کند تا اطلاعات مرتبط را بهطور بصری و دستهبندیشده مشاهده کند.
ویژگیها:
نمایش برچسبها (tags): این ستون برای دستهبندی و نمایش ویژگیهای دادهها بهصورت تگ طراحی شده است. برچسبها معمولاً برای دادههای خاص و کلیدی مثل “دستهبندیها” یا “نوع محصول” استفاده میشوند.
مناسب برای دستهبندیها یا ویژگیهای متعدد: از این ستون در جداولی که نیاز به نمایش دستهبندیهای مختلف دارند، مانند دستهبندی محصولات، وضعیتهای مختلف کاربران و غیره، استفاده میشود.
قابلیت شخصیسازی رنگ و نمایش برچسبها: برچسبها معمولاً به رنگهای مختلف برای نمایش دستهها یا ویژگیها دستهبندی میشوند و شما میتوانید رنگ، اندازه و نحوه نمایش آنها را سفارشی کنید.
مثال استفاده:
use Filament\Tables\Columns\TagsColumn;
TagsColumn::make('categories')
->label('دستهبندیها');
در این مثال، ستون categories برچسبهای مختلف (که بهعنوان دستهبندیهای مختلف تعریف شدهاند) را نمایش میدهد. این ستون معمولاً برای نشان دادن ویژگیهایی مانند انواع محصولات یا دستهبندیهای مختلف کاربران یا محتوا بهکار میرود.
قابلیتهای اضافی:
سفارشیسازی رنگها: شما میتوانید رنگ برچسبها را بر اساس دستهبندی یا ویژگیهای خاص تغییر دهید.
استفاده از چندین برچسب: هر رکورد میتواند چندین برچسب را همزمان نمایش دهد.
DateTimeColumn
DateTimeColumn برای نمایش تاریخ و زمان در جداول استفاده میشود. این ستونها معمولاً برای نمایش تاریخهای ثبت، تاریخهای آخرین بروزرسانی یا هر نوع داده زمانی دیگر بهکار میروند.
ویژگیها:
نمایش تاریخ و زمان: ستونهای DateTime برای نمایش تاریخها و زمانها در فرمتهای مختلف مناسب هستند. این ستونها به شما این امکان را میدهند که زمانها را بهصورت خوانا برای کاربران نمایش دهید.
قابلیت تنظیم فرمت تاریخ و زمان: شما میتوانید فرمت نمایش تاریخ و زمان را سفارشی کنید. بهطور مثال، میتوانید تاریخ را بهصورت “YYYY/MM/DD” یا “DD-MM-YYYY” و یا حتی زمان را بهصورت 24 ساعته یا 12 ساعته نمایش دهید.
مناسب برای نمایش تاریخها و زمانهای مختلف: این ستون برای مواردی که نیاز به ثبت و نمایش تاریخها و زمانها دارید، مثل تاریخ ثبتنام کاربران یا زمان آخرین بروزرسانی، استفاده میشود.
مثال استفاده:
use Filament\Tables\Columns\DateTimeColumn;
DateTimeColumn::make('created_at')
->label('تاریخ ثبت');
در این مثال، ستون created_at تاریخ ثبت رکورد را نمایش میدهد. این ستون معمولاً برای جداولی که شامل اطلاعات مربوط به تاریخ و زمان هستند، مثل تاریخ ایجاد یک سفارش، آخرین تغییرات یا تاریخهای ثبتنام، بسیار مفید است.
قابلیتهای اضافی:
تنظیم فرمت سفارشی: میتوانید فرمت تاریخ و زمان را بهدلخواه تنظیم کنید:
DateTimeColumn::make('created_at')
->label('تاریخ ثبت')
->format('d-m-Y H:i:s');
امکان فیلتر و جستجو: این ستونها معمولاً برای فیلتر کردن بر اساس تاریخها یا زمانها بهکار میروند.
NumberColumn
NumberColumn برای نمایش مقادیر عددی استفاده میشود. این ستونها معمولاً برای نمایش مقادیر عددی مانند قیمتها، مقدار موجودیها، تعداد رکوردها و غیره بهکار میروند. این نوع ستونها برای استفاده در جداولی که شامل دادههای عددی هستند، مانند جداول فروش یا جداول مالی، کاربرد دارند.
ویژگیها:
مناسب برای نمایش مقادیر عددی: ستونهای Number برای نمایش اعداد در جداول به کار میروند. این اعداد میتوانند شامل قیمتها، مقادیر آماری، یا تعداد موجودیها باشند.
قابلیت تنظیم دقت اعشاری و فرمت نمایش: شما میتوانید تنظیمات خاصی برای دقت اعشاری انجام دهید، مثل تعیین تعداد اعشار برای نمایش قیمتها یا مقادیر دیگر.
امکان استفاده از جداکننده هزارگان: شما میتوانید از جداکننده هزارگان برای اعداد بزرگ استفاده کنید تا خوانایی آنها بیشتر شود.
مثال استفاده:
use Filament\Tables\Columns\NumberColumn;
NumberColumn::make('price')
->label('قیمت');
در این مثال، ستون price مقادیر عددی را برای قیمتها بهصورت خوانا نمایش میدهد.
قابلیتهای اضافی:
تنظیم دقت اعشاری: شما میتوانید تعداد اعشار را تنظیم کنید:
NumberColumn::make('price')
->label('قیمت')
->precision(2); // نمایش قیمتها با دو اعشار
استفاده از جداکننده هزارگان: نمایش اعداد بزرگ بهصورت مرتب و خوانا:
NumberColumn::make('price')
->label('قیمت')
->thousandsSeparator(','); // استفاده از کاما بهعنوان جداکننده هزارگان
فیلترها (Filters) در جداول (Tables) در Filament
در Filament، فیلترها ابزاری بسیار قدرتمند هستند که به شما این امکان را میدهند که دادهها را در جداول بهطور دقیقتری جستجو کرده و نمایش دهید. با استفاده از فیلترها میتوانید جداول خود را با توجه به شرایط خاصی مانند تاریخها، وضعیتها، برچسبها و غیره فیلتر کنید. این ویژگی به کاربرانی که نیاز دارند تا دادههای خاصی را در جداول مشاهده کنند، کمک زیادی میکند.
فیلترهای پیشفرض (Default Filters)
Filament بهطور خودکار فیلترهایی را برای هر ستون در جدول ایجاد میکند. این فیلترها معمولاً شامل گزینههای سادهای مانند فیلتر جستجوی متن، محدوده تاریخ، انتخاب گزینهها و غیره هستند. این نوع فیلترها بهطور پیشفرض فعال هستند و برای بیشتر موارد مورد نیاز، مناسب خواهند بود.
ویژگیها:
فیلترهای پیشفرض: بهطور خودکار برای هر ستون با توجه به نوع داده آن (مانند متن، تاریخ، عدد و غیره) فیلترهایی ارائه میشود.
شامل فیلترهای متنی، تاریخ، و انتخابی: برای دادههای متنی میتوانید فیلتر جستجو کنید، برای دادههای تاریخ میتوانید یک بازه تاریخ را انتخاب کنید و برای دادههای انتخابی (مثل وضعیتها) میتوانید گزینههای مختلف را انتخاب کنید.
مناسب برای استفادههای ساده و عمومی: این فیلترها بهطور معمول برای اکثر جداول کافی هستند و به راحتی میتوانند دادهها را بر اساس ویژگیهای اصلی فیلتر کنند.
مثال:
در این مثال، از یک فیلتر انتخابی (SelectFilter) برای فیلتر کردن وضعیتهای رکوردها استفاده شده است. وضعیتها شامل “منتظر”، “تایید شده” و “رد شده” هستند.
use Filament\Tables\Filters\SelectFilter;
SelectFilter::make('status')
->options([
'pending' => 'منتظر',
'approved' => 'تایید شده',
'rejected' => 'رد شده',
])
->label('وضعیت');
در این مثال:
SelectFilter::make(‘status’): این فیلتر برای ستون status ایجاد میشود.
options(): مقادیر مختلفی که کاربر میتواند از میان آنها انتخاب کند، مانند “منتظر”، “تایید شده” و “رد شده” را تعیین میکند.
label(‘وضعیت’): برچسبی که در بالای فیلتر نمایش داده میشود.
این فیلتر اجازه میدهد تا کاربران وضعیتهای مختلف را انتخاب کرده و دادهها را بر اساس وضعیت فیلتر کنند.
ویژگیهای اضافی فیلترهای پیشفرض:
فیلتر جستجوی متنی: به طور خودکار برای ستونهایی که دادههای متنی دارند، فیلتر جستجو ایجاد میشود.
فیلتر تاریخ: برای ستونهای تاریخ، به طور پیشفرض فیلتر تاریخ (که معمولاً به صورت بازهای از تاریخها است) ایجاد میشود.
فیلتر انتخابی: برای ستونهایی که دادههای انتخابی دارند، فیلترهایی برای انتخاب مقادیر مختلف ایجاد میشود.
ایجاد فیلترهای سفارشی (Custom Filters)
گاهی اوقات نیاز دارید که فیلترهایی با شرایط خاص و سفارشی بسازید. در Filament این امکان وجود دارد که فیلترهای سفارشی خود را ایجاد کنید تا بتوانید دادهها را بر اساس نیازهای خاص خود فیلتر کنید. این نوع فیلترها میتوانند پیچیدهتر از فیلترهای پیشفرض باشند و میتوانند به شما این امکان را بدهند که دادهها را دقیقتر و طبق شرایط خاص فیلتر کنید.
ویژگیها:
سفارشیسازی کامل: شما میتوانید فیلترهای کاملاً سفارشی با استفاده از کلاسهای مختلف مانند SelectFilter، DateFilter، TextFilter و غیره بسازید.
امکان تعیین شرایط پیچیده: میتوانید فیلترهایی با شرایط پیچیدهتر، مانند فیلترهای مبتنی بر تاریخ (بازههای زمانی خاص)، فیلترهای عددی (مثل بزرگتر از یا کوچکتر از)، یا حتی فیلترهای ترکیبی با استفاده از چندین معیار تعریف کنید.
تعریف فیلتر برای هر نوع داده: برای دادههای مختلف مانند تاریخها، مقادیر عددی، وضعیتها، و غیره میتوانید فیلترهای سفارشی بسازید.
مثال:
در این مثال، از فیلتر تاریخ (DateFilter) برای فیلتر کردن رکوردها بر اساس تاریخ ثبت استفاده شده است. این فیلتر به کاربر این امکان را میدهد که یک بازه زمانی برای نمایش رکوردها مشخص کند.
use Filament\Tables\Filters\DateFilter;
DateFilter::make('created_at')
->label('تاریخ ثبت')
->range();
در این مثال:
DateFilter::make(‘created_at’): فیلتر تاریخ برای ستون created_at (که معمولاً تاریخ ثبت رکوردها است) ایجاد میشود.
label(‘تاریخ ثبت’): برچسبی که در بالای فیلتر برای نمایش به کاربر استفاده میشود.
range(): این متد امکان انتخاب یک بازه زمانی را برای فیلتر کردن رکوردها فراهم میکند.
این فیلتر به کاربر این امکان را میدهد که با انتخاب یک بازه زمانی (برای مثال از تاریخ خاصی تا تاریخ دیگر)، رکوردهایی که در آن بازه زمانی ثبت شدهاند را مشاهده کند.
مثال دیگر (فیلتر عددی):
در این مثال، یک فیلتر سفارشی برای فیلتر کردن بر اساس قیمت ایجاد میکنیم که امکان فیلتر با استفاده از شرایط عددی مانند بزرگتر از یا کوچکتر از را فراهم میکند.
use Filament\Tables\Filters\NumericFilter;
NumericFilter::make('price')
->label('قیمت')
->greaterThan(100);
در این مثال:
NumericFilter::make(‘price’): فیلتر عددی برای ستون price ایجاد میشود.
label(‘قیمت’): برچسبی که برای فیلتر استفاده میشود.
greaterThan(100): این متد فیلتر رکوردهایی که قیمت آنها بزرگتر از 100 است را نمایش میدهد.
ویژگیهای اضافی فیلترهای سفارشی:
فیلتر بر اساس بازه زمانی: شما میتوانید فیلترهایی برای تاریخها به صورت بازه زمانی (از تاریخ خاصی تا تاریخ دیگر) یا فیلترهای زمانهای خاص ایجاد کنید.
فیلتر عددی: فیلترهای عددی به شما این امکان را میدهند که دادهها را بر اساس شرایط عددی مانند “بزرگتر از”، “کوچکتر از”، یا “مساوی با” فیلتر کنید.
فیلترهای ترکیبی: میتوانید فیلترهایی ترکیبی بسازید که از چندین معیار مختلف استفاده کنند (مثلاً فیلتر تاریخ به همراه فیلتر وضعیت).
فیلترها در Filament ابزاری بسیار مفید برای جستجو و نمایش دادهها بهطور دقیقتر در جداول هستند. با استفاده از فیلترهای پیشفرض میتوانید جداول را بر اساس شرایط ساده مانند جستجو، تاریخ یا وضعیت فیلتر کنید. اما اگر نیاز به فیلترهای پیچیدهتر دارید، میتوانید فیلترهای سفارشی بسازید که قابلیتهای گستردهتری برای فیلتر کردن دادهها ارائه میدهند. این قابلیتها باعث میشود که تجربه کاربری شما در Filament بسیار کاربرپسندتر و انعطافپذیرتر باشد.
مرتبسازی (Sorting) در جداول (Tables) در Filament
مرتبسازی (Sorting) یکی از ویژگیهای اصلی در طراحی جداول است که به کاربران این امکان را میدهد که دادهها را بر اساس معیارهای خاص بهصورت صعودی یا نزولی ترتیب دهند. در Filament، مرتبسازی بهطور پیشفرض برای بسیاری از ستونها فعال است و در صورت نیاز، میتوان آن را بهصورت دستی نیز تنظیم کرد. این ویژگی به کاربران این امکان را میدهد که دادهها را برای تحلیل و تصمیمگیری آسانتر، بهصورت منطقی و مرتب مشاهده کنند.
مرتبسازی خودکار (Automatic Sorting)
در Filament، مرتبسازی برای اکثر ستونها بهطور خودکار فعال است. وقتی یک جدول بارگذاری میشود، معمولاً دادهها بهصورت پیشفرض براساس یک یا چند ستون بهصورت صعودی یا نزولی مرتب میشوند. این قابلیت باعث میشود که کاربران بدون نیاز به تنظیمات اضافی بتوانند دادهها را بهراحتی مشاهده کنند.
ویژگیها:
فعال بودن مرتبسازی برای اکثر ستونها بهطور پیشفرض: Filament بهطور خودکار مرتبسازی را برای ستونهای متنی، عددی و تاریخی فعال میکند.
مرتبسازی بر اساس دادههای عددی، متنی، یا تاریخی: بسته به نوع داده در ستون، میتوانید مرتبسازی صعودی یا نزولی را برای آن ستون فعال کنید.
سفارشیسازی مرتبسازی پیشفرض: در صورت نیاز، میتوان مرتبسازی پیشفرض را تغییر داده یا ترتیب خاصی برای مرتبسازی دادهها تعیین کرد.
مثال:
در این مثال، مرتبسازی برای ستون name (نام) بهطور خودکار فعال شده است:
use Filament\Tables\Columns\TextColumn;
TextColumn::make('name')
->sortable()
->label('نام');
در این مثال:
TextColumn::make(‘name’): یک ستون متنی به نام name ایجاد میکند.
sortable(): این متد مرتبسازی برای این ستون را فعال میکند، به این معنی که کاربران میتوانند دادهها را بر اساس نام بهصورت صعودی یا نزولی مرتب کنند.
label(‘نام’): برچسبی که برای ستون در جدول نمایش داده میشود.
با این تنظیمات، وقتی کاربران روی هدر ستون “نام” کلیک کنند، دادهها بهصورت صعودی یا نزولی براساس نام مرتب میشوند.
مرتبسازی برای انواع مختلف ستونها
در Filament، امکان مرتبسازی برای انواع مختلف ستونها فراهم شده است. بسته به نوع داده در ستونها، میتوان رفتار مرتبسازی را به گونهای تنظیم کرد که با آن نوع داده همخوانی داشته باشد. این ویژگی میتواند در مواردی مانند تاریخها، اعداد یا مقادیر متنی به کار آید.
مرتبسازی برای ستونهای متنی (Text Columns):
برای ستونهای متنی، مرتبسازی بهصورت الفبایی انجام میشود. بهعنوان مثال، اگر یک جدول شامل اسامی باشد، مرتبسازی بهصورت الفبایی صعودی یا نزولی صورت میگیرد.
مرتبسازی برای ستونهای عددی (Number Columns):
برای ستونهای عددی، مرتبسازی بر اساس مقادیر عددی (نه بر اساس ترتیب الفبایی) انجام میشود. برای مثال، اگر یک جدول شامل قیمتها باشد، میتوانید دادهها را بر اساس قیمتها بهصورت کمترین به بیشترین یا بالعکس مرتب کنید.
مرتبسازی برای ستونهای تاریخی (DateTime Columns):
برای ستونهای تاریخ و زمان، مرتبسازی بهصورت زمانی (بر اساس تاریخ و ساعت) انجام میشود. این کار به کاربران این امکان را میدهد که رکوردها را براساس تاریخ ثبت، تاریخ آخرین بروزرسانی یا هر فیلد تاریخ دیگری مرتب کنند.
مثال برای مرتبسازی ستونهای عددی:
use Filament\Tables\Columns\NumberColumn;
NumberColumn::make('price')
->sortable()
->label('قیمت');
در این مثال:
NumberColumn::make(‘price’): یک ستون عددی به نام price ایجاد میکند.
sortable(): مرتبسازی برای این ستون فعال میشود تا کاربران بتوانند دادهها را بر اساس قیمت بهصورت صعودی یا نزولی مرتب کنند.
مثال برای مرتبسازی ستونهای تاریخ:
use Filament\Tables\Columns\DateTimeColumn;
DateTimeColumn::make('created_at')
->sortable()
->label('تاریخ ثبت');
در این مثال:
DateTimeColumn::make(‘created_at’): یک ستون تاریخ به نام created_at ایجاد میکند.
sortable(): مرتبسازی برای این ستون تاریخ فعال میشود، به این معنی که کاربران میتوانند رکوردها را براساس تاریخ ثبت بهصورت صعودی یا نزولی مرتب کنند.
مرتبسازی چندگانه (Multi-Sorting)
در Filament این امکان وجود دارد که دادهها را بهطور همزمان بر اساس چندین ستون مرتب کنید. این ویژگی به کاربران این امکان را میدهد که دادهها را بر اساس اولویتهای مختلف مرتب کنند.
ویژگیها:
مرتبسازی بر اساس چندین ستون: کاربران میتوانند دادهها را ابتدا بر اساس یک ستون، سپس بر اساس ستون دیگر مرتب کنند.
اولویتگذاری ستونها: در صورتی که یک ستون دارای دادههای مشابه باشد، میتوان آنها را با استفاده از ستون دیگری به ترتیب مرتب کرد.
مثال:
فرض کنید که شما دو ستون name و created_at دارید و میخواهید دادهها را ابتدا بر اساس نام و سپس بر اساس تاریخ ثبت مرتب کنید. این کار با مرتبسازی چندگانه قابل انجام است.
use Filament\Tables\Columns\TextColumn;
use Filament\Tables\Columns\DateTimeColumn;
TextColumn::make('name')
->sortable()
->label('نام');
DateTimeColumn::make('created_at')
->sortable()
->label('تاریخ ثبت');
در این مثال:
وقتی کاربران روی ستون name کلیک کنند، دادهها ابتدا براساس نام مرتب میشوند.
اگر کاربران بخواهند دادهها را پس از مرتبسازی نامها، بر اساس تاریخ ثبت مرتب کنند، میتوانند روی ستون created_at نیز کلیک کنند.
غیرفعال کردن مرتبسازی (Disabling Sorting)
در برخی مواقع، ممکن است بخواهید مرتبسازی را برای یک یا چند ستون غیرفعال کنید. برای این منظور، میتوانید ویژگی sortable() را از ستون حذف کنید یا بهصورت دستی آن را غیرفعال کنید.
ویژگیها:
غیرفعال کردن مرتبسازی برای ستونها: اگر نیازی به مرتبسازی دادهها در یک ستون خاص ندارید، میتوانید مرتبسازی را برای آن ستون غیرفعال کنید.
حفظ سایر ویژگیها: غیرفعال کردن مرتبسازی تنها روی عملکرد مرتبسازی تاثیر میگذارد و سایر ویژگیها و عملکردهای ستون دستنخورده باقی میمانند.
مثال:
برای غیرفعال کردن مرتبسازی برای یک ستون خاص (مثلاً ستون description)، میتوانید کد زیر را استفاده کنید:
use Filament\Tables\Columns\TextColumn;
TextColumn::make('description')
->label('توضیحات'); // بدون فراخوانی sortable()
در این مثال:
هیچ فیلدی برای sortable() تعیین نشده است، بنابراین مرتبسازی برای ستون description غیرفعال است.
مرتبسازی پیشفرض (Default Sorting)
در برخی مواقع ممکن است بخواهید دادهها بهصورت پیشفرض بر اساس یک یا چند ستون مرتب شوند. در این صورت میتوانید بهطور صریح مرتبسازی پیشفرض را تعیین کنید.
ویژگیها:
مرتبسازی دادهها بر اساس یک ستون خاص بهصورت پیشفرض: شما میتوانید انتخاب کنید که دادهها بهطور پیشفرض بهصورت صعودی یا نزولی براساس یک ستون خاص بارگذاری شوند.
پشتیبانی از چندین ستون: میتوانید ترتیب پیشفرض مرتبسازی را برای چندین ستون تعیین کنید.
مثال:
برای مرتبسازی پیشفرض بر اساس ستون created_at بهصورت نزولی، میتوانید از کد زیر استفاده کنید:
use Filament\Tables\Columns\DateTimeColumn;
DateTimeColumn::make('created_at')
->sortable()
->defaultSort('desc')
->label('تاریخ ثبت');
در این مثال:
defaultSort(‘desc’): دادهها بهطور پیشفرض بهصورت نزولی بر اساس تاریخ ثبت (created_at) مرتب میشوند.
اکشنها (Actions) در جداول (Tables) در Filament
در Filament، اکشنها به شما این امکان را میدهند که عملیات مختلفی را بر روی رکوردهای جدول انجام دهید. این اکشنها میتوانند عملیات سادهای مانند ویرایش یا حذف یک رکورد، یا عملیات پیچیدهتری مانند انجام تغییرات گروهی روی چندین رکورد همزمان را شامل شوند. اکشنها در جداول به صورت دکمهها یا قابلیتهای قابل انتخاب برای هر رکورد یا بهصورت گروهی برای چند رکورد ارائه میشوند.
در اینجا به شرح انواع مختلف اکشنها میپردازیم و توضیح میدهیم که چطور میتوانید از آنها استفاده کنید.
EditAction
EditAction یک اکشن است که به کاربران این امکان را میدهد که رکوردهای جدول را بهصورت فردی ویرایش کنند. این اکشن معمولاً بهعنوان دکمهای در هر رکورد در جدول نمایش داده میشود و با کلیک روی آن، کاربر به صفحه ویرایش یا فرم مربوطه منتقل میشود.
ویژگیها:
ویرایش رکوردها: این اکشن معمولاً برای ارسال کاربران به یک فرم ویرایش رکورد خاص طراحی شده است.
امکان سفارشیسازی: میتوانید فرایند ویرایش را به دلخواه خود تنظیم کنید، بهطور مثال میتوانید فرمهای سفارشی برای ویرایش طراحی کنید.
واکنش سریع به تغییرات: این اکشن از تجربه کاربری بهتری برخوردار است و معمولاً در قالب یک مودال (پنجره پاپ آپ) یا صفحه جدید ارائه میشود.
مثال:
use Filament\Tables\Actions\EditAction; EditAction::make();
در این مثال، یک دکمه ویرایش به هر رکورد در جدول افزوده میشود. هنگام کلیک روی این دکمه، فرایند ویرایش برای رکورد مربوطه اجرا میشود.
DeleteAction
DeleteAction برای حذف رکوردها از جدول استفاده میشود. این اکشن معمولاً بهعنوان یک دکمه حذف در هر رکورد نشان داده میشود و زمانی که کاربر آن را انتخاب میکند، رکورد مربوطه از پایگاه داده حذف میشود.
ویژگیها:
حذف رکوردها: این اکشن به کاربران این امکان را میدهد که رکوردهای جدول را بهراحتی حذف کنند.
تایید حذف: برای جلوگیری از حذف تصادفی رکوردها، معمولاً یک پنجره تایید (confirmation) برای این اکشن نمایش داده میشود تا کاربر از حذف رکورد مطمئن شود.
انعطافپذیری: میتوانید این اکشن را بهصورت سفارشی تنظیم کنید تا قبل از حذف رکورد، فرآیندهای اضافی را انجام دهد (مثلاً ارسال یک ایمیل اطلاعرسانی).
مثال:
use Filament\Tables\Actions\DeleteAction; DeleteAction::make();
در این مثال، دکمهای برای حذف رکوردها در جدول نمایش داده میشود. وقتی کاربر روی این دکمه کلیک میکند، رکورد موردنظر حذف خواهد شد.
Batch Actions
Batch Actions به شما این امکان را میدهند که عملیات گروهی را روی چندین رکورد بهطور همزمان انجام دهید. این ویژگی زمانی که میخواهید تغییرات یکسانی را روی چندین رکورد اعمال کنید، بسیار مفید است. برای مثال، ممکن است بخواهید چندین رکورد را حذف کنید یا وضعیت چندین رکورد را تغییر دهید. Batch Actions بهطور معمول بهصورت یک لیست از اقدامات قابل انتخاب در بالای جدول نمایش داده میشوند.
ویژگیها:
انجام عملیات گروهی: این اکشن به شما این امکان را میدهد که چندین رکورد را همزمان ویرایش، حذف یا هر تغییر دیگری را انجام دهید.
انتخاب رکوردها: کاربران میتوانند تعدادی از رکوردها را انتخاب کنند و سپس یک عملیات گروهی را روی آنها اعمال کنند.
عملیاتهای سفارشی: میتوانید عملیاتهای دلخواه خود را روی رکوردهای منتخب انجام دهید. بهعنوان مثال، تغییر وضعیت یک گروه از رکوردها یا ارسال آنها به یک وضعیت خاص.
اطلاعرسانی: معمولاً پس از انجام عملیاتهای گروهی، پیامی نمایش داده میشود که به کاربران تأیید میکند عملیات با موفقیت انجام شده است.
مثال:
use Filament\Tables\Actions\BatchAction;
BatchAction::make('delete_selected')
->action(function ($records) {
foreach ($records as $record) {
$record->delete();
}
});
در این مثال:
BatchAction::make(‘delete_selected’): این کد یک اکشن گروهی با عنوان “حذف انتخابشدهها” ایجاد میکند.
action(function ($records) { … }): این قسمت یک تابع است که برای هر رکورد انتخابشده، عملیات حذف را انجام میدهد.
وقتی کاربر چندین رکورد را انتخاب میکند و این اکشن را اجرا میکند، همه رکوردهای انتخابشده حذف خواهند شد.
کاربردهای Batch Actions:
حذف گروهی رکوردها: حذف چندین رکورد بهطور همزمان.
ویرایش گروهی: تغییر وضعیت یا فیلدهای خاص در چند رکورد.
ارسال گروهی: ارسال اطلاعات از چند رکورد به یک سیستم خارجی.
Custom Actions
شما میتوانید اکشنهای سفارشی خود را برای انجام عملیات خاص در Filament تعریف کنید. این اکشنها میتوانند فرایندهای پیچیدهتری مانند ارسال ایمیل، انجام محاسبات یا تعامل با APIهای خارجی را پیادهسازی کنند.
ویژگیها:
تعریف عملیات دلخواه: این اکشنها به شما این امکان را میدهند که فرایندهایی را که بهطور خاص به نیازهای پروژه شما مرتبط هستند، ایجاد کنید.
ارتباط با سیستمهای دیگر: میتوانید از اکشنها برای تعامل با سیستمهای خارجی مانند APIها، پایگاههای داده دیگر، یا خدمات ابری استفاده کنید.
فرمهای سفارشی: میتوانید فرمهایی برای انجام عملیات خاص ایجاد کنید که در آنها اطلاعات بیشتری از کاربران گرفته شود.
مثال:
use Filament\Tables\Actions\Action;
Action::make('send_email')
->label('ارسال ایمیل')
->action(function ($record) {
// ارسال ایمیل برای رکورد خاص
Mail::to($record->email)->send(new MyCustomMail($record));
});
در این مثال:
Action::make(‘send_email’): یک اکشن سفارشی به نام “ارسال ایمیل” ایجاد میکند.
action(function ($record) { … }): این کد عملکرد اکشن را تعریف میکند. در اینجا، برای رکورد خاص یک ایمیل ارسال میشود.
Action Visibility (نمایش اکشنها)
در برخی مواقع، ممکن است بخواهید اکشنها فقط در شرایط خاصی نمایش داده شوند. برای این منظور، میتوانید ویژگیهایی مانند visible() را برای تعیین شرایط نمایشی اکشنها استفاده کنید.
مثال:
use Filament\Tables\Actions\DeleteAction;
DeleteAction::make()
->visible(fn ($record) => $record->status !== 'archived');
در این مثال:
اکشن حذف فقط برای رکوردهایی که وضعیت آنها “archived” نیست نمایش داده میشود.
نتیجهگیری
استفاده از Filament برای ساخت جداول مدیریتی در برنامههای Laravel یک راهکار قدرتمند و انعطافپذیر است که امکانات زیادی برای مدیریت دادهها بهصورت بصری و کاربرپسند فراهم میکند. با استفاده از ستونها (Columns) برای نمایش انواع دادهها، فیلترها (Filters) برای جستجو و مرتبسازی دادهها، و اکشنها (Actions) برای انجام عملیات مختلف مانند ویرایش، حذف و عملیات گروهی، میتوانید تجربه کاربری بهتری ایجاد کنید. علاوه بر این، ویژگیهایی مانند مرتبسازی (Sorting)، ویژگیهای سفارشی و عملیات گروهی باعث میشوند که Filament به ابزاری ایدهآل برای پروژههای Laravel تبدیل شود.
در نتیجه، اگر به دنبال راهی ساده و کارآمد برای ساخت پنلهای مدیریت پیچیده و قدرتمند هستید، Filament گزینهای بسیار مناسب است که تمامی نیازهای شما را در زمینه نمایش، جستجو و مدیریت دادهها به بهترین شکل ممکن برآورده خواهد کرد.
