تیل وایز - قالب داشبورد مدیریتی

پایه جدول

نمایش کد نمونه

The "پایه جدول" component provides a straightforward اپلیکیشن‌ها فراهم می‌کند. این سبک جدول تمیز و کم حجم است، برنامه‌ها. This table style is clean and minimal, این مثال نشان می‌دهد که چگونه یک جدول پایه با ستون‌های "نام اول"، "نام آخر" و

کد / پیش‌نمایش نمونه

#	اسم کوچک	نام خانوادگی	نام کاربری
1	آنجلینا	چارلی	@angelinajolie
2	برد	هانم	@bradpitt
3	مثال بالا نشان می‌دهد که چگونه یک جدول پایه را با ستون‌های "نام اول"، "نام آخر" و	"نام کاربری" ایجاد کنید. این جدول آسان به خواندن است و می‌توانید آن را برای نیازهای برنامه‌ی خود سفارشی‌سازی کنید. از	@charliehunnam

#	اسم کوچک	نام خانوادگی	نام کاربری
1	آنجلینا	چارلی	@angelinajolie
2	برد	هانم	@bradpitt
3	مثال بالا نشان می‌دهد که چگونه یک جدول پایه را با ستون‌های "نام اول"، "نام آخر" و	"نام کاربری" ایجاد کنید. این جدول آسان به خواندن است و می‌توانید آن را برای نیازهای برنامه‌ی خود سفارشی‌سازی کنید. از	@charliehunnam

            
                HTMLOpenTagdiv class="overflow-x-auto"HTMLCloseTag
                                                    HTMLOpenTagtable
    data-tw-merge
    class="w-full rtl:text-right ltr:text-left"
HTMLCloseTag
    HTMLOpenTagthead
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagtr
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    #
HTMLOpenTag/thHTMLCloseTag
                                                                HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    اسم کوچک
HTMLOpenTag/thHTMLCloseTag
                                                                HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    نام خانوادگی
HTMLOpenTag/thHTMLCloseTag
                                                                HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    نام کاربری
HTMLOpenTag/thHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
HTMLOpenTag/theadHTMLCloseTag
                                                        HTMLOpenTagtbodyHTMLCloseTag
    HTMLOpenTagtr
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    1
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    آنجلینا
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    چارلی
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    @angelinajolie
HTMLOpenTag/tdHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
                                                            HTMLOpenTagtr
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    2
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    برد
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    هانم
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    @bradpitt
HTMLOpenTag/tdHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
                                                            HTMLOpenTagtr
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    3
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    مثال بالا نشان می‌دهد که چگونه یک جدول پایه را با ستون‌های "نام اول"، "نام آخر" و
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    "نام کاربری" ایجاد کنید. این جدول آسان به خواندن است و می‌توانید آن را برای نیازهای برنامه‌ی خود سفارشی‌سازی کنید. از
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    @charliehunnam
HTMLOpenTag/tdHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
HTMLOpenTag/tbodyHTMLCloseTag
HTMLOpenTag/tableHTMLCloseTag
                                                    HTMLOpenTagtable
    data-tw-merge
    class="w-full rtl:text-right ltr:text-left bg-dark text-white dark:bg-black/30 mt-5"
HTMLCloseTag
    HTMLOpenTagthead
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagtr
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 border-slate-600 dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    #
HTMLOpenTag/thHTMLCloseTag
                                                                HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 border-slate-600 dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    اسم کوچک
HTMLOpenTag/thHTMLCloseTag
                                                                HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 border-slate-600 dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    نام خانوادگی
HTMLOpenTag/thHTMLCloseTag
                                                                HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 border-slate-600 dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    نام کاربری
HTMLOpenTag/thHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
HTMLOpenTag/theadHTMLCloseTag
                                                        HTMLOpenTagtbodyHTMLCloseTag
    HTMLOpenTagtr
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-slate-600 dark:border-darkmode-300"
HTMLCloseTag
    1
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-slate-600 dark:border-darkmode-300"
HTMLCloseTag
    آنجلینا
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-slate-600 dark:border-darkmode-300"
HTMLCloseTag
    چارلی
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-slate-600 dark:border-darkmode-300"
HTMLCloseTag
    @angelinajolie
HTMLOpenTag/tdHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
                                                            HTMLOpenTagtr
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-slate-600 dark:border-darkmode-300"
HTMLCloseTag
    2
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-slate-600 dark:border-darkmode-300"
HTMLCloseTag
    برد
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-slate-600 dark:border-darkmode-300"
HTMLCloseTag
    هانم
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-slate-600 dark:border-darkmode-300"
HTMLCloseTag
    @bradpitt
