جدول — Table

جدول داده‌های ساخت‌یافته با ستون‌های قابل‌مقایسه را نشان می‌دهد؛ برای فهرست‌هایی که مرتب‌سازی یا انتخاب می‌خواهند و برای گزارش یا رتبه‌بندی مناسب است. ساختار معنایی بومی حفظ می‌شود و کامپوننت‌ها فقط و رفتار دسترسی اضافه می‌کنند. ناحیهٔ اسکرول با و فوکوس‌پذیر است تا کاربر صفحه‌کلید بتواند جدول را اسکرول کند.

وضعیت: beta · لایه: ۳ () · کد:

TSX

import { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow, TableRowHeader } from '@tokapps/tuk';

نمونهٔ زنده

ایده‌های ثبت‌شده
نام	رأی	وضعیت
علی رضایی	۱۲۴	تأیید شد
سارا محمدی‌نژاد	۸۸	در انتظار
Mehdi Karimi	۱٬۲۰۴	تأیید شد

نام
سارا محمدی‌نژاد	۸۸
علی رضایی	۱۲۴
Mehdi Karimi	۱٬۲۰۴

کد قابل کپی

پایه: جدول با عنوان و سلول عددی

TSX

import { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow, TableRowHeader } from '@tokapps/tuk';const rows = [  { id: 1, name: 'علی رضایی', votes: 124, status: 'تأیید شد' },  { id: 2, name: 'سارا محمدی‌نژاد', votes: 88, status: 'در انتظار' },  { id: 3, name: 'Mehdi Karimi', votes: 1204, status: 'تأیید شد' },];export function IdeasTable() {  return (    <Table label="فهرست ایده‌ها" caption="ایده‌های ثبت‌شده">      <TableHead>        <TableRow>          <TableHeaderCell>نام</TableHeaderCell>          <TableHeaderCell numeric>رأی</TableHeaderCell>          <TableHeaderCell>وضعیت</TableHeaderCell>        </TableRow>      </TableHead>      <TableBody>        {rows.map((r) => (          <TableRow key={r.id}>            <TableRowHeader isolate>{r.name}</TableRowHeader>            <TableCell numeric>{r.votes.toLocaleString('fa-IR')}</TableCell>            <TableCell>{r.status}</TableCell>          </TableRow>        ))}      </TableBody>    </Table>  );}

پیشرفته: مرتب‌سازی با سربرگ چسبان و ارتفاع محدود

TSX

import { useState } from 'react';import { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow, TableRowHeader } from '@tokapps/tuk';import type { TableSortDirection } from '@tokapps/tuk';const rows = [  { id: 1, name: 'علی رضایی', votes: 124 },  { id: 2, name: 'سارا محمدی‌نژاد', votes: 88 },  { id: 3, name: 'Mehdi Karimi', votes: 1204 },];export function RankedTable() {  const [dir, setDir] = useState<TableSortDirection>('none');  const sorted = [...rows].sort((a, b) => (dir === 'descending' ? b.votes - a.votes : a.votes - b.votes));  return (    <Table label="رتبه‌بندی ایده‌ها" stickyHeader maxHeight="20rem" density="compact" striped>      <TableHead>        <TableRow>          <TableHeaderCell>نام</TableHeaderCell>          <TableHeaderCell            numeric            sort={dir}            onSort={() => setDir(dir === 'ascending' ? 'descending' : 'ascending')}          >            رأی          </TableHeaderCell>        </TableRow>      </TableHead>      <TableBody>        {sorted.map((r) => (          <TableRow key={r.id}>            <TableRowHeader isolate>{r.name}</TableRowHeader>            <TableCell numeric>{r.votes.toLocaleString('fa-IR')}</TableCell>          </TableRow>        ))}      </TableBody>    </Table>  );}

حالت انتخاب: ردیف انتخاب‌شده و چک‌باکس حالت میانی

جدول حالت خطا یا غیرفعال ندارد. این نمونه حالت انتخاب را با ردیف و چک‌باکس میانی نشان می‌دهد.

TSX

