Table

نصب

pnpm dlx @simurgh-ui/cli add table

import { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption } from '@simurgh-ui/react/table';
import { Table as VueTable } from '@simurgh-ui/vue/table';
import { TableDirective, TableHeaderDirective, TableBodyDirective, TableFooterDirective, TableRowDirective, TableHeadDirective, TableCellDirective, TableCaptionDirective } from '@simurgh-ui/angular/table';
import '@simurgh-ui/styles/table.css';

پیش‌نمایش واقعی

Live component Table ◆

Component adoption

Framework	Teams
React	12
Vue	8

استفاده

React

<Table>
  <TableCaption>انتشارها</TableCaption>
  <TableHeader><TableRow><TableHead>نسخه</TableHead></TableRow></TableHeader>
  <TableBody><TableRow><TableCell>0.1.0</TableCell></TableRow></TableBody>
</Table>

Vue

<Table>
  <TableCaption>انتشارها</TableCaption>
  <TableHeader><TableRow><TableHead>نسخه</TableHead></TableRow></TableHeader>
  <TableBody><TableRow><TableCell>0.1.0</TableCell></TableRow></TableBody>
</Table>

Angular

<table simurghTable>
  <caption simurghTableCaption>انتشارها</caption>
  <thead simurghTableHeader><tr simurghTableRow><th simurghTableHead>نسخه</th></tr></thead>
  <tbody simurghTableBody><tr simurghTableRow><td simurghTableCell>0.1.0</td></tr></tbody>
</table>

ساختار بومی caption، بخش‌ها، سطر، header و سلول را حفظ کنید. caption نام و هدف جدول را برای همه روشن می‌کند. در Angular از directiveهای ویژگی استفاده می‌شود تا ساختار معتبر عنصرهای بومی جدول تغییر نکند.

Last verified on 2026-08-13 against Simurgh registry 0.1.1.