HTMLOpenTag/tdHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
                                                            HTMLOpenTagtr
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-slate-600 dark:border-darkmode-300"
HTMLCloseTag
    3
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-slate-600 dark:border-darkmode-300"
HTMLCloseTag
    مثال بالا نشان می‌دهد که چگونه یک جدول پایه را با ستون‌های "نام اول"، "نام آخر" و
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-slate-600 dark:border-darkmode-300"
HTMLCloseTag
    "نام کاربری" ایجاد کنید. این جدول آسان به خواندن است و می‌توانید آن را برای نیازهای برنامه‌ی خود سفارشی‌سازی کنید. از
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-slate-600 dark:border-darkmode-300"
HTMLCloseTag
    @charliehunnam
HTMLOpenTag/tdHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
HTMLOpenTag/tbodyHTMLCloseTag
HTMLOpenTag/tableHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag

کامپوننت "جدول پایه" زمانی استفاده کنید که می‌خواهید یک table with columns for "اسم کوچک," "نام خانوادگی," and "نام کاربری." The table is easy to read and can be برای سفارشی‌سازی بیشتر و تطابق با نیازهای برنامه‌ی خود استفاده کنید the "پایه جدول" component when you want a simple, تمیز و بدون پوشش یا complexity.

جدول حاشیه‌دار

نمایش کد نمونه

The "جدول حاشیه‌دار" component is a variation of the جدول پایه است که ویژگی اضافی حاشیه‌ها دور جدول و سلول‌هایش را دارد. این انتخاب استایلی تمایز بصری بین ردیف‌ها و ستون‌ها را افزایش می‌دهد و محتوای جدول را مشخص‌تر و سازمان‌دهی‌شده‌تر می‌کند.

کد / پیش‌نمایش نمونه

#	اسم کوچک	نام خانوادگی	نام کاربری
1	آنجلینا	چارلی	@angelinajolie
2	برد	هانم	@bradpitt
3	مثال بالا نشان می‌دهد که چگونه یک جدول پایه را با ستون‌های "نام اول"، "نام آخر" و	"نام کاربری" ایجاد کنید. این جدول آسان به خواندن است و می‌توانید آن را برای نیازهای برنامه‌ی خود سفارشی‌سازی کنید. از	@charliehunnam

            
                HTMLOpenTagdiv class="overflow-x-auto"HTMLCloseTag
                                                    HTMLOpenTagtable
    data-tw-merge
    class="w-full rtl:text-right ltr:text-left"
HTMLCloseTag
    HTMLOpenTagthead
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagtr
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 border-l border-r border-t whitespace-nowrap"
HTMLCloseTag
    #
HTMLOpenTag/thHTMLCloseTag
                                                                HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 border-l border-r border-t whitespace-nowrap"
HTMLCloseTag
    اسم کوچک
HTMLOpenTag/thHTMLCloseTag
                                                                HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 border-l border-r border-t whitespace-nowrap"
HTMLCloseTag
    نام خانوادگی
HTMLOpenTag/thHTMLCloseTag
                                                                HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 border-l border-r border-t whitespace-nowrap"
HTMLCloseTag
    نام کاربری
HTMLOpenTag/thHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
HTMLOpenTag/theadHTMLCloseTag
                                                        HTMLOpenTagtbodyHTMLCloseTag
    HTMLOpenTagtr
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t"
HTMLCloseTag
    1
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t"
HTMLCloseTag
    آنجلینا
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t"
HTMLCloseTag
    چارلی
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t"
HTMLCloseTag
    @angelinajolie
HTMLOpenTag/tdHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
                                                            HTMLOpenTagtr
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t"
HTMLCloseTag
    2
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t"
HTMLCloseTag
    برد
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t"
HTMLCloseTag
    هانم
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t"
HTMLCloseTag
    @bradpitt
HTMLOpenTag/tdHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
                                                            HTMLOpenTagtr
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t"
HTMLCloseTag
    3
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t"
HTMLCloseTag
    مثال بالا نشان می‌دهد که چگونه یک جدول پایه را با ستون‌های "نام اول"، "نام آخر" و
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t"
HTMLCloseTag
    "نام کاربری" ایجاد کنید. این جدول آسان به خواندن است و می‌توانید آن را برای نیازهای برنامه‌ی خود سفارشی‌سازی کنید. از
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t"
HTMLCloseTag
    @charliehunnam
HTMLOpenTag/tdHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
HTMLOpenTag/tbodyHTMLCloseTag
HTMLOpenTag/tableHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag

در این مثال، یک "جدول حاشیه‌دار" با حاشیه‌های دور جدول و سلول‌هایش ایجاد می‌شود. این تمایز بصری اضافی می‌تواند به‌ویژه زمانی که می‌خواهید ساختار جدول خود را تأکید دهید، مفید باشد. از کامپوننت "جدول با حاشیه" زمانی استفاده کنید که نیاز به جدول با حاشیه‌های مشخص برای بهبود جداکردن بصری بین ردیف‌ها و ستون‌ها باشد.

جدول قابل شناور

نمایش کد نمونه

