nili/ui
enfaartr
همه‌ی کامپوننت‌ها

Table

نمای کلی
۲۹ اکسپورت۱۲ محور واریانت۳۱ پراپ۴ فایل
import { SortDirection, Table, TableAlign, TableBody, TableCell, TableFooter } from '@nili/ui';

این همان صفحه‌ی نمای کلیِ خود کتابخانه است که زنده رندر می‌شود. زبان یا تم را از هدر عوض کنید، همراهش می‌آید.

پایه

یک المان table واقعی، نه div با نقش ردیف. صفحه‌خوان‌ها به جدول واقعی حالت ناوبری می‌دهند — حرکت سلول‌به‌سلول، شنیدن سرستون در هر پرش — و هیچ‌کدام از این‌ها در بازنویسی با div باقی نمی‌ماند. label نامش می‌دهد؛ جدول بی‌نام فقط به‌صورت «جدول» اعلام می‌شود و بس.

مشتریمبلغوضعیت
Acme Co.1,200پرداخت‌شده
Globex480در انتظار
Initech3,150معوق
Umbrella90پرداخت‌شده
import {
  Table, TableHeader, TableBody, TableRow, TableHead, TableCell, Badge,
} from "@nili/ui"

export function Example() {
  return (
    <Table label="Invoices">
      <TableHeader>
        <TableRow>
          <TableHead>Customer</TableHead>
          <TableHead align="end">Amount</TableHead>
          <TableHead>Status</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {rows.map((row) => (
          <TableRow key={row.id}>
            <TableCell header>{row.customer}</TableCell>
            <TableCell align="end" numeric>{row.amount}</TableCell>
            <TableCell>
              <Badge appearance="light" color="green" dot>Paid</Badge>
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  )
}

ارتفاع ردیف و عنوان جدول

دو ارتفاع ردیف — X-Large (۶۴) و Large (۴۸). یک caption دیده‌شدنی جدول را نام‌گذاری می‌کند، پس دیگر به label هم نیاز نیست.

size=lg، همراه با عنوان
Invoices from the last 30 days
مشتریمبلغ
Acme Co.1,200
Globex480
Initech3,150
import { Table } from "@nili/ui"

export function Example() {
  return (
    <>
      <Table size="xl" label="Invoices">…</Table>
      <Table size="lg" caption={t('sizes.caption')}>…</Table>
    </>
  )
}

اولویت سلول

اینکه یک ستون چقدر بلند خوانده شود. leading هویت ردیف است، passive فراداده‌ای است که چشم باید از رویش رد شود، و none استایل تایپوگرافی را کاملاً برمی‌دارد تا سلول بتواند یک کنترل را در خود جا دهد.

مشتریایمیلبه‌روزرسانیکنش‌ها
A
Acme Co.		billing@acme.com۲ روز پیش
G
Globex		ap@globex.io۲ روز پیش
I
Initech		finance@initech.dev۲ روز پیش
import { Table, TableCell } from "@nili/ui"

export function Example() {
  return (
    <TableRow>
      <TableCell priority="leading" header>Acme Co.</TableCell>
      <TableCell priority="regular">billing@acme.com</TableCell>
      <TableCell priority="passive">Updated 2 days ago</TableCell>
      <TableCell priority="none">
        <CompactButton aria-label="More"><Icon icon={RiMore2Fill} /></CompactButton>
      </TableCell>
    </TableRow>
  )
}

مرتب‌سازی

sortable دکمهٔ مرتب‌سازی را می‌سازد و aria-sort را روی سلول مدیریت می‌کند. فقط روی ستون مرتب‌شده می‌نشیند — «none» روی بقیهٔ ستون‌ها نویزی است که صفحه‌خوان بلند می‌خواند.

Initech3,150
Acme Co.1,200
Globex480
Umbrella90
import { TableHead } from "@nili/ui"

export function Example() {
  const [sort, setSort] = useState({ key: "amount", direction: "desc" })

  return (
    <TableHead
      align="end"
      sortable
      sortDirection={sort.key === "amount" ? sort.direction : null}
      sortLabel={t('sorting.byAmount')}
      onSort={(direction) => setSort({ key: "amount", direction })}
    >
      Amount
    </TableHead>
  )
}

انتخاب، سربرگ چسبان و پابرگ

selected یک ردیف را برجسته می‌کند و aria-selected می‌افزاید. interactive فقط نشانهٔ هاور است — ردیفی که با onClick یک رکورد را باز کند برای صفحه‌خوان نامرئی است، پس یک لینک یا دکمهٔ واقعی در سلول بگذارید و بگذارید برجستگی ردیف دنبالش بیاید.

مشتریمبلغ
Acme Co.1,200
Globex480
Initech3,150
Umbrella90
1 از 4 انتخاب شده4,920
import { Table, TableRow, TableHead, TableCell, Checkbox } from "@nili/ui"

export function Example() {
  return (
    <Table label="Invoices" stickyHeader>
      <TableHeader sticky>
        <TableRow>
          <TableHead state="empty"><Checkbox aria-label="Select all" /></TableHead>
          <TableHead>Customer</TableHead>
        </TableRow>
      </TableHeader>

      <TableBody>
        <TableRow selected interactive>
          <TableCell priority="none"><Checkbox aria-label="Select row" checked /></TableCell>
          <TableCell header>Globex</TableCell>
        </TableRow>
      </TableBody>

      <TableFooter>
        <TableRow>
          <TableCell colSpan={2}>4 invoices</TableCell>
        </TableRow>
      </TableFooter>
    </Table>
  )
}