Пагинация данных

MUI (Material-UI) предоставляет компонент Pagination, который позволяет удобно реализовать постраничный вывод данных. Основная задача пагинации — разбивать длинные списки элементов на страницы, улучшая читаемость и производительность интерфейса.

Базовое подключение компонента выглядит следующим образом:

import Pagination from '@mui/material/Pagination';
import Stack from '@mui/material/Stack';

<Stack spacing={2}>
  <Pagination count={10} />
</Stack>
  • count — количество страниц.
  • variant — стиль компонента (text или outlined).
  • color — цвет (primary, secondary, standard).

Компонент можно интегрировать с состоянием React для управления текущей страницей:

import { useState } from 'react';
import Pagination from '@mui/material/Pagination';

function ControlledPagination() {
  const [page, setPage] = useState(1);

  const handleChange = (event, value) => {
    setPage(value);
    // логика загрузки данных для выбранной страницы
  };

  return <Pagination count={20} page={page} onCha nge={handleChange} />;
}

Стилизация и адаптация

MUI позволяет детально настраивать внешний вид:

  • size — размер (small, medium, large).
  • shape — форма кнопок (circular, rounded).
  • siblingCount — количество соседних страниц, отображаемых рядом с активной страницей.
  • boundaryCount — количество страниц, отображаемых в начале и конце пагинации.

Пример комплексной настройки:

<Pagination
  count={50}
  page={page}
  onCha nge={handleChange}
  variant="outlined"
  color="secondary"
  size="large"
  shape="rounded"
  siblingCount={1}
  boundaryCount={2}
/>

Интеграция с таблицами

Часто пагинация используется совместно с компонентами Table и DataGrid для работы с большими наборами данных. В MUI DataGrid встроена поддержка пагинации через свойства:

  • pageSize — количество строк на странице.
  • rowsPerPageOptions — варианты для выбора количества строк.
  • onPageChange — обработчик смены страницы.
  • onPageSizeChange — обработчик смены размера страницы.

Пример с DataGrid:

import { DataGrid } from '@mui/x-data-grid';
import { useState } from 'react';

function PaginatedDataGrid({ rows, columns }) {
  const [pageSize, setPageSize] = useState(10);
  const [page, setPage] = useState(0);

  return (
    <DataGrid
      rows={rows}
      columns={columns}
      pagination
      pageSize={pageSize}
      rowsPerPageOptions={[5, 10, 20]}
      onPageCha nge={(newPage) => setPage(newPage)}
      onPageSizeCha nge={(newSize) => setPageSize(newSize)}
      page={page}
    />
  );
}

Управление серверной пагинацией

При работе с большими данными часто требуется серверная пагинация. Вместо загрузки всех данных сразу, компонент получает только данные для текущей страницы:

import { useState, useEffect } from 'react';
import Pagination from '@mui/material/Pagination';
import axios from 'axios';

function ServerPagination() {
  const [page, setPage] = useState(1);
  const [data, setData] = useState([]);
  const [totalPages, setTotalPages] = useState(0);

  useEffect(() => {
    axios.get(`/api/items?page=${page}`)
      .then(response => {
        setData(response.data.items);
        setTotalPages(response.data.totalPages);
      });
  }, [page]);

  return (
    <>
      <div>
        {data.map(item => <div key={item.id}>{item.name}</div>)}
      </div>
      <Pagination
        count={totalPages}
        page={page}
        onCha nge={(event, value) => setPage(value)}
      />
    </>
  );
}

Ключевой момент — корректная синхронизация текущей страницы с серверным API и обновление данных при смене страницы.

Комбинация с Infinite Scroll

Для современных интерфейсов иногда используют lazy loading, когда новые страницы подгружаются при скролле. MUI Pagination можно комбинировать с библиотеками вроде react-infinite-scroll-component, отображая кнопку перехода на следующую страницу или автоматически подгружая данные.

import InfiniteScroll from 'react-infinite-scroll-component';

<InfiniteScroll
  dataLength={data.length}
  next={loadNextPage}
  hasMore={page < totalPages}
  loader={<h4>Loading...</h4>}
>
  {data.map(item => <div key={item.id}>{item.name}</div>)}
</InfiniteScroll>

Доступность и локализация

Компонент Pagination поддерживает ARIA-атрибуты, что важно для доступности. Также можно использовать getItemAriaLabel для задания собственного текста для кнопок страниц:

<Pagination
  count={10}
  getItemAriaLabel={(type, page, selected) => {
    if (type === 'page') return `Перейти на страницу ${page}`;
    return `Кнопка ${type}`;
  }}
/>

Итоговые рекомендации по использованию

  • Использовать siblingCount и boundaryCount для улучшения UX при большом количестве страниц.
  • Для таблиц применять встроенные свойства DataGrid, чтобы облегчить обработку страниц.
  • При работе с сервером всегда синхронизировать состояние страницы и данных.
  • Для динамических интерфейсов рассмотреть комбинацию пагинации и Infinite Scroll.

Эти практики позволяют создавать эффективные и удобные интерфейсы с большим объемом данных, полностью используя возможности MUI.

Оглавление