TableHead, TableBody, TableFooter

Компоненты таблиц в MUI позволяют создавать структурированные и стилизованные таблицы с минимальным количеством кода, сохраняя гибкость при кастомизации. Основные строительные блоки таблицы — это TableHead, TableBody и TableFooter. Каждый из них выполняет определённую функцию и имеет собственные свойства и возможности.

TableHead

TableHead используется для отображения заголовков колонок таблицы. Обычно он располагается в верхней части таблицы и содержит один или несколько компонентов TableRow, каждый из которых состоит из TableCell.

Пример использования:

import Table from '@mui/material/Table';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import TableCell from '@mui/material/TableCell';

<Table>
  <TableHead>
    <TableRow>
      <TableCell>ID</TableCell>
      <TableCell>Имя</TableCell>
      <TableCell>Возраст</TableCell>
    </TableRow>
  </TableHead>
</Table>

Особенности TableHead:

  • Семантика: автоматически помечается как <thead> в DOM, что важно для доступности и SEO.
  • Стилизация: можно использовать sx или className для задания фона, цвета текста и других CSS-свойств.
  • Совместимость с sticky заголовком: добавив stickyHeader к компоненту Table, заголовок будет фиксироваться при прокрутке.
<Table stickyHeader>
  <TableHead>
    <TableRow>
      <TableCell>ID</TableCell>
      <TableCell>Имя</TableCell>
      <TableCell>Возраст</TableCell>
    </TableRow>
  </TableHead>
</Table>

TableBody

TableBody предназначен для отображения данных таблицы. Основной элемент — TableRow, внутри которого располагаются TableCell. Это центральная часть таблицы, где находятся все динамические данные.

Пример использования с динамическими данными:

import TableBody from '@mui/material/TableBody';

const users = [
  { id: 1, name: 'Алексей', age: 30 },
  { id: 2, name: 'Мария', age: 25 },
];

<Table>
  <TableBody>
    {users.map(user => (
      <TableRow key={user.id}>
        <TableCell>{user.id}</TableCell>
        <TableCell>{user.name}</TableCell>
        <TableCell>{user.age}</TableCell>
      </TableRow>
    ))}
  </TableBody>
</Table>

Особенности TableBody:

  • Поддерживает динамическое отображение данных, включая условные рендеры и фильтрацию.
  • Можно комбинировать с функционалом сортировки и пагинации.
  • Позволяет добавлять стили к отдельным строкам на основе состояния или данных.
<TableRow sx={{ backgroundColor: user.age > 28 ? '#f0f0f0' : 'inherit' }}>

TableFooter

TableFooter используется для отображения нижней части таблицы, часто содержащей суммарные данные или дополнительные элементы управления (например, пагинацию).

Пример использования:

import TableFooter from '@mui/material/TableFooter';

<Table>
  <TableFooter>
    <TableRow>
      <TableCell colSpan={2}>Итого пользователей:</TableCell>
      <TableCell>{users.length}</TableCell>
    </TableRow>
  </TableFooter>
</Table>

Особенности TableFooter:

  • Автоматически преобразуется в <tfoot> в DOM.
  • Может объединять несколько ячеек с помощью colSpan.
  • Поддерживает использование стилей, аналогично TableHead и TableBody.
  • Часто используется вместе с компонентами TablePagination для организации постраничного отображения данных.
import TablePagination from '@mui/material/TablePagination';

<TableFooter>
  <TableRow>
    <TablePagination
      count={users.length}
      rowsPerPage={5}
      page={0}
      onPageCha nge={() => {}}
    />
  </TableRow>
</TableFooter>

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

  • Структура таблицы всегда должна сохранять порядок: TableHead, TableBody, затем TableFooter.
  • Семантические компоненты MUI обеспечивают совместимость с доступностью и сторонними библиотеками.
  • Стилизация и кастомизация через sx и className позволяет точно контролировать внешний вид таблицы без необходимости писать отдельный CSS.
  • Для больших таблиц рекомендуется использовать stickyHeader вместе с TableContainer, чтобы улучшить пользовательский опыт при прокрутке.

Эта комбинация компонентов позволяет строить гибкие, функциональные и визуально согласованные таблицы с минимальными усилиями, сохраняя строгую семантику HTML и поддержку всех возможностей Material-UI.

Оглавление