Data grid with pagination

<script setup lang="ts">
/**
 * Порт `c-data-grid-1.tsx` ("Data grid with pagination"). Оригинал —
 * простейший вариант без tableLayout/DataGridColumnHeader: заголовки
 * колонок — обычные строки, сортировка задана только начальным `state`.
 *
 * `flagcdn.com/{flag}.svg` в ячейке Location — реальный сетевой запрос,
 * недетерминирован в headless-стенде; заменён локальным 1x1 data-URI
 * (тот же приём, что и в `block-combobox`/`block-select`/`block-avatar`,
 * см. docs/PORTING.md §5 "picsum.photos" и c-combobox-10).
 */
import { h, ref } from "vue"
import { DataGrid, DataGridContainer, DataGridScrollArea, DataGridTable, DataGridPagination } from "@/components/reui/data-grid"
import {
  getCoreRowModel,
  getFilteredRowModel,
  getPaginationRowModel,
  getSortedRowModel,
  useVueTable,
} from "@tanstack/vue-table"
import type { ColumnDef, PaginationState, SortingState } from "@tanstack/vue-table"

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

interface IData {
  id: string
  name: string
  email: string
  flag: string
  location: string
  balance: number
}

const demoData: IData[] = [
  { id: "1", name: "Alex Johnson", email: "alex@example.com", flag: "us", location: "United States", balance: 5143.03 },
  { id: "2", name: "Sarah Chen", email: "sarah@example.com", flag: "gb", location: "United Kingdom", balance: 5243.03 },
  { id: "3", name: "Michael Rodriguez", email: "michael@example.com", flag: "ca", location: "Canada", balance: 5343.03 },
  { id: "4", name: "Emma Wilson", email: "emma@example.com", flag: "au", location: "Australia", balance: 5443.03 },
  { id: "5", name: "David Kim", email: "david@example.com", flag: "de", location: "Germany", balance: 5543.03 },
  { id: "6", name: "Aron Thompson", email: "lisa@example.com", flag: "my", location: "Malaysia", balance: 5643.03 },
  { id: "7", name: "James Brown", email: "james@example.com", flag: "es", location: "Spain", balance: 5743.03 },
]

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

const columns: ColumnDef<IData>[] = [
  {
    accessorKey: "name",
    header: "Name",
    cell: (info) => info.getValue() as string,
    size: 150,
    meta: {
      headerClassName: "",
      cellClassName: "",
    },
  },
  {
    accessorKey: "email",
    header: "Email",
    cell: (info) =>
      h(
        "div",
        { class: "truncate" },
        h(
          "a",
          {
            href: `mailto:${info.getValue()}`,
            class: "hover:text-primary truncate hover:underline",
          },
          info.getValue() as string
        )
      ),
    size: 150,
    meta: {
      headerClassName: "",
      cellClassName: "",
    },
  },
  {
    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" }, ctx.row.original.location),
      ]),
    size: 175,
    meta: {
      headerClassName: "",
      cellClassName: "",
    },
  },
  {
    accessorKey: "balance",
    header: "Balance ($)",
    cell: (info) => `$${(info.getValue() as number).toFixed(2)}`,
    size: 100,
    meta: {
      headerClassName: "text-right rtl:text-left",
      cellClassName: "text-right rtl:text-left",
    },
  },
]

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
    },
  },
  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>