import { useState } from 'react';import { Table, TableBody, TableCell, TableCheckbox, TableHead, TableHeaderCell, TableRow, TableRowHeader } from '@tokapps/tuk';const people = [  { id: 1, name: 'علی رضایی' },  { id: 2, name: 'سارا محمدی' },  { id: 3, name: 'Mehdi Karimi' },];export function SelectableTable() {  const [selected, setSelected] = useState<number[]>([]);  const allChecked = selected.length === people.length;  const someChecked = selected.length > 0 && !allChecked;  return (    <Table label="انتخاب اعضا" caption="اعضای تیم">      <TableHead>        <TableRow>          <TableHeaderCell>            <TableCheckbox              label="انتخاب همهٔ ردیف‌ها"              checked={allChecked}              indeterminate={someChecked}              onChange={(on) => setSelected(on ? people.map((p) => p.id) : [])}            />          </TableHeaderCell>          <TableHeaderCell>نام</TableHeaderCell>        </TableRow>      </TableHead>      <TableBody>        {people.map((p) => {          const isOn = selected.includes(p.id);          return (            <TableRow key={p.id} selected={isOn}>              <TableCell>                <TableCheckbox                  label={`انتخاب ردیف ${p.name}`}                  checked={isOn}                  onChange={(on) => setSelected(on ? [...selected, p.id] : selected.filter((id) => id !== p.id))}                />              </TableCell>              <TableRowHeader isolate>{p.name}</TableRowHeader>            </TableRow>          );        })}      </TableBody>    </Table>  );}

همهٔ پیکربندی‌ها

پراپ	نوع	پیش‌فرض	توضیح
		— (الزامی)	نام ناحیهٔ اسکرول برای صفحه‌خوان. ناحیه فوکوس‌پذیر است.
		—	عنوان جدول (). برای دسترسی بهتر از مفیدتر است.
			سربرگ هنگام اسکرول عمودی چسبیده می‌ماند. با ترکیب کنید.
		—	سقف ارتفاع ناحیهٔ اسکرول، مثلاً .
	·		فاصلهٔ داخلی سلول‌ها.
			راه‌راه کردن ردیف‌ها؛ با مرز همراه است.
	·		کل جدول را در چاپ پنهان می‌کند.
		—	کلاس روی .
سایر ویژگی‌ها		—	روی اعمال می‌شوند.

پراپ	نوع	پیش‌فرض	توضیح
		—	ردیف انتخاب‌شده: نوار تأکید در لبهٔ آغازین و پس‌زمینه.

پراپ	نوع	پیش‌فرض	توضیح
	· ·	—	جهت مرتب‌سازی این ستون. فقط ستون مرتب‌شده می‌گیرد.
		—	با دادن آن، سربرگ دکمهٔ مرتب‌سازی می‌شود.
			تراز انتها با ارقام هم‌عرض.
	·		مقدار در .
سایر ویژگی‌ها	بدون	—	روی اعمال می‌شوند.

و

پراپ	پیش‌فرض	توضیح
		تراز انتها با .
		متن را با ایزوله می‌کند (مناسب متن ترکیبی فارسی و لاتین).
سایر ویژگی‌ها	—	روی (یا برای روی با ) اعمال می‌شوند.

همیشه دارد.

پراپ	نوع	پیش‌فرض	توضیح
		— (الزامی)	نام دسترسی، مثلاً «انتخاب ردیف علی رضایی».
		— (الزامی)	وضعیت انتخاب.
			حالت میانی؛ برای «انتخاب همه» وقتی بعضی ردیف‌ها انتخاب شده‌اند.
		— (الزامی)	با هر تغییر صدا زده می‌شود.

، و بدون پیش‌فرض و معادل ، و بومی هستند.

ساختار و اسلات‌ها

code

div (region)              data-tds="table-scroll"  role="region"  tabIndex=0  aria-label=label  [data-print]└─ table                  data-tds="table"  data-density  [data-sticky]  [data-striped]   ├─ caption             (وقتی caption داده شده)   ├─ thead               TableHead   │  └─ tr               TableRow  [data-selected]   │     └─ th            TableHeaderCell  [aria-sort]  [data-numeric]  [data-sortable]   │        └─ button     data-part="sort"  (فقط وقتی onSort داده شده)   │           └─ Icon    data-tds="icon"  [data-sorted]   └─ tbody               TableBody      └─ tr               TableRow         ├─ th scope=row  TableRowHeader  [data-numeric]         ├─ td            TableCell  [data-numeric]         └─ input         TableCheckbox  data-part="checkbox"  type="checkbox"