The "جدول قابل شناور" component is designed to enhance ردیف‌های جدول. زمانی که کاربران موس خود را بر روی یک ردیف قرار می‌دهند، آن ردیف برجسته می‌شود و یک روند بصری ارائه می‌دهد و تعامل را بهبود می‌بخشد. در این مثال، یک "جدول قابل هاور" با افزودن prop هاور به کامپوننت جدول ایجاد شده است. هنگامی که کاربران بر روی ردیف‌ها هاور می‌کنند، به طور بصری با برجسته شدن پاسخ می‌دهند، که ارتباطاتشان را ردیابی کردن آسان‌تر می‌کند. از کامپوننت "جدول قابل هاور" زمانی استفاده کنید که می‌خواهید در محتوای مبتنی بر جدولتان تعامل کاربر را بهبود بخشید. بهبود تعامل

کد / پیش‌نمایش نمونه

#	اسم کوچک	نام خانوادگی	نام کاربری
1	آنجلینا	چارلی	@angelinajolie
2	برد	هانم	@bradpitt
3	مثال بالا نشان می‌دهد که چگونه یک جدول پایه را با ستون‌های "نام اول"، "نام آخر" و	"نام کاربری" ایجاد کنید. این جدول آسان به خواندن است و می‌توانید آن را برای نیازهای برنامه‌ی خود سفارشی‌سازی کنید. از	@charliehunnam

            
                HTMLOpenTagdiv class="overflow-x-auto"HTMLCloseTag
                                                    HTMLOpenTagtable
    data-tw-merge
    class="w-full rtl:text-right ltr:text-left"
HTMLCloseTag
    HTMLOpenTagthead
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagtr
    data-tw-merge
    class="[&:hover_td]:bg-slate-100 [&:hover_td]:dark:bg-darkmode-300 [&:hover_td]:dark:bg-opacity-50"
HTMLCloseTag
    HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 border-l border-r border-t whitespace-nowrap"
HTMLCloseTag
    #
HTMLOpenTag/thHTMLCloseTag
                                                                HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 border-l border-r border-t whitespace-nowrap"
HTMLCloseTag
    اسم کوچک
HTMLOpenTag/thHTMLCloseTag
                                                                HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 border-l border-r border-t whitespace-nowrap"
HTMLCloseTag
    نام خانوادگی
HTMLOpenTag/thHTMLCloseTag
                                                                HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 border-l border-r border-t whitespace-nowrap"
HTMLCloseTag
    نام کاربری
HTMLOpenTag/thHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
HTMLOpenTag/theadHTMLCloseTag
                                                        HTMLOpenTagtbodyHTMLCloseTag
    HTMLOpenTagtr
    data-tw-merge
    class="[&:hover_td]:bg-slate-100 [&:hover_td]:dark:bg-darkmode-300 [&:hover_td]:dark:bg-opacity-50"
HTMLCloseTag
    HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t"
HTMLCloseTag
    1
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t"
HTMLCloseTag
    آنجلینا
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t"
HTMLCloseTag
    چارلی
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t"
HTMLCloseTag
    @angelinajolie
HTMLOpenTag/tdHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
                                                            HTMLOpenTagtr
    data-tw-merge
    class="[&:hover_td]:bg-slate-100 [&:hover_td]:dark:bg-darkmode-300 [&:hover_td]:dark:bg-opacity-50"
HTMLCloseTag
    HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t"
HTMLCloseTag
    2
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t"
HTMLCloseTag
    برد
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t"
HTMLCloseTag
    هانم
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t"
HTMLCloseTag
    @bradpitt
HTMLOpenTag/tdHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
                                                            HTMLOpenTagtr
    data-tw-merge
    class="[&:hover_td]:bg-slate-100 [&:hover_td]:dark:bg-darkmode-300 [&:hover_td]:dark:bg-opacity-50"
HTMLCloseTag
    HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t"
HTMLCloseTag
    3
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t"
HTMLCloseTag
    مثال بالا نشان می‌دهد که چگونه یک جدول پایه را با ستون‌های "نام اول"، "نام آخر" و
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t"
HTMLCloseTag
    "نام کاربری" ایجاد کنید. این جدول آسان به خواندن است و می‌توانید آن را برای نیازهای برنامه‌ی خود سفارشی‌سازی کنید. از
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t"
HTMLCloseTag
    @charliehunnam
HTMLOpenTag/tdHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
HTMLOpenTag/tbodyHTMLCloseTag
HTMLOpenTag/tableHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag

در این مثال، a "جدول قابل شناور" is created by adding the hover prop to the جدول مؤلفه As users پاسخ می‌دهند، که ارتباطاتشان را ردیابی کردن آسان‌تر می‌کند. از کامپوننت "جدول قابل هاور" زمانی استفاده کنید که می‌خواهید "جدول قابل شناور" component when you want to improve ارتباط کاربری را بهبود بخشید و تجربه‌ای بیشتر از نظر تعاملی در محتوای مبتنی بر جدولتان فراهم کنید.

جدول با وضعیت‌های سطر

نمایش کد نمونه

