تم تاریک

جدول Table ​

جدول سرخآب، ابزاری قدرتمند برای نمایش، سازماندهی و مدیریت حجم عظیمی از داده‌هاست. این کامپوننت مجموعه‌ای از قابلیت‌های تعاملی را برای تسهیل در پایش و تصمیم‌گیری سریع کاربران در محیط‌های پیچیده فراهم می‌کند.

نمونه زنده ​

منابع

اقدام دسته‌جمعی
شناسه
عنوان
وضعیت
تاریخ
1
منبع ب
فعال
۳۰/۱۲/۱۴۰۴
2
منبع پ
متوقف
۳۰/۱۲/۱۴۰۴
3
منبع الف
فعال
۳۰/۱۲/۱۴۰۴
توجه
این جدول یک نمونه نمایشی است و داده‌های واقعی محصول نیست.
10 itemsSelect option
Go to

آناتومی ​

anatomy

  1. هدر جدول (Table Header): عنوان اصلی جدول و مشخص کننده موضوع اصلی

  2. بخش کنترلی (Control Area): اکشن‌های اصلی جدول به همراه اکشن‌های گروهی

  3. فیلتر (Filter): نوار بالای جدول شامل جست‌وجو، فیلترینگ و اکشن‌های کلی.

  4. بدنه (Rows & Cells): محل قرارگیری داده‌های اصلی، هر ردیف معرف یک رکورد و هر سلول معرف یک ویژگی است.

  5. صفحه‌بندی (Pagination): ابزارهای ناوبری بین صفحات و نمایش تعداد کل داده‌ها.

قابلیت‌های کلیدی ​

۱. مرتب‌سازی ​

هر ستون می‌تواند قابلیت مرتب‌سازی صعودی/نزولی داشته باشد. برای کاهش شلوغی بصری، آیکون سورت تنها در زمان فعال بودن یا در حالت Hover نمایش داده می‌شود.

۲. مدیریت ستون‌ها و پین کردن ​

در جداول عریض، می‌توان ستون‌های حیاتی (مانند نام یا وضعیت) را در سمت راست یا چپ پین کرد تا با اسکرول افقی از دید خارج نشوند.

Fixed Columns

۳. انتخاب دسته‌جمعی ​

با انتخاب یک یا چند ردیف، نوار اکشن‌های دسته‌جمعی (Bulk Action Bar) فعال می‌شود.

bulk-action

انواع سلول‌ها ​

جدول سرخآب از انواع محتوا در سلول‌ها پشتیبانی می‌کند:

  • Text & Badges: برای نمایش نام‌ها و وضعیت‌ها (مثال Badge سبز برای Active).
  • Progress Bar: برای نمایش بصری مصرف منابع (CPU/RAM).
  • Avatar/Icons: برای شناسایی سریع‌تر برندها یا سیستم‌عامل‌ها.
  • Interactive Elements: دکمه‌ها، لینک‌ها و سوئیچ‌ها.

راهنمای استفاده ​

بایدها ​

  • ترازبندی: در تمامی نسخه‌های پنل، ستون‌ها باید راست‌چین (Right-aligned) باشند (فارغ از زبان محتوا).
  • پین کردن: در جداول با بیش از ۸ ستون، حتما ستون شناسه‌ی اصلی را پین کنید.
  • تعداد آیتم: به صورت پیش‌فرض تعداد ۱۰ یا ۲۰ ردیف در هر صفحه نمایش دهید.

نبایدها ​

  • متن طولانی: از قرار دادن متون طولانی بدون قابلیت Truncate (خلاصه کردن با ...) خودداری کنید.
  • سورت همگانی: تمام ستون‌ها را سورت‌بل نکنید، فقط ستون‌هایی که ارزش تحلیلی دارند (مثل تاریخ یا قیمت) نیاز به سورت دارند.

رفتار در صفحات کوچک ​

  1. Horizontal Scroll: اسکرول افقی با حفظ ستون‌های پین شده (ترجیحی).
  2. Card View: تبدیل هر ردیف به یک کارت مجزا در موبایل برای خوانایی بهتر تمام داده‌ها.