Paginated Data Table

'use client'

import * as React from 'react'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { NuqsAdapter } from 'nuqs/adapters/next/app'
import type { ColumnDef } from '@tanstack/react-table'

import { PaginatedDataTable } from '@/components/custom/paginated-data-table'
import { formatMoney } from '@/lib/kiota-format'
import type { PaginatedApiResponse, SearchMethodParams } from '@/lib/kiota-pagination'

interface Employee {
  id: string
  employeeNo: string
  fullName: string
  branch: string
  salary: number
}

const EMPLOYEES: Employee[] = Array.from({ length: 47 }, (_, index) => ({
  id: `emp-${index + 1}`,
  employeeNo: `EMP-${String(index + 1).padStart(3, '0')}`,
  fullName: ['Ada Lovelace', 'Grace Hopper', 'Wanjiru Kamau', 'Otieno Odhiambo', 'Amina Yusuf'][index % 5],
  branch: ['Nairobi', 'Mombasa', 'Kisumu'][index % 3],
  salary: 45000_00 + index * 1_250_00,
}))

// Stands in for your endpoint. Note the zero-based `page` and the
// PaginatedApiResponse shape the table reads.
async function searchEmployees({ page, size, search }: SearchMethodParams): Promise<PaginatedApiResponse<Employee>> {
  const term = search.trim().toLowerCase()
  const matches = term
    ? EMPLOYEES.filter((employee) =>
        `${employee.employeeNo} ${employee.fullName} ${employee.branch}`.toLowerCase().includes(term),
      )
    : EMPLOYEES

  const start = page * size

  return {
    status: 200,
    message: 'OK',
    data: {
      content: matches.slice(start, start + size),
      page,
      size,
      totalElements: matches.length,
      totalPages: Math.max(Math.ceil(matches.length / size), 1),
      last: start + size >= matches.length,
    },
  }
}

const columns: ColumnDef<Employee>[] = [
  { accessorKey: 'employeeNo', header: 'Employee No' },
  { accessorKey: 'fullName', header: 'Name' },
  { accessorKey: 'branch', header: 'Branch' },
  {
    accessorKey: 'salary',
    header: 'Salary',
    cell: ({ row }) => <span className="tabular-nums">{formatMoney(row.original.salary)}</span>,
  },
]

export default function PaginatedDataTableDemo() {
  const [client] = React.useState(() => new QueryClient())
  const [selected, setSelected] = React.useState<string[]>([])

  return (
    <QueryClientProvider client={client}>
      <NuqsAdapter>
        <div className="w-full space-y-3">
          <PaginatedDataTable
            columns={columns}
            searchKeys={['employeeNo', 'fullName', 'branch']}
            searchMethod={searchEmployees}
            tableKey="demo-employees"
            // Renamed so the demo does not fight the docs page's own URL.
            queryParams={{ search: 'demoSearch', page: 'demoPage', size: 'demoSize' }}
            selectedItems={selected}
            setSelectedItems={setSelected}
            bodyClass="max-h-80"
          />
          <p className="text-sm text-muted-foreground">
            {selected.length} selected — page, size and search are in this page&apos;s URL.
          </p>
        </div>
      </NuqsAdapter>
    </QueryClientProvider>
  )
}