snapshot of https://github.com/shadcn-ui/ui.git (main, 2026-09-15; blobs > 131072B omitted)

apps/v4/examples/base/data-table-rtl.tsx

@@ -0,0 +1,443 @@
+"use client"
+
+import * as React from "react"
+import {
+  columnFilteringFeature,
+  columnVisibilityFeature,
+  createColumnHelper,
+  createFilteredRowModel,
+  createPaginatedRowModel,
+  createSortedRowModel,
+  filterFn_includesString,
+  rowPaginationFeature,
+  rowSelectionFeature,
+  rowSortingFeature,
+  sortFn_alphanumeric,
+  sortFn_text,
+  tableFeatures,
+  useTable,
+  type ColumnFiltersState,
+  type ColumnVisibilityState,
+  type SortingState,
+} from "@tanstack/react-table"
+import { ArrowUpDown, ChevronDown, MoreHorizontal } from "lucide-react"
+
+import {
+  useTranslation,
+  type Translations,
+} from "@/components/language-selector"
+import { Button } from "@/styles/base-nova/ui-rtl/button"
+import { Checkbox } from "@/styles/base-nova/ui-rtl/checkbox"
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/styles/base-nova/ui-rtl/dropdown-menu"
+import { Input } from "@/styles/base-nova/ui-rtl/input"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/styles/base-nova/ui-rtl/table"
+
+const translations: Translations = {
+  en: {
+    dir: "ltr",
+    values: {
+      filterEmails: "Filter emails...",
+      columns: "Columns",
+      status: "Status",
+      email: "Email",
+      amount: "Amount",
+      actions: "Actions",
+      copyPaymentId: "Copy payment ID",
+      viewCustomer: "View customer",
+      viewPaymentDetails: "View payment details",
+      selectAll: "Select all",
+      selectRow: "Select row",
+      openMenu: "Open menu",
+      noResults: "No results.",
+      rowsSelected: "of",
+      rowsSelectedSuffix: "row(s) selected.",
+      previous: "Previous",
+      next: "Next",
+      success: "Success",
+      processing: "Processing",
+      failed: "Failed",
+      pending: "Pending",
+    },
+  },
+  ar: {
+    dir: "rtl",
+    values: {
+      filterEmails: "تصفية البريد الإلكتروني...",
+      columns: "الأعمدة",
+      status: "الحالة",
+      email: "البريد الإلكتروني",
+      amount: "المبلغ",
+      actions: "الإجراءات",
+      copyPaymentId: "نسخ معرف الدفع",
+      viewCustomer: "عرض العميل",
+      viewPaymentDetails: "عرض تفاصيل الدفع",
+      selectAll: "تحديد الكل",
+      selectRow: "تحديد الصف",
+      openMenu: "فتح القائمة",
+      noResults: "لا توجد نتائج.",
+      rowsSelected: "من",
+      rowsSelectedSuffix: "صف(وف) محدد.",
+      previous: "السابق",
+      next: "التالي",
+      success: "ناجح",
+      processing: "قيد المعالجة",
+      failed: "فشل",
+      pending: "قيد الانتظار",
+    },
+  },
+  he: {
+    dir: "rtl",
+    values: {
+      filterEmails: "סנן אימיילים...",
+      columns: "עמודות",
+      status: "סטטוס",
+      email: "אימייל",
+      amount: "סכום",
+      actions: "פעולות",
+      copyPaymentId: "העתק מזהה תשלום",
+      viewCustomer: "צפה בלקוח",
+      viewPaymentDetails: "צפה בפרטי תשלום",
+      selectAll: "בחר הכל",
+      selectRow: "בחר שורה",
+      openMenu: "פתח תפריט",
+      noResults: "אין תוצאות.",
+      rowsSelected: "מתוך",
+      rowsSelectedSuffix: "שורות נבחרו.",
+      previous: "הקודם",
+      next: "הבא",
+      success: "הצליח",
+      processing: "מעבד",
+      failed: "נכשל",
+      pending: "ממתין",
+    },
+  },
+}
+
+// New in v9: declare the features this table uses — anything you don't
+// register is tree-shaken out of the bundle.
+const features = tableFeatures({
+  columnFilteringFeature,
+  columnVisibilityFeature,
+  rowPaginationFeature,
+  rowSelectionFeature,
+  rowSortingFeature,
+  filteredRowModel: createFilteredRowModel(),
+  paginatedRowModel: createPaginatedRowModel(),
+  sortedRowModel: createSortedRowModel(),
+  filterFns: { includesString: filterFn_includesString },
+  sortFns: { alphanumeric: sortFn_alphanumeric, text: sortFn_text },
+})
+
+const columnHelper = createColumnHelper<typeof features, Payment>()
+
+type Payment = {
+  id: string
+  amount: number
+  status: "pending" | "processing" | "success" | "failed"
+  email: string
+}
+
+const data: Payment[] = [
+  {
+    id: "m5gr84i9",
+    amount: 316,
+    status: "success",
+    email: "ken99@example.com",
+  },
+  {
+    id: "3u1reuv4",
+    amount: 242,
+    status: "success",
+    email: "Abe45@example.com",
+  },
+  {
+    id: "derv1ws0",
+    amount: 837,
+    status: "processing",
+    email: "Monserrat44@example.com",
+  },
+  {
+    id: "5kma53ae",
+    amount: 874,
+    status: "success",
+    email: "Silas22@example.com",
+  },
+  {
+    id: "bhqecj4p",
+    amount: 721,
+    status: "failed",
+    email: "carmella@example.com",
+  },
+]
+
+export function DataTableRtl() {
+  const { t, dir, language } = useTranslation(translations, "ar")
+  const [sorting, setSorting] = React.useState<SortingState>([])
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    []
+  )
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<ColumnVisibilityState>({})
+  const [rowSelection, setRowSelection] = React.useState({})
+
+  const columns = React.useMemo(
+    () =>
+      columnHelper.columns([
+        columnHelper.display({
+          id: "select",
+          header: ({ table }) => (
+            <Checkbox
+              checked={table.getIsAllPageRowsSelected()}
+              indeterminate={
+                table.getIsSomePageRowsSelected() &&
+                !table.getIsAllPageRowsSelected()
+              }
+              onCheckedChange={(value) =>
+                table.toggleAllPageRowsSelected(!!value)
+              }
+              aria-label={t.selectAll}
+            />
+          ),
+          cell: ({ row }) => (
+            <Checkbox
+              checked={row.getIsSelected()}
+              onCheckedChange={(value) => row.toggleSelected(!!value)}
+              aria-label={t.selectRow}
+            />
+          ),
+          enableSorting: false,
+          enableHiding: false,
+        }),
+        columnHelper.accessor("status", {
+          header: t.status,
+          cell: ({ row }) => {
+            const status = row.getValue("status") as string
+            const statusMap: Record<string, string> = {
+              success: t.success,
+              processing: t.processing,
+              failed: t.failed,
+              pending: t.pending,
+            }
+            return <div className="capitalize">{statusMap[status]}</div>
+          },
+        }),
+        columnHelper.accessor("email", {
+          header: ({ column }) => {
+            return (
+              <Button
+                variant="ghost"
+                onClick={() =>
+                  column.toggleSorting(column.getIsSorted() === "asc")
+                }
+              >
+                {t.email}
+                <ArrowUpDown />
+              </Button>
+            )
+          },
+          cell: ({ row }) => (
+            <div className="lowercase">{row.getValue("email")}</div>
+          ),
+        }),
+        columnHelper.accessor("amount", {
+          header: () => <div className="text-start">{t.amount}</div>,
+          cell: ({ row }) => {
+            const amount = parseFloat(row.getValue("amount"))
+            const formatted = new Intl.NumberFormat(
+              dir === "rtl" ? "ar-SA" : "en-US",
+              {
+                style: "currency",
+                currency: "USD",
+              }
+            ).format(amount)
+
+            return <div className="text-start font-medium">{formatted}</div>
+          },
+        }),
+        columnHelper.display({
+          id: "actions",
+          enableHiding: false,
+          cell: ({ row }) => {
+            const payment = row.original
+
+            return (
+              <DropdownMenu>
+                <DropdownMenuTrigger
+                  render={<Button variant="ghost" size="icon-xs" />}
+                >
+                  <span className="sr-only">{t.openMenu}</span>
+                  <MoreHorizontal />
+                </DropdownMenuTrigger>
+                <DropdownMenuContent
+                  align={dir === "rtl" ? "start" : "end"}
+                  data-lang={dir === "rtl" ? language : undefined}
+                  className="w-40"
+                >
+                  <DropdownMenuGroup>
+                    <DropdownMenuLabel>{t.actions}</DropdownMenuLabel>
+                    <DropdownMenuItem
+                      onClick={() => navigator.clipboard.writeText(payment.id)}
+                    >
+                      {t.copyPaymentId}
+                    </DropdownMenuItem>
+                  </DropdownMenuGroup>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuGroup>
+                    <DropdownMenuItem>{t.viewCustomer}</DropdownMenuItem>
+                    <DropdownMenuItem>{t.viewPaymentDetails}</DropdownMenuItem>
+                  </DropdownMenuGroup>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            )
+          },
+        }),
+      ]),
+    [t, dir, language]
+  )
+
+  const table = useTable({
+    features,
+    data,
+    columns,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    onColumnVisibilityChange: setColumnVisibility,
+    onRowSelectionChange: setRowSelection,
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      rowSelection,
+    },
+  })
+
+  return (
+    <div className="w-full">
+      <div className="flex items-center gap-2 py-4">
+        <Input
+          placeholder={t.filterEmails}
+          value={(table.getColumn("email")?.getFilterValue() as string) ?? ""}
+          onChange={(event) =>
+            table.getColumn("email")?.setFilterValue(event.target.value)
+          }
+          className="max-w-sm"
+        />
+        <DropdownMenu>
+          <DropdownMenuTrigger
+            render={<Button variant="outline" className="ms-auto" />}
+          >
+            {t.columns} <ChevronDown />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            align={dir === "rtl" ? "start" : "end"}
+            data-lang={dir === "rtl" ? language : undefined}
+          >
+            <DropdownMenuGroup>
+              {table
+                .getAllColumns()
+                .filter((column) => column.getCanHide())
+                .map((column) => {
+                  return (
+                    <DropdownMenuCheckboxItem
+                      key={column.id}
+                      className="capitalize"
+                      checked={column.getIsVisible()}
+                      onCheckedChange={(value) =>
+                        column.toggleVisibility(!!value)
+                      }
+                    >
+                      {column.id}
+                    </DropdownMenuCheckboxItem>
+                  )
+                })}
+            </DropdownMenuGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+      <div className="overflow-hidden rounded-md border">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => {
+                  return (
+                    <TableHead key={header.id}>
+                      {header.isPlaceholder ? null : (
+                        <table.FlexRender header={header} />
+                      )}
+                    </TableHead>
+                  )
+                })}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow
+                  key={row.id}
+                  data-state={row.getIsSelected() && "selected"}
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>
+                      <table.FlexRender cell={cell} />
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell
+                  colSpan={columns.length}
+                  className="h-24 text-center"
+                >
+                  {t.noResults}
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+      <div className="flex items-center justify-end gap-2 py-4">
+        <div className="flex-1 text-sm text-muted-foreground">
+          {table.getFilteredSelectedRowModel().rows.length} {t.rowsSelected}{" "}
+          {table.getFilteredRowModel().rows.length} {t.rowsSelectedSuffix}
+        </div>
+        <div className="flex gap-2">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => table.previousPage()}
+            disabled={!table.getCanPreviousPage()}
+          >
+            {t.previous}
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => table.nextPage()}
+            disabled={!table.getCanNextPage()}
+          >
+            {t.next}
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}