DataTableRtl() — ui Function Reference

Architecture documentation for the DataTableRtl() function in data-table-rtl.tsx from the ui codebase.

Function tsx DocumentationAtlas ContentSourcing

Entity Profile

DocumentationAtlas→ ContentSourcing→ DataTableRtl() — ui Function Reference

Dependency Diagram

graph TD
  0be238e6_2312_c457_836b_98385102fc8f["DataTableRtl()"]
  839c6dac_4d54_9abc_684b_202b49a94049["data-table-rtl.tsx"]
  0be238e6_2312_c457_836b_98385102fc8f -->|defined in| 839c6dac_4d54_9abc_684b_202b49a94049
  style 0be238e6_2312_c457_836b_98385102fc8f fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/base/data-table-rtl.tsx lines 165–429

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<VisibilityState>({})
  const [rowSelection, setRowSelection] = React.useState({})

  const columns: ColumnDef<Payment>[] = React.useMemo(
    () => [
      {
        id: "select",
        header: ({ table }) => (
          <Checkbox
            checked={
              table.getIsAllPageRowsSelected() ||
              (table.getIsSomePageRowsSelected() ? true : false)
            }
            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,
      },
      {
        accessorKey: "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>
        },
      },
      {
        accessorKey: "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>
        ),
      },
      {
        accessorKey: "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)