"use client"

import * as React from "react"
import { type ColumnDef } from "@tanstack/react-table"
import { DataTable } from "@/registry/ui/data-table"

interface Country {
  name: string
  region: string
}

const mockData: Country[] = [
  { name: "Kenya", region: "Africa" },
  { name: "Rwanda", region: "Africa" },
  { name: "Tanzania", region: "Africa" },
  { name: "Lesotho", region: "Africa" },
  { name: "Cameroon", region: "Africa" },
  { name: "Colombia", region: "Latin America" },
  { name: "El Salvador", region: "Latin America" },
  { name: "Guatemala", region: "Latin America" },
  { name: "Cambodia", region: "Asia" },
  { name: "Vanuatu", region: "Pacific" },
  { name: "Samoa", region: "Pacific" },
  { name: "Timor-Leste", region: "Asia" },
  { name: "Burundi", region: "Africa" },
  { name: "The Gambia", region: "Africa" },
]

const columns: ColumnDef<Country>[] = [
  { accessorKey: "name", header: "Country" },
  { accessorKey: "region", header: "Region" },
]

/** The DataTable footer IS the DataTablePagination component: range + total,
 *  rows-per-page select, first/prev/next/last. 14 rows across 10-per-page
 *  pages exercises every control. */
export default function DataTablePaginationDemo() {
  return <DataTable columns={columns} data={mockData} />
}

Country	Region
Kenya	Africa
Rwanda	Africa
Tanzania	Africa
Lesotho	Africa
Cameroon	Africa
Colombia	Latin America
El Salvador	Latin America
Guatemala	Latin America
Cambodia	Asia
Vanuatu	Pacific

data-table-pagination