Data grid with row selection

<script setup lang="ts">
/**
 * Порт `c-data-grid-7.tsx` ("Data grid with row selection"):
 * `enableRowSelection` + `DataGridTableRowSelectAll`/`DataGridTableRowSelect`.
 *
 * Аватарки (`images.unsplash.com`) и флаги (`flagcdn.com`) — реальные
 * сетевые запросы, недетерминированы в headless-стенде; заменены
 * локальным 1x1 data-URI (см. docs/PORTING.md §5 "picsum.photos").
 *
 * Оригинал держит побочный `useEffect`, синхронизирующий `rowSelection`
 * в отдельный `selectedIds` стейт — чисто демонстрационный сайд-эффект,
 * не влияющий на разметку/стили; в порте не воспроизведён (нет визуального
 * следа).
 */
import { h, ref } from "vue"
import { DataGrid, DataGridContainer, DataGridScrollArea, DataGridTable, DataGridTableRowSelect, DataGridTableRowSelectAll, DataGridPagination } from "@/components/reui/data-grid"
import { Avatar, AvatarBadge, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { cn } from "@/lib/utils"
import {
  getCoreRowModel,
  getFilteredRowModel,
  getPaginationRowModel,
  getSortedRowModel,
  useVueTable,
} from "@tanstack/vue-table"
import type {
  ColumnDef,
  PaginationState,
  RowSelectionState,
  SortingState,
} from "@tanstack/vue-table"

const PIXEL =
  "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs="

interface IData {
  id: string
  name: string
  availability: "online" | "away" | "busy" | "offline"
  email: string
  flag: string
  location: string
  joined: string
}

const demoData: IData[] = [
  { id: "1", name: "Alex Johnson", availability: "online", email: "alex@apple.com", flag: "us", location: "United States", joined: "Apr, 2021" },
  { id: "2", name: "Sarah Chen", availability: "away", email: "sarah@openai.com", flag: "gb", location: "United Kingdom", joined: "Jul, 2020" },
  { id: "3", name: "Michael Rodriguez", availability: "busy", email: "michael@meta.com", flag: "ca", location: "Canada", joined: "Mar, 2019" },
  { id: "4", name: "Emma Wilson", availability: "offline", email: "emma@tesla.com", flag: "au", location: "Australia", joined: "Jan, 2022" },
  { id: "5", name: "David Kim", availability: "online", email: "david@sap.com", flag: "de", location: "Germany", joined: "May, 2023" },
  { id: "6", name: "Aron Thompson", availability: "away", email: "aron@keenthemes.com", flag: "my", location: "Malaysia", joined: "Nov, 2018" },
  { id: "7", name: "James Brown", availability: "busy", email: "james@bbva.es", flag: "es", location: "Spain", joined: "Jun, 2021" },
]

function initials(name: string): string {
  return name
    .split(" ")
    .map((n) => n[0])
    .join("")
}

const statusColors: Record<IData["availability"], string> = {
  online: "bg-green-500",
  away: "bg-yellow-500",
  busy: "bg-orange-500",
  offline: "bg-gray-400",
}

const pagination = ref<PaginationState>({ pageIndex: 0, pageSize: 5 })
const sorting = ref<SortingState>([{ id: "name", desc: true }])
const rowSelection = ref<RowSelectionState>({})

const columns: ColumnDef<IData>[] = [
  {
    accessorKey: "id",
    header: () => h(DataGridTableRowSelectAll),
    cell: (ctx) => h(DataGridTableRowSelect, { row: ctx.row }),
    enableSorting: false,
    size: 20,
    meta: {
      headerClassName: "",
      cellClassName: "",
    },
  },
  {
    accessorKey: "name",
    id: "name",
    header: "Name",
    cell: (ctx) => {
      const availability = ctx.row.original.availability
      return h("div", { class: "flex items-center gap-3" }, [
        h(Avatar, { class: "size-8" }, () => [
          h(AvatarImage, { src: PIXEL, alt: ctx.row.original.name }),
          h(AvatarFallback, () => initials(ctx.row.original.name)),
          h(AvatarBadge, {
            class: cn("size-1.5! p-0", statusColors[availability] || statusColors.offline),
          }),
        ]),
        h("div", { class: "space-y-px" }, [
          h("div", { class: "text-foreground font-medium" }, ctx.row.original.name),
          h("div", { class: "text-muted-foreground" }, ctx.row.original.email),
        ]),
      ])
    },
    size: 200,
    enableSorting: true,
    enableHiding: false,
  },
  {
    accessorKey: "location",
    header: "Location",
    cell: (ctx) =>
      h("div", { class: "flex items-center gap-1.5" }, [
        h("img", {
          src: PIXEL,
          alt: ctx.row.original.flag,
          class: "size-4 rounded-full object-cover",
        }),
        h("div", { class: "text-foreground font-medium" }, ctx.row.original.location),
      ]),
    size: 180,
    meta: {
      headerClassName: "",
      cellClassName: "text-start",
    },
  },
  {
    accessorKey: "joined",
    header: "Joined",
    cell: (info) => info.getValue() as string,
    size: 120,
    meta: {
      headerClassName: "",
      cellClassName: "font-medium",
    },
  },
]

const table = useVueTable({
  get data() {
    return demoData
  },
  columns,
  get pageCount() {
    return Math.ceil(demoData.length / pagination.value.pageSize)
  },
  getRowId: (row: IData) => row.id,
  state: {
    get pagination() {
      return pagination.value
    },
    get sorting() {
      return sorting.value
    },
    get rowSelection() {
      return rowSelection.value
    },
  },
  enableRowSelection: true,
  onRowSelectionChange: (updater) => {
    rowSelection.value = typeof updater === "function" ? updater(rowSelection.value) : updater
  },
  onPaginationChange: (updater) => {
    pagination.value = typeof updater === "function" ? updater(pagination.value) : updater
  },
  onSortingChange: (updater) => {
    sorting.value = typeof updater === "function" ? updater(sorting.value) : updater
  },
  getCoreRowModel: getCoreRowModel(),
  getFilteredRowModel: getFilteredRowModel(),
  getPaginationRowModel: getPaginationRowModel(),
  getSortedRowModel: getSortedRowModel(),
})
</script>

<template>
  <DataGrid :table="table" :record-count="demoData.length">
    <div class="w-full space-y-2.5">
      <DataGridContainer>
        <DataGridScrollArea>
          <DataGridTable />
        </DataGridScrollArea>
      </DataGridContainer>
      <DataGridPagination />
    </div>
  </DataGrid>
</template>