بخش ثابت: ناحیهٔ اسکرول با و ، عنصر بومی، ، با ، و . بخش قابل‌تغییر: محتوای سلول‌ها، ، ، ، و .

همهٔ حالت‌ها

حالت	نشانه	نمایش
پیش‌فرض	بدون اضافه	ردیف‌ها با مرز .
hover (ردیف)	روی	زمینهٔ .
selected	روی	زمینهٔ و نوار تأکید در لبهٔ آغازین.
مرتب‌شده صعودی	روی و روی آیکون	فلش صعودی با رنگ .
مرتب‌شده نزولی	روی	فلش نزولی.
مرتب‌نشده	یا بدون	آیکون مرتب‌سازی خنثی.
sticky-header	روی	سربرگ با و z-index توکنی.
striped	روی	ردیف‌های زوج با زمینهٔ .
focus-visible	روی ناحیه، دکمهٔ مرتب‌سازی یا چک‌باکس	حلقهٔ فوکوس با .
عددی		تراز انتها و .
چاپ پنهان	روی ناحیه	جدول در چاپ پنهان.

در کد حالت خطا، غیرفعال یا بارگذاری تعریف نشده است.

تغییرات مجاز برای توسعه‌دهنده

راه‌راه: روشن یا خاموش.
تراکم: برابر یا .
سربرگ: همراه با .
مرتب‌سازی: (، ، ) و .
انتخاب: روی ردیف و با .
تراز و متن: و ؛ در .
چاپ: یا .
نقاط توسعه: روی جدول و اجزا؛ توکن‌های سطح کامپوننت ، ، ، ، ، ، ، ، ؛ ؛ handler و چک‌باکس؛ ناحیه و چک‌باکس (متن قابل‌ترجمه).
variant: در کد پراپ تعریف نشده است؛ مستندات و را به‌صورت حالت‌های آن ذکر می‌کنند.

تغییرات ممنوع (بنیان ثابت)

عنصر و ساختار / / / / باید بومی بماند؛ بازنویسی با یا نقش ممنوع است.
ناحیهٔ اسکرول باید ، و داشته باشد؛ الزامی است.
فقط روی ستون مرتب‌شده گذاشته می‌شود.
روی استفاده نمی‌شود؛ انتخاب با چک‌باکس و نوار اعلام می‌شود.
هر چک‌باکس باید داشته باشد («انتخاب …»).
سربرگ‌ها باید داشته باشند ( یا ).
حداقل هدف لمسی در قرارداد دسترسی‌پذیری ثبت شده است؛ کوچک‌تر از آن ممنوع است.
رنگ خام یا گرادیان ممنوع است؛ انتخاب و مرتب‌سازی با شکل و متن هم نشان داده می‌شوند.

RTL، کیبورد و صفحه‌خوان

ستون اول در RTL سمت راست است؛ و برای اعداد استفاده می‌شود.
ارقام با هم‌تراز می‌شوند؛ متن ترکیبی فارسی و لاتین (شماره، شناسه) با () ایزوله شود.
کیبورد: وارد ناحیهٔ اسکرول می‌شود، سپس به دکمه‌های مرتب‌سازی و چک‌باکس‌ها می‌رسد. کلیدهای جهت‌دار ناحیهٔ فوکوس‌شده را اسکرول می‌کنند. و مرتب‌سازی یا تغییر انتخاب را انجام می‌دهند.
صفحه‌خوان: عنوان جدول است؛ جهت مرتب‌سازی را اعلام می‌کند، نه آیکون؛ ناحیهٔ اسکرول با خوانده می‌شود.

صدا، حرکت، چاپ و کاهش حرکت

صدا: در کد پراپ تعریف نشده و کامپوننت بی‌صداست. معادل بصری: فلش مرتب‌سازی و چک‌باکس.
حرکت: گذار زمینهٔ hover ردیف با نام معنایی (). در یا سوییچ کاهش حرکت، زمان گذار ۱ms می‌شود.
چاپ: پیش‌فرض با رنگ تک‌رنگ. سربرگ در هر صفحه تکرار می‌شود، ردیف‌ها دارند، اسکرول و sticky خاموش‌اند و آیکون‌های مرتب‌سازی پنهان‌اند. با پنهان می‌شود.

