جدول داده

<DataTable
caption="تراکنش‌های اخیر"
description="آخرین پرداخت‌های مشتریان در این ماه"
rows={transactions}
getRowId={(r) => r.id}
selectable
selected={selected}
onSelectedChange={setSelected}
defaultSort={{ key: "amount", direction: "descending" }}
columns={[
  { key: "customer", header: "مشتری", sortable: true },
  { key: "date", header: "تاریخ" },
  { key: "status", header: "وضعیت", render: (r) => <Badge tone="success" dot>…</Badge> },
  { key: "amount", header: "مبلغ (تومان)", sortable: true, numeric: true,
    render: (r) => formatNumber(r.amount) },
]}
/>

<DataTable
…
striped
stickyHeader
maxHeight="16rem"
loading={isLoading ? 4 : false}
onRowClick={(row) => open(row)}
columns={[
  { key: "date", header: "تاریخ", hideBelow: "sm" },
  { key: "status", header: "وضعیت", align: "center" },
  …
]}
footer={<Pagination page={page} total={8} onChange={setPage} />}
/>