Table и его базовая структура

Компонент Table в библиотеке MUI представляет собой мощный инструмент для отображения табличных данных в приложениях на React. В его основе лежит семантическая структура HTML-таблицы, но с расширенными возможностями кастомизации и интеграции с системой стилей Material UI.

Ключевые компоненты Table:

  • TableContainer – обёртка для таблицы, которая обычно используется для добавления скроллинга и управления размерами.
  • Table – основной компонент таблицы, содержащий строки и ячейки.
  • TableHead – определяет заголовочную часть таблицы.
  • TableBody – содержит строки с данными.
  • TableRow – отдельная строка таблицы, которая может использоваться как в заголовке, так и в теле.
  • TableCell – отдельная ячейка таблицы, поддерживающая разные стили для заголовка и тела таблицы.
  • TableFooter – опциональная часть для отображения нижней информации или итогов.

Структура таблицы

Стандартная структура таблицы в MUI строится следующим образом:

<TableContainer>
  <Table>
    <TableHead>
      <TableRow>
        <TableCell>Заголовок 1</TableCell>
        <TableCell>Заголовок 2</TableCell>
      </TableRow>
    </TableHead>
    <TableBody>
      <TableRow>
        <TableCell>Данные 1</TableCell>
        <TableCell>Данные 2</TableCell>
      </TableRow>
      <TableRow>
        <TableCell>Данные 3</TableCell>
        <TableCell>Данные 4</TableCell>
      </TableRow>
    </TableBody>
  </Table>
</TableContainer>

Особенности структуры:

  • TableContainer обеспечивает прокрутку таблицы при превышении размеров родительского контейнера.
  • Table отвечает за саму таблицу, позволяя применять темы и стили через пропсы sx и className.
  • TableHead и TableBody отделяют заголовки от данных, упрощая визуальное оформление и доступность.
  • TableRow используется для группировки ячеек и может содержать свойства hover, selected для интерактивного поведения.
  • TableCell имеет атрибут align, который позволяет задавать выравнивание текста: left, center, right, а также свойство component, которое определяет HTML-тег (например, th для заголовка).

Настройка и стилизация

MUI предоставляет несколько способов управления внешним видом таблицы:

  • Стили через проп sx:
<TableCell sx={{ fontWeight: 'bold', color: 'primary.main' }}>
  Заголовок
</TableCell>
  • Использование темы Material UI:
const theme = createTheme({
  components: {
    MuiTableCell: {
      styleOverrides: {
        head: {
          backgroundColor: '#f5f5f5',
          fontSize: '1rem'
        },
        body: {
          fontSize: '0.875rem'
        }
      }
    }
  }
});
  • Hover-эффекты и выделение строк:
<TableRow hover selected={isSelected}>
  <TableCell>Данные</TableCell>
</TableRow>

Оптимизация больших таблиц

Для работы с таблицами, содержащими сотни или тысячи строк, важно учитывать производительность:

  • Использовать virtualization с библиотеками вроде react-virtualized или react-window.
  • Разбивать данные на страницы через TablePagination, который легко интегрируется с компонентом Table.
  • Минимизировать ререндеринг строк, используя React.memo для отдельных компонентов строк или ячеек.

Применение TablePagination

<TablePagination
  rowsPerPageOptions={[5, 10, 25]}
  component="div"
  count={rows.length}
  rowsPerPage={rowsPerPage}
  page={page}
  onPageCha nge={handleChangePage}
  onRowsPerPageCha nge={handleChangeRowsPerPage}
/>

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

  • rowsPerPageOptions определяет доступные варианты числа строк на странице.
  • count указывает общее количество строк.
  • page и rowsPerPage управляют текущей страницей и количеством отображаемых строк.
  • Функции onPageChange и onRowsPerPageChange позволяют управлять состоянием пагинации.

Итоговая структура с пагинацией

Полная базовая структура таблицы с заголовком, телом и пагинацией:

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

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

Оглавление