توکن‌ها

معنایی: ، ، ، ، ، ، ، ، ، ، .
کامپوننتی: ، ، ، ، ، ، ، ، .
تایپوگرافی: ، .
کنترل: ، ، ، ، .
مقیاس: ، ، .
فایل توکن: ؛ فهرست مصرفی در .

قرارداد ARCH

آیکون‌های مرتب‌سازی فقط از طریق کامپوننت با نام معنایی (مرتب‌سازی صعودی، نزولی، خنثی) رسم می‌شوند؛ مسیر asset مستند نمی‌شود.
تم فقط حرکت و توکن‌ها را تغییر می‌دهد؛ ساختار جدول و ARIA ثابت است.
Gesture ندارد؛ مرتب‌سازی و انتخاب با ماوس، لمس و کیبورد قابل‌انجام است.

نکات

برای مرتب‌سازی، فیلتر متنی و صفحه‌بندی آماده، از جدول داده استفاده کنید.
برای آیتم‌های غنی با تعداد ستون کم، از کارت استفاده کنید.
برای انتخاب چند آیتم در فرم، از چک‌باکس در کنار جدول استفاده کنید.

جدول — Table

وضعیت: beta · لایه: ۳ () · کد:

TSX

import { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow, TableRowHeader } from '@tokapps/tuk';

نمونهٔ زنده

ایده‌های ثبت‌شده
نام	رأی	وضعیت
علی رضایی	۱۲۴	تأیید شد
سارا محمدی‌نژاد	۸۸	در انتظار
Mehdi Karimi	۱٬۲۰۴	تأیید شد

نام
سارا محمدی‌نژاد	۸۸
علی رضایی	۱۲۴
Mehdi Karimi	۱٬۲۰۴

کد قابل کپی

پایه: جدول با عنوان و سلول عددی

TSX

import { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow, TableRowHeader } from '@tokapps/tuk';const rows = [  { id: 1, name: 'علی رضایی', votes: 124, status: 'تأیید شد' },  { id: 2, name: 'سارا محمدی‌نژاد', votes: 88, status: 'در انتظار' },  { id: 3, name: 'Mehdi Karimi', votes: 1204, status: 'تأیید شد' },];export function IdeasTable() {  return (    <Table label="فهرست ایده‌ها" caption="ایده‌های ثبت‌شده">      <TableHead>        <TableRow>          <TableHeaderCell>نام</TableHeaderCell>          <TableHeaderCell numeric>رأی</TableHeaderCell>          <TableHeaderCell>وضعیت</TableHeaderCell>        </TableRow>      </TableHead>      <TableBody>        {rows.map((r) => (          <TableRow key={r.id}>            <TableRowHeader isolate>{r.name}</TableRowHeader>            <TableCell numeric>{r.votes.toLocaleString('fa-IR')}</TableCell>            <TableCell>{r.status}</TableCell>          </TableRow>        ))}      </TableBody>    </Table>  );}

پیشرفته: مرتب‌سازی با سربرگ چسبان و ارتفاع محدود

TSX

import { useState } from 'react';import { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow, TableRowHeader } from '@tokapps/tuk';import type { TableSortDirection } from '@tokapps/tuk';const rows = [  { id: 1, name: 'علی رضایی', votes: 124 },  { id: 2, name: 'سارا محمدی‌نژاد', votes: 88 },  { id: 3, name: 'Mehdi Karimi', votes: 1204 },];export function RankedTable() {  const [dir, setDir] = useState<TableSortDirection>('none');  const sorted = [...rows].sort((a, b) => (dir === 'descending' ? b.votes - a.votes : a.votes - b.votes));  return (    <Table label="رتبه‌بندی ایده‌ها" stickyHeader maxHeight="20rem" density="compact" striped>      <TableHead>        <TableRow>          <TableHeaderCell>نام</TableHeaderCell>          <TableHeaderCell            numeric            sort={dir}            onSort={() => setDir(dir === 'ascending' ? 'descending' : 'ascending')}          >            رأی          </TableHeaderCell>        </TableRow>      </TableHead>      <TableBody>        {sorted.map((r) => (          <TableRow key={r.id}>            <TableRowHeader isolate>{r.name}</TableRowHeader>            <TableCell numeric>{r.votes.toLocaleString('fa-IR')}</TableCell>          </TableRow>        ))}      </TableBody>    </Table>  );}

