TableRow и TableCell

TableRow и TableCell — это ключевые компоненты для построения таблиц в библиотеке MUI (Material-UI) на JavaScript и React. Они обеспечивают гибкую разметку строк и ячеек, полностью соответствующую стандартам Material Design.

TableRow

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

  • hover: логическое значение. При установке в true строка подсвечивается при наведении курсора.
  • selected: логическое значение. Позволяет визуально выделить строку как выбранную.
  • component: позволяет заменить тег строки (tr) на другой HTML-элемент или React-компонент.

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

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


  Идентификатор
  Имя пользователя
  Роль

В этом примере строка будет подсвечиваться при наведении и иметь выделенный стиль, так как установлено свойство selected.

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

  • В TableRow можно вкладывать любые React-элементы, но для корректного отображения таблицы рекомендуется использовать только TableCell.
  • TableRow наследует стиль из Table и TableBody, что позволяет контролировать внешний вид таблицы глобально.

TableCell

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

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

  • align: задает выравнивание содержимого. Возможные значения: "inherit" | "left" | "center" | "right" | "justify".
  • component: позволяет изменить HTML-тег по умолчанию (td для обычных ячеек, th для заголовочных).
  • scope: используется для заголовочных ячеек, определяя, к каким строкам или столбцам относится заголовок ("row" | "col" | "rowgroup" | "colgroup").
  • padding: управление внутренним отступом. Значения: "normal" | "checkbox" | "none".

Пример:


  
    1
  
  Иван Иванов
  Администратор

Здесь первая ячейка является заголовочной для строки, а две следующие — обычные ячейки с разным выравниванием.

Стилизация TableRow и TableCell

MUI поддерживает три способа стилизации:

  1. С помощью встроенных свойств (align, padding, selected, hover).
  2. С использованием sx — удобного способа добавления CSS:

  ID
  Пользователь
  1. Через styled API:
import { styled } from '@mui/material/styles';
import TableCell from '@mui/material/TableCell';

const CustomTableCell = styled(TableCell)(({ theme }) => ({
  backgroundColor: theme.palette.primary.light,
  color: theme.palette.common.white,
  fontWeight: 600,
}));


  Имя
  Роль

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

TableRow и TableCell работают совместно с:

  • TableHead — для создания заголовков таблицы.
  • TableBody — для тела таблицы.
  • TableFooter — для подвала таблицы, где обычно размещают суммарные значения.

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

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


    
      ID
      Имя
      Роль
    
  
    
      1
      Иван Иванов
      Администратор
    
    
      2
      Мария Петрова
      Модератор
    
  
    
      Итого пользователей: 2

Динамическое создание строк и ячеек

При работе с массивами данных удобно использовать map для генерации строк и ячеек:

const users = [
  { id: 1, name: 'Иван Иванов', role: 'Администратор' },
  { id: 2, name: 'Мария Петрова', role: 'Модератор' },
];


  {users.map(user => (
    
      {user.id}
      {user.name}
      {user.role}
    
  ))}

Это позволяет создавать таблицы с динамическим контентом без дублирования кода.

Accessibility

Для доступности (a11y) важно использовать свойства component и scope в заголовочных ячейках. TableCell с component="th" и scope="row" делает таблицу понятной для экранных читалок.

Оглавление