نمای مقایسه جدولی (TableComparisonView)

معرفی

TableComparisonView نمایی پیوت 90° از یک DataTable است: ستون‌های اصلی به سطرهای مقایسه تبدیل می‌شوند، و ردیف‌های انتخاب‌شده به ستون. مناسب الگوی «۲-۴ آیتم را انتخاب کن، با هم مقایسه کن» که در dashboardهای influence/افکارسنجی متداول است.

زمین بازی

چه زمانی استفاده کنیم:

• کاربر ۲-۴ کانسپت/پیج/کلاستر را انتخاب کرده و می‌خواهد کنار هم ببیند
• compare-modal بعد از کلیک «مقایسه‌ی انتخاب‌شده‌ها»
• خروجی side-by-side در یک bulletin section

چه زمانی استفاده نکنیم:

• بیش از ۴ ردیف → جدول معمولی scrollable
• داده‌ی time-series → از PartoLineChart چندخطی استفاده کنید
• وقتی فقط ۲ آیتم با ۲-۳ متریک دارید → grid 2-ستونه ساده کافی است

استفاده

import { DataTable, TableComparisonView } from '@parto-system-design/ui'

const [selected, setSelected] = React.useState<Set<number>>(new Set())
const selectedRows = data.filter((_, i) => selected.has(i))

<DataTable
  columns={columns}
  data={data}
  selection={{ selectedRows: selected, onSelectionChange: setSelected }}
/>

{selectedRows.length >= 2 && (
  <Dialog open onOpenChange={() => setSelected(new Set())}>
    <DialogContent className="max-w-3xl">
      <DialogTitle>مقایسه</DialogTitle>
      <TableComparisonView
        columns={columns}
        rows={selectedRows}
        onRemoveRow={(idx) => {
          const next = new Set(selected)
          next.delete(idx)
          setSelected(next)
        }}
      />
    </DialogContent>
  </Dialog>
)}

ویژگی‌های کلیدی

• استفاده‌ی مجدد از همان cell() رندررهایی که در DataTable تعریف کرده‌اید — هیچ کد مضاعف
• highlight خودکار برای سلول‌هایی که در سطر اختلاف دارند (data-cell-differs="true") — کاربر اختلاف‌ها را در یک نگاه می‌گیرد
• Cap 4 ردیف پیش‌فرض — اگر rows بیشتر بدهید، ردیف‌های اضافه چاپ نمی‌شوند
• onRemoveRow?: (rowIndex) => void — وقتی تنظیم شد، X button در هر header column رندر می‌شود

راهنمای استفاده

جدول ویژگی‌ها

دسترسی‌پذیری

• جدول از یک <table> semantic استفاده می‌کند، پس screen reader navigation سطر/ستون استاندارد را پشتیبانی می‌کند.
• header columnها از <th scope="col"> استفاده می‌کنند تا ارتباط cell-to-header در screen reader درست اعلام شود.
• دکمه‌ی X روی هر header (وقتی onRemoveRow ست شود) aria-label با مفهوم «حذف از مقایسه» دارد و با Enter/Space قابل فعال‌سازی است.
• highlight اختلاف از طریق attribute data-cell-differs="true" اعمال می‌شود؛ این یک نشانه‌ی بصری است — برای کاربر screen reader، خود مقدار سلول معنا را منتقل می‌کند.
• هنگام نمایش در Dialog، focus trap به‌صورت خودکار توسط Dialog مدیریت می‌شود و Escape modal را می‌بندد.

کامپوننت‌های مرتبط

• خود جدول و selection → DataTable
• مقایسه‌ی Influencer/Concept به‌صورت radar → ComparisonRadar
• مقایسه‌ی دو entity در grid → ComparisonCard