حالت انتخاب: ردیف انتخاب‌شده و چک‌باکس حالت میانی

جدول حالت خطا یا غیرفعال ندارد. این نمونه حالت انتخاب را با ردیف و چک‌باکس میانی نشان می‌دهد.

TSX

import { useState } from 'react';import { Table, TableBody, TableCell, TableCheckbox, TableHead, TableHeaderCell, TableRow, TableRowHeader } from '@tokapps/tuk';const people = [  { id: 1, name: 'علی رضایی' },  { id: 2, name: 'سارا محمدی' },  { id: 3, name: 'Mehdi Karimi' },];export function SelectableTable() {  const [selected, setSelected] = useState<number[]>([]);  const allChecked = selected.length === people.length;  const someChecked = selected.length > 0 && !allChecked;  return (    <Table label="انتخاب اعضا" caption="اعضای تیم">      <TableHead>        <TableRow>          <TableHeaderCell>            <TableCheckbox              label="انتخاب همهٔ ردیف‌ها"              checked={allChecked}              indeterminate={someChecked}              onChange={(on) => setSelected(on ? people.map((p) => p.id) : [])}            />          </TableHeaderCell>          <TableHeaderCell>نام</TableHeaderCell>        </TableRow>      </TableHead>      <TableBody>        {people.map((p) => {          const isOn = selected.includes(p.id);          return (            <TableRow key={p.id} selected={isOn}>              <TableCell>                <TableCheckbox                  label={`انتخاب ردیف ${p.name}`}                  checked={isOn}                  onChange={(on) => setSelected(on ? [...selected, p.id] : selected.filter((id) => id !== p.id))}                />              </TableCell>              <TableRowHeader isolate>{p.name}</TableRowHeader>            </TableRow>          );        })}      </TableBody>    </Table>  );}

همهٔ پیکربندی‌ها

پراپ	نوع	پیش‌فرض	توضیح
		— (الزامی)	نام ناحیهٔ اسکرول برای صفحه‌خوان. ناحیه فوکوس‌پذیر است.
		—	عنوان جدول (). برای دسترسی بهتر از مفیدتر است.
			سربرگ هنگام اسکرول عمودی چسبیده می‌ماند. با ترکیب کنید.
		—	سقف ارتفاع ناحیهٔ اسکرول، مثلاً .
	·		فاصلهٔ داخلی سلول‌ها.
			راه‌راه کردن ردیف‌ها؛ با مرز همراه است.
	·		کل جدول را در چاپ پنهان می‌کند.
		—	کلاس روی .
سایر ویژگی‌ها		—	روی اعمال می‌شوند.

پراپ	نوع	پیش‌فرض	توضیح
		—	ردیف انتخاب‌شده: نوار تأکید در لبهٔ آغازین و پس‌زمینه.

پراپ	نوع	پیش‌فرض	توضیح
	· ·	—	جهت مرتب‌سازی این ستون. فقط ستون مرتب‌شده می‌گیرد.
		—	با دادن آن، سربرگ دکمهٔ مرتب‌سازی می‌شود.
			تراز انتها با ارقام هم‌عرض.
	·		مقدار در .
سایر ویژگی‌ها	بدون	—	روی اعمال می‌شوند.

و

پراپ	پیش‌فرض	توضیح
		تراز انتها با .
		متن را با ایزوله می‌کند (مناسب متن ترکیبی فارسی و لاتین).
سایر ویژگی‌ها	—	روی (یا برای روی با ) اعمال می‌شوند.

همیشه دارد.

پراپ	نوع	پیش‌فرض	توضیح
		— (الزامی)	نام دسترسی، مثلاً «انتخاب ردیف علی رضایی».
		— (الزامی)	وضعیت انتخاب.
			حالت میانی؛ برای «انتخاب همه» وقتی بعضی ردیف‌ها انتخاب شده‌اند.
		— (الزامی)	با هر تغییر صدا زده می‌شود.

