Как я могу расширить ячейку в MUI-Datatables для отображения дополнительного контента?

Question

Я хочу, чтобы пользователь мог щелкнуть строку в MUI-Datatable, чтобы он мог видеть дополнительный контент. Текущая функция renderExpandableRow имеет правильный стиль, но я не хочу новую строку. Я хочу, чтобы в ячейке первого столбца отображались дополнительные данные. Есть ли способ сделать это?

Примечание: мне также понадобятся кнопки, которые развернут все / свернут все, поэтому мне нужно решение, достаточно гибкое для этого.

Answer 1

Я нашел решение своего вопроса.

Я сделал содержимое первого столбца кнопкой, используя customBodyRender. Столбец с расширяемым содержимым стал вторым столбцом. Этот столбец имеет customBodyRender с компонентом Свернуть. Я храню в состоянии моего компонента все идентификаторы моих объектов данных и независимо от того, расширены они или нет. Когда кнопка нажата, состояние моего компонента обновляется, что, в свою очередь, изменяет, открыт ли компонент Свернуть.

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