В этой статье мы углубимся в различные методы создания разборной таблицы с использованием Material-UI, популярной библиотеки пользовательского интерфейса для React. Свертываемая таблица позволяет пользователям разворачивать и сворачивать строки, обеспечивая более организованный и удобный способ отображения больших объемов данных. Мы рассмотрим различные подходы к реализации этой функции, дополненные примерами кода. Итак, начнём!

Метод 1: компонент «Гармошка»
Один из способов создания свертываемой таблицы — использование компонента «Гармошка», предоставляемого Material-UI. Каждая строка в таблице соответствует панели-гармошке, которая разворачивается или сворачивается при нажатии. Вот пример того, как этого можно добиться:

import React from 'react';
import { Accordion, AccordionSummary, AccordionDetails, Typography } from '@mui/material';
const CollapsibleTable = () => {
  return (
    <div>
      {data.map((item) => (
        <Accordion key={item.id}>
          <AccordionSummary>
            <Typography>{item.title}</Typography>
          </AccordionSummary>
          <AccordionDetails>
            <Typography>{item.description}</Typography>
          </AccordionDetails>
        </Accordion>
      ))}
    </div>
  );
};
export default CollapsibleTable;

Метод 2: свертываемые строки с состоянием
Другой подход предполагает сохранение состояния каждой строки и переключение видимости на основе взаимодействия с пользователем. Вот пример реализации:

import React, { useState } from 'react';
const CollapsibleTable = () => {
  const [expandedRows, setExpandedRows] = useState([]);
  const handleRowClick = (rowId) => {
    const isRowExpanded = expandedRows.includes(rowId);
    if (isRowExpanded) {
      setExpandedRows(expandedRows.filter((id) => id !== rowId));
    } else {
      setExpandedRows([...expandedRows, rowId]);
    }
  };
  return (
    <div>
      {data.map((item) => (
        <div key={item.id}>
          <div onClick={() => handleRowClick(item.id)}>
            <h3>{item.title}</h3>
          </div>
          {expandedRows.includes(item.id) && <p>{item.description}</p>}
        </div>
      ))}
    </div>
  );
};
export default CollapsibleTable;

Метод 3: Свернуть компонент
Material-UI также предоставляет компонент «Свернуть», который можно использовать для достижения свертываемого поведения. Вот пример того, как вы можете его использовать:

import React from 'react';
import { Collapse, List, ListItem, ListItemText } from '@mui/material';
const CollapsibleTable = () => {
  const [expandedRow, setExpandedRow] = React.useState(null);
  const handleRowClick = (rowId) => {
    setExpandedRow(rowId === expandedRow ? null : rowId);
  };
  return (
    <List>
      {data.map((item) => (
        <React.Fragment key={item.id}>
          <ListItem button onClick={() => handleRowClick(item.id)}>
            <ListItemText primary={item.title} />
          </ListItem>
          <Collapse in={expandedRow === item.id} timeout="auto" unmountOnExit>
            <ListItemText primary={item.description} />
          </Collapse>
        </React.Fragment>
      ))}
    </List>
  );
};
export default CollapsibleTable;

В этой статье мы рассмотрели три различных метода создания складной таблицы с помощью Material-UI. Компонент «Гармошка», сохранение состояния каждой строки и использование компонента «Свернуть» — все это возможные варианты в зависимости от ваших конкретных требований. Не стесняйтесь экспериментировать с этими подходами и выбирать тот, который лучше всего соответствует вашим потребностям. Свертываемые таблицы могут значительно улучшить взаимодействие с пользователем при работе с большими наборами данных. Приятного кодирования!