، و بدون پیش‌فرض و معادل ، و بومی هستند.

ساختار و اسلات‌ها

code

div (region)              data-tds="table-scroll"  role="region"  tabIndex=0  aria-label=label  [data-print]└─ table                  data-tds="table"  data-density  [data-sticky]  [data-striped]   ├─ caption             (وقتی caption داده شده)   ├─ thead               TableHead   │  └─ tr               TableRow  [data-selected]   │     └─ th            TableHeaderCell  [aria-sort]  [data-numeric]  [data-sortable]   │        └─ button     data-part="sort"  (فقط وقتی onSort داده شده)   │           └─ Icon    data-tds="icon"  [data-sorted]   └─ tbody               TableBody      └─ tr               TableRow         ├─ th scope=row  TableRowHeader  [data-numeric]         ├─ td            TableCell  [data-numeric]         └─ input         TableCheckbox  data-part="checkbox"  type="checkbox"

بخش ثابت: ناحیهٔ اسکرول با و ، عنصر بومی، ، با ، و . بخش قابل‌تغییر: محتوای سلول‌ها، ، ، ، و .

همهٔ حالت‌ها

حالت	نشانه	نمایش
پیش‌فرض	بدون اضافه	ردیف‌ها با مرز .
hover (ردیف)	روی	زمینهٔ .
selected	روی	زمینهٔ و نوار تأکید در لبهٔ آغازین.
مرتب‌شده صعودی	روی و روی آیکون	فلش صعودی با رنگ .
مرتب‌شده نزولی	روی	فلش نزولی.
مرتب‌نشده	یا بدون	آیکون مرتب‌سازی خنثی.
sticky-header	روی	سربرگ با و z-index توکنی.
striped	روی	ردیف‌های زوج با زمینهٔ .
focus-visible	روی ناحیه، دکمهٔ مرتب‌سازی یا چک‌باکس	حلقهٔ فوکوس با .
عددی		تراز انتها و .
چاپ پنهان	روی ناحیه	جدول در چاپ پنهان.

در کد حالت خطا، غیرفعال یا بارگذاری تعریف نشده است.

تغییرات مجاز برای توسعه‌دهنده

راه‌راه: روشن یا خاموش.
تراکم: برابر یا .
سربرگ: همراه با .
مرتب‌سازی: (، ، ) و .
انتخاب: روی ردیف و با .
تراز و متن: و ؛ در .
چاپ: یا .
نقاط توسعه: روی جدول و اجزا؛ توکن‌های سطح کامپوننت ، ، ، ، ، ، ، ، ؛ ؛ handler و چک‌باکس؛ ناحیه و چک‌باکس (متن قابل‌ترجمه).
variant: در کد پراپ تعریف نشده است؛ مستندات و را به‌صورت حالت‌های آن ذکر می‌کنند.

تغییرات ممنوع (بنیان ثابت)

عنصر و ساختار / / / / باید بومی بماند؛ بازنویسی با یا نقش ممنوع است.
ناحیهٔ اسکرول باید ، و داشته باشد؛ الزامی است.
فقط روی ستون مرتب‌شده گذاشته می‌شود.
روی استفاده نمی‌شود؛ انتخاب با چک‌باکس و نوار اعلام می‌شود.
هر چک‌باکس باید داشته باشد («انتخاب …»).
سربرگ‌ها باید داشته باشند ( یا ).
حداقل هدف لمسی در قرارداد دسترسی‌پذیری ثبت شده است؛ کوچک‌تر از آن ممنوع است.
رنگ خام یا گرادیان ممنوع است؛ انتخاب و مرتب‌سازی با شکل و متن هم نشان داده می‌شوند.

RTL، کیبورد و صفحه‌خوان

