Pagination

free

Pagination divides content into pages and lets users move between them.

Preview

Dark

import Pagination from '@/components/ui/Pagination';

export default function UsageDemo() {
  const onPaginationChange = (page: number) => {
    console.log('onPaginationChange', page);
  };

  return (
    <div>
      <Pagination onChange={onPaginationChange} />
    </div>
  );
}

Installation

Add this component with the NateUI CLI.

npx nateui@latest add Pagination

Examples

Basic

Preview

Dark

import Pagination from '@/components/ui/Pagination';

export default function BasicDemo() {
  const onPaginationChange = (page: number) => {
    console.log('onPaginationChange', page);
  };

  return (
    <div>
      <Pagination onChange={onPaginationChange} />
    </div>
  );
}

Preview

Dark

import Pagination from '@/components/ui/Pagination';

export default function MoreDemo() {
  return (
    <div>
      <div className="mb-4">
        <Pagination total={50} />
      </div>
      <div className="mb-4">
        <Pagination total={100} />
      </div>
    </div>
  );
}

Total

Preview

Dark

Total 50 Items

import Pagination from '@/components/ui/Pagination';

export default function TotalDemo() {
  return (
    <div>
      <Pagination displayTotal total={50} />
    </div>
  );
}

Page sizes

Preview

Dark

Total 100 Items

import { useState } from 'react';
import Pagination from '@/components/ui/Pagination';
import Select from '@/components/ui/Select';

const options = [
  { value: 5, label: '5 / page' },
  { value: 10, label: '10 / page' },
  { value: 20, label: '20 / page' },
  { value: 50, label: '50 / page' },
];

export default function PageSizeDemo() {
  const [pageSize, setPageSize] = useState(options[0].value);

  const onPageSelect = (value: number) => {
    setPageSize(value);
  };

  return (
    <div className="flex items-center">
      <Pagination
        displayTotal
        pageSize={pageSize}
        total={100}
      />
      <div style={{ maxWidth: 120 }}>
        <Select
          isSearchable={false}
          defaultValue={options[0]}
          options={options}
          onChange={(selected) => onPageSelect(selected.value)}
        />
      </div>
    </div>
  );
}

Controlled

Preview

Dark

import { useState } from 'react';
import Pagination from '@/components/ui/Pagination';

export default function ControlledDemo() {
  const [page, setPage] = useState(60);

  const onPaginationChange = (val: number) => {
    setPage(val);
  };

  return (
    <div>
      <Pagination
        total={100}
        currentPage={page}
        onChange={onPaginationChange}
      />
    </div>
  );
}

API

Pagination renders page controls from total and pageSize, then reports the selected page through onChange.

Prop	Description	Type	Default
`currentPage`	Current page number.	`number`	`1`
`displayTotal`	Whether to display the total number of data items.	`boolean`	`false`
`onChange`	Callback when a pagination index is clicked.	`(pageNumber: number) => void`	-
`pageSize`	Number of data items per page.	`number`	`1`
`total`	Total number of data items.	`number`	`5`