Use table

import { useTable } from "@sublay/react-js";

type EventRow = {
  id: string;
  name: string;
  capacity: number;
  createdAt: string;
};

function Events() {
  const {
    rows,
    pagination,
    loading,
    view,
    setPage,
    setSort,
    setFilters,
    createRow,
    updateRow,
    deleteRow,
  } = useTable<EventRow>("Events");

  return (
    <>
      {loading && <Spinner />}
      {rows.map((e) => (
        <Row key={e.id} event={e} onSave={(d) => updateRow(e.id, d)} onDelete={() => deleteRow(e.id)} />
      ))}
      {/* Both halves come off `view.page` (what you asked for) rather than
          `pagination` (what is on screen) — see the note below. `totalPages`
          is safe to read because it describes the whole result set, not the
          page. */}
      {pagination && view.page < pagination.totalPages && (
        <button onClick={() => setPage(view.page + 1)}>Next</button>
      )}
    </>
  );
}