Ecme logoEcme logo
داشبورد
    فروشگاه آنلاین
    پروژه
    بازاریابی
    تحلیل
مفاهیم
    هوش مصنوعی
      گفتگو
      تصویر
    پروژه‌ها
      تابلوی اسکرام
      فهرست
      جزئیات
      وظایف
      مسائل
    مشتریان
      فهرست
      ویرایش
      ایجاد
      جزئیات
    محصولات
      فهرست
      ویرایش
      ایجاد
    سفارش‌ها
      فهرست
      ویرایش
      ایجاد
      جزئیات
    حساب کاربری
      تنظیمات
      سابقه فعالیت
      نقش‌ها و دسترسی‌ها
      تعرفه‌ها
    مرکز راهنمایی
      مرکز پشتیبانی
      مقاله
      ویرایش مقاله
      مدیریت مقاله
    تقویم
    مدیریت فایل
    ایمیل
    گفتگو
اجزای رابط کاربری
    عمومی
      دکمه
      شبکه
      تایپوگرافی
      نمادها
    بازخورد
      هشدار
      پنجره گفتگو
      منوی کشویی
      نوار پیشرفت
      پیش‌نمایش
      نشانگر بارگذاری
      پیام موقت
    نمایش اطلاعات
      تصویر کاربر
      نشانک
      تقویم
      کارت‌ها
      جدول
      برچسب
      خط زمان
      راهنمای ابزار
    فرم‌ها
      کادر انتخاب
      انتخابگر تاریخ
      کنترل‌های فرم
      ورودی
      گروه ورودی
      دکمه رادیویی
      بخش
      انتخابگر
      کلید دوحالته
      ورودی زمان
      بارگذاری
    ناوبری
      منوی کشویی
      منو
      صفحه‌بندی
      گام‌ها
      زبانه‌ها
    نمودار
      نمودارها
      نقشه‌ها
احراز هویت
    ورود به سیستم
      ساده
      کناری
      دوبخشی
    ثبت‌نام
      ساده
      کناری
      دوبخشی
    بازیابی رمز عبور
      ساده
      کناری
      دوبخشی
    بازنشانی رمز عبور
      ساده
      کناری
      دوبخشی
    تایید رمز یکبار مصرف
      ساده
      کناری
      دوبخشی
سایر
    دسترسی غیرمجاز
    صفحه فرود
راهنما
    مستندات
    اجزای اشتراکی
    ابزارها
    تاریخچه تغییرات
حق نشر © 2026 Ecme تمامی حقوق محفوظ است.
شرایط و ضوابط | حریم خصوصی و سیاست

جدول (Table)

جداول داده‌ها را در ردیف‌ها و ستون‌ها نمایش می‌دهند که مقایسه و تحلیل اطلاعات را برای کاربران آسان‌تر می‌کند.

ساده (Simple)

مثالی از جدول ساده.
شرکتتماسکشور
آلفردز فوترکیستهماریا آندرسآلمان
مرکز خرید موکتزومهفرانسیسکو چانگمکزیک
ارنست هاندلرولاند مندلاتریش

فشرده (Compact)

جدول با نمای فشرده که امکان نمایش داده‌های بیشتری را فراهم می‌کند.
شرکتتماسکشور
آلفردز فوترکیستهماریا آندرسآلمان
مرکز خرید موکتزومهفرانسیسکو چانگمکزیک
ارنست هاندلرولاند مندلاتریش

مرتب‌سازی (Sorting)

ستون‌ها با انتخاب سرصفحه‌های جدول قابل مرتب‌سازی هستند.
نام
نام خانوادگی
سن
بازدیدها
وضعیت
پیشرفت پروفایل
ماریاآندرس2428پیچیده56
فرانسیسکوچانگ990مجرد77
رولندمندل116مجرد56
هلنبنت4394مجرد53
یوشیتناموری3785مجرد28

فیلتر کردن (Filtering)

مثالی از فیلتر کردن.
جستجو کنید:
نام کوچک
نام خانوادگی
ایمیل
AlastairDilkesadilkes0@jigsy.com
MatthaeusGrabermgraber1@adobe.com
GayelCroxleygcroxley2@businessinsider.com
GraciaDomegangdomegan3@reference.com
GalvanBeringergberinger4@yellowpages.com
MaudAichesonmaicheson5@ycombinator.com
GwenetteDaileygdailey6@state.tx.us
MariusLemanmleman7@cnn.com
NatkaVarcoenvarcoe8@hhs.gov
KellieAckerleykackerley9@posterous.com

صفحه‌بندی (Pagination)

جدول می‌تواند با کامپوننت صفحه‌بندی کار کند.
نامنام خانوادگیسن
ماریا 0آندرس 00
ماریا 1آندرس 11
ماریا 2آندرس 22
ماریا 3آندرس 33
ماریا 4آندرس 44
ماریا 5آندرس 55
ماریا 6آندرس 66
ماریا 7آندرس 77
ماریا 8آندرس 88
ماریا 9آندرس 99
  • 1
  • 10
10 / صفحه

گروه‌بندی (Group)