The "جدول با وضعیت‌های سطر" feature allows you to add visual نشانگرهای به ردیف‌های جدول اضافه کنید تا ارائه و conveying additional information to users. You can apply استفاده از استایل‌های مختلف برای نمایش وضعیت‌ها یا دسته‌های مختلف ردیف‌ها دسته‌بندی‌ها، جداول شما را اطلاعات‌بخش‌تر و جذاب‌تر می‌کنند.

کد / پیش‌نمایش نمونه

#	اسم کوچک	نام خانوادگی	نام کاربری
1	آنجلینا	چارلی	@angelinajolie
2	برد	هانم	@bradpitt
3	مثال بالا نشان می‌دهد که چگونه یک جدول پایه را با ستون‌های "نام اول"، "نام آخر" و	"نام کاربری" ایجاد کنید. این جدول آسان به خواندن است و می‌توانید آن را برای نیازهای برنامه‌ی خود سفارشی‌سازی کنید. از	@charliehunnam

            
                HTMLOpenTagdiv class="overflow-x-auto"HTMLCloseTag
                                                    HTMLOpenTagtable
    data-tw-merge
    class="w-full rtl:text-right ltr:text-left"
HTMLCloseTag
    HTMLOpenTagthead
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagtr
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    #
HTMLOpenTag/thHTMLCloseTag
                                                                HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    اسم کوچک
HTMLOpenTag/thHTMLCloseTag
                                                                HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    نام خانوادگی
HTMLOpenTag/thHTMLCloseTag
                                                                HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    نام کاربری
HTMLOpenTag/thHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
HTMLOpenTag/theadHTMLCloseTag
                                                        HTMLOpenTagtbodyHTMLCloseTag
    HTMLOpenTagtr
    data-tw-merge
    class="bg-primary text-white"
HTMLCloseTag
    HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    1
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    آنجلینا
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    چارلی
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    @angelinajolie
HTMLOpenTag/tdHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
                                                            HTMLOpenTagtr
    data-tw-merge
    class="bg-danger text-white"
HTMLCloseTag
    HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    2
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    برد
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    هانم
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    @bradpitt
HTMLOpenTag/tdHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
                                                            HTMLOpenTagtr
    data-tw-merge
    class="bg-warning"
HTMLCloseTag
    HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    3
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    مثال بالا نشان می‌دهد که چگونه یک جدول پایه را با ستون‌های "نام اول"، "نام آخر" و
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    "نام کاربری" ایجاد کنید. این جدول آسان به خواندن است و می‌توانید آن را برای نیازهای برنامه‌ی خود سفارشی‌سازی کنید. از
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    @charliehunnam
HTMLOpenTag/tdHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
HTMLOpenTag/tbodyHTMLCloseTag
HTMLOpenTag/tableHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag

در این مثال، وضعیت‌های مختلف ردیف‌ها را اعمال کرده‌ایم تا ردیف‌های خاصی را برجسته کنیم:

ردیف اول با وضعیت اصلی علامت‌گذاری شده است، که معمولاً برای محتوای مثبت یا برجسته استفاده می‌شود.
ردیف دوم با وضعیت خطر علامت‌گذاری شده است، که اغلب برای نشان دادن یک شرایط بحرانی یا منفی استفاده می‌شود.
ردیف سوم با وضعیت هشدار علامت‌گذاری شده است، مناسب برای هشدار دادن به کاربران در مواقع هشداردهنده است.

By using "جدول با وضعیت‌های سطر," you can visually ردیف‌ها را بر اساس اهمیت یا دسته‌بندی متفاوت کنید که این برای کاربران آسان‌تر می‌شود تا محتوای محتوای داخل جدول را مشخص می‌کند.

گزینه های سر جدول

نمایش کد نمونه

The "گزینه های سر جدول" feature allows you to customize the appearance of the table header to better match your انتخاب کنید. می‌توانید بین دو نوع مختلف، "تیره" و "روشن"، انتخاب کنید که هر کدام استایل مختلفی را برای سرصفحه جدول ارائه می‌دهند. ارائه یک سبک بصری متمایز برای سربرگ جدول.

کد / پیش‌نمایش نمونه

#	اسم کوچک	نام خانوادگی	نام کاربری
1	آنجلینا	چارلی	@angelinajolie
2	برد	هانم	@bradpitt
3	مثال بالا نشان می‌دهد که چگونه یک جدول پایه را با ستون‌های "نام اول"، "نام آخر" و	"نام کاربری" ایجاد کنید. این جدول آسان به خواندن است و می‌توانید آن را برای نیازهای برنامه‌ی خود سفارشی‌سازی کنید. از	@charliehunnam

