جدول (Table)
جداول دادهها را در ردیفها و ستونها نمایش میدهند که مقایسه و تحلیل اطلاعات را برای کاربران آسانتر میکند.
ساده (Simple)
مثالی از جدول ساده.
| شرکت | تماس | کشور |
|---|---|---|
| آلفردز فوترکیسته | ماریا آندرس | آلمان |
| مرکز خرید موکتزومه | فرانسیسکو چانگ | مکزیک |
| ارنست هاندل | رولاند مندل | اتریش |
فشرده (Compact)
جدول با نمای فشرده که امکان نمایش دادههای بیشتری را فراهم میکند.
| شرکت | تماس | کشور |
|---|---|---|
| آلفردز فوترکیسته | ماریا آندرس | آلمان |
| مرکز خرید موکتزومه | فرانسیسکو چانگ | مکزیک |
| ارنست هاندل | رولاند مندل | اتریش |
مرتبسازی (Sorting)
ستونها با انتخاب سرصفحههای جدول قابل مرتبسازی هستند.
نام | نام خانوادگی | سن | بازدیدها | وضعیت | پیشرفت پروفایل |
|---|---|---|---|---|---|
| ماریا | آندرس | 24 | 28 | پیچیده | 56 |
| فرانسیسکو | چانگ | 9 | 90 | مجرد | 77 |
| رولند | مندل | 1 | 16 | مجرد | 56 |
| هلن | بنت | 43 | 94 | مجرد | 53 |
| یوشی | تناموری | 37 | 85 | مجرد | 28 |
فیلتر کردن (Filtering)
مثالی از فیلتر کردن.
جستجو کنید:
نام کوچک | نام خانوادگی | ایمیل |
|---|---|---|
| Alastair | Dilkes | adilkes0@jigsy.com |
| Matthaeus | Graber | mgraber1@adobe.com |
| Gayel | Croxley | gcroxley2@businessinsider.com |
| Gracia | Domegan | gdomegan3@reference.com |
| Galvan | Beringer | gberinger4@yellowpages.com |
| Maud | Aicheson | maicheson5@ycombinator.com |
| Gwenette | Dailey | gdailey6@state.tx.us |
| Marius | Leman | mleman7@cnn.com |
| Natka | Varcoe | nvarcoe8@hhs.gov |
| Kellie | Ackerley | kackerley9@posterous.com |
صفحهبندی (Pagination)
جدول میتواند با کامپوننت صفحهبندی کار کند.
| نام | نام خانوادگی | سن |
|---|---|---|
| ماریا 0 | آندرس 0 | 0 |
| ماریا 1 | آندرس 1 | 1 |
| ماریا 2 | آندرس 2 | 2 |
| ماریا 3 | آندرس 3 | 3 |
| ماریا 4 | آندرس 4 | 4 |
| ماریا 5 | آندرس 5 | 5 |
| ماریا 6 | آندرس 6 | 6 |
| ماریا 7 | آندرس 7 | 7 |
| ماریا 8 | آندرس 8 | 8 |
| ماریا 9 | آندرس 9 | 9 |
- 1
- 10
10 / صفحه
گروهبندی (Group)
مثالی از گروهبندی.
| نام | اطلاعات | ||
|---|---|---|---|
| نام کوچک | نام خانوادگی | ایمیل | بازدیدها |
| Alastair | Dilkes | adilkes0@jigsy.com | Female |
| Matthaeus | Graber | mgraber1@adobe.com | Genderqueer |
| Gayel | Croxley | gcroxley2@businessinsider.com | Male |
| Gracia | Domegan | gdomegan3@reference.com | Genderfluid |
| Galvan | Beringer | gberinger4@yellowpages.com | Agender |
| Maud | Aicheson | maicheson5@ycombinator.com | Male |
| Gwenette | Dailey | gdailey6@state.tx.us | Genderfluid |
| Marius | Leman | mleman7@cnn.com | Genderfluid |
| Natka | Varcoe | nvarcoe8@hhs.gov | Male |
| Kellie | Ackerley | kackerley9@posterous.com | Genderfluid |
انتخاب ردیف (Row Selection)
مثالی از انتخاب ردیف.
| نام | نام خانوادگی | ایمیل | |
|---|---|---|---|
| Alastair | Dilkes | adilkes0@jigsy.com | |
| Matthaeus | Graber | mgraber1@adobe.com | |
| Gayel | Croxley | gcroxley2@businessinsider.com | |
| Gracia | Domegan | gdomegan3@reference.com | |
| Galvan | Beringer | gberinger4@yellowpages.com | |
| Maud | Aicheson | maicheson5@ycombinator.com | |
| Gwenette | Dailey | gdailey6@state.tx.us | |
| Marius | Leman | mleman7@cnn.com | |
| Natka | Varcoe | nvarcoe8@hhs.gov | |
| Kellie | Ackerley | kackerley9@posterous.com |
باز کردن (Expanding)
مثالی از باز کردن ردیف.
| نام | نام خانوادگی | سن | بازدیدها | وضعیت | پیشرفت پروفایل | |
|---|---|---|---|---|---|---|
| Maria | Anders | 24 | 28 | complicated | 56 | |
| Francisco | Chang | 9 | 90 | single | 77 | |
| Roland | Mendel | 1 | 16 | single | 56 | |
| Helen | Bennett | 43 | 94 | single | 53 | |
| Yoshi | Tannamuri | 37 | 85 | single | 28 |
زیرکامپوننت (SubComponent)
باز کردن ردیف با زیرکامپوننت.
| نام | نام خانوادگی | سن | بازدیدها | وضعیت | پیشرفت پروفایل | |
|---|---|---|---|---|---|---|
| Maria | Anders | 24 | 28 | complicated | 56 | |
| Francisco | Chang | 9 | 90 | single | 77 | |
| Roland | Mendel | 1 | 16 | single | 56 | |
| Helen | Bennett | 43 | 94 | single | 53 | |
| Yoshi | Tannamuri | 37 | 85 | single | 28 |
قابل ویرایش (Editable)
مثالی از سلول قابل ویرایش.
| نام کوچک | نام خانوادگی | ایمیل |
|---|---|---|
کشیدن و رها کردن (Drag & Drop)
مثالی از پیادهسازی
react-dnd در جدول.| نام کوچک | نام خانوادگی | ایمیل | |
|---|---|---|---|
| Alastair | Dilkes | adilkes0@jigsy.com | |
| Matthaeus | Graber | mgraber1@adobe.com | |
| Gayel | Croxley | gcroxley2@businessinsider.com | |
| Gracia | Domegan | gdomegan3@reference.com | |
| Galvan | Beringer | gberinger4@yellowpages.com | |
| Maud | Aicheson | maicheson5@ycombinator.com | |
| Gwenette | Dailey | gdailey6@state.tx.us | |
| Marius | Leman | mleman7@cnn.com | |
| Natka | Varcoe | nvarcoe8@hhs.gov | |
| Kellie | Ackerley | kackerley9@posterous.com |
قابل تغییر اندازه (Resizable)
مثالی از تغییر اندازه ستونها.
| نام | نام خانوادگی | ایمیل | جنسیت |
|---|---|---|---|
| Alastair | Dilkes | adilkes0@jigsy.com | Female |
| Matthaeus | Graber | mgraber1@adobe.com | Genderqueer |
| Gayel | Croxley | gcroxley2@businessinsider.com | Male |
| Gracia | Domegan | gdomegan3@reference.com | Genderfluid |
| Galvan | Beringer | gberinger4@yellowpages.com | Agender |
| Maud | Aicheson | maicheson5@ycombinator.com | Male |
| Gwenette | Dailey | gdailey6@state.tx.us | Genderfluid |
| Marius | Leman | mleman7@cnn.com | Genderfluid |
| Natka | Varcoe | nvarcoe8@hhs.gov | Male |
| Kellie | Ackerley | kackerley9@posterous.com | Genderfluid |
API
جدول (Table)
| ویژگی | توضیحات | نوع | پیشفرض |
|---|---|---|---|
| asElement | عنصر رندر شده | string | 'table' |
| borderlessRow | آیا مرز ردیف در جدول غیرفعال شود | boolean | false |
| compact | آیا جدول به صورت فشرده نمایش داده شود | boolean | false |
| hoverable | آیا ردیفهای جدول قابلیت هاور (hover) شدن را دارند | boolean | true |
| overflow | آیا اجازه داده شود محتوای جدول از حد خود خارج شود | boolean | true |
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 یکپارچه شدهاند، این یک کامپوننت جدول داده سبک و قابل توسعه برای فیلتر، مرتبسازی، گروهبندی، تجمیع، صفحهبندی و نمایش دادههای عظیم است. برای مشاهده مستندات رسمی برای مثالهای بیشتر و نحوه استفاده از هوکها.