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

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

التثبيت

bash

npx @smicolon/fasla-ui@latest add data-table

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

معاينة

الاسم	البريد الإلكتروني	الدور
ليلى حداد	[email protected]	مدير
عمر خليل	[email protected]	محرر
سارة ناصر	[email protected]	مشاهد

التنقّل بين الصفحات (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

"use client"

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

interface User {
  id: number
  name: string
  email: string
  role: string
}

const users: User[] = [
  { id: 1, name: "ليلى حداد", email: "[email protected]", role: "مدير" },
  { id: 2, name: "عمر خليل", email: "[email protected]", role: "محرر" },
  { id: 3, name: "سارة ناصر", email: "[email protected]", role: "مشاهد" },
]

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

export function UsersTable() {
  const [selected, setSelected] = useState<number>()

  return (
    <DataTable
      data={users}
      columns={columns}
      getRowKey={(row) => row.id}
      selectedKey={selected}
      onRowClick={(row) => setSelected(row.id)}
    />
  )
}