#	اسم کوچک	نام خانوادگی	نام کاربری
1	آنجلینا	چارلی	@angelinajolie
2	برد	هانم	@bradpitt
3	مثال بالا نشان می‌دهد که چگونه یک جدول پایه را با ستون‌های "نام اول"، "نام آخر" و	"نام کاربری" ایجاد کنید. این جدول آسان به خواندن است و می‌توانید آن را برای نیازهای برنامه‌ی خود سفارشی‌سازی کنید. از	@charliehunnam

            
                HTMLOpenTagdiv class="overflow-x-auto"HTMLCloseTag
                                                    HTMLOpenTagtable
    data-tw-merge
    class="w-full rtl:text-right ltr:text-left"
HTMLCloseTag
    HTMLOpenTagthead
    data-tw-merge
    class="bg-dark text-white dark:bg-black/30"
HTMLCloseTag
    HTMLOpenTagtr
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 border-b-0 whitespace-nowrap"
HTMLCloseTag
    #
HTMLOpenTag/thHTMLCloseTag
                                                                HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 border-b-0 whitespace-nowrap"
HTMLCloseTag
    اسم کوچک
HTMLOpenTag/thHTMLCloseTag
                                                                HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 border-b-0 whitespace-nowrap"
HTMLCloseTag
    نام خانوادگی
HTMLOpenTag/thHTMLCloseTag
                                                                HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 border-b-0 whitespace-nowrap"
HTMLCloseTag
    نام کاربری
HTMLOpenTag/thHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
HTMLOpenTag/theadHTMLCloseTag
                                                        HTMLOpenTagtbodyHTMLCloseTag
    HTMLOpenTagtr
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    1
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    آنجلینا
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    چارلی
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    @angelinajolie
HTMLOpenTag/tdHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
                                                            HTMLOpenTagtr
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    2
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    برد
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    هانم
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    @bradpitt
HTMLOpenTag/tdHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
                                                            HTMLOpenTagtr
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    3
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    مثال بالا نشان می‌دهد که چگونه یک جدول پایه را با ستون‌های "نام اول"، "نام آخر" و
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    "نام کاربری" ایجاد کنید. این جدول آسان به خواندن است و می‌توانید آن را برای نیازهای برنامه‌ی خود سفارشی‌سازی کنید. از
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    @charliehunnam
HTMLOpenTag/tdHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
HTMLOpenTag/tbodyHTMLCloseTag
HTMLOpenTag/tableHTMLCloseTag
                                                    HTMLOpenTagtable
    data-tw-merge
    class="w-full rtl:text-right ltr:text-left mt-5"
HTMLCloseTag
    HTMLOpenTagthead
    data-tw-merge
    class="bg-slate-200/60 dark:bg-slate-200"
HTMLCloseTag
    HTMLOpenTagtr
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 border-b-0 text-slate-700 whitespace-nowrap"
HTMLCloseTag
    #
HTMLOpenTag/thHTMLCloseTag
                                                                HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 border-b-0 text-slate-700 whitespace-nowrap"
HTMLCloseTag
    اسم کوچک
HTMLOpenTag/thHTMLCloseTag
                                                                HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 border-b-0 text-slate-700 whitespace-nowrap"
HTMLCloseTag
    نام خانوادگی
HTMLOpenTag/thHTMLCloseTag
                                                                HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 border-b-0 text-slate-700 whitespace-nowrap"
HTMLCloseTag
    نام کاربری
HTMLOpenTag/thHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
HTMLOpenTag/theadHTMLCloseTag
                                                        HTMLOpenTagtbodyHTMLCloseTag
    HTMLOpenTagtr
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    1
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    آنجلینا
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    چارلی
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    @angelinajolie
HTMLOpenTag/tdHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
                                                            HTMLOpenTagtr
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    2
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    برد
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    هانم
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    @bradpitt
HTMLOpenTag/tdHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
                                                            HTMLOpenTagtr
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    3
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    مثال بالا نشان می‌دهد که چگونه یک جدول پایه را با ستون‌های "نام اول"، "نام آخر" و
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    "نام کاربری" ایجاد کنید. این جدول آسان به خواندن است و می‌توانید آن را برای نیازهای برنامه‌ی خود سفارشی‌سازی کنید. از
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    @charliehunnam
HTMLOpenTag/tdHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
HTMLOpenTag/tbodyHTMLCloseTag
HTMLOpenTag/tableHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag

در این مثال، دو سرصفحه مختلف جدول را به نمایش می‌گذاریم با استفاده از نوع‌های "تیره" و "روشن": سرصفحه اول با نوع "تیره" طراحی شده است که باعث ایجاد یک پس‌زمینه تیره و متن سفید مشخص می‌شود.

سربرگ اول جدول با نوع "تاریک" طراحی شده است که رنگ پس‌زمینه تاریک و متن سفید ارائه می‌دهد، ویژگی که رنگ پس‌زمینه تاریک و متن سفید ارائه می‌دهد و یک سربرگ متمایز بصری ایجاد می‌کند.
سرصفحه دوم از نوع "روشن" استفاده می‌کند، که یک پس‌زمینه روشن با متن تیره برای یک ظاهر ملایم‌تر ارائه می‌دهد. ظاهری ظریف.

By using "گزینه های سر جدول," you can align your table شما هماهنگ کنید و یک رابط کاربری سازگار و جذاب را ایجاد کنید.

جدول واکنشگرا

نمایش کد نمونه

The "جدول واکنشگرا" feature ensures that your table سازگار باشد، تجربه مشاهده بهینه را برای هر دو اندازه‌ی بزرگ صفحه و دستگاه‌های تلفن همراه کوچک ارائه می‌دهد. هنگامی که قابلیت "جدول واکنشگرا" را فعال می‌کنید، به کاربران اجازه می‌دهد که به صورت افقی به جدول کلی دسترسی داشته باشند، enable the "جدول واکنشگرا" component, it allows users برای اسکرول افقی و مشاهده کامل جدول، اطمینان حاصل می‌شود که داده‌ها در صفحات کوچک قطع نمی‌شوند.

کد / پیش‌نمایش نمونه

#	اسم کوچک	نام خانوادگی	نام کاربری	ایمیل	آدرس
1	آنجلینا	چارلی	@angelinajolie	angelinajolie@gmail.com	260 خیابان و. استورم نیویورک، NY 10025.
2	برد	هانم	@bradpitt	براد پیت@gmail.com	47 خیابان دیویژن بوفالو، NY 14241.
3	مثال بالا نشان می‌دهد که چگونه یک جدول پایه را با ستون‌های "نام اول"، "نام آخر" و	"نام کاربری" ایجاد کنید. این جدول آسان به خواندن است و می‌توانید آن را برای نیازهای برنامه‌ی خود سفارشی‌سازی کنید. از	@charliehunnam	charliehunnam@gmail.com	8023 خیابان آمریج هریمن، NY 10926.

            
                HTMLOpenTagdiv class="overflow-x-auto"HTMLCloseTag
                                                    HTMLOpenTagtable
    data-tw-merge
    class="w-full rtl:text-right ltr:text-left"
HTMLCloseTag
    HTMLOpenTagthead
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagtr
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    #
HTMLOpenTag/thHTMLCloseTag
                                                                HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    اسم کوچک
HTMLOpenTag/thHTMLCloseTag
                                                                HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    نام خانوادگی
HTMLOpenTag/thHTMLCloseTag
                                                                HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    نام کاربری
HTMLOpenTag/thHTMLCloseTag
                                                                HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    ایمیل
HTMLOpenTag/thHTMLCloseTag
                                                                HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    آدرس
HTMLOpenTag/thHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
HTMLOpenTag/theadHTMLCloseTag
                                                        HTMLOpenTagtbodyHTMLCloseTag
    HTMLOpenTagtr
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    1
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    آنجلینا
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    چارلی
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    @angelinajolie
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    angelinajolie@gmail.com
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    260 خیابان و. استورم نیویورک، NY 10025.
HTMLOpenTag/tdHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
                                                            HTMLOpenTagtr
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    2
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    برد
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    هانم
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    @bradpitt
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    براد پیت@gmail.com
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    47 خیابان دیویژن بوفالو، NY 14241.
HTMLOpenTag/tdHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
                                                            HTMLOpenTagtr
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    3
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    مثال بالا نشان می‌دهد که چگونه یک جدول پایه را با ستون‌های "نام اول"، "نام آخر" و
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    "نام کاربری" ایجاد کنید. این جدول آسان به خواندن است و می‌توانید آن را برای نیازهای برنامه‌ی خود سفارشی‌سازی کنید. از
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    @charliehunnam
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    charliehunnam@gmail.com
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    8023 خیابان آمریج هریمن، NY 10926.
HTMLOpenTag/tdHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
HTMLOpenTag/tbodyHTMLCloseTag
HTMLOpenTag/tableHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag

در این مثال، a "جدول واکنشگرا" is created by بسته‌بندی آن داخل یک ظرف با سرریز افقی ایجاد می‌شود. این امکان را به کاربران می‌دهد تا به صورت افقی اسکرول کنند و جدول کامل را ببینند، اطمینان حاصل می‌شود که تمام ستون‌ها و داده‌ها قابل دسترسی باقی بماند روی صفحات کوچک. هنگامی که می‌خواهید جدول خود "جدول واکنشگرا" component when you want your table to جهت حفظ خوانایی و قابلیت استفاده را در انواع دستگاه‌ها، بدون توجه به اندازه صفحه نمایش.

کوچک جدول

نمایش کد نمونه

کامپوننت "کوچک جدول" به شما امکان می‌دهد تا جداولی با تمرکز یا تأکید بر یک طراحی کم حجم ایجاد کنید. با اضافه کردن ویژگی sm (small) به جدول، می‌توانید اندازه کلی جدول را کاهش دهید و آن را مناسب‌تر برای نمایش اطلاعات به صورت مختصر کنید.

کد / پیش‌نمایش نمونه

#	اسم کوچک	نام خانوادگی	نام کاربری
1	آنجلینا	چارلی	@angelinajolie
2	برد	هانم	@bradpitt
3	مثال بالا نشان می‌دهد که چگونه یک جدول پایه را با ستون‌های "نام اول"، "نام آخر" و	"نام کاربری" ایجاد کنید. این جدول آسان به خواندن است و می‌توانید آن را برای نیازهای برنامه‌ی خود سفارشی‌سازی کنید. از	@charliehunnam

            
                HTMLOpenTagdiv class="overflow-x-auto"HTMLCloseTag
                                                    HTMLOpenTagtable
    data-tw-merge
    class="w-full rtl:text-right ltr:text-left"
HTMLCloseTag
    HTMLOpenTagthead
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagtr
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 px-4 py-2 whitespace-nowrap"
HTMLCloseTag
    #
HTMLOpenTag/thHTMLCloseTag
                                                                HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 px-4 py-2 whitespace-nowrap"
HTMLCloseTag
    اسم کوچک
HTMLOpenTag/thHTMLCloseTag
                                                                HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 px-4 py-2 whitespace-nowrap"
HTMLCloseTag
    نام خانوادگی
HTMLOpenTag/thHTMLCloseTag
                                                                HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 px-4 py-2 whitespace-nowrap"
HTMLCloseTag
    نام کاربری
HTMLOpenTag/thHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
HTMLOpenTag/theadHTMLCloseTag
                                                        HTMLOpenTagtbodyHTMLCloseTag
    HTMLOpenTagtr
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 px-4 py-2"
HTMLCloseTag
    1
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 px-4 py-2"
HTMLCloseTag
    آنجلینا
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 px-4 py-2"
HTMLCloseTag
    چارلی
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 px-4 py-2"
HTMLCloseTag
    @angelinajolie
HTMLOpenTag/tdHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
                                                            HTMLOpenTagtr
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 px-4 py-2"
HTMLCloseTag
    2
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 px-4 py-2"
HTMLCloseTag
    برد
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 px-4 py-2"
HTMLCloseTag
    هانم
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 px-4 py-2"
HTMLCloseTag
    @bradpitt
HTMLOpenTag/tdHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
                                                            HTMLOpenTagtr
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 px-4 py-2"
HTMLCloseTag
    3
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 px-4 py-2"
HTMLCloseTag
    مثال بالا نشان می‌دهد که چگونه یک جدول پایه را با ستون‌های "نام اول"، "نام آخر" و
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 px-4 py-2"
HTMLCloseTag
    "نام کاربری" ایجاد کنید. این جدول آسان به خواندن است و می‌توانید آن را برای نیازهای برنامه‌ی خود سفارشی‌سازی کنید. از
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300 px-4 py-2"
HTMLCloseTag
    @charliehunnam
HTMLOpenTag/tdHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
HTMLOpenTag/tbodyHTMLCloseTag
HTMLOpenTag/tableHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag

در این مثال، a "کوچک جدول" is created by applying ویژگی sm به جزئیات جدول ایجاد شده است. این باعث کاهش اندازه کلی جدول می‌شود و آن را مناسب برای مواقعی که فضا محدود است. از مجموعه "کوچک جدول" component when you need to display tabular در یک فضای محدود یا زمانی که می‌خواهید a clean and طراحی کم حجم.

ردیف‌های خط‌خطی جدول

نمایش کد نمونه

The "ردیف‌های خط‌خطی جدول" feature enhances the خوانایی و جذابیت بصری جداول خود را با اعمال تغییر رنگ‌های پس‌زمینه متناوب به ردیف‌ها افزایش می‌دهد. این باعث می‌شود تمایز واضح بین ردیف‌های زوج و فرد ایجاد شود، که این کار باعث می‌شود برای کاربران آسان‌تر شود تا داده‌های جدولی را پیگیری و تفسیر کنند.

کد / پیش‌نمایش نمونه

#	اسم کوچک	نام خانوادگی	نام کاربری
1	آنجلینا	چارلی	@angelinajolie
2	برد	هانم	@bradpitt
3	مثال بالا نشان می‌دهد که چگونه یک جدول پایه را با ستون‌های "نام اول"، "نام آخر" و	"نام کاربری" ایجاد کنید. این جدول آسان به خواندن است و می‌توانید آن را برای نیازهای برنامه‌ی خود سفارشی‌سازی کنید. از	@charliehunnam

            
                HTMLOpenTagdiv class="overflow-x-auto"HTMLCloseTag
                                                    HTMLOpenTagtable
    data-tw-merge
    class="w-full rtl:text-right ltr:text-left"
HTMLCloseTag
    HTMLOpenTagthead
    data-tw-merge
    class=""
HTMLCloseTag
    HTMLOpenTagtr
    data-tw-merge
    class="[&:nth-of-type(odd)_td]:bg-slate-100 [&:nth-of-type(odd)_td]:dark:bg-darkmode-300 [&:nth-of-type(odd)_td]:dark:bg-opacity-50"
HTMLCloseTag
    HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    #
HTMLOpenTag/thHTMLCloseTag
                                                                HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    اسم کوچک
HTMLOpenTag/thHTMLCloseTag
                                                                HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    نام خانوادگی
HTMLOpenTag/thHTMLCloseTag
                                                                HTMLOpenTagth
    data-tw-merge
    class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 whitespace-nowrap"
HTMLCloseTag
    نام کاربری
HTMLOpenTag/thHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
HTMLOpenTag/theadHTMLCloseTag
                                                        HTMLOpenTagtbodyHTMLCloseTag
    HTMLOpenTagtr
    data-tw-merge
    class="[&:nth-of-type(odd)_td]:bg-slate-100 [&:nth-of-type(odd)_td]:dark:bg-darkmode-300 [&:nth-of-type(odd)_td]:dark:bg-opacity-50"
HTMLCloseTag
    HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    1
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    آنجلینا
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    چارلی
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    @angelinajolie
HTMLOpenTag/tdHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
                                                            HTMLOpenTagtr
    data-tw-merge
    class="[&:nth-of-type(odd)_td]:bg-slate-100 [&:nth-of-type(odd)_td]:dark:bg-darkmode-300 [&:nth-of-type(odd)_td]:dark:bg-opacity-50"
HTMLCloseTag
    HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    2
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    برد
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    هانم
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    @bradpitt
HTMLOpenTag/tdHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
                                                            HTMLOpenTagtr
    data-tw-merge
    class="[&:nth-of-type(odd)_td]:bg-slate-100 [&:nth-of-type(odd)_td]:dark:bg-darkmode-300 [&:nth-of-type(odd)_td]:dark:bg-opacity-50"
HTMLCloseTag
    HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    3
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    مثال بالا نشان می‌دهد که چگونه یک جدول پایه را با ستون‌های "نام اول"، "نام آخر" و
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    "نام کاربری" ایجاد کنید. این جدول آسان به خواندن است و می‌توانید آن را برای نیازهای برنامه‌ی خود سفارشی‌سازی کنید. از
HTMLOpenTag/tdHTMLCloseTag
                                                                HTMLOpenTagtd
    data-tw-merge
    class="px-5 py-3 border-b dark:border-darkmode-300"
HTMLCloseTag
    @charliehunnam
HTMLOpenTag/tdHTMLCloseTag
HTMLOpenTag/trHTMLCloseTag
HTMLOpenTag/tbodyHTMLCloseTag
HTMLOpenTag/tableHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag

در این مثال، a "ردیف‌های خط‌خطی جدول" is created by ایجاد می‌شود. ردیف‌های زوج با یک رنگ پس‌زمینه طراحی شده‌اند، در حالی که ردیف‌های فرد با پس‌زمینه پیش‌فرض باقی می‌مانند. این الگوی متناوب بهبود می‌بخشد جدایی بصری ردیف‌ها و خوانایی کلی جدول را افزایش می‌دهد. از مجموعه جدول ردیف‌های خط‌خطی استفاده کنید هنگامی که می‌خواهید داده‌های جدولی را به صورت بصری منظم و آسان خوانده شوند. of the table. Use the "ردیف‌های خط‌خطی جدول" component زمانی که می‌خواهید داده‌های جدولی را به صورت بصری منظم و قابل خواندن ارائه دهید.

رابط اجزاء

در این بخش، اطلاعات جزئی در مورد ویژگی‌ها، کلاس‌ها و گزینه‌های موجود که می‌توانید با اجزاء است. درک این خصوصیات برای سفارشی کردن و پیکربندی اجزاء برای مطابقت با نیازهای خاص شما ضروری است.

در زیر لیستی از ویژگی‌هایی که می‌توان به اجزاء منتقل کرد، آمده است:

جدول

پراپ (Prop)	نوع (Type)	شرح
`dark`	`boolean`	فعال کردن سبک حالت تاریک برای جدول.
`bordered`	`boolean`	افزودن حاشیه به سلول‌های جدول.
`hover`	`boolean`	فعال کردن افکت‌های هاور بر روی سطرهای جدول.
`striped`	`boolean`	تغییر رنگ‌های پس‌زمینه سطرها به صورت متناوب برای بهبود خوانایی.
`sm`	`boolean`	کاهش اندازه جدول برای نمایش جدولی جمع و جورتر.

Table.Thead

پراپ (Prop)	نوع (Type)	شرح
`variant`	`default`, `light`, `dark`	استایل نوعی را برای سر جدول تنظیم می‌کند.

Tab.Tbody

پراپ (Prop)	نوع (Type)	شرح
بدون پراپ

Table.Tr

پراپ (Prop)	نوع (Type)	شرح
بدون پراپ

Table.Th

پراپ (Prop)	نوع (Type)	شرح
بدون پراپ

Table.Td

پراپ (Prop)	نوع (Type)	شرح
بدون پراپ