Ecme - The Ultimate Next & TypeScript Web Template

جدول داده (DataTable)

جدول داده یک کامپوننت است که منطق جدول را به صورت جداگانه محصور کرده است. این کامپوننت می‌تواند برخی از تنظیمات اولیه را از react-table ذخیره کند و شروع سریع با داده‌های جدول غیر همزمان شما داشته باشد.

پایه (Basic)

نام	ایمیل

10 / صفحه

قابل انتخاب (Checkable)

	تام	ایمیل

10 / صفحه

پرس و جو (Query)

نام	ایمیل

10 / صفحه

API

جدول داده (DataTable)

ویژگی	توضیحات	نوع	پیش‌فرض
columns	شیء پیکربندی ستون‌های اصلی برای تمام جدول	`Array<Column>`	`[]`
data	آرایه داده‌هایی که می‌خواهید در جدول نمایش دهید	`Array<any>`	`[]`
loading	آیا می‌خواهید نشانگر بارگذاری در جدول نمایش داده شود	`boolean`	`false`
onCheckBoxChange	فراخوانی بازگشتی زمانی که وضعیت جعبه چک تغییر می‌کند، مقدار جعبه چک و داده‌های ردیف تغییر یافته را باز می‌گرداند	`(checked: boolean, row: any) => void`	-
onIndeterminateCheckBoxChange	فراخوانی بازگشتی زمانی که وضعیت جعبه چک نامشخص تغییر می‌کند، مقدار جعبه چک نامشخص و داده‌های تمام ردیف‌ها را باز می‌گرداند	`(checked: boolean, rows: any) => void`	-
onPaginationChange	فراخوانی بازگشتی زمانی که صفحه‌بندی تغییر می‌کند	`(pageIndex: number) => void`	-
onSelectChange	فراخوانی بازگشتی زمانی که اندازه صفحه تغییر می‌کند	`(pageSize: number) => void`	-
onSort	فراخوانی بازگشتی زمانی که هر ستون مرتب‌سازی تغییر می‌کند، ترتیب مرتب‌سازی و شناسه ستون مرتب‌شده را باز می‌گرداند	`(pageSize: {order: 'desc' \| 'asc', key: string}) => void`	-
pageSizes	گزینه‌های اندازه صفحه قابل انتخاب	`number[]`	`[10, 25, 50, 100]`
skeletonAvatarColumns	ستون‌هایی که نمایش آواتار اسکلتی در آن‌ها زمانی که بارگذاری فعال است مشخص می‌شود	`number[]`	-
skeletonAvatarProps	پروپ‌های آواتار اسکلتی	`AvatarProps`	-
pagingData	وضعیت صفحه‌بندی جدول	`{total: number, pageIndex: number, pageSize: number}`	`{total: 0, pageIndex: 1, pageSize: 10}`

جدول داده (DataTable)

ویژگی

توضیحات

نوع

پیش‌فرض

columns

شیء پیکربندی ستون‌های اصلی برای تمام جدول

Array<Column>

[]

data

آرایه داده‌هایی که می‌خواهید در جدول نمایش دهید

Array<any>

[]

آیا می‌خواهید نشانگر بارگذاری در جدول نمایش داده شود

boolean

false

onCheckBoxChange

فراخوانی بازگشتی زمانی که وضعیت جعبه چک تغییر می‌کند، مقدار جعبه چک و داده‌های ردیف تغییر یافته را باز می‌گرداند

(checked: boolean, row: any) => void

onIndeterminateCheckBoxChange

فراخوانی بازگشتی زمانی که وضعیت جعبه چک نامشخص تغییر می‌کند، مقدار جعبه چک نامشخص و داده‌های تمام ردیف‌ها را باز می‌گرداند

(checked: boolean, rows: any) => void

onPaginationChange

فراخوانی بازگشتی زمانی که صفحه‌بندی تغییر می‌کند

(pageIndex: number) => void

onSelectChange

فراخوانی بازگشتی زمانی که اندازه صفحه تغییر می‌کند

(pageSize: number) => void

onSort

فراخوانی بازگشتی زمانی که هر ستون مرتب‌سازی تغییر می‌کند، ترتیب مرتب‌سازی و شناسه ستون مرتب‌شده را باز می‌گرداند

(pageSize: {order: 'desc' | 'asc', key: string}) => void

pageSizes

گزینه‌های اندازه صفحه قابل انتخاب

number[]

[10, 25, 50, 100]

skeletonAvatarColumns

ستون‌هایی که نمایش آواتار اسکلتی در آن‌ها زمانی که بارگذاری فعال است مشخص می‌شود

number[]

skeletonAvatarProps

پروپ‌های آواتار اسکلتی

AvatarProps

pagingData

وضعیت صفحه‌بندی جدول

{total: number, pageIndex: number, pageSize: number}

{total: 0, pageIndex: 1, pageSize: 10}