Пагинация через TablePagination

MUI (Material-UI) предоставляет компонент TablePagination, который упрощает управление большим количеством данных в таблицах за счёт разбивки на страницы. Он тесно интегрируется с компонентом Table и позволяет контролировать количество строк на странице, текущую страницу, а также предоставлять пользователю возможность выбора размера страницы.

Основные свойства TablePagination

1. component Определяет, какой HTML-элемент будет использоваться для рендеринга корневого компонента. По умолчанию это TablePaginationActions.

2. count Общее количество строк данных в таблице. Этот параметр обязателен для корректной работы пагинации. Например, если таблица содержит 120 записей, count должен быть равен 120.

3. page Текущая страница, нумерация начинается с 0. Изменение этого значения обновляет отображаемый диапазон строк.

4. rowsPerPage Количество строк на одной странице. Обычно предоставляется список опций через rowsPerPageOptions. Пример: [5, 10, 25].

5. onPageChange Функция-обработчик изменения страницы. Принимает два аргумента: событие и номер новой страницы. Внутри этой функции необходимо обновлять состояние текущей страницы.

6. onRowsPerPageChange Функция-обработчик изменения количества строк на странице. Обычно обновляет состояние rowsPerPage и сбрасывает текущую страницу на 0.

7. rowsPerPageOptions Список доступных вариантов количества строк на странице. Можно передавать как массив чисел, так и объекты с ключами label и value для кастомного отображения.

Пример базовой реализации

import React, { useState } from 'react';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import TablePagination from '@mui/material/TablePagination';
import Paper from '@mui/material/Paper';

const rows = [
  { id: 1, name: 'Alice', age: 25 },
  { id: 2, name: 'Bob', age: 30 },
  { id: 3, name: 'Charlie', age: 22 },
  // ...дополнительные данные
];

export default function PaginatedTable() {
  const [page, setPage] = useState(0);
  const [rowsPerPage, setRowsPerPage] = useState(5);

  const handleChangePage = (event, newPage) => {
    setPage(newPage);
  };

  const handleChangeRowsPerPage = (event) => {
    setRowsPerPage(parseInt(event.target.value, 10));
    setPage(0);
  };

  const paginatedRows = rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);

  return (
    <Paper>
      <TableContainer>
        <Table>
          <TableHead>
            <TableRow>
              <TableCell>ID</TableCell>
              <TableCell>Имя</TableCell>
              <TableCell>Возраст</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {paginatedRows.map((row) => (
              <TableRow key={row.id}>
                <TableCell>{row.id}</TableCell>
                <TableCell>{row.name}</TableCell>
                <TableCell>{row.age}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
      <TablePagination
        component="div"
        count={rows.length}
        page={page}
        onPageCha nge={handleChangePage}
        rowsPerPage={rowsPerPage}
        onRowsPerPageCha nge={handleChangeRowsPerPage}
        rowsPerPageOptions={[5, 10, 25]}
      />
    </Paper>
  );
}

Кастомизация TablePagination

Стилизация элементов: Используется sx для прямого изменения стилей или styled для создания кастомного компонента. Пример:

<TablePagination
  sx={{
    bgcolor: 'grey.100',
    '& .MuiTablePagination-toolbar': {
      justifyContent: 'center',
    },
  }}
  ...
/>

Замена кнопок навигации: Можно передать собственный компонент через ActionsComponent, чтобы изменить поведение кнопок «следующая» и «предыдущая страница».

<TablePagination
  ActionsComponent={CustomPaginationActions}
  ...
/>

Важные рекомендации

  • Сброс страницы при изменении rowsPerPage: Чтобы не получить пустую страницу при уменьшении количества строк на странице, рекомендуется сбрасывать page в 0.

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

  • Доступность (a11y): TablePagination автоматически поддерживает aria-атрибуты для кнопок навигации, но при кастомизации важно проверять доступность новых компонентов.

Серверная пагинация

Для интеграции с сервером:

  1. При изменении страницы (onPageChange) отправляется запрос с параметрами page и rowsPerPage.
  2. Сервер возвращает данные только для текущей страницы.
  3. Значение count обновляется на основе общего числа записей на сервере.

Пример:

const fetchPageData = async (page, rowsPerPage) => {
  const response = await fetch(`/api/users?page=${page + 1}&limit=${rowsPerPage}`);
  const data = await response.json();
  setRows(data.items);
  setCount(data.totalCount);
};

Использование TablePagination обеспечивает удобный и стандартизированный способ управления страницами в таблицах MUI, позволяя как локальную, так и серверную пагинацию, с гибкой кастомизацией и полной интеграцией с системой Material Design.

Оглавление