جدول البيانات (DataTable)

يعرض مكوّن جدول البيانات (DataTable) البيانات في جدول، مع الترتيب والتحديد والتنقّل بين الصفحات (pagination).

التثبيت

bash

npx @smicolon/cli add data-table

قبل إضافة أي مكوّن، شغّل الأمر init مرة واحدة في مشروعك. التفاصيل في صفحة التثبيت.

معاينة

الاسم	البريد الإلكتروني	الدور
ليلى حداد	layla@example.com	مدير
عمر خليل	omar@example.com	محرر
سارة ناصر	sara@example.com	مشاهد

التنقّل بين الصفحات (pagination)

حالة التحميل

الاسم	البريد الإلكتروني	الدور

حالة فارغة

الاسم	البريد الإلكتروني	الدور

لا يوجد مستخدمون

الخصائص (props)

الخاصية	النوع	الافتراضي	الوصف
`data`	`T[]`	لا يوجد	الصفوف المعروضة.
`columns`	`Column<T>[]`	لا يوجد	تعريفات الأعمدة، وتأخذ `align` في كل عمود إحدى القيم `start`، `center`، `end` بحسب اتجاه القراءة.
`getRowKey`	`(row) => string \| number`	لا يوجد	مفتاح فريد لكل صف.
`loading`	`boolean`	`false`	يعرض حالة التحميل.
`emptyState`	`ReactNode`	لا يوجد	يظهر حين لا توجد صفوف.
`onRowClick`	`(row) => void`	لا يوجد	تُستدعى عند النقر على صف.
`selectedKey`	`string \| number`	لا يوجد	مفتاح الصف المحدد.
`stickyHeader`	`boolean`	`false`	يُبقي رأس الجدول ظاهرًا عند التمرير.
`Pagination`	`{ page, totalPages, onPageChange, labels }`	لا يوجد	ينقّل بين صفحات الجدول، وتترجم `labels` نصوصه.
`className`	`string`	لا يوجد	أصناف (class) إضافية للمكوّن.

الاستخدام

tsx

import { DataTable, Column } from "@/components/blocks/data-table"

const columns: Column<User>[] = [
  { id: "name", header: "الاسم", cell: (row) => row.name },
  { id: "email", header: "البريد الإلكتروني", cell: (row) => row.email },
]

<DataTable
  data={users}
  columns={columns}
  getRowKey={(row) => row.id}
  onRowClick={(row) => console.log(row)}
/>