rc-pagination

Basic Pagination

This code sample demonstrates how to render a basic pagination component with a total of 50 items.

import Pagination from 'rc-pagination';
import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <Pagination total={50} />, 
  document.getElementById('container')
);

Custom Page Size

This code sample shows how to set a custom page size and enable a size changer dropdown for the user to select how many items to display per page.

import Pagination from 'rc-pagination';
import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <Pagination total={500} defaultPageSize={20} showSizeChanger />, 
  document.getElementById('container')
);

Controlled Component

This code sample illustrates how to create a controlled pagination component where the current page state is managed by the parent component.

import Pagination from 'rc-pagination';
import React, { useState } from 'react';
import ReactDOM from 'react-dom';

const App = () => {
  const [current, setCurrent] = useState(1);
  const onChange = page => {
    setCurrent(page);
  };

  return (
    <Pagination current={current} onChange={onChange} total={100} />
  );
};

ReactDOM.render(<App />, document.getElementById('container'));

Jump to Page

This code sample demonstrates how to enable the 'quick jumper' feature, allowing users to jump to a specific page directly.

import Pagination from 'rc-pagination';
import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <Pagination total={100} showQuickJumper />, 
  document.getElementById('container')
);