مثالی از گروه‌بندی.
ناماطلاعات
نام کوچکنام خانوادگیایمیلبازدیدها
AlastairDilkesadilkes0@jigsy.comFemale
MatthaeusGrabermgraber1@adobe.comGenderqueer
GayelCroxleygcroxley2@businessinsider.comMale
GraciaDomegangdomegan3@reference.comGenderfluid
GalvanBeringergberinger4@yellowpages.comAgender
MaudAichesonmaicheson5@ycombinator.comMale
GwenetteDaileygdailey6@state.tx.usGenderfluid
MariusLemanmleman7@cnn.comGenderfluid
NatkaVarcoenvarcoe8@hhs.govMale
KellieAckerleykackerley9@posterous.comGenderfluid

انتخاب ردیف (Row Selection)

مثالی از انتخاب ردیف.
نامنام خانوادگیایمیل
AlastairDilkesadilkes0@jigsy.com
MatthaeusGrabermgraber1@adobe.com
GayelCroxleygcroxley2@businessinsider.com
GraciaDomegangdomegan3@reference.com
GalvanBeringergberinger4@yellowpages.com
MaudAichesonmaicheson5@ycombinator.com
GwenetteDaileygdailey6@state.tx.us
MariusLemanmleman7@cnn.com
NatkaVarcoenvarcoe8@hhs.gov
KellieAckerleykackerley9@posterous.com

باز کردن (Expanding)

مثالی از باز کردن ردیف.
نامنام خانوادگیسنبازدیدهاوضعیتپیشرفت پروفایل
MariaAnders2428complicated56
FranciscoChang990single77
RolandMendel116single56
HelenBennett4394single53
Yoshi Tannamuri3785single28

زیرکامپوننت (SubComponent)

باز کردن ردیف با زیرکامپوننت.
نامنام خانوادگیسنبازدیدهاوضعیتپیشرفت پروفایل
MariaAnders2428complicated56
FranciscoChang990single77
RolandMendel116single56
HelenBennett4394single53
Yoshi Tannamuri3785single28

قابل ویرایش (Editable)

مثالی از سلول قابل ویرایش.
نام کوچکنام خانوادگیایمیل

کشیدن و رها کردن (Drag & Drop)

مثالی از پیاده‌سازی react-dnd در جدول.
نام کوچکنام خانوادگیایمیل
AlastairDilkesadilkes0@jigsy.com
MatthaeusGrabermgraber1@adobe.com
GayelCroxleygcroxley2@businessinsider.com
GraciaDomegangdomegan3@reference.com
GalvanBeringergberinger4@yellowpages.com
MaudAichesonmaicheson5@ycombinator.com
GwenetteDaileygdailey6@state.tx.us
MariusLemanmleman7@cnn.com
NatkaVarcoenvarcoe8@hhs.gov
KellieAckerleykackerley9@posterous.com

قابل تغییر اندازه (Resizable)

مثالی از تغییر اندازه ستون‌ها.
نام
نام خانوادگی
ایمیل
جنسیت
AlastairDilkesadilkes0@jigsy.comFemale
MatthaeusGrabermgraber1@adobe.comGenderqueer
GayelCroxleygcroxley2@businessinsider.comMale
GraciaDomegangdomegan3@reference.comGenderfluid
GalvanBeringergberinger4@yellowpages.comAgender
MaudAichesonmaicheson5@ycombinator.comMale
GwenetteDaileygdailey6@state.tx.usGenderfluid
MariusLemanmleman7@cnn.comGenderfluid
NatkaVarcoenvarcoe8@hhs.govMale
KellieAckerleykackerley9@posterous.comGenderfluid

API

جدول (Table)
ویژگیتوضیحاتنوعپیش‌فرض
asElementعنصر رندر شدهstring'table'
borderlessRowآیا مرز ردیف در جدول غیرفعال شودbooleanfalse
compactآیا جدول به صورت فشرده نمایش داده شودbooleanfalse
hoverableآیا ردیف‌های جدول قابلیت هاور (hover) شدن را دارندbooleantrue
overflowآیا اجازه داده شود محتوای جدول از حد خود خارج شودbooleantrue
Table.THead
ویژگیتوضیحاتنوعپیش‌فرض
asElementعنصر رندر شدهstring'thead'
Table.TBody
ویژگیتوضیحاتنوعپیش‌فرض
asElementعنصر رندر شدهstring'tbody'
Table.TFoot
ویژگیتوضیحاتنوعپیش‌فرض
asElementعنصر رندر شدهstring'tfoot'
Table.Tr
ویژگیتوضیحاتنوعپیش‌فرض
asElementعنصر رندر شدهstring'tr'
Table.Th
ویژگیتوضیحاتنوعپیش‌فرض
asElementعنصر رندر شدهstring'th'
Table.Td
ویژگیتوضیحاتنوعپیش‌فرض
asElementعنصر رندر شدهstring'td'
Table.Sorter
ویژگیتوضیحاتنوعپیش‌فرض
sortوضعیت مرتب‌سازیfalse | 'asc' | 'desc'-

وابستگی‌ها

React Table

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

فهرست مطالب
  • ساده (Simple)
  • فشرده (Compact)
  • مرتب‌سازی (Sorting)
  • فیلتر کردن (Filtering)
  • صفحه‌بندی (Pagination)
  • گروه‌بندی (Group)
  • انتخاب ردیف (Row Selection)
  • باز کردن (Expanding)
  • زیرکامپوننت (SubComponent)
  • قابل ویرایش (Editable)
  • کشیدن و رها کردن (Drag & Drop)
  • قابل تغییر اندازه (Resizable)