ستون اول در RTL سمت راست است؛ و برای اعداد استفاده می‌شود.
ارقام با هم‌تراز می‌شوند؛ متن ترکیبی فارسی و لاتین (شماره، شناسه) با () ایزوله شود.
کیبورد: وارد ناحیهٔ اسکرول می‌شود، سپس به دکمه‌های مرتب‌سازی و چک‌باکس‌ها می‌رسد. کلیدهای جهت‌دار ناحیهٔ فوکوس‌شده را اسکرول می‌کنند. و مرتب‌سازی یا تغییر انتخاب را انجام می‌دهند.
صفحه‌خوان: عنوان جدول است؛ جهت مرتب‌سازی را اعلام می‌کند، نه آیکون؛ ناحیهٔ اسکرول با خوانده می‌شود.

صدا، حرکت، چاپ و کاهش حرکت

صدا: در کد پراپ تعریف نشده و کامپوننت بی‌صداست. معادل بصری: فلش مرتب‌سازی و چک‌باکس.
حرکت: گذار زمینهٔ hover ردیف با نام معنایی (). در یا سوییچ کاهش حرکت، زمان گذار ۱ms می‌شود.
چاپ: پیش‌فرض با رنگ تک‌رنگ. سربرگ در هر صفحه تکرار می‌شود، ردیف‌ها دارند، اسکرول و sticky خاموش‌اند و آیکون‌های مرتب‌سازی پنهان‌اند. با پنهان می‌شود.

توکن‌ها

معنایی: ، ، ، ، ، ، ، ، ، ، .
کامپوننتی: ، ، ، ، ، ، ، ، .
تایپوگرافی: ، .
کنترل: ، ، ، ، .
مقیاس: ، ، .
فایل توکن: ؛ فهرست مصرفی در .

قرارداد ARCH

آیکون‌های مرتب‌سازی فقط از طریق کامپوننت با نام معنایی (مرتب‌سازی صعودی، نزولی، خنثی) رسم می‌شوند؛ مسیر asset مستند نمی‌شود.
تم فقط حرکت و توکن‌ها را تغییر می‌دهد؛ ساختار جدول و ARIA ثابت است.
Gesture ندارد؛ مرتب‌سازی و انتخاب با ماوس، لمس و کیبورد قابل‌انجام است.

نکات

برای مرتب‌سازی، فیلتر متنی و صفحه‌بندی آماده، از جدول داده استفاده کنید.
برای آیتم‌های غنی با تعداد ستون کم، از کارت استفاده کنید.
برای انتخاب چند آیتم در فرم، از چک‌باکس در کنار جدول استفاده کنید.

جدول — Table

نمونهٔ زنده

کد قابل کپی

پایه: جدول با عنوان و سلول عددی

پیشرفته: مرتب‌سازی با سربرگ چسبان و ارتفاع محدود

حالت انتخاب: ردیف انتخاب‌شده و چک‌باکس حالت میانی

همهٔ پیکربندی‌ها

Tableکپی کدکپی کد

TableRowکپی کدکپی کد

TableHeaderCellکپی کدکپی کد

TableCellکپی کدکپی کد و TableRowHeaderکپی کدکپی کد

TableCheckboxکپی کدکپی کد

ساختار و اسلات‌ها

همهٔ حالت‌ها

تغییرات مجاز برای توسعه‌دهنده

تغییرات ممنوع (بنیان ثابت)

RTL، کیبورد و صفحه‌خوان

صدا، حرکت، چاپ و کاهش حرکت

توکن‌ها

قرارداد ARCH

نکات

جدول — Table

نمونهٔ زنده

کد قابل کپی

پایه: جدول با عنوان و سلول عددی

پیشرفته: مرتب‌سازی با سربرگ چسبان و ارتفاع محدود

حالت انتخاب: ردیف انتخاب‌شده و چک‌باکس حالت میانی

همهٔ پیکربندی‌ها

Tableکپی کدکپی کد

TableRowکپی کدکپی کد

TableHeaderCellکپی کدکپی کد

TableCellکپی کدکپی کد و TableRowHeaderکپی کدکپی کد

TableCheckboxکپی کدکپی کد

ساختار و اسلات‌ها

همهٔ حالت‌ها

تغییرات مجاز برای توسعه‌دهنده

تغییرات ممنوع (بنیان ثابت)

RTL، کیبورد و صفحه‌خوان

صدا، حرکت، چاپ و کاهش حرکت

توکن‌ها

قرارداد ARCH

نکات

و

و