جدول
Tableجدول بيانات مركّب في React برأس وجسم وتذييل وتعليق وترويسات قابلة للفرز والتصفية وصفوف قابلة للاختيار وأحجام وتخطيط متناوب وترويسة ثابتة.
ابن Table من أجزاء الرأس والجسم والصف والخلية. محتوى الخلية ما تركبه أنت، وتكتسب الرؤوس خاصيتي sortable وfilterable بينما يبقى المنطق في شيفرتك.
متى تستخدمه
استخدم Table للسجلات ذات الصفات المتعدّدة التي يقارنها المستخدم أو يفرزها أو يختارها: الطلبات والفواتير والمستخدمون. أبقِ المنطق في كودك واستخدم أدوات الترويسة لإظهاره.
استخدم StructuredList للقوائم البسيطة وDescriptionList للسجل الواحد.
أمثلة
الخصائص
الخصائص التي يعرّفها Table. سمات العنصر الأصلي تمرّ كما هي.
<Table>
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
size | "sm" | "md" | "lg" | ||
striped | boolean | ||
contained | boolean | ||
stickyHeader | boolean | ||
aria-label | string | Accessible name for the scroll region wrapping the table. Strongly
recommended: a wide table scrolls horizontally, and a named, focusable
region lets keyboard and screen-reader users find and scroll it. When
provided, the wrapper becomes role="region" tabindex="0"; when omitted,
it degrades to a plain scroll container and a dev warning fires.
Note: this names the region, not the <table> - use <TableCaption> for
the table's own name. | |
aria-labelledby | string | Accessible name for the scroll region, by id reference. See aria-label. | |
maxHeight | string | number | Caps the scroll region's block-size (number → px) so the body scrolls
vertically within it. Required for stickyHeader to engage - sticky
needs a height-constrained, scrollable ancestor; without it the region
grows to content height and the header has nothing to stick to. |
<TableRow>
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
selected | boolean | Visually highlights the row and sets data-state="selected". Selection
semantics for assistive tech come from a checkbox in the cell (see the
DataTable recipe), not from the row. |
<TableHead>
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
align | "center" | "start" | "end" | ||
sortable | boolean | Renders the column as sortable: wraps content in a button and sets
aria-sort. Sort logic is the consumer's - wire onClick. | |
sortDirection | false | "desc" | "asc" | Current sort direction, or false when unsorted. | |
sortLabel | string | Visually-hidden, caller-localized cue appended to the sort button's
accessible name (e.g. "activate to sort ascending"). aria-sort already
conveys state, but a focused button otherwise announces only its column
label; this adds the action cue. Kept as a prop (not hard-coded text) so
the design system stays language-neutral - pass Arabic in RTL. Only used
when sortable. Typed string (not ReactNode) so interactive content
can't be hidden into a keyboard-reachable, invisible trap. | |
filterable | boolean | Renders the column's filter toggle: an icon-only funnel button sharing the
sort icon-box treatment, with aria-pressed. Filter logic is the
consumer's - wire onClick. Takes precedence over sortable. | |
filterActive | boolean | Whether the filter is currently applied - drives aria-pressed and the
active (filled) icon-box. | |
filterLabel | string | Visually-hidden, caller-localized name for the icon-only filter button
(e.g. "Filter"). Required with filterable so the toggle has an accessible
name; a dev warning fires when missing. | |
onClick | react.MouseEventHandler<HTMLButtonElement> | Click handler bound to the sort/filter button (only rendered when
sortable or filterable). | |
disabled | boolean | Disables the sort/filter button (renders the SDGA Disabled icon-box state). |
<TableCell>
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
align | "center" | "start" | "end" |
إمكانية الوصول
يعرض Table عنصر <table> أصليًا؛ أضف TableCaption لتسميته. يصبح غلاف التمرير منطقة role="region" قابلة للتركيز حين تمرّر aria-label، فيمرّر مستخدم لوحة المفاتيح الجداول العريضة.
تعرض الترويسات القابلة للفرز aria-sort، وتعلن أزرار التبديل حالتها. تستخدم الصفوف القابلة للاختيار مربّعات اختيار حقيقية بتسميات.