الجدول

جدول بيانات لعرض المعلومات المنظَّمة في صفوف وأعمدة. يدعم أنماط الفواصل وتخطيط الجوّال وRTL.

Loading demo: table-real-world

التثبيت

npx sdaia-ui@latest add table

import { Table } from "@/components/ui/table"

<Table />

جدول أساسي بلا فواصل.

Loading demo: table-default

الجدول مع فواصل أفقية بين الصفوف.

Loading demo: table-horizontal-dividers

الجدول مع فواصل عمودية بين الأعمدة.

Loading demo: table-vertical-dividers

الجدول مع فواصل أفقية وعمودية معاً.

Loading demo: table-full-dividers

تخطيط الجدول محسَّن لشاشات الجوّال.

Loading demo: table-mobile

خصائص مكوّن Table.

Prop	Type	Default	Required
title	ReactNode	-	optional
description	ReactNode	-	optional
headerActions	ReactNode	-	optional
showMoreIcon	boolean	-	optional
onMoreClick	() => void	-	optional
hideHeader	boolean	false	optional
columns	TableColumn[]	-	required
rows	TableRowData[]	-	required
divider	'none' \| 'horizontal' \| 'vertical' \| 'both'	'none'	optional
sortKey	string	-	optional
sortDirection	'asc' \| 'desc'	-	optional
onSort	(key: string, direction: TableSortDirection) => void	-	optional
showPagination	boolean	false	optional
page	number	1	optional
totalPages	number	1	optional
onPageChange	(page: number) => void	-	optional
mobile	boolean	false	optional