Адаптивные таблицы

В библиотеке MUI для создания таблиц используется компонент Table вместе с сопутствующими компонентами: TableHead, TableBody, TableRow, TableCell и TableContainer. Для адаптивности таблиц применяются комбинации CSS-свойств и встроенных возможностей MUI, таких как sx и styled, а также компоненты-обертки, обеспечивающие горизонтальную прокрутку на малых экранах.

Использование TableContainer для прокрутки

Чтобы таблица корректно отображалась на экранах с ограниченной шириной, её следует обернуть в компонент TableContainer, который поддерживает скроллинг:

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 Paper from '@mui/material/Paper';

<TableContainer component={Paper} sx={{ maxHeight: 440 }}>
  <Table stickyHeader aria-label="sticky table">
    <TableHead>
      <TableRow>
        <TableCell>Название</TableCell>
        <TableCell align="right">Количество</TableCell>
        <TableCell align="right">Цена</TableCell>
      </TableRow>
    </TableHead>
    <TableBody>
      {rows.map((row) => (
        <TableRow key={row.id}>
          <TableCell component="th" scope="row">{row.name}</TableCell>
          <TableCell align="right">{row.quantity}</TableCell>
          <TableCell align="right">{row.price}</TableCell>
        </TableRow>
      ))}
    </TableBody>
  </Table>
</TableContainer>
  • sx={{ maxHeight: 440 }} ограничивает высоту таблицы, создавая вертикальный скролл при переполнении.
  • stickyHeader фиксирует заголовок при вертикальной прокрутке, что важно для длинных таблиц.

Адаптивное скрытие колонок

Для улучшения восприятия на мобильных устройствах часто требуется скрывать некоторые колонки. MUI поддерживает это через систему breakpoints и свойство sx:

<TableCell sx={{ display: { xs: 'none', md: 'table-cell' } }}>
  Цена
</TableCell>
  • xs: 'none' скрывает колонку на маленьких экранах (mobile).
  • md: 'table-cell' делает её видимой на средних и больших экранах.

Использование компонента Box для горизонтального скролла

Если таблица шире контейнера, для горизонтального скролла удобно использовать Box:

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

<Box sx={{ overflowX: 'auto' }}>
  <Table>
    ...
  </Table>
</Box>
  • Свойство overflowX: 'auto' добавляет горизонтальный скролл при необходимости.
  • Такой подход особенно полезен для таблиц с большим количеством колонок.

Применение Grid для адаптивного расположения данных

Для компактного отображения на мобильных устройствах можно комбинировать таблицы с компонентом Grid, чтобы трансформировать строки в карточки:

import Grid from '@mui/material/Grid';
import Paper from '@mui/material/Paper';
import Typography from '@mui/material/Typography';

<Grid container spacing={2}>
  {rows.map((row) => (
    <Grid item xs={12} sm={6} md={4} key={row.id}>
      <Paper sx={{ p: 2 }}>
        <Typography variant="h6">{row.name}</Typography>
        <Typography>Количество: {row.quantity}</Typography>
        <Typography>Цена: {row.price}</Typography>
      </Paper>
    </Grid>
  ))}
</Grid>
  • xs={12} занимает всю ширину на мобильных устройствах.
  • sm={6} и md={4} позволяют размещать карточки в несколько колонок на планшетах и десктопах.

Стилизация с помощью styled и sx

MUI предоставляет мощные инструменты для кастомизации таблиц. Компонент styled позволяет создавать обернутые версии таблиц с адаптивными стилями:

import { styled } from '@mui/material/styles';
import TableCell from '@mui/material/TableCell';

const ResponsiveTableCell = styled(TableCell)(({ theme }) => ({
  [theme.breakpoints.down('sm')]: {
    display: 'block',
    width: '100%',
    boxSizing: 'border-box',
  },
}));
  • На маленьких экранах каждая ячейка становится блочной и занимает всю ширину.
  • Это позволяет отображать таблицу как список карточек, не теряя данных.

Использование Collapse для вложенных строк

Для отображения дополнительных данных на малых экранах удобно использовать компонент Collapse:

import Collapse from '@mui/material/Collapse';
import IconButton from '@mui/material/IconButton';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';

<TableRow>
  <TableCell>
    <IconButton size="small" onCl ick={handleClick}>
      {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
    </IconButton>
  </TableCell>
  <TableCell>{row.name}</TableCell>
</TableRow>
<TableRow>
  <TableCell colSpan={6} style={{ paddingBottom: 0, paddingTop: 0 }}>
    <Collapse in={open} timeout="auto" unmountOnExit>
      <Box sx={{ margin: 1 }}>
        Дополнительная информация
      </Box>
    </Collapse>
  </TableCell>
</TableRow>
  • Использование Collapse позволяет скрывать дополнительные данные до тех пор, пока пользователь не развернёт строку.
  • Подходит для адаптивного отображения большого объема информации на мобильных устройствах.

Комбинация всех подходов

Эффективная адаптивная таблица в MUI обычно сочетает несколько техник:

  • TableContainer и Box для скроллинга.
  • sx и styled для скрытия колонок и изменения стилей.
  • Компоненты Grid и Collapse для мобильных интерфейсов.

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

Оглавление