Pagination

import { Pagination } from '@/ui/pagination';
import { Table, type TableColumn } from '@/ui/table';

type Candidate = { id: string; name: string; company: string; updated: string };

const candidates: Candidate[] = [
  { id: 'c1', name: 'Yuki Kimura', company: 'Halcyon Bank', updated: '2h ago' },
  { id: 'c2', name: 'Maya Chen', company: 'Northwind Logistics', updated: 'Yesterday' },
];

const columns: TableColumn<Candidate>[] = [
  { key: 'name', label: 'Candidate', cell: (row) => row.name },
  { key: 'company', label: 'Company', width: 200, cell: (row) => row.company },
  { key: 'updated', label: 'Updated', cell: (row) => row.updated },
];

export default function PaginationUnderTheGrid() {
  return (
    <div className="flex w-full flex-col bg-surface">
      <Table label="Candidates" columns={columns} rows={candidates} />
      <Pagination noun={{ one: 'candidate', many: 'candidates' }} hidden={8} onClear={() => {}} onNext={() => {}} />
    </div>
  );
}

import { Pagination } from '@/ui/pagination';

const noun = { one: 'candidate', many: 'candidates' };

export default function PaginationWhatItShows() {
  return (
    <div className="flex w-full flex-col gap-200">
      <div className="flex flex-col gap-050">
        <p className="text-body-small leading-body-small text-text-subtle">More rows, nothing hidden</p>
        <Pagination noun={noun} onNext={() => {}} className="bg-surface" />
      </div>
      <div className="flex flex-col gap-050">
        <p className="text-body-small leading-body-small text-text-subtle">Last page, one row hidden</p>
        <Pagination noun={noun} hidden={1} onClear={() => {}} className="bg-surface" />
      </div>
      <div className="flex flex-col gap-050">
        <p className="text-body-small leading-body-small text-text-subtle">Many hidden</p>
        <Pagination noun={noun} hidden={12480} onClear={() => {}} onNext={() => {}} className="bg-surface" />
      </div>
      <div className="flex flex-col gap-050">
        <p className="text-body-small leading-body-small text-text-subtle">Last page, nothing hidden: no line at all</p>
        <Pagination noun={noun} />
      </div>
    </div>
  );
}

import { useState } from 'react';
import { Pagination } from '@/ui/pagination';
import { Table, type TableColumn } from '@/ui/table';
import { toast } from '@/ui/toast';

type Candidate = { id: string; name: string; number: number };

const total = 12480;
const pageSize = 100;
const pageOf = (page: number): Candidate[] =>
  Array.from({ length: pageSize }, (_, index) => {
    const number = page * pageSize + index + 1;
    return { id: `c${number}`, name: `Candidate ${number.toLocaleString('en-GB')}`, number };
  });

const columns: TableColumn<Candidate>[] = [
  { key: 'name', label: 'Candidate', cell: (row) => row.name },
  { key: 'number', label: 'Number', width: 120, align: 'end', cell: (row) => row.number.toLocaleString('en-GB') },
];

// The app loads 100 rows a page by cursor; the third page fails here, to show the error toast with Try again.
export default function PaginationLongLists() {
  const [page, setPage] = useState(0);
  const [loading, setLoading] = useState(false);
  const next = (attempt = 0) => {
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
      if (page === 1 && attempt === 0) {
        toast.add({
          type: 'error',
          title: "Couldn't load the next page",
          description: 'Check your connection and try again.',
          actionProps: { children: 'Try again', onClick: () => next(1) },
        });
        return;
      }
      setPage((current) => current + 1);
    }, 900);
  };
  const last = (page + 1) * pageSize >= total;
  return (
    <div className="flex w-full flex-col bg-surface">
      <Table label={`Candidates, page ${page + 1}`} columns={columns} rows={pageOf(page)} loading={loading} className="max-h-60" />
      <Pagination noun={{ one: 'candidate', many: 'candidates' }} loading={loading} onNext={last ? undefined : () => next()} />
